angular2-google-login
Google login with Angular 2
Last updated 3 years ago by rudrakshpathak .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install angular2-google-login 
SYNC missed versions from official npm registry.

Angular 2 Google Login

This is a sample app showing how we can login using Google authentication in Angular2.

You can visit npm for more info on angular2-google-login package

version npm npm PyPI

To use the package in your app

Run npm install angular2-google-login

Import Package

Import this package where you want to use Google authentication service.

import { AuthService, AppGlobals } from 'angular2-google-login';

Providers

Supply the provider.

providers: [AuthService];

Constructor

constructor(private _googleAuth: AuthService){}

Set your Secret Google Client ID

Set your Google client Id. preferably in ngOnInit() interface.

AppGlobals.GOOGLE_CLIENT_ID = 'SECRET_CLIENT_ID';

Using the Google Login service

Use this code snippet to call the Google authentiation service. You can call it in a function triggered by a button click or in your desired event.

this._googleAuth.authenticateUser(()=>{
      //YOUR_CODE_HERE
    });

Using fetched Google account details

In the package, localstorage is used to hold the data -

localStorage.setItem('token', userDetails.getAuthResponse().id_token);
localStorage.setItem('image', profile.getImageUrl());
localStorage.setItem('name', profile.getName());
localStorage.setItem('email', profile.getEmail());

Alternatively, you can tweak the code and create an object that you can return to do post operation after successful login -

result = {
   token: userDetails.getAuthResponse().id_token,
   name: profile.getName(),
   image: profile.getImageUrl(),
   email: profile.getEmail(),
 };
 return result;

Logout user

this._googleAuth.userLogout(()=>{
      //YOUR_CODE_HERE
    });

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/.


Known Issue

You might get error : gapi is not defined It is because the service component may get loaded before gapi is declared. Make sure you handle it when you use the service.

SUGGESTION : Use AfterViewInit interface.

Current Tags

  • 1.0.9                                ...           latest (3 years ago)

9 Versions

  • 1.0.9                                ...           3 years ago
  • 1.0.8                                ...           3 years ago
  • 1.0.7                                ...           3 years ago
  • 1.0.6                                ...           3 years ago
  • 1.0.5                                ...           3 years ago
  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 3
Dependencies (5)
Dev Dependencies (16)
Dependents (1)

Copyright 2014 - 2017 © taobao.org |