각도 2 : Google 인증 로그인 일회 만

Question

Google 인증을 구현하려고 시도했습니다.

localhost : 4200이 처음로드 될 때 문제가되지 않습니다.

Google 로그인 버튼을 사용하여 로그인하기 전에 등록과 로그인 사이를 탐색 할 수 있습니다.

작업 : 나는 Google 로그인 버튼을 클릭하면이 지금은 나를 위해 잘 작동합니다. navbar를 로그인 상태로 변경하는 이벤트를 발생시키고 있습니다. 로그 아웃도 가능합니다. Logout I Again에서 다시 navbar를 등록하려면 이벤트를 발생시키고 로그인으로 리디렉션합니다.

참고 : 먼저 작업하기를 읽으십시오.

로그 아웃 후 : 로그 아웃 후 로그인 화면에 다시 들었습니다. 지금 Google 로그인 버튼을 다시 클릭하면 onsuccess 또는 메소드가 호출되지 않고 이 호출되고 디버깅 및 위조도 실행되지 않습니다. 아무 것도 표시되지 않습니다. GoogleLoginSuccess 메소드가 다시 호출되지 않습니까? 내가 다시 로그인 페이지를 새로 고침 할 때

이제 onGoogleLoginSuccess 메소드가 호출로 집에 페이지로 리디렉션하고 그것은 완벽하게 작동하는 이벤트를 방송. 내가 디버깅 할 수없는 생각하거나 로그 아웃으로

Google 버튼 렌더링 내가 전화 gInit n은 로그인시

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

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