パスポート - twitchtvのエクスプレスサーバーは、私のangularjsクライアントからのログインを得ることができません

Question

私はここで何か根本的なものを見逃していると確信していますが、私は次に何を試すべきかについて迷っています。 https://github.com/johnkernke/passport-twitchtv/tree/master/examples/login

私は私のブラウザを使用して、私が正常にログインを実行するためにけいれんにリダイレクトhttp://localhost:3000/auth/twitchtvを参照し、ここでのスニペットからだ：

は、私はここで、サンプル・アプリケーションに基づいてパスポート-twitchtvを使用して明示するアプリケーションを構築しています特急コード：

app.get('/auth/twitchtv', 
    passport.authenticate('twitchtv', {scope: [ 'user_read' ]}), 
    function(req, res){ 

    }); 

app.get('/auth/twitchtv/callback', 
    passport.authenticate('twitchtv', { failureRedirect: "/" }), 
    function(req, res) { 
    // Successful authentication, redirect home. 
    //DEBUG 
    console.log('Hit the auth callback'); 
    res.redirect("/"); 
}); 

私の実際の問題は、私はangularjsアプリケーションからのログインを実行しようとしていますということですが、特急サーバーから提供、私はログインがしかし、そうでない許可する押しするボタンを持っています仕事、ここにいくつかのコード：

ログインビュー：

<!-- login.html --> 
    <div class="jumbotron text-center"> 
     <h1>Login</h1> 

     <p>{{ message }}</p> 
    </div> 
    <div class="container-fluid"> 
     <div ng-controller="twitchLoginController" class="row"> 
     <button ng-click="twitchLogin()" class="btn btn-default mybutton" > 
      <img src="images/twitchconnect.png" img-responsive /> 
     </button> 
     </div> 
    </div> 

コントローラコード：

myApp.controller('twitchLoginController', function($scope, $http, $location) { 

     $scope.twitchLogin = function() { 
      console.log("in the login call"); 
      var response = $http.get('/auth/twitchtv'); 
      //$location.url('/auth/twitchtv'); 
      console.log(response); 
      response.success(function(data, status, headers, config) { 
       $scope.message = 'ok'; 
      }); 

      response.error(function(data, status, headers, config) { 
       $scope.message = status; 
      }) 
     } 
    }); 

あなたがここに見ることができるように私は私が行う必要が何を考えているURLにGETをやろうとしているが、いつでもしています私は、ブラウザでのエラーを取得]ボタンをクリックしてください：

XMLHttpRequestがHTTPSをロードすることはできません（削除：//）api.twitch.tv/kraken/oauth2/authorize?response_type=code & redirect_u ... tchtv％2Fcallback & scope = user_read & client_id = ire1vyl32phgrfofwab5uebs3er8htr。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。したがって、Origin 'http（removed：//）localhost：3000'はアクセスが許可されていません。

私のコードからわかるように、$ locationを使って/ auth/twitchにURLを設定しようとしましたが、何も起こらず、エラーもログインもしません。

私のコードが間違っているかどうか、または達成しようとしていることを根本的に誤解しているかどうかはわかりません。少なくとも、私のサーバーコードが動作していることを知っています。私は角の部分に集中しています。

私は私の角度のコードに次のように試してみました：CORSを有効にするには

$httpProvider.defaults.useXDomain = true; 
delete $httpProvider.defaults.headers.common['X-Requested-With']; 

をそれが役立っているようには見えません。

アイデア？

EDITは、私は私のログインビューにこれを追加しました：

<!-- login.html --> 
    <div class="jumbotron text-center"> 
     <h1>Login</h1> 

     <p>{{ message }}</p> 
    </div> 
    <div class="container-fluid"> 
     <div ng-controller="twitchLoginController" class="row"> 
     <button ng-click="twitchLogin()" class="btn btn-default mybutton" > 
      <img src="images/twitchconnect.png" img-responsive /> 
     </button> 

-------><a target="_self" href="/auth/twitchtv">Login</a> 
     </div> 
    </div> 

を私はログインが行われているリンクをクリックしたとき、唯一_selfを有効にして動作します。だから、これは唯一の解決策のように思えますが、これは問題ではありませんが、誰かがこれを働かせることになっていることを誰かが確認できるので、私は何か愚かで悪いことはしません.-

おかげ エイドリアン

Answer 1

短い答え：/auth/twitchtvにクライアントをリダイレクトは適切なソリューションです。あなたは、単に追加して、ボタンでこれを達成することができる必要があります：SPA内に滞在するのに使用されるよう$location.url('/auth/twitchtv');はここで働いていません説明

$scope.twitchLogin = function() { 
    $window.location.href = '/auth/twitchtv'; 
    // inject $window  
} 

this answer通り。 /auth/twitchtvがけいれんするリダイレクト応答で応答し

あなたの特急路線：

元のGETリクエストの問題は以下の通りでした。角度の$httpがこのような応答を受け取ると、応答で提供されたURLへの新しいGET要求が自動的に開始されます（これまでのところ良い状態です）。

Twitchはこのようなリソースにアクセスすることを許可していません.WebブラウザをこのURLにリダイレクトして、XMLHttpRequestの背後で開始しないようにしてください。認証ページ）。

これはCORSがあなたの側からそれを有効にした後でも機能していなかった理由でもあります。これは、この種のアクセスを禁止するものでした。

希望すると便利です。