Angular 2: Google Authentifizierung Anmeldung nur einmal arbeiten

Question

Ich habe versucht, die Google-Authentifizierung zu implementieren.

Thing funktionieren gut für mich, wenn localhost: 4200 lädt zum ersten Mal.

Ich bin in der Lage, zwischen Anmeldung und Anmeldung vor der Anmeldung über Google-Taste zu navigieren.

Arbeits: Jetzt wenn ich die Google-Login-Button klicken funktioniert es für mich in Ordnung. Ich hebe ein Ereignis an, das die Navigationsleiste in den Anmeldestatus ändert. Ich kann mich sogar abmelden. Beim Abmelden habe ich erneut ein Event ausgelöst, um die Navbar zur Registrierung zurück zu ändern, und leitet zur Anmeldung um.

HINWEIS: Lesen Sie zuerst.

funktioniert nicht: Nach Logout bin ich jetzt wieder im Login-Bildschirm. Jetzt wenn ich wieder auf die Google-Login-Taste klicken, die Onsuccess oder Methode ist nicht aufrufen, sogar debugged und tröstete es, nichts zeigt sich. onGoogleLoginSuccess Methode wird nicht erneut aufgerufen?

Wenn ich jetzt wieder die Login-Seite aktualisieren ich Seite nach Hause umgeleitet bin werde als die onGoogleLoginSuccess Methode aufgerufen wird und es ausgestrahlt die Veranstaltung perfekt zu arbeiten.

Google Knopf Rendered gInit Ich rief n die

ngAfterViewInit() { 
    this.gInit(); 
} 

gInit() { 

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

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

ON Anmeldung Erfolg

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

nur Fehler Trace als ich zum Debuggen nicht in der Lage bin oder abmelden in der Konsole, da die Methode nicht aufgerufen wird.

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