帶有passport-twitchtv的Express服務器無法從我的angularjs客戶端登錄工作

Question

我絕對肯定我在這里缺少一些基本的東西，但我很遺憾下一步該嘗試什么。

我根據示例應用程序使用passport-twitchtv構建了一個快速應用程序： https ： //github.com/johnkernke/passport-twitchtv/tree/master/examples/login

當我使用瀏覽器並瀏覽到http：// localhost：3000 / auth / twitchtv時，我成功地重定向到Twitch以執行登錄，這是快遞代碼的片段：

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;
            })
        }
    });

正如你在這里看到的那樣，我正在嘗試對網址進行GET，這是我認為我需要做的，但每當我點擊按鈕時，我在瀏覽器中出現錯誤：

XMLHttpRequest無法加載https（removed：//）api.twitch.tv/kraken/oauth2/authorize?response_type=code&redirect_u...tchtv%2Fcallback&scope=user_read&client_id=ire1vyl32phgrfofwab5uebs3er8htr。 請求的資源上不存在“Access-Control-Allow-Origin”標頭。 因此，不允許來自'http（removed：//）localhost：3000'的來源。

正如你從我的代碼中看到的那樣，我只是嘗試使用$ location將url設置為/ auth / twitch但是當我這樣做時根本沒有任何事情發生，沒有錯誤，也沒有登錄。

所以我被卡住了，我不知道是不是因為我的代碼錯了，或者我是否對我想要實現的內容有一個基本的誤解，我至少知道我的服務器代碼是有效的，所以我一直在集中注意力在角件上。

我在我的角度代碼中嘗試了以下內容：

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

啟用CORS但似乎沒有幫助。

有任何想法嗎？

編輯

我將其添加到我的登錄視圖中：

<!-- 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是正確的解決方案。 只需添加以下內容，您就可以通過按鈕實現此目的：

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

這個答案描述了$location.url('/auth/twitchtv'); 在這里不起作用，因為它用於留在SPA內。

原始GET請求的問題如下：

您的快速路線/auth/twitchtv響應了對Twitch的重定向響應。 當angular的$http收到這樣的響應時，它會自動啟動對響應中提供的url的新GET請求（到目前為止一直很好）。

但是，Twitch不允許像這樣訪問此資源，它希望您將Web瀏覽器重定向到此URL，而不是在幕后啟動XMLHttpRequest （如果您記住Twitch必須使用其身份驗證頁面進行響應，這是有意義的）。

這也是為什么CORS即使從你身邊啟用它也無法工作的原因--Twitch是禁止這種訪問的那個。

希望這可以幫助！