Как добавить функцию входа в социальную сеть, используя angular и весеннюю загрузку

Question

Как добавить функцию входа в социальную сеть в angular и приложении весенней загрузки. Я гуглял так много раз, что не получил правильного руководства. Пожалуйста, дайте мне знать, если кто-нибудь уже сделал это.

Answer 1

Вы можете использовать Firebase Auth , чтобы обеспечить функцию социального входа в ваше приложение. Интеграция с Angular проста с помощью библиотеки AngularFire .

См. official do c для аутентификации.

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 вы можете использовать JWT аутентификацию без сохранения состояния, проверяя токен, полученный от вашего Angular приложения.

Я рекомендую прочитать мой ответ на аналогичный вопрос. В данном случае речь идет о входе в Google, но основные строки аналогичны.

Общая идея: *

• Интерфейс аутентификации пользователя через Firebase Auth (с AngularFire lib)
• приложение внешнего интерфейса получает токен аутентификации в виде токена JWT
• внешний интерфейс отправляет токен JWT с каждым HTTP-запросом (с заголовком авторизации)
• бэкэнд получает JWT для каждого запрашивает, проверяет свою подпись и получает атрибуты полезной нагрузки (email, id…)
• , затем сервер проверяет «email» или «id» в базе данных пользователей, чтобы разрешить или не запросить.

Некоторые ресурсы :

• Вход в Google с уточнением потока проверки бэкенда вопрос по SO, с моим ответом
• Цель JWT: Аутентификация без сохранения состояния
• Сеансы без сохранения состояния с учетом состояния: Объяснения JWT