Angular x Social Login - Javascript

简介

Angular x Social Login 是一个用于在 Angular 应用程序中集成第三方社交登录的 Javascript 库。该库支持 Google，Facebook，LinkedIn，GitHub，Microsoft，Instagram，Twitter，Amazon，QQ 和 WeChat 社交登录。

如何使用

1. 安装 angularx-social-login 包：

npm install angularx-social-login --save

2. 导入 SocialLoginModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
import { GoogleLoginProvider, FacebookLoginProvider } from 'angularx-social-login';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    SocialLoginModule
  ],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider('Your-Google-Client-Id')
          },
          {
            id: FacebookLoginProvider.PROVIDER_ID,
            provider: new FacebookLoginProvider('Your-Facebook-App-Id')
          }
        ]
      } as SocialAuthServiceConfig,
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在组件中使用 SocialAuthService：

import { Component } from '@angular/core';
import { SocialAuthService, GoogleLoginProvider } from 'angularx-social-login';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="signInWithGoogle()">Sign in with Google</button>
  `,
})
export class AppComponent {

  constructor(private authService: SocialAuthService) {}

  signInWithGoogle(): void {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID).then(userData => {
      // 用户数据
    });
  }

}

支持的社交登录

• Google
• Facebook
• LinkedIn
• GitHub
• Microsoft
• Instagram
• Twitter
• Amazon
• QQ
• WeChat

参考资料

• Github仓库
• 文档
• NPM包