angular-google-signin

angular-google-signin

Google Sign-In component for Angular written in TypeScript.

Usage

Add this script tag below in the head tag of index.html:

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

Import and add GoogleSignInComponent from this package to your Angular module:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';
import {GoogleSignInComponent} from 'angular-google-signin';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent,
    GoogleSignInComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Example of a component that is using this package:

import {Component} from '@angular/core';
import {GoogleSignInSuccess} from 'angular-google-signin';

@Component({
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor() {
  }

  private myClientId: string = 'your-client-id-here.apps.googleusercontent.com';

  onGoogleSignInSuccess(event: GoogleSignInSuccess) {
    let googleUser: gapi.auth2.GoogleUser = event.googleUser;
    let id: string = googleUser.getId();
    let profile: gapi.auth2.BasicProfile = googleUser.getBasicProfile();
    console.log('ID: ' +
      profile
        .getId()); // Do not send to your backend! Use an ID token instead.
    console.log('Name: ' + profile.getName());
  }
}

In a component template, put <google-signin> with attributes of render options and init params. clientId attribute is required. You don't need to write google-signin-client_id meta tag.

<google-signin
  [clientId]="myClientId"
  [width]="myWidth"
  [theme]="myTheme"
  [scope]="myScope"
  [longTitle]="myLongTitle"
  (googleSignInSuccess)="onGoogleSignInSuccess($event)">
</google-signin>

For more information about Google Sign-In JavaScript client, See https://developers.google.com/identity/sign-in/web/sign-in

Features and bugs

Please file feature requests and bugs at the issue tracker.

Notes

This package is a modification and rewriting of original work by @ntaoo https://github.com/ntaoo/ng2_g_signin/.

Thanks @ntaoo for an idea and a component design 👍