web-dev-qa-db-fra.com

Comment mettre en œuvre la connexion avec Google dans Angular 2 à l'aide de Typescript

J'ai essayé d'implémenter la connexion avec Google dans angular 2 dans un composant de connexion distinct. Je ne parviens pas à l'implémenter avec la documentation disponible dans Google https: // développeurs. google.com/identity/sign-in/web/sign-in

La connexion Google fonctionne lorsque je déclare mes balises de script et ma fonction de rappel Google dans mon fichier index.html. Mais j'ai besoin d'un composant séparé pour pouvoir rendre la connexion avec le bouton Google et recevoir le rappel pour traiter plus avant le jeton d'accès reçu pour un utilisateur.

angulartypescriptgoogle-signin
35
faris yousuf

Ajouter cette ligne dans votre application index.html fichier

INDEX.html

<script src="https://apis.google.com/js/platform.js" async defer></script>

Fichier Component.ts

declare const gapi: any;
  public auth2: any;
  public googleInit() {
    gapi.load('auth2', () => {
      this.auth2 = gapi.auth2.init({
        client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
        cookiepolicy: 'single_Host_Origin',
        scope: 'profile email'
      });
      this.attachSignin(document.getElementById('googleBtn'));
    });
  }
  public attachSignin(element) {
    this.auth2.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) => {
        alert(JSON.stringify(error, undefined, 2));
      });
  }

ngAfterViewInit(){
      this.googleInit();
}

Modèle de fichier html

<button id="googleBtn">Google</button>

Voir la démo sur Plunker

62
Pravesh Khatana

src/index.html

Dans le fichier index.html de votre application, vous devez ajouter ceci dans la section <head>:

<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>

dactylographie/navigateur/ambiante/gapi /

Vous devez ajouter gapi & gapi.auth2 à vos saisies:

npm install --save @types/gapi.auth2
npm install --save @types/gapi

(voir ceci borysn 's question pour comprendre un peu mieux).

src/app/+ login/login.component.ts

Ceci est le fichier de mon composant, ici vous devez utiliser le ngAfterViewInit() pour utiliser le gapi et obtenir l’authentification. Et vous pouvez suivre l'implémentation ici developers.google ... connexion/web/build-button

A titre d'exemple, voici mon modèle:

<div id="my-signin2"></div>

et vous connecter à la fonction:

ngAfterViewInit() {
    gapi.signin2.render('my-signin2', {
        'scope': 'profile email',
        'width': 240,
        'height': 50,
        'longtitle': true,
        'theme': 'light',
        'onsuccess': param => this.onSignIn(param)
    });
}

public onSignIn(googleUser) {
    var user : User = new User();

    ((u, p) => {
        u.id            = p.getId();
        u.name          = p.getName();
        u.email         = p.getEmail();
        u.imageUrl      = p.getImageUrl();
        u.givenName     = p.getGivenName();
        u.familyName    = p.getFamilyName();
    })(user, googleUser.getBasicProfile());

    ((u, r) => {
        u.token         = r.id_token;
    })(user, googleUser.getAuthResponse());

    user.save();
    this.goHome();
};

UPDATE: Après un certain temps et compte tenu des commentaires, cette réponse nécessitait une petite mise à jour.

16
Gatsbimantico

Portée lexicale avec une flèche (=>) permet d’utiliser let that = this; inutile.

Une version plus propre de l'exemple de Pravesh, sans la nécessité de la that solution de contournement, serait:

Index.html 

<script src="https://apis.google.com/js/platform.js" async defer></script>

Component.ts 

declare const gapi: any;

@Component({
  selector: 'google-signin',
  template: '<button id="googleBtn">Google Sign-In</button>'
})
export class GoogleSigninComponent implements AfterViewInit {

  private clientId:string = 'YOUR_CLIENT_ID.apps.googleusercontent.com';

  private scope = [
    'profile',
    'email',
    'https://www.googleapis.com/auth/plus.me',
    'https://www.googleapis.com/auth/contacts.readonly',
    'https://www.googleapis.com/auth/admin.directory.user.readonly'
  ].join(' ');

  public auth2: any;

  public googleInit() {        
    gapi.load('auth2', () => {
      this.auth2 = gapi.auth2.init({
        client_id: this.clientId,
        cookiepolicy: 'single_Host_Origin',
        scope: this.scope
      });
      this.attachSignin(this.element.nativeElement.firstChild);
    });
  }

  public attachSignin(element) {
    this.auth2.attachClickHandler(element, {},
      (googleUser) => {
        let profile = googleUser.getBasicProfile();
        console.log('Token || ' + googleUser.getAuthResponse().id_token);
        console.log('ID: ' + profile.getId());
        // ...
      }, function (error) {
        console.log(JSON.stringify(error, undefined, 2));
      });
  }

  constructor(private element: ElementRef) {
    console.log('ElementRef: ', this.element);
  }

  ngAfterViewInit() {
    this.googleInit();
  }
}

Modèle 

<div id="googleBtn">Google</div>

travail plnkr

15
Steve Gomez

Il existe également un autre moyen de se connecter à Google:

Ajoutez ces lignes dans le index.html:

<meta name="google-signin-client_id" content="YOUR-GOOGLE-APP-ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js"></script>

et puis voici un exemple de code à écrire sur un composant (ou un service si vous le souhaitez):

import {Component} from "@angular/core";
declare const gapi : any;


@Component({ ... })
export class ComponentClass {
   constructor() {
      gapi.load('auth2', function () {
         gapi.auth2.init()
      });
   }

   googleLogin() {
      let googleAuth = gapi.auth2.getAuthInstance();
      googleAuth.then(() => {
         googleAuth.signIn({scope: 'profile email'}).then(googleUser => {
            console.log(googleUser.getBasicProfile());
         });
      });
   }
}
7
Mattew Eon

À partir de maintenant, la angular dernière version est arrivée et nous utilisons principalement angular 4/5/6, alors pensé à donner cette solution simple à la connexion par le social donc quelqu'un qui le veut vraiment

Connexion sociale 4/5/6 angulaire

Dans votre AppModule, importez le SocialLoginModule

import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { GoogleLoginProvider, FacebookLoginProvider, LinkedInLoginProvider} from "angularx-social-login";


let config = new AuthServiceConfig([
  {
    id: GoogleLoginProvider.PROVIDER_ID,
    provider: new GoogleLoginProvider("Google-OAuth-Client-Id")
  },
  {
    id: FacebookLoginProvider.PROVIDER_ID,
    provider: new FacebookLoginProvider("Facebook-App-Id")
  },
  {
    id: LinkedInLoginProvider.PROVIDER_ID,
    provider: new FacebookLoginProvider("LinkedIn-client-Id", false, 'en_US')
  }
]);

export function provideConfig() {
  return config;
}

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    SocialLoginModule
  ],
  providers: [
    {
      provide: AuthServiceConfig,
      useFactory: provideConfig
    }
  ],
  bootstrap: [...]
})
export class AppModule { }

