'Trouble Migrating from Google Sign-In

I have trouble Migrating from Google Sign-In.

"{error: 'idpiframe_initialization_failed', details: 'You have created a new client application that use…i/web/guides/gis-migration) for more information.'}"

How can I use the newer one and replace the auth2 code and gapi commands to make it integrated with the new one? Very thankful for help to understand!

index.html code:

<head>
  <meta name = "google-signin-client-id" content ="XXXX.googleusercontent.com
  ">
  <script src="https://apis.google.com/js/api.js"></script>


</head>
<body>
  <div class="g-signin2" data-onsuccess ="onSignIn" data-longtitle="true"></div>

  <app-root></app-root>
</body>

google-signin.service.ts:

import { Injectable } from '@angular/core';
import {Observable, ReplaySubject} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class GoogleSigninService {

  private auth2: gapi.auth2.GoogleAuth
  private subject = new ReplaySubject<gapi.auth2.GoogleUser> (1)

  constructor() { 
    gapi.load('auth2', () => {
member (the above private auth2)
      this.auth2 = gapi.auth2.init({
        client_id: 'XXXXXX....apps.googleusercontent.com'
      })
    })
  }
  public signIn(){
    this.auth2.signIn({
      scope: 'https://www.googleapis.com/auth/gmail.readonly'
    }).then (user => {
      this.subject.next(user)
    }).catch( () => {
      this.subject.next(null)
    }) 
  }
  public signOut(){
    this.auth2.signOut()
      .then( () => {
        this.subject.next(null)
      })
  }
  public observable(): Observable <gapi.auth2.GoogleUser>{
    return this.subject.asObservable()
  }
}

app.component.ts:

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import {Router, NavigationEnd} from '@angular/router';
import { GoogleSigninService } from './google-signin.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'google-signin';
  user: gapi.auth2.GoogleUser;

  constructor(private signInService: GoogleSigninService, private ref: ChangeDetectorRef , private dialog: MatDialog, private router: Router) {}
  companySwipe(): void {
    this.router.navigateByUrl('/companyswipe');
  }

  ngOnInit(): void {
    this.signInService.observable().subscribe(user => {
      this.user = user
      this.ref.detectChanges()
    })
  }

  signIn (){
    this.signInService.signIn()
  }

  signOut(){
    this.signInService.signOut()
  }
}

tsconfig.app.json:

  "compilerOptions": {
    "types": ["jest", "gapi", "gapi.auth2"]
  },

app.component.html

<button (click) ="signIn()" *ngIf = "user == null"> GOOGLE SIGNIN</button>
<button (click) = "signOut()" *ngIf = "user  != null" > GOOGLE SIGNOUT</button>
<div *ngIf ="user != null">
  <div> You are signed in with Google! {{user.getBasicProfile().getName()}} </div>
</div>

Solution 1:^[1]

Include the Google Idendity Service library in your head tag:

<script src="https://accounts.google.com/gsi/client"></script>

install the types:

npm install --save-dev @types/google.accounts

In your service initialize the client

this.tokenClient = google.accounts.oauth2.initTokenClient({
  client_id: "YOUR_GOOGLE_CLIENT_ID",
  scope: "THE_REQUESTED_SCOPES",
  prompt: "SELECT_A_PROMPT_OPTION", // '' | 'none' | 'consent' | 'select_account'
  callback: this.handleCredentialResponse // your function to handle the response after login. 'access_token' will be returned as property on the response
});

After signin, your get a response with an 'access_token' property. Store it in localstorage.

to signin call requestAccessToken on the tokenClient:

this.tokenClient.requestAccessToken(overrideConfig) // open the prompt,

overrideConfig is optional, options can be found in the types declaration file

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	W.S.

'Trouble Migrating from Google Sign-In

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]