如何在 Angularjs 中使用 3rd 方登录来处理身份验证

Posted 2023-02-22

【中文标题】如何在 Angularjs 中使用 3rd 方登录来处理身份验证

【英文标题】：How to handle the authentication using 3rd party login in Angularjs

【发布时间】：2016-11-24 08:10:26

【问题描述】：

通过运行下面的代码，弹出验证窗口，用户确认登录。这部分有效。单击授权按钮后，它将重定向到同一窗口中的上一个选项卡（在弹出窗口中而不是在父窗口中）。用户确认授权后如何关闭此弹出窗口，如何从 url 取回授权码？例如在下面的代码中，第一个“console.log(event.url);”没有被执行。

    var redirectUri = "http://localhost:8100/callback";

    var ref = window.open('https://www.example.com/oauth/authorize?client_id=' + clientID + '&redirect_uri=' + redirectUri + '&scope=write&response_type=code&approval_prompt=force', '_blank', 'location=no,clearsessioncache=yes,clearcache=yes');

    ref.addEventListener('loadstart', function (event)  // THIS IS NOT TRIGGERED FOR SOME REASON

        console.log(event.url); 

        if ((event.url).indexOf(redirectUri) === 0) 
            requestToken = (event.url).split("code=")[1];

            $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
            $http(
                    method: "post",
                    url: "https://www.example.com/oauth/token",
                    data: "client_id=" + clientId + "&client_secret=" + clientSecret + "&code=" + requestToken
                )
                .success(function (data) 
                    $scope.data = data;
                    console.log(event.url);

                )
                .error(function (data, status) 
                    deferred.reject("Problem authenticating");
                );
        
    );

以下是应用程序中使用的选项卡。回调后如何返回我的 tab.example？

// setup an abstract state for the tabs directive
    .state('tab', 
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
)

.state('tab.example', 
        url: '/example',
        views: 
            'tab-example': 
                templateUrl: 'templates/tab-example.html',
                controller: 'ExampleAPICtrl'
            
        
    )
    .state('callback', 


    );

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/');

【问题讨论】：

如果 console.log 下面的 http post 被执行，那么它没有被执行是没有意义的。有时日志不会显示在上下文的控制台窗口 b/c 中。但这并不意味着它没有被执行。尝试在 console.log 处设置断点

基本上窗口处理程序不会触发，在该处理程序中没有执行任何操作。我尝试了多个处理程序，没有任何触发/

您的代码似乎缺少很多内容。我很难理解做了什么以及为什么。例如，您为什么要监听loadstart 事件？将从哪里发出？您是否希望您的应用接收从不同窗口发送的事件？

在弹出窗口中，我必须通过其中一个社交网络对应用进行身份验证。一旦从该社交网络检索到身份验证，该应用程序将提供一个身份验证令牌，可用于访问其 API。现在，当它返回该身份验证令牌时，它会在此弹出窗口的 url 中返回它。我遇到的麻烦是，从这个弹出窗口中，我如何将此 url 传回我的 Angularjs 应用程序，这样我就可以使用 url 中的令牌来访问 API。

欢迎任何链接和示例。我确定我不是第一个这样做的人 :-)

【参考方案1】：

您需要一个服务来包装第 3 方 Provider，以便它可以监听事件回调。

我用过的一个很棒的库实现：

mrzmyr Angular-Google-Plus

图书馆方法的核心在于以下代码sn-p：

      NgGooglePlus.prototype.login = function () 
          deferred = $q.defer();
          gapi.auth.authorize(
              client_id: options.clientId,
              scope: options.scopes,
              immediate: false,
              approval_prompt: "force",
              max_auth_age: 0
          , this.handleAuthResult);
          return deferred.promise;
      ;

---

【讨论】：

我没有集成 google plus，我正在查看的是一个 3rd 方应用程序，它可以通过它想要的任何方式进行身份验证（不关心那部分）。

解释太模糊了。它是您自己的 3rd 方应用程序吗？不管是不是你的，都需要更多的解释。实际实现的细节。

老实说，不管是谷歌、FB、Twitter，还是你自己的实现，方法基本都是一样的。您希望将新窗口调用包装在服务中并捕获承诺或回调。并且提供者必须有一个回调或承诺来解决。我不确定你还想要什么。

非常感谢您的建议。如果您对如何克服 302 问题有任何建议，请告诉我。

【参考方案2】：

当您想使用第 3 方登录时，我建议您创建一个登录服务，该服务将通过将良好信息发送到登录系统（其他 API、带有 url 的 Web 应用程序...）来执行登录。 像这样，您的服务可以发出可在您的应用程序中使用的事件以执行更多操作

$scope.$broadcast('loadstart', 
  someProp: 'send parameter to your event in the data object' 
);

$scope.$on('loadstart', function (event, data) 
  //your function the tretment of the reply
);

如果您想继续活动，可以点击此链接：https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

要在您的 tab.example 中返回，您可以尝试 http 请求的 .success 部分中的 $state。该服务允许您选择您想要的状态：

$state.go('tab.example');