Capgo Social Login 项目：Google 登录功能集成指南

前言

在现代移动应用开发中，社交登录已成为提升用户体验的重要功能。Capgo Social Login 作为 Capacitor 生态中的社交登录解决方案，为开发者提供了便捷的 Google 登录集成方式。本文将详细介绍如何在 iOS、Android 和 Web 平台上配置 Google 登录功能。

基础配置

在开始平台特定的配置前，我们需要完成一些通用设置：

1. 创建 Google Cloud 项目

   • 访问 Google Cloud 控制台
   • 点击项目选择器创建新项目
   • 为项目命名并确认创建

2. 配置 OAuth 同意屏幕

   • 搜索并进入"OAuth 同意屏幕"设置
   • 选择用户类型（推荐使用"外部"）
   • 填写应用信息（名称将展示给用户）
   • 提供开发者联系信息
   • 保存配置

3. 添加必要的 API 范围

   • 添加用户基本信息和邮箱访问权限
   • 保存范围设置

4. 添加测试用户

   • 输入测试用户的 Google 邮箱
   • 保存测试用户配置

iOS 平台配置

1. 创建 iOS 客户端 ID

1. 在 Google Cloud 控制台中创建 OAuth 客户端 ID
2. 选择应用类型为 iOS
3. 获取应用的 Bundle Identifier：
   • 在 Xcode 中打开项目
   • 查看 Targets > App 下的 Bundle Identifier
4. 将 Bundle ID 填入 Google Cloud 控制台

2. 修改 Info.plist 文件

1. 在 Xcode 中打开 Info.plist 文件
2. 添加 URL Scheme 配置：

   <key>CFBundleURLTypes</key>
   <array>
     <dict>
       <key>CFBundleURLSchemes</key>
       <array>
         <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
       </array>
     </dict>
   </array>
   

3. 替换为从 Google Cloud 获取的客户端 ID

3. 修改 AppDelegate

1. 导入 GoogleSignIn 模块
2. 修改 application(_:open:options:) 方法：

   func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
       var handled: Bool
       handled = GIDSignIn.sharedInstance.handle(url)
       if handled {
         return true
       }
       return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
   }
   

4. JavaScript 端初始化

import { SocialLogin } from '@capgo/capacitor-social-login';

SocialLogin.initialize({
  google: {
    iOSClientId: '你的iOS客户端ID',
  }
});

// 登录调用
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
});

Android 平台配置

1. 创建 Android 客户端 ID

1. 获取应用的包名：

   • 在 Android Studio 中查看 build.gradle 文件
   • 找到 defaultConfig.applicationId

2. 获取调试密钥的 SHA1：

   • 在项目 android 目录下运行 ./gradlew signInReport
   • 从输出中复制 SHA1 值

3. 在 Google Cloud 控制台中创建 Android 客户端 ID

2. 创建 Web 客户端

1. 在 Google Cloud 控制台中创建 Web 客户端
2. 复制生成的客户端 ID 供后续使用

3. 修改 MainActivity

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) return;
            Plugin plugin = pluginHandle.getInstance();
            if (!(plugin instanceof SocialLoginPlugin)) return;
            ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
        }
    }
    
    @Override
    public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
}

4. JavaScript 端初始化

SocialLogin.initialize({
  google: {
    webClientId: '你的Web客户端ID',
  }
});

5. 模拟器配置建议

1. 创建支持 Google Play 服务的模拟器
2. 确保选择带有 Google Play 标签的系统镜像
3. 启动模拟器后更新 Google Play 服务

Web 平台配置

Web 平台的配置相对简单：

1. 使用 Android 配置中创建的 Web 客户端 ID
2. 无需额外配置即可使用

生产环境注意事项

1. iOS：

   • 提交应用前完成 Google 的验证流程
   • 确保使用正确的 Bundle ID

2. Android：

   • 为发布版本创建单独的客户端 ID
   • 使用 Google Play 控制台提供的签名证书 SHA1
   • 可通过内部测试轨道提前验证

3. 通用建议：

   • 保持开发和生产环境配置分离
   • 定期检查 API 配额和使用情况
   • 监控登录流程中的错误日志

常见问题排查

1. iOS 登录失败：

   • 检查 Bundle ID 是否匹配
   • 验证 URL Scheme 配置正确
   • 确保测试用户已添加

2. Android 登录问题：

   • 确认 SHA1 指纹正确
   • 检查模拟器是否支持 Google Play 服务
   • 验证 MainActivity 修改是否完整

3. Web 端问题：

   • 检查域名是否已授权
   • 验证客户端 ID 类型为 Web

通过遵循本指南，开发者可以顺利完成 Capgo Social Login 的 Google 登录功能集成，为用户提供便捷的社交登录体验。