0

вообщем есть такое пособие. https://developers.google.com/identity/protocols/O... По мимо него я еще очень много других нашел, но у меня в корне не получается после обратного редиректа(когда я попадаю на свой домен обратно после успешной логинки на странице гугла) получить данные чтоб дальше отправить по своему api accessToken. Различные модули не предлагать. Я через них уже делал, и через firebase тоже. firebase слишком долго грузится, а другие модули работают через модалку, а мне нужно только через редирект. Всегда либо приходит false, либо вообще ничего не приходит, может я что то не так делаю?

//head
  <script src="https://apis.google.com/js/api.js"></script>

//myComponent
BtnClick(){
    window.location.href = 'https://accounts.google.com/o/oauth2/v2/auth?client_id=*******&response_type=code&scope=openid%20email&redirect_uri=https://dm.devmarine.pp.ua&state=*****';

}

onInit(){
      gapi.load('client', () => {
      console.log('loaded');
      gapi.client.init({
        apiKey: ********,
        clientId: ********,
        scope: 'profile'
      });

      console.log(gapi.auth2.getAuthInstance());
      console.log(gapi.auth2.getAuthInstance().isSignedIn.get());
    });
}
11
  • тебе не нужно вручную прописывать URL, при инциализации клиента можно указать ux_mode: 'redirect', тем самым при вызове signIn() гугл сам тебя будет редиректить на нужный урл 13 авг 2019 в 11:48
  • и также указываешь redirect_uri: location.origin, тем самым гугл тебя вернет обратно после успешной авторизации 13 авг 2019 в 11:49
  • после успешной авторизации гугл нужную ему информацию сохранит в куках и при повторном посещении страницы нужно вызывать getAuthInstance().currentUser.isSignedIn().get() 13 авг 2019 в 11:51
  • и аксес токен тебе тоже не нужен, вся информация о пользователе уже есть в свойстве currentUser.get().getBasicProfile() 13 авг 2019 в 11:53
  • а все остальное я правильно делаю? инициализация приложения gapi.load => init??? После init then нужен или можно без него? 13 авг 2019 в 11:57

1 ответ 1

0

Смотри, в данном контексте все очень сильно зависит от поставленной задачи. Например, у нас есть внутренние системы, которые привязаны к Google аккаунту и пользователь в принципе не может увидеть приложение пока не авторизуется.

Я тебе покажу, как это реализовано у меня, ты можешь просто взять код и переделать его под свои нужды, ибо здесь нет никаких лучших практик, только trade-off'ы.

Во-первых нам нужны определения типов для удобной работы с Google библиотеками:

yarn add -D @types/{gapi,gapi.auth2,gapi.plus}

К сожалению компилятор видит это просто как глобальный тип, но не как свойство window, для этого создаем файл typings.d.ts в папке src наравне с main.ts:

declare interface Window {
  gapi: typeof gapi;
}

Все, gapi нам доступно в свойстве window.

