far*_*suf 35 typescript google-signin angular
我一直试图在单独的登录组件中以角度2实现Google登录.我无法使用Google https://developers.google.com/identity/sign-in/web/sign-in中提供的文档实施该文档
当我在index.html文件中声明我的脚本标记和google回调函数时,Google登录确实有效.但我需要一个单独的组件才能使用google按钮呈现登录并接收其中的回调以进一步处理为用户收到的访问令牌
Pra*_*ana 64
在您的应用index.html文件中添加此行
<script src="https://apis.google.com/js/platform.js" async defer></script>
declare const gapi: any;
public auth2: any;
public googleInit() {
gapi.load('auth2', () => {
this.auth2 = gapi.auth2.init({
client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
scope: 'profile email'
});
this.attachSignin(document.getElementById('googleBtn'));
});
}
public attachSignin(element) {
this.auth2.attachClickHandler(element, {},
(googleUser) => {
let profile = googleUser.getBasicProfile();
console.log('Token || ' + googleUser.getAuthResponse().id_token);
console.log('ID: ' + profile.getId());
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
//YOUR CODE HERE
}, (error) => {
alert(JSON.stringify(error, undefined, 2));
});
}
ngAfterViewInit(){
this.googleInit();
}
<button id="googleBtn">Google</button>
在Plunker上查看演示
Gat*_*ico 17
在应用的index.html文件中,您需要在以下<head>部分添加:
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
您需要添加GAPI&gapi.auth2到您的分型:
npm install --save @types/gapi.auth2
npm install --save @types/gapi
这是我的组件的文件,在这里你需要使用ngAfterViewInit()使用gapi和获取auth.您可以在此处执行developers.google ... sign-in/web/build-button
例如,这是我的模板:
<div id="my-signin2"></div>
并登录功能:
ngAfterViewInit() {
gapi.signin2.render('my-signin2', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'light',
'onsuccess': param => this.onSignIn(param)
});
}
public onSignIn(googleUser) {
var user : User = new User();
((u, p) => {
u.id = p.getId();
u.name = p.getName();
u.email = p.getEmail();
u.imageUrl = p.getImageUrl();
u.givenName = p.getGivenName();
u.familyName = p.getFamilyName();
})(user, googleUser.getBasicProfile());
((u, r) => {
u.token = r.id_token;
})(user, googleUser.getAuthResponse());
user.save();
this.goHome();
};
更新:一段时间后,并考虑到评论,这个答案需要一个小的更新.
Ste*_*mez 15
带有箭头(=>)函数的词法范围使得使用let that = this;不必要.
Pravesh的一个更简洁的例子,不需要that范围界定,将是:
的index.html
<script src="https://apis.google.com/js/platform.js" async defer></script>
Component.ts
declare const gapi: any;
@Component({
selector: 'google-signin',
template: '<button id="googleBtn">Google Sign-In</button>'
})
export class GoogleSigninComponent implements AfterViewInit {
private clientId:string = 'YOUR_CLIENT_ID.apps.googleusercontent.com';
private scope = [
'profile',
'email',
'https://www.googleapis.com/auth/plus.me',
'https://www.googleapis.com/auth/contacts.readonly',
'https://www.googleapis.com/auth/admin.directory.user.readonly'
].join(' ');
public auth2: any;
public googleInit() {
gapi.load('auth2', () => {
this.auth2 = gapi.auth2.init({
client_id: this.clientId,
cookiepolicy: 'single_host_origin',
scope: this.scope
});
this.attachSignin(this.element.nativeElement.firstChild);
});
}
public attachSignin(element) {
this.auth2.attachClickHandler(element, {},
(googleUser) => {
let profile = googleUser.getBasicProfile();
console.log('Token || ' + googleUser.getAuthResponse().id_token);
console.log('ID: ' + profile.getId());
// ...
}, function (error) {
console.log(JSON.stringify(error, undefined, 2));
});
}
constructor(private element: ElementRef) {
console.log('ElementRef: ', this.element);
}
ngAfterViewInit() {
this.googleInit();
}
}
模板
<div id="googleBtn">Google</div>
截至目前，最新的角度版本出现了，并且大多数情况下我们使用的是角度4/5/6，因此可以考虑提供这种简单的解决方案以通过社交网络登录，因此真正想要它的人
Angular 4/5/6社交登录
在您的AppModule中，导入SocialLoginModule
import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { GoogleLoginProvider, FacebookLoginProvider, LinkedInLoginProvider} from "angularx-social-login";
let config = new AuthServiceConfig([
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider("Google-OAuth-Client-Id")
},
{
id: FacebookLoginProvider.PROVIDER_ID,
provider: new FacebookLoginProvider("Facebook-App-Id")
},
{
id: LinkedInLoginProvider.PROVIDER_ID,
provider: new FacebookLoginProvider("LinkedIn-client-Id", false, 'en_US')
}
]);
export function provideConfig() {
return config;
}
@NgModule({
declarations: [
...
],
imports: [
...
SocialLoginModule
],
providers: [
{
provide: AuthServiceConfig,
useFactory: provideConfig
}
],
bootstrap: [...]
})
export class AppModule { }
并在您的组件中使用
通过导入以下模块
import { AuthService } from "angularx-social-login";
import { SocialUser } from "angularx-social-login";
有关完整参考，请查看其Github
它有非常简单的演示页面
还有另一种与google联系的方式：
将这些行添加到index.html中：
<meta name="google-signin-client_id" content="YOUR-GOOGLE-APP-ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js"></script>
然后是在组件（或服务，如果需要）上编写的示例代码：
import {Component} from "@angular/core";
declare const gapi : any;
@Component({ ... })
export class ComponentClass {
constructor() {
gapi.load('auth2', function () {
gapi.auth2.init()
});
}
googleLogin() {
let googleAuth = gapi.auth2.getAuthInstance();
googleAuth.then(() => {
googleAuth.signIn({scope: 'profile email'}).then(googleUser => {
console.log(googleUser.getBasicProfile());
});
});
}
}
几乎所有这些都不适合我，因为我想要谷歌制作的谷歌按钮。@mathhew eon 的代码有效，但没有使用他们的按钮。
所以我在窗口上扔了谷歌数据成功功能，它运行完美！它还有一个额外的好处，如果用户已经登录，它会自动调用 googleLogin 函数。
html
<div class="g-signin2" data-onsuccess="googleLogin" data-theme="dark"></div>
在你的 index.html 中把它放在头中：
<meta name="google-signin-client_id" content="YOUR-GOOGLE-APP-ID.apps.googleusercontent.com">
<meta name="google-signin-scope" content="profile email AND WHATEVER OTHER SCOPES YOU WANT">
<script src="https://apis.google.com/js/platform.js" async defer></script>
然后在你的 ngOnInit
ngOnInit() {
(window as any).googleLogin = this.googleLogin
}
public googleLogin(userInfo) {
console.log(userInfo)
}
| 归档时间： |
|
| 查看次数： |
40905 次 |
| 最近记录： |