iOS 端 Google Login

简介

在本指南中，你将学习如何通过 Capgo Social Login 在 iOS 上配置 Google Login。 我假设你已经阅读了 通用设置指南.

在 iOS 上使用 Google Login

在本节中，你将学习如何在 iOS 上配置 Google 登录。

1. 在 Google Console 中创建 iOS Client ID

   1. 点击搜索栏

      

   2. 搜索 credentials 然后点击 APIs and Services 这一项（截图中编号 2）

      

   3. 点击 create credentials

      

   4. 选择 OAuth client ID

      

   5. 选择 Application type 至 iOS

      

   6. 查找 Bundle ID

      1. 打开 Xcode

      2. 双击 App

         

      3. 确保你处于 Targets -> App

         

      4. 找到你的 Bundle Identifier

         

      5. 返回 Google Console 并粘贴你的 Bundle Identifier 移至 Bundle ID

         

   7. （可选）将您的 App Store ID 或 Team ID 添加到 Client ID 中（如果您已将应用发布至 App Store）

   8. 填写完所有详情后，点击 create

      

   9. 点击 OK

      

   10. 打开新创建的 iOS 客户端

       

   11. 复制以下数据

       

       注意

       该 nr. 1 图中显示的内容稍后将成为 iOSClientId 在 initialize 调用。

       该 nr. 2 图中显示的内容稍后将变为 YOUR_DOT_REVERSED_IOS_CLIENT_ID

2. 修改应用的 Info.plist

   1. 打开 Xcode 并找到 Info.plist 文件

      

   2. 右键点击该文件，并选择以源码方式打开 code

      

   3. 在文件的底部 Plist 你会看到一个 </dict> 标签

      

   4. 请在 closing 标签之前插入以下代码片段 </dict> 标签

      

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

   5. 修改 YOUR_DOT_REVERSED_IOS_CLIENT_ID 粘贴至上一步复制的值

      

      注意

      确保该值 以...开头 带 com.googleusercontent.apps

   6. 保存文件，包含 Command + S

3. 修改 AppDelegate.swift

   1. 打开 AppDelegate

      

   2. 插入 import GoogleSignIn 在文件顶部

      

   3. 找到 func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) 函数

      

   4. 将函数修改为如下所示

      func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
          // Called when the app was launched with a url. Feel free to add additional processing here,
          // but if you want the App API to support tracking app url opens, make sure to keep this call
      
          var handled: Bool
      
          handled = GIDSignIn.sharedInstance.handle(url)
          if handled {
            return true
          }
      
          return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
      }

      

   5. 保存文件，内容如下 Command + S

4. 在你的 JavaScript/TypeScript code 中配置 Google 登录

   1. 导入 SocialLogin 和 Capacitor

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

   2. 调用 initialize 方法（仅需调用一次）

      基础配置（在线模式 - 大多数 App 的推荐选择）：

      // onMounted is Vue specific
      onMounted(() => {
        SocialLogin.initialize({
          google: {
            iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
            mode: 'online' // Default mode
          }
        })
      })

      包含额外 Client ID 的高级配置：

      onMounted(() => {
        SocialLogin.initialize({
          google: {
            webClientId: 'YOUR_WEB_CLIENT_ID',           // Optional: for web platform support
            iOSClientId: 'YOUR_IOS_CLIENT_ID',           // Required: from step 1
            iOSServerClientId: 'YOUR_WEB_CLIENT_ID',     // Optional: same as webClientId, needed for some advanced features
            mode: 'online'                               // 'online' or 'offline'
          }
        })
      })

      注意

      Client ID 要求：

      • iOSClientId: 必填 - 必须以以下结尾 googleusercontent.com （来自上述步骤 1）
      • webClientId: 可选 - 仅在需要支持 Web 平台或高级功能时使用
      • iOSServerClientId: 可选 - 应与以下值保持一致： webClientId 若已提供

      若需进行高级配置，请使用 webClientId 和 iOSServerClientId，请查看 Web 设置指南 以创建这些凭据。

      注意

      关于离线模式： 当使用 mode: 'offline'时，登录响应不会直接包含用户数据。相反，您会收到一个服务器身份验证 code，必须通过您的后端服务器将其兑换为用户信息。 SocialLogin.refresh({ provider: 'google' }) 在此模式下不可用；在兑换后，必须在您的后端进行刷新 serverAuthCode。请参阅 通用设置指南 了解实现细节。

   3. 实现登录功能。创建一个按钮，并在点击时运行以下 code

      在线模式：

      const res = await SocialLogin.login({
        provider: 'google',
        options: {}
      })
      // handle the response - contains user data
      console.log(JSON.stringify(res))

      离线模式：

      const res = await SocialLogin.login({
        provider: 'google',
        options: {
          forceRefreshToken: true // Recommended for offline mode
        }
      })
      // res contains serverAuthCode, not user data
      // Send serverAuthCode to your backend to get user information
      // Do not call SocialLogin.refresh() in offline mode
      console.log('Server auth code:', res.result.serverAuthCode)

5. 测试您的应用

   1. 构建并运行应用 cap sync

   2. 如果一切配置正确，您应该能看到 Google 登录流程正常工作

      

注意

Google prompt 中的语言取决于您设备的语言设置。

已知问题

Privacy Screen 插件不兼容

Google Login 插件与以下内容不兼容： @capacitor/privacy-screen. 如果同时使用这两个插件，Google 登录的 webview 会被 privacy screen 遮挡。

解决方案： 调用 await PrivacyScreen.disable(); 在调用登录函数之前：

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

await PrivacyScreen.disable();
await SocialLogin.login({
  provider: 'google',
  options: {}
});

iOS 上 Google Login 后继续

如果你正在使用 iOS 端 Google Login 规划身份验证和账户流程，并将它与 使用 @capgo/capacitor-social-login 了解使用 @capgo/capacitor-social-login 时的原生能力， @capgo/capacitor-social-login 了解 @capgo/capacitor-social-login 中的实现细节， @capgo/capacitor-passkey 了解 @capgo/capacitor-passkey 中的实现细节， @capgo/capacitor-native-biometric 了解 @capgo/capacitor-native-biometric 中的实现细节，以及 双重身份验证 了解双因素认证中的实现细节。