Google Oauth Angular Redirect - как получить токен доступа? - PullRequest
Новая
       10

Google Oauth Angular Redirect - как получить токен доступа?

0 голосов
/ 07 мая 2020

Я реализовал Google Oauth в своем приложении angular 8. Из-за блокировки всплывающих окон в мобильном приложении я реализовал Google Oauth для перенаправления, а не с помощью метода всплывающих окон. Я установил ux_mode и параметры соответственно в моей конфигурации (см. Ниже). Приложение правильно перенаправляет на знак Google, и после успешного выполнения оно перенаправляется на следующую страницу: 

http://localhost:8100/login_google

У меня возникла проблема, как получить access_token после его перенаправления на эту страницу? URL-адрес перенаправления указан ниже. Он содержит id_token, но не access_token. Что я делаю не так?

Я потратил на это несколько часов и абсолютно застрял, очень благодарен за помощь.

Перенаправленный URL-адрес, возвращенный после аутентификации 

http://localhost:8100/login_google#scope=email%20profile%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile%20openid&id_token=eyJhbGciOiJSUzI1NiIsImtpZCI6Ijc0YmQ4NmZjNjFlNGM2Y2I0NTAxMjZmZjRlMzhiMDY5YjhmOGYzNWMiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJhY2NvdW50cy5nb29nbGUuY29tIiwiYXpwIjoiNDE5MDk5MDg1ODM2LWJmYzU2N3Y5YWhvbG1hNWE4OHI2N28zMDB2MHJjOTllLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIiwiYXVkIjoiNDE5MDk5MDg1ODM2LWJmYzU2N3Y5YWhvbG1hNWE4OHI2N28zMDB2MHJjOTllLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIiwic3ViIjoiMTAzMDE4NDk5MDYxMjA0MjczNzI2IiwiZW1haWwiOiJrYXJ2YW5qQGdtYWlsLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJpYXQiOjE1ODg4NTE3NTQsImV4cCI6MTU4ODg1NTM1NCwianRpIjoiZTRhZmZiZTg0NTFiN2MyYmVkOWUyY2VmNzRiNTU4ODU5ODNkN2FjYyJ9.mhgV3njdZ7fZZz82A5VejS3wpTBilvyV8qOFw2UgeW5b078gBjaiR6JK5s5XddVkOotFo5j_FQGhPRBQ9PZw3Fvfq-3Q9t-sJ16-KX1lLytw6zknIG-bhxuTO0pkahnzKqFDFd_SOWPUnBQVfmNUjMbCj2sZQUrIlbwqkbdRPONaAo-SSSSSSSS-WcawThnF5R9TrBJzBB4WsnnFr8KgNT_lmsqHJcfz2sMGAroLneg&login_hint=AJDLj6JUa8yxXrhHdWRHIV0S13cA_7lUBwnZ32Nt2sogxv31Hbnch60JUXfk7Na0HWQ2zw7Saliwe_ZZZZZZZZZ&client_id=419099086666-bfc567v9aholma5a88r67o300v0rc99e.apps.googleusercontent.com&prompt=consent

Служба единого входа 

export class AuthSingleSignOnService {
  googleClientId:string = '41909908666-bfc567v9aholma5a88r67o300v0rc99e.apps.googleusercontent.com';

  constructor() { }

  googleAuth: any;

  /*
  ** name: Google SSO Init
  ** desc:  
  */
  public googleSSOInit() {
    let scope: any = [
      'profile',
      'email'
    ].join(' ');

    gapi.load('auth2', () => {
      this.googleAuth = gapi.auth2.init({
        client_id: this.googleClientId,
        cookie_policy: 'none',
        scope: scope,
        ux_mode: 'redirect',
        redirect_uri: 'http://localhost:8100/login_google',
        responstType:null
      });

      this.googleSSOResponse(document.getElementById('googleSSO'));
    });
  }

  /*
  ** name: Google SSO Init
  ** desc: NOTE ONLY IN USE FOR ux_mode:popup
  */
  googleSSOResponse(element) {
    this.googleAuth.attachClickHandler(element, {},
      (googleUser) => {

        let profile = googleUser.getBasicProfile();
        console.log('Token || ' + googleUser.getAuthResponse().id_token);
        console.log('ID: ' + profile.getId());
        console.log('Name: ' + profile.getName());
        console.log('Image URL: ' + profile.getImageUrl());
        console.log('Email: ' + profile.getEmail());
        //YOUR CODE HERE


      }, (error)=> {
        console.log(JSON.stringify(error, undefined, 2));
      });
  }
}

HTML

<button id="googleSSO">Sign in with Google</button>

Component.ts 

ngAfterViewInit() {
    console.log('init google');
    this.authSingleSignOnService.googleSSOInit();
  }
...