CODEWITHSUNDEEP
angulargoogle-api
saif
saif

Reputation: 487

How to use google api from different components of angular?

I have used google Sign-In in a project where user can sign in from two different modals. I have successfully implemented the documentation which is available in Google Sign-In for Websites https://developers.google.com/identity/sign-in/web/sign-in. Problem is sign-in is working fine only for one modal which is initialized first. Another one is not working.

Upvotes: 2

Views: 407

Answers (1)

saif
saif

Reputation: 487

Add script in app index.html file

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

App Component 

import {Component} from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <create-account></create-account>
    <signin></signin>`
})
export class AppComponent {
  constructor() {}
}

Create Account Component 

import {Component} from '@angular/core';
@Component({
  selector: 'create-account',
  template: `<h1>{{title}} </h1>
   <google-signin></google-signin>`
})
export class CreateAccountComponent {
  title     = "create account page";
  constructor() {}
}

Sign In Component 

import {Component} from '@angular/core';
@Component({
  selector: 'signin',
  template: `<h1>{{title}} </h1>
   <google-signin></google-signin>`
})
export class SignInComponent {
  title     = "signin page";
  constructor() {}
}

Google Signin Component 

import {Component, ElementRef, AfterViewInit} from '@angular/core';
declare const gapi: any;

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

  private clientId:string = '409167539692-4eqnaq2jd1itl211gsgh3m2k7i02aefa.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() {
    let that = this;
    gapi.load('auth2', function () {
      that.auth2 = gapi.auth2.init({
        client_id: that.clientId,
        cookiepolicy: 'single_host_origin',
        scope: that.scope
      });
      that.attachSignin(that.element.nativeElement.firstChild);
    });
  }
  public attachSignin(element) {
    let that = this;
    this.auth2.attachClickHandler(element, {},
      function (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


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

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

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

View code and test demo on Plunker

Upvotes: 1

Related Questions