如何使用 Angular 和 Spring Boot 添加社交登录功能

Posted 2023-02-27

【中文标题】如何使用 Angular 和 Spring Boot 添加社交登录功能

【英文标题】：How to add social login functionality using angular and spring boot

【发布时间】：2020-07-02 20:56:10

【问题描述】：

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

【参考方案1】：

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

请参阅official doc 进行身份验证。

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 无状态身份验证。

我建议您阅读my answer 以了解类似问题。该案例的重点是 Google 登录，但主线类似。

大体思路是：*

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

一些资源：

Google Sign-In with Backend Verification Flow Clarification 关于 SO 的问题，我的回答 The Purpose of JWT: Stateless Authentication Stateless Sessions for Stateful Minds: JWTs Explained

【参考方案2】：

检查这可能对某人有帮助

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

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