javascript - Angular 2 : Google authentication sign in work only one time

Question

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

首次加载 localhost:4200 时，一切正常。

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

Working : Now when I click the Google login button it works fine for me. I am raising an event which changes the navbar to login state. I am even able to logout. On Logout I Again raised an event to change the navbar back to register, and redirects to login.

注意:首先阅读“工作”。

Not Working : After Logout I am now again in the Login screen. Now when I click Google Login button again the onsuccess or method is not calling up, even debugged and consoled it, nothing shows up. onGoogleLoginSuccess method is not called again ?

Now When I again refresh the login page I am being redirected to home page as the onGoogleLoginSuccess method is called and it broadcast the event to work perfectly.

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

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

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