跳过内容

Google Auth 迁移到 @capgo/social-login

GitHub

本指南提供了从 @codetrix-studio/capacitor-google-auth 到 @capgo/capacitor-social-login确保平滑过渡和改进的身份验证体验。新插件统一了多个社交身份验证提供商,形成了一个统一的、一致的 API。

  1. 安装

    标题为“安装”
    npm uninstall @codetrix-studio/capacitor-google-auth
  2. 安装新包:

    终端窗口
    npm install @capgo/capacitor-social-login
    npx cap sync

Google Auth 配置的重要变化

Google Auth 配置的重要变化

Web 客户端 ID 的要求

Web 客户端 ID 的要求

关键变化: 必须在所有平台上使用 Web 客户端 ID。

您需要:

  1. 如果您没有,请在 Google Cloud Console 中创建 Web 客户端 ID(获取凭证的方法)
  2. 使用此 Web 客户端 ID 在所有平台的 webClientId 字段
  3. 对于 Android,仍然需要创建一个 Android 客户端 ID,使用 SHA1,但这仅用于验证目的 - 令牌不会被使用(Android 设置指南)

Code 变更

Code Changes

导入更改

导入更改
import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
import { SocialLogin } from '@capgo/capacitor-social-login';

初始化

初始化

设置从简单的 GoogleAuth.initialize() 对更结构化的调用 SocialLogin.initialize() 嵌套的Google配置:

GoogleAuth.initialize({
clientId: 'CLIENT_ID.apps.googleusercontent.com',
scopes: ['profile', 'email'],
grantOfflineAccess: true,
});
await SocialLogin.initialize({
google: {
webClientId: 'WEB_CLIENT_ID.apps.googleusercontent.com', // Use Web Client ID for all platforms
iOSClientId: 'IOS_CLIENT_ID', // for iOS
mode: 'offline' // replaces grantOfflineAccess
}
});

登录方法从 GoogleAuth.signIn() 到 SocialLogin.login() 具有明确提供商指定的:

const user = await GoogleAuth.signIn();
const res = await SocialLogin.login({
provider: 'google',
options: {
scopes: ['email', 'profile'],
forceRefreshToken: true // if you need refresh token
}
});

平台特定更改

标题:平台特定更改

Android

Android
  1. 更新您的 MainActivity.java (全 Android 安装指南):
import ee.forgr.capacitor.social.login.GoogleProvider;
import ee.forgr.capacitor.social.login.SocialLoginPlugin;
import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
import com.getcapacitor.PluginHandle;
import com.getcapacitor.Plugin;
import android.content.Intent;
import android.util.Log;
public class MainActivity extends BridgeActivity {
public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
if (pluginHandle == null) {
Log.i("Google Activity Result", "SocialLogin login handle is null");
return;
}
Plugin plugin = pluginHandle.getInstance();
if (!(plugin instanceof SocialLoginPlugin)) {
Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
return;
}
((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
}
}
public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
}
  1. AppDelegate.swift 中没有重大变化(iOS 安装指南)

  2. 更新您的配置在 capacitor.config.json我们不再使用它在新插件:

{
"plugins": {
"GoogleAuth": {
"scopes": ["profile", "email"],
"serverClientId": "xxxxxx-xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",
"forceCodeForRefreshToken": true
}
}

Web

Web
  1. 移除 Google Sign-In 元标签 index.html 如果您曾使用它们,请移除它们:
<meta name="google-signin-client_id" content="{your client id here}" />
<meta name="google-signin-scope" content="profile email" />

认证响应现在提供一个结构化的对象,包含提供商信息、访问令牌、ID令牌和用户资料:

interface GoogleLoginResponse {
provider: 'google';
result: {
accessToken: {
token: string;
expires: string;
// ... other token fields
} | null;
idToken: string | null;
profile: {
email: string | null;
familyName: string | null;
givenName: string | null;
id: string | null;
name: string | null;
imageUrl: string | null;
};
};
}

响应结构包括:

  • provider: 识别认证提供商('google')
  • access_token: Google 访问令牌详细信息
  • result.idToken: 身份令牌用于身份验证
  • result.profile: 包含电子邮件、姓名和图片 URL 的用户资料

新包支持多个社交身份验证提供商,包括 Google 之外的:

这种统一的方法提供了:

  • 一致的 API 在所有提供商中
  • 提高 TypeScript 支持
  • 更好的错误处理
  • 积极维护和社区支持

查看 主文档 获取这些额外提供者的详细设置说明。

从 Google Auth Migration 到 @capgo/social-login

标题:从 Google Auth Migration 到 @capgo/social-login

如果您正在使用 Google Auth Migration 到 @capgo/social-login 来规划身份验证和帐户流程,连接它到 使用 @capgo/capacitor-social-login 为使用@capgo/capacitor-social-login的原生能力 @capgo/capacitor-社交登录 为@capgo/capacitor-social-login的实现细节 @capgo/capacitor-passkey 为@capgo/capacitor-passkey的实现细节 为@capgo/capacitor-native-biometric的实现细节 为@capgo/capacitor-native-biometric的实现细节 为两因素身份验证的实现细节 编辑页面