Et utilisez-le dans vos composants

en important des modules ci-dessous

import { AuthService } from "angularx-social-login";
import { SocialUser } from "angularx-social-login";

Pour une référence complète, vous pouvez regarder leur Github

il a vraiment la page simple pour démo

7
abdulbarik

à peu près tout cela n'a pas fonctionné pour moi parce que je veux le bouton Google créé par Google. Le code de @mathhew eon a fonctionné mais cela n'utilise pas leur bouton.

alors j'ai jeté la fonction google data-success sur la fenêtre et cela fonctionne PARFAIT! De plus, si l'utilisateur est déjà connecté, il appelle automatiquement la fonction googleLogin.

html

<div class="g-signin2" data-onsuccess="googleLogin" data-theme="dark"></div>

Dans votre index.html, mettez ceci dans la tête:

<meta name="google-signin-client_id" content="YOUR-GOOGLE-APP-ID.apps.googleusercontent.com">
<meta name="google-signin-scope" content="profile email AND WHATEVER OTHER SCOPES YOU WANT">
<script src="https://apis.google.com/js/platform.js" async defer></script>

puis dans votre ngOnInit

ngOnInit() {
    (window as any).googleLogin = this.googleLogin
}
public googleLogin(userInfo) {
    console.log(userInfo)
}
2
Samuel Thompson

Tout est pareil dans les réponses précédentes sauf que j'ai ajouté

déclarez var gapi: any; sinon, vous obtiendrez l'erreur.

src/index.html

Dans le fichier index.html de votre application, vous devez ajouter ceci dans la section:

<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>

typings/browser/ambient/gapi /

Vous devez ajouter gapi & gapi.auth2 à vos saisies:

npm install --save @types/gapi.auth2
npm install --save @types/gapi

(Voir la question de ce borysn pour comprendre cela un peu mieux).

src/app/+ login/login.component.ts

Ceci est le fichier de mon composant, ici vous devez utiliser ngAfterViewInit () pour utiliser gapi et obtenir l’authentification. Et vous pouvez suivre ici l'implémentation developers.google ... connexion/web/build-button

A titre d'exemple, voici mon modèle:

<div id="my-signin2"></div>

et vous connecter à la fonction:

 declare var gapi: any;

ngAfterViewInit() {
   gapi.signin2.render('my-signin2', {
      'scope': 'profile email',
      'width': 240,
      'height': 50,
      'longtitle': true,
      'theme': 'light',
      'onsuccess': param => this.onSignIn(param)
  });
}

public onSignIn(googleUser) {
   var user : User = new User();

      ((u, p) => {
         u.id            = p.getId();
         u.name          = p.getName();
         u.email         = p.getEmail();
         u.imageUrl      = p.getImageUrl();
         u.givenName     = p.getGivenName();
         u.familyName    = p.getFamilyName();
      })(user, googleUser.getBasicProfile());

      ((u, r) => {
         u.token         = r.id_token;
      })(user, googleUser.getAuthResponse());

      user.save();
      this.goHome();
};
0
ankit gupta