如何使用 angular 和 spring boot 添加社交登录功能

Question

我如何在 angular 和 spring boot 应用程序中添加社交登录功能。我在谷歌上搜索了很多次，但没有得到适当的指导。如果有人已经这样做了，请告诉我。

Answer 1

您可以使用Firebase Auth为您的应用提供社交登录功能。 通过AngularFire库可以轻松与 Angular 集成。

请参阅官方文档进行身份验证。

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="auth.user | async as user; else showLogin">
      <h1>Hello {{ user.displayName }}!</h1>
      <button (click)="logout()">Logout</button>
    </div>
    <ng-template #showLogin>
      <p>Please login.</p>
      <button (click)="login()">Login with Google</button>
    </ng-template>
  `,
})
export class AppComponent {
  constructor(public auth: AngularFireAuth) {
  }
  login() {
    this.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }
  logout() {
    this.auth.signOut();
  }
}

然后在后端，使用 Spring Boot，您可以通过验证从 Angular 应用程序收到的令牌来使用JWT无状态身份验证。

我建议您阅读我对类似问题的回答。 案例集中在Google Sign-in，但主线相似。

总体思路是：*

• 前端通过 Firebase Auth（使用 AngularFire 库）对用户进行身份验证
• 前端应用程序检索身份验证令牌作为 JWT 令牌
• 前端随每个 HTTP 请求发送 JWT 令牌（带有授权标头）
• 后端为每个请求检索 JWT，验证其签名，并获取有效负载属性（电子邮件、ID...）
• 然后，后端检查用户数据库中的“email”或“id”以允许或不允许请求。

一些资源：

• 带有后端验证流程的 Google 登录SO 上的澄清问题，以及我的回答
• JWT 的目的：无状态认证
• 有状态思维的无状态会话：解释 JWT

Answer 2

检查这可能对某人有帮助

https://www.javainuse.com/spring/spring-social

我有使用 JWT 令牌和 Spring boot 的现有登录系统，所以我仅将 Facebook 登录用于身份验证目的