Skip to main content

Google Auth

Google 登录（Web）​

要在 Web 项目中支持 Google 登录，需要在 Google Console 和 Firebase 中配置项目并获取相关凭证。

必要凭证​

  • GOOGLE_CLIENT_ID
  • GOOGLE_CLIENT_SECRET
  • GOOGLE_REDIRECT_URI

前端配置​

在前端项目（例如 Angular）中，需要使用 Firebase 配置：

firebase: {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
},
googleWebClientId: ""

使用的依赖​

  • PHP: "google/apiclient": "*"
  • Angular: "@angular/fire": "^20.0.1"

Firebase 初始化​

在 Angular 前端中，使用 @angular/fire 初始化 Firebase：

import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => getAuth()),

前端获取 Google 凭证​

通过 Google 登录获取 idToken，并传递给后端：

import { GoogleAuthProvider, signInWithPopup } from '@angular/fire/auth';

const provider = new GoogleAuthProvider();
provider.addScope('profile');
provider.addScope('email');
provider.setCustomParameters({
  client_id: environment.googleWebClientId,
});

const result = await signInWithPopup(this.auth, provider);
const credential = GoogleAuthProvider.credentialFromResult(result);
const idToken = await result.user.getIdToken();

后端验证 IdToken​

在后端（PHP）使用 google/apiclient 库验证 idToken：

$idToken = $data['idToken'];
$client = new GoogleClient();

$payload = $client->verifyIdToken($idToken);
$googleData = [
    'email' => $payload['email'],
    'google_id' => $payload['sub'],
    'name' => $payload['given_name'] ?? explode('@', $payload['email'])[0],
    'surname' => $payload['family_name'] ?? '',
];

总结流程​

  1. 前端使用 Firebase + Google Provider 获取 idToken。
  2. 将 idToken 发送到后端。
  3. 后端通过 Google API 客户端验证 idToken 并解析用户信息。
  4. 后端根据验证结果创建/更新用户并生成自己的会话或 JWT。