角社会登录

使用 讨论情况 问讯.

Angular 21 的社会登录和认证模块. 支持认证 谷歌, (中文(简体) ), 脸书, (中文(简体) ), 亚马逊, (中文(简体) ), 微软,以及 VK 数字 从盒子里出来。 可扩展至其他 也提供商.

看看这个 演示。 。 。 .

兼容性矩阵

开始

通过 npm 安装

npm i @abacritt/angularx-social-login

导入模块

在你身边 AppModule,导入 SocialLoginModule

import { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';
import {
  GoogleLoginProvider,
  FacebookLoginProvider
} from '@abacritt/angularx-social-login';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    SocialLoginModule
  ],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        lang: 'en',
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              'clientId'
            )
          },
          {
            id: FacebookLoginProvider.PROVIDER_ID,
            provider: new FacebookLoginProvider('clientId')
          }
        ],
        onError: (err) => {
          console.error(err);
        }
      } as SocialAuthServiceConfig,
    }
  ],
  bootstrap: [...]
})
export class AppModule { }

与 Facebook 签约

import { SocialAuthService } from "@abacritt/angularx-social-login";
import { FacebookLoginProvider } from "@abacritt/angularx-social-login";

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent {

  constructor(private authService: SocialAuthService) { }

  signInWithFB(): void {
    this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
  }

  signOut(): void {
    this.authService.signOut();
  }

}

用 VK 签名

import { SocialAuthService } from "@abacritt/angularx-social-login";
import { VKLoginProvider } from "@abacritt/angularx-social-login";

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent {

  constructor(private authService: SocialAuthService) { }

  signInWithVK(): void {
    // default usage without defining access level
    this.authService.signIn(VKLoginProvider.PROVIDER_ID);

    // define access level
    // https://dev.vk.com/reference/access-rights
    this.authService.signIn(VKLoginProvider.PROVIDER_ID, ['offline', 'email']);
  }

  signOut(): void {
    this.authService.signOut();
  }

}

与 Google 签名

GoogleLoginProvider 没有 signIn() 作为其他提供者,登录流程由下列按钮触发: gis 客户端 正在生成. 通话 SocialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID) 没有效果.

相反,确保你 订阅认证状态 并添加以下内容: GoogleSigninButtonDirective 切入到您的组件模板, 将“ 与 Google 一起签名” 按钮 :

还有

看看这个 谷歌按钮生成器。 。 。 . 链接到按钮属性

<asl-google-signin-button type='icon' size='medium'></asl-google-signin-button>

选项 :

这只有在 GoogleLoginProvider 注册于 社会服务。 。 。 .

刷新google Auth 托肯语

一旦用户登录在手动刷新令牌方法中,即可被触发

import { SocialAuthService } from "@abacritt/angularx-social-login";
import { GoogleLoginProvider } from "@abacritt/angularx-social-login";

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {

  constructor(private authService: SocialAuthService) { }

  refreshToken(): void {
    this.authService.refreshAuthToken(GoogleLoginProvider.PROVIDER_ID);
  }

}

请求google 访问托肯

一旦一个用户登录在访问令牌上,就可以要求我们指定的范围 GoogleInitOptions.scopes,然后可以重新使用此访问符,以拨打 google apis

import { HttpClient } from '@angular/common/http';
import { SocialAuthService } from "@abacritt/angularx-social-login";
import { GoogleLoginProvider } from "@abacritt/angularx-social-login";

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {

  private accessToken = '';

  constructor(private authService: SocialAuthService, private httpClient: HttpClient) { }

  getAccessToken(): void {
    this.authService.getAccessToken(GoogleLoginProvider.PROVIDER_ID).then(accessToken => this.accessToken = accessToken);
  }

  getGoogleCalendarData(): void {
    if (!this.accessToken) return;

    this.httpClient
      .get('https://www.googleapis.com/calendar/v3/calendars/primary/events', {
        headers: { Authorization: `Bearer ${this.accessToken}` },
      })
      .subscribe((events) => {
        alert('Look at your console');
        console.log('events', events);
      });
  }
}

刷新 google 访问托肯

一旦用户登录并获得访问令牌,访问令牌即可被刷新(已撤销)

import { SocialAuthService } from "@abacritt/angularx-social-login";
import { GoogleLoginProvider } from "@abacritt/angularx-social-login";

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {

  constructor(private authService: SocialAuthService) { }

  refreshToken(): void {
    this.authService.refreshAccessToken(GoogleLoginProvider.PROVIDER_ID);
  }

}

订阅认证状态

