使用google登录无法在角度应用中使用

Question

我有Angular应用，必须在其中实现与Google的登录。

我已经尝试实现此解决方案：https://developers.google.com/identity/sign-in/web/sign-in?refresh=1。在这种情况下，我无法剖析数据。

第二种解决方案是编写我自己的js代码，在这种情况下，我像第一种情况一样收到auth2，但未显示登录弹出窗口。

HTML模板

              <div class="g-signin2" data-onsuccess="onSignIn"></div>

              <button class="googleBtn socialBtn" color="accent" mat-stroked-button
                      (click)="service.submitGoogleLogin()">
                    <span class="gLogo"></span>
                    <span>Google</span>
              </button>

。TS文件

export class LoginService implements OnInit {
 private auth2: any = undefined;
 private readonly gapiUrl: string = 'https://apis.google.com/js/platform.js';

dialogRegulation;
fbToken;
loginData;
@Input()
element: ElementRef;

constructor(
private http: HttpClient,
) {
this.initGoogleLogin().subscribe();
}

 initGoogleLogin(): Observable<boolean> {
return new Observable((observer: Observer<boolean>) => {
  const meta = document.createElement('meta');
  meta.name = 'google-signin-client_id';
  meta.content = env.google.clientId;
  document.getElementsByTagName('head')[0].appendChild(meta);
  const node = document.createElement('script');
  node.src = this.gapiUrl;
  node.type = 'text/javascript';
  document.getElementsByTagName('body')[0].appendChild(node);
  node.onload = () => {
    observer.next(true);
    observer.complete();
  };
});
}

submitGoogleLogin() {
gapi.load('auth2', () => {
  gapi.auth2
    .getAuthInstance({
      client_id: env.google.clientId,
      cookiepolicy: 'single_host_origin',
      scope: env.google.scope.join(' '),
    })
    .then((auth: any) => {
      this.auth2 = auth;
    })
    .catch((err: any) => console.log(err));
});
}

onSignIn(googleUser) {
const 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());
}

setGoogleLoginUser() {
console.log('Welcome! Fetching your information.... ');

// Add REST loginGoogle
//this.authService.setIsLoggedInValue();
//this.element.nativeElement.firstChild;

this.auth2.attachClickHandler(
  this.element,
  {},
  googleUser => {
    const 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());
  },
  function(error) {
    console.log(JSON.stringify(error, undefined, 2));
  }
);
}

我的目标是获取我必须发送到后端的ID才能获得令牌。

Answer 1

使用角度登录Google并非易事。如果您不小心会遇到区域问题或时序问题

我使用此版本。

import { Injectable, NgZone } from '@angular/core';
import { BehaviorSubject, Observable, merge, of } from 'rxjs';
import { filter, catchError, switchMap, tap } from 'rxjs/operators';
import { ILoginProvider } from '../entities/ILoginProvider';
import { SocialUser } from '../entities/SocialUser';
import { AuthConfig } from '../config';

export declare let gapi: any;

@Injectable()
export class GoogleLoginProvider implements ILoginProvider {

  constructor(private zone: NgZone) {
    this.loadGoogleScript().then(() => {
      console.log((window as any).Zone.current.name);
      return this.zone.run(() => this.init$.next(true));
    });
  }
  public authenticated: boolean;
  private readonly url = 'https://apis.google.com/js/platform.js';
  private init$ = new BehaviorSubject<boolean>(false);
  private googleAuth: any;

  public acquireToken(): Observable<string> {
    return new Observable((subscriber) => {
      this.init$.pipe(filter((x) => x)).subscribe(() => {
        const isSignedIn = this.googleAuth.isSignedIn.get();
        const token = isSignedIn ? this.googleAuth.currentUser.get().getAuthResponse(true).id_token : null;
        this.authenticated = !(!token);
        subscriber.next(token);
      });
    });
  }

  public signIn(): Observable<SocialUser> {
    const z1$ = this.init$.pipe(
      filter(x => x && !this.googleAuth.isSignedIn.get()),
      switchMap(() => {
        return new Observable(subscriber => {
          this.googleAuth.signIn().then(() => this.zone.run(() => {
            this.authenticated = true;
            subscriber.next();
          }));
        });
      }),
    );
    const z2$ = this.init$.pipe(filter(x => x && this.googleAuth.isSignedIn.get()), tap(_ => this.authenticated = true));
    return merge(z1$, z2$).pipe(catchError(_ => of(null))); // catch error when closing login screen
  }

  public signOut(): Observable<any> {
    return new Observable((subscriber) => {
      this.googleAuth.signOut().then((err: any) => {
        this.authenticated = false;
        subscriber.next(err);
      });
    });
  }

  public getSocialUser(): SocialUser {
    let profile: any;
    let authResponseObj: any;
    profile = this.googleAuth.currentUser.get().getBasicProfile();
    authResponseObj = this.googleAuth.currentUser.get().getAuthResponse(true);
    if (!profile || !authResponseObj) {
      return null;
    }
    const user: SocialUser = {
      id: profile.getId(),
      name: profile.getName(),
      email: profile.getEmail(),
      photoUrl: profile.getImageUrl(),
    } as SocialUser;
    return user;
  }

  private loadGoogleScript() {
    return new Promise((resolve) => {
      this.loadScript(this.url, () => this.googleLoad().then(() => resolve(true)));
    });
  }

  private googleLoad() {
    return new Promise((resolve) => gapi.load('auth2', () => this.googleInit().then(() => resolve(true))));
  }

  private googleInit() {
    const config = AuthConfig.GOOGLE.config;
    return new Promise((resolve) => {
      this.googleAuth = gapi.auth2.init({ client_id: config, scope: 'email' });
      this.googleAuth.then(() => resolve(true));
    });
  }

  private loadScript(url: string, onload: any) {
    const signInJS = document.createElement('script');
    signInJS.async = true;
    signInJS.src = url;
    signInJS.onload = onload;
    document.head.appendChild(signInJS);
  }
}