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));
});
}
===============================================================
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));
});
}
please also write a post for instagram integration in angular. Thank You, for your posts
ReplyDeleteSure dude, Thanks for you topic suggestion.
DeleteError:
ReplyDeleteArgument 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)
error: "popup_closed_by_user"
ReplyDeleteclear your browser cache.
DeleteIn Chrome: Settings → Advanced → Clear browsing data → Cached images and files
This comment has been removed by the author.
ReplyDeleteno it's not
Deletethis.auth2 is undefined coming
ReplyDeleteI'm getting this error, 'failed: WebSocket is closed before the connection is established.'
ReplyDeletehey did u find any fix?
Delete