用户登录或注销时,会通知您。 你得到一个 SocialUser 对象在用户登录时 null 用户登录时. SocialUser 对象包含基本用户信息,如名称、电子邮件、相片 URL 等 auth_token。您可以联系 auth_token 到您的服务器,以认证服务器中的用户,并从服务器中调用 API .

import { SocialAuthService } from "@abacritt/angularx-social-login";
import { SocialUser } from "@abacritt/angularx-social-login";

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {

  user: SocialUser;
  loggedIn: boolean;

  constructor(private authService: SocialAuthService) { }

  ngOnInit() {
    this.authService.authState.subscribe((user) => {
      this.user = user;
      this.loggedIn = (user != null);
    });
  }

}

显示用户信息

<img src="{{ user.photoUrl }}" referrerpolicy="no-referrer">
<div>
  <h4>{{ user.name }}</h4>
  <p>{{ user.email }}</p>
</div>

自定义提供者

我们可以使用自定义提供者,执行我们自己的逻辑和需要,例如:

@Injectable({ providedIn: 'root' })
export class MyCustomLoginProvider extends BaseLoginProvider {
  public static readonly PROVIDER_ID = 'CUSTOM' as const;

  constructor(/* infinite list of dependencies*/) {}
}

@NgModule({
  declarations: [AppComponent, NavbarComponent, DemoComponent],
  imports: [BrowserModule, FormsModule, SocialLoginModule],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: true,
        lang: 'en',
        providers: [
          {
            id: MyCustomLoginProvider.PROVIDER_ID,
            provider: MyCustomLoginProvider,
          },
        ],
      } as SocialAuthServiceConfig,
    },
  ],

指定初始化时的自定义范围、字段等

const fbLoginOptions = {
  scope: 'pages_messaging,pages_messaging_subscriptions,email,pages_show_list,manage_pages',
  return_scopes: true,
  enable_profile_selector: true
}; // https://developers.facebook.com/docs/reference/javascript/FB.login/v2.11

const googleLoginOptions: GoogleInitOptions = {
  oneTapEnabled: false, // default is true
  scopes: 'https://www.googleapis.com/auth/calendar.readonly'
}; // https://developers.google.com/identity/oauth2/web/guides/use-token-model#initialize_a_token_client

const vkLoginOptions = {
  fields: 'photo_max,contacts', // Profile fields to return, see: https://vk.com/dev/objects/user
  version: '5.131', // https://vk.com/dev/versions
}; // https://vk.com/dev/users.get

let config = [
  {
    id: GoogleLoginProvider.PROVIDER_ID,
    provider: new GoogleLoginProvider("Google-OAuth-Client-Id", googleLoginOptions)
  },
  {
    id: FacebookLoginProvider.PROVIDER_ID,
    provider: new FacebookLoginProvider("Facebook-App-Id", fbLoginOptions)
  },
  {
    id: VKLoginProvider.PROVIDER_ID,
    provider: new VKLoginProvider("VK-App-Id", vkLoginOptions)
  },
];

指定登录时的自定义范围、字段等

const fbLoginOptions = {
  scope: 'pages_messaging,pages_messaging_subscriptions,email,pages_show_list,manage_pages'
}; // https://developers.facebook.com/docs/reference/javascript/FB.login/v2.11

this.authService.signIn(FacebookLoginProvider.PROVIDER_ID, fbLoginOptions);

供应商

运行演示应用程序

ng build angularx-social-login
ng serve

装入处理出错( L)

要处理错误和加载的事件, 您可以使用 BaseLoginProvider 从您的对象 SocialAuthServiceConfig

// inject the SOCIAL_AUTH_CONFIG into your component
providerConfig: SocialAuthServiceConfig | Promise<SocialAuthServiceConfig> = inject(SOCIAL_AUTH_CONFIG);

...

async SetUpProviderHandling() {
  // get the injected providerConfig as a SocialAuthServiceConfig.
  const providerConfig = await this.providerConfig;
  // get your provider config based on the ProviderId
  const foundProviderConfig = providerConfig.providers.find(x => x.id == MyProvider.PROVIDER_ID);
  if(foundProviderConfig && foundProviderConfig.provider) {
    foundProviderConfig.provider.onHasErrorChange.subscribe(value => {
      // handle errors on change here
    });
    // set the base has error result here.
    const hasError = foundProviderConfig.provider.hasError;

    foundProviderConfig.provider.onIsLoadedChange.subscribe(value => {
      // handle isLoading on change here
    });
    // set the base isLoaded result here.
    const hasError = foundProviderConfig.provider.isLoaded;
  }
}