У меня есть GapiService который занимается инициализацией Google объектов:

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs';
import { mergeMapTo, shareReplay, mergeMap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class GapiService {
  private config: gapi.auth2.ClientConfig = {
    scope: 'profile',
    ux_mode: 'redirect',
    redirect_uri: location.origin
  };

  private googleAuthObject$ = this.loadGapiAuth2Library().pipe(
    mergeMapTo(this.initializeAuth2()),
    mergeMapTo(this.loadGapiPlusLibrary()),
    mergeMapTo(this.waitForTheGoogleAuthObjectInitializationComplete()),
    shareReplay(1)
  );

  public getGoogleAuthObject(): Observable<gapi.auth2.GoogleAuth> {
    return this.googleAuthObject$;
  }

  public signIn(): Observable<unknown> {
    return this.googleAuthObject$.pipe(mergeMap(googleAuth => googleAuth.signIn()));
  }

  private loadGapiAuth2Library() {
    return new Observable<void>(observer => {
      window.gapi.load('auth2', () => {
        observer.next();
        observer.complete();
      });
    });
  }

  private loadGapiPlusLibrary() {
    return new Observable<void>(observer => {
      window.gapi.client
        .load('plus', 'v1')
        .then(() => {
          observer.next();
          observer.complete();
        })
        .catch(error => {
          observer.error(error);
        });
    });
  }

  private initializeAuth2() {
    return new Observable<void>(observer => {
      window.gapi.auth2.init(this.config).then(
        () => {
          observer.next();
          observer.complete();
        },
        error => {
          observer.error(error);
        }
      );
    });
  }

  private waitForTheGoogleAuthObjectInitializationComplete() {
    return new Observable<gapi.auth2.GoogleAuth>(observer => {
      window.gapi.auth2.getAuthInstance().then(
        googleAuth => {
          observer.next(googleAuth);
          observer.complete();
        },
        error => {
          observer.error(error);
        }
      );
    });
  }
}

И так, давай поэтапно пройдемся по коду:

  • loadGapiAuth2Library - загружаем auth2 библиотеку
  • initializeAuth2 - инициализируем библиотеку с нашей конфигурацией, инициализация асинхронная
  • loadGapiPlusLibrary - загружаем библиотеку для работы с Google Plus
  • waitForTheGoogleAuthObjectInitializationComplete - ждем инициализации объекта GoogleAuth, это тоже асинхронно

В некоторых местах используется then/catch, но это псевдо-промис (не инстанс Promise), с async/await работать не будет.

shareReplay(1) кеширует результат выполнения операторов, то есть если 10 раз подписаться на googleAuthObject$, то 10 раз либы грузиться не будут.

Также у меня есть GapiVerifierService, который перед инициализацией приложения проверяет авторизован ли пользователь:

import { Injectable } from '@angular/core';

import { Observable, EMPTY } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

import { GapiService } from './gapi.service';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class GapiVerifierService {
  constructor(private gapiService: GapiService, private authService: AuthService) {}

  public verify(): Observable<unknown> {
    return this.gapiService.getGoogleAuthObject().pipe(
      mergeMap(googleAuth => {
        const isSignedIn = googleAuth.currentUser.get().isSignedIn();

        if (isSignedIn) {
          this.authService.setUser(googleAuth);
          return EMPTY;
        }

        return this.gapiService.signIn();
      })
    );
  }
}

Что внутри AuthService:

import { Injectable } from '@angular/core';

import { Observable, BehaviorSubject } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

import { User } from '~app/shared/types';

import { GapiService } from './gapi.service';

@Injectable({ providedIn: 'root' })
export class AuthService {
  public user$ = new BehaviorSubject<User | null>(null);

  constructor(private gapiService: GapiService) {}

  public signOut(): void {
    this.gapiService
      .getGoogleAuthObject()
      .pipe(mergeMap(googleAuth => this.signOutFromAllAccounts(googleAuth)))
      .subscribe(() => {
        window.location.href = window.config.landingAppHost;
      });
  }

  public setUser(googleAuth: gapi.auth2.GoogleAuth): void {
    this.user$.next(new User(googleAuth));
  }

  private signOutFromAllAccounts(googleAuth: gapi.auth2.GoogleAuth) {
    return new Observable<void>(observer => {
      googleAuth
        .signOut()
        .then(() => {
          observer.next();
          observer.complete();
        })
        .catch(error => {
          observer.error(error);
        });
    });
  }
}

У меня после выхода из системы пользователя редиректит на лендинг страницу, можешь пропустить это. Что в классе User?

export class User {
  public readonly id: string;
  public readonly name: string;
  public readonly email: string;
  public readonly imageUrl: string;
  public readonly givenName: string;
  public readonly familyName: string;

  private readonly profile: gapi.auth2.BasicProfile;

  constructor(googleAuth: gapi.auth2.GoogleAuth) {
    this.profile = googleAuth.currentUser.get().getBasicProfile();

    this.id = this.profile.getId();
    this.name = this.profile.getName();
    this.email = this.profile.getEmail();
    this.imageUrl = this.profile.getImageUrl();
    this.givenName = this.profile.getGivenName();
    this.familyName = this.profile.getFamilyName();
  }
}

Как я это использую при инициализации приложения? Очень просто, провайжу APP_INITIALIZER:

export function appInitializerFactory(
  gapiVerifierService: GapiVerifierService
): () => Promise<unknown> {
  return () => gapiVerifierService.verify().toPromise();
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      multi: true,
      deps: [GapiVerifierService]
    }
  ]
})
export class AppModule {}

Если у тебя в приложении авторизация только по клику на кнопку или еще какой-то другой кейс, то тебе нужно проделать почти все то же самое, только в отместку еще создать какой-то страж AuthGuard на определенные URL'ы, который будет проверять авторизован ли пользователь или нет.

3
  • спасибо на подробный ответ. отмечу решением. Вообщем задача заключалась - просто получить ассess token от гугла, а дальше я отправляю на свой бекенд и с ним работает бекенд. там по сути нужно было просто урл прописать и все, а в редиректе я в урле получаю нужный токен после логинки. Просто я его не видел потому что у меня редирект юри был domain.com/ а в роутинге было прописано с корня перенаправлять на /main-page . то есть я его просто напросто затирал. Но все равно спасибо, буду знать как пользоваться апи чтоб получать полные данные непосредственно от гугла 14 авг 2019 в 11:56
  • аксес токен ты можешь получить после редиректа от гугла но только через URLSearchParams, ибо он таким образом захардкожен 14 авг 2019 в 12:21
  • Я уже понял и сделал :) Но все же спасибо :) я походу изначально не в те дебри пошел 14 авг 2019 в 13:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.