Skip to main content

Google Auth

Google 登录(Web)

要在 Web 项目中支持 Google 登录,需要在 Google ConsoleFirebase 中配置项目并获取相关凭证。

必要凭证

  • 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。