如何在Angularjs中使用第三方登录进行身份验证

Question

通过运行下面的代码，弹出身份验证窗口，用户确认登录。这部分有效。单击授权按钮后，会重定向到同一窗口中的上一个选项卡（在弹出窗口中，而不是在父窗口中）。在用户确认授权后，我如何关闭这个弹出窗口，如何从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");
                });
        }
    });

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

// 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('/');

Answer 1

您需要一个服务来包装第三方提供者，以便它可以侦听事件回调。

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

mrzmir Angular Google Plus

图书馆方法的核心是以下代码片段：

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

---

Answer 2

当您想使用第三方进行登录时，我建议您创建一个登录服务，该服务将通过将好的信息发送到登录系统（其他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/

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

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