Code for social login

Install GAUTH
===============================================================
npm install --save @types/gapi
npm install --save @types/gapi.auth2

tsconfig.json
================================================================
"types": ["gapi", "gapi.auth2"],



appcomponent.html:
==================================================================
<div class="container mt-5">
  <h2>Google Login</h2>
  <div class="row mt-5">
    <div class="col-md-4 mt-2 m-auto ">
          <button class="login-Btn" #loginRef>
            Login with Google<img class="social-btn-icon" alt="Login with Google" src="https://hrcdn.net/fcore/assets/google-colored-20b8216731.svg">
          </button>
    </div>   
  </div>
 
</div>


.css
====================================================================
.social-btn-icon{
    height: 18px;
    margin-left: 17px;
    margin-bottom: -3px;
}

.login-Btn{
    margin-left: 44%;
    font-size: 15px;
    font-weight: bold;
    background-color: aliceblue;
    border: 2px solid black;
    height: 40px;
}



app.component.ts 
====================================================================
import { ViewChild,ElementRef } from '@angular/core'


@ViewChild('loginRef', {static: true }) loginElement: ElementRef;

 ngOnInit() {
    this.googleInitialize();
  }

  googleInitialize() {
    window['googleSDKLoaded'] = () => {
      window['gapi'].load('auth2', () => {
        this.auth2 = window['gapi'].auth2.init({
          client_id: '631867203803-gfnbuj33563dmuorhmfm6cv2prqasulq.apps.googleusercontent.com',
          cookie_policy: 'single_host_origin',
          scope: 'profile email'
        });
        this.prepareLogin();
      });
    }
    (function(d, s, id){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "https://apis.google.com/js/platform.js?onload=googleSDKLoaded";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'google-jssdk'));
  }

  prepareLogin() {
    this.auth2.attachClickHandler(this.loginElement.nativeElement, {},
      (googleUser) => {
        let profile = googleUser.getBasicProfile();
        console.log('Token || ' + googleUser.getAuthResponse().id_token);
        this.show = true;
        this.Name =  profile.getName();
        console.log('Image URL: ' + profile.getImageUrl());
        console.log('Email: ' + profile.getEmail());
      }, (error) => {
        alert(JSON.stringify(error, undefined, 2));
      });
  }

Comments

  1. please also write a post for instagram integration in angular. Thank You, for your posts

    ReplyDelete
  2. Error:
    Argument of type '{ static: boolean; }' is not assignable to parameter of type '{ read?: any; }'.
    Object literal may only specify known properties, and 'static' does not exist in type '{ read?: any; }'.ts(2345)

    ReplyDelete
  3. Replies
    1. clear your browser cache.

      In Chrome: Settings → Advanced → Clear browsing data → Cached images and files

      Delete
  4. This comment has been removed by the author.

    ReplyDelete
  5. I'm getting this error, 'failed: WebSocket is closed before the connection is established.'

    ReplyDelete

Post a Comment