Question

我一直在尝试实施Google身份验证。

当localhost：4200第一次加载时，我的工作正常。

我可以通过Google按钮登录之前在注册和登录之间导航。

工作：现在，当我点击Google登录按钮时，它对我来说很好。我正在举起一个将导航栏更改为登录状态的事件。我甚至可以退出。在退出时我再次提出要改变的事件导航栏返回注册，并重定向到登录。

注意：首先阅读工作。

不工作：退出后我现在再次进入登录屏幕。现在   当我再次单击Google登录按钮时，onsuccess或方法不会   调用，甚至调试和安慰它，没有任何显示。 onGoogleLoginSuccess 方法不会再次调用？

现在当我再次刷新登录页面时，我被重定向到家   页面调用 onGoogleLoginSuccess 方法并广播   活动完美无缺。

Google按钮呈现 gInit我调用了

ngAfterViewInit() {
   this.gInit();
}

gInit() {

  var loginProxy = $.proxy(this.onGoogleLoginSuccess, this);

  gapi.signin2.render(
    this.googleLoginButtonId,
    {
     "onSuccess": this.onGoogleLoginSuccess,
     "scope": "profile",
     "theme": "dark"
  });
}

登录成功

onGoogleLoginSuccess = (loggedInUser) => {
    this._zone.run(() => {
      console.log(this);
      this.brodcastSignIn();
    });    
 }

ONLY ERROR 跟踪，因为我无法在控制台中调试或注销，因为未调用该方法。

I receive an error when logout redirects me to the login page.

cb=gapi.loaded_0:266 Uncaught TypeError: Cannot read property 'style' of null(…) 
G_ @ cb=gapi.loaded_0:266 
(anonymous function) @ cb=gapi.loaded_0:269 
(anonymous function) @ cb=gapi.loaded_0:149 
c.port1.onmessage @ cb=gapi.loaded_0:70**

Answer 1

    Service level code 

     authenticateGoogle() {
            var authProviderUrl = 'https://accounts.google.com/o/oauth2/v2/auth';
            var authParameters = {
                response_type: 'token',
                client_id: this.configProvider.config.google.clientId,
                redirect_uri: this.configProvider.config.google.redirectURI,
                scope: [ 'https://www.googleapis.com/auth/userinfo.email'].join(' ')
            };
            var params = [];
            for (var k in authParameters) {
                params.push(k + '=' + authParameters[k]);
            }
            var authOpenURI = authProviderUrl + '?' + params.join('&');
            window.open(authOpenURI, '_self');
        }

    getUserGoogleProfile(accessToken:string):Observable<any>{
            return this.http.get('https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token='+ accessToken +'')
                       .map(res => res.json())
                       .catch(err => Observable.throw(err));
        }

    Caller Code:

//Google authentication check.
    if(window.location.hash.match(/^#access_token/)){
      var accessToken = window.location.hash.substring(1).split('&')[0].split('=')[1];
      this.getUserGoogleProfile(accessToken);
    }


    //Get user profile from google with access code.
      getUserGoogleProfile(accessToken:string) {
            this.authService.getUserGoogleProfile(accessToken).subscribe(profile => { 
              this.userProfile = new UserProfile(profile.name,profile.email,profile.picture,"google",profile.id); },
              err => {console.log(err);});

          //Authentication call will go from here to  swagger api and if that is successful,set isAuthenticated =true
          this.userService.isAuthenticated =true;
          this.router.navigate(['/dashboard']);
        }

Angular 2：Google身份验证登录只能工作一次

1 个答案: