如何使用 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 登錄用於身份驗證目的