快速服务器与护照twitchtv可以'我的angularjs客户端无法登录工作

Express server with passport-twitchtv can't get the login to work from my angularjs client

本文关键字：angularjs 我的 客户端 工作 登录 服务器 可以 twitchtv      更新时间：2023-09-26

我确信我在这里错过了一些基本的东西，但我不知道下一步该做什么。

我使用passport-titchtv基于这里的示例应用程序构建了一个快速应用程序：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;
            })
        }
    });

正如你在这里看到的，我正在尝试获取url，这是我认为我需要做的，但每当我点击按钮时，我都会在浏览器中得到一个错误：

XMLHttpRequest无法加载https（已删除：//）api.twitch.tv/kraken/oauth2/authorize？response_type=代码&重定向（u）…tchtv%2Fcallback&scope=user_read&client_id=ire1vyl32phgrfofwab5uebs3er8htr。请求的资源上不存在"Access Control Allow Origin"标头。因此，不允许访问源"http（removed://）localhost:3000"。

正如你从我的代码中看到的，我只是尝试使用$location将url设置为/auth/titch，但当我这样做时，什么都没有发生，没有错误，也没有登录。

所以我被卡住了，我不知道是因为我的代码错了，还是我对我想要实现的目标有根本的误解，我至少知道我的服务器代码在工作，所以我一直专注于有角度的部分。

我在我的角度代码中尝试了以下操作：

$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的情况下工作。所以这似乎是唯一的解决方案，从我的角度来看，这是可以的，但有人能确认这就是你应该如何让它发挥作用吗？这样我就知道我没有做愚蠢或更不安全的事情：-）

谢谢Adrian

简短回答：将客户端重定向到/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是禁止这种访问的。

希望这能有所帮助！

相关文章：