Having difficulty transitioning 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 do I update the authentication code and gapi commands in order to integrate with the newer version? Grateful for any assistance in understanding!
index.html snippet:
<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 excerpt:
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 portion:
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 section:
<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>