Google登录iOS

介绍

本指南将教您如何在iOS设备上使用Google登录和Capgo Social Login。 已阅读通用设置指南.

使用Google登录

在iOS设备上设置Google登录

1. 在Google控制台中创建一个iOS客户端ID

   1. 点击搜索栏

      

   2. 搜索 credentials 点击第二个结果（截图中的第2个） APIs and Services __CAPGO_KEEP_0__

      

   3. 点击 Google Console 中的 create credentials

      

   4. 选择 OAuth client ID

      

   5. 选择 Application type 到 iOS

      

   6. Page/area: Live updates product page. Role: Short UI label or navigation item. Message key `live_update_dynamic_label_to` (Live Update Dynamic Label To).

      1. 应用类型选择，iOS 选项高亮

      2. 找到 bundle ID App

         

      3. 确保您已在 Targets -> App

         

      4. 找到您的 Bundle Identifier

         

      5. 返回Google控制台并将您的 Bundle Identifier 复制到 Bundle ID

         

   7. 可选地，添加您的 App Store ID 或 Team ID 复制到客户端ID，如果您已将应用发布到App Store

   8. 填写所有详细信息后，点击 create

      

   9. 点击 OK

      

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

       

   11. 复制以下数据

       

       注意

       在这个图像中将会变成 nr. 1 在 iOSClientId 的调用。 initialize 的调用

       The nr. 2 在这个图片中将会变成 YOUR_DOT_REVERSED_IOS_CLIENT_ID

2. 修改您的应用程序的 Info.plist

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

      

   2. 右键单击此文件并以源代码打开 code

      

   3. 您的文件底部，您将看到一个 Plist 标签 </dict> Info.plist 文件中的 Closing dict 标签

      

   4. 在关闭标签之前，插入以下片段 </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. 在 Xcode 项目导航器中打开AppDelegate.swift 文件 Command + S

3. 修改 AppDelegate.swift

   1. 打开AppDelegate

      

   2. 在AppDelegate.swift 文件中插入 import GoogleSignIn 在AppDelegate.swift 文件顶部添加 GoogleSignIn 导入语句

      

   3. 函数 func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) AppDelegate 中的原始应用 openURL 函数

      

   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中设置Google登录（code）

   1. 导入 SocialLogin 并 Capacitor

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

   2. 调用初始化方法（应只调用一次）

      基本设置（在线模式-大多数应用程序推荐）：

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

      高级设置（附加客户端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'
          }
        })
      })

      注意

      客户端 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提示的语言取决于您的设备的语言设置

已知问题

隐私屏幕插件不兼容

Google 登录插件与 @capacitor/privacy-screen不兼容。当同时使用这两个插件时，Google 登录 webview 将被隐私屏幕中断。

解决方法： 在调用登录函数之前 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: {}
});

appflow_migration_step2

如果您正在使用 Google iOS 登录 来规划身份验证和帐户流程，连接它与 使用 @capgo/capacitor 社交登录 为使用 @capgo/capacitor 社交登录的原生能力 @capgo/capacitor 社交登录 为 @capgo/capacitor 社交登录的实现细节 @capgo/capacitor Passkey 为 @capgo/capacitor Passkey 的实现细节 @capgo/capacitor 原生生物识别 为 @capgo/capacitor 原生生物识别的实现细节 双因素验证 双因素验证的实现细节。