Google iOS登录

介绍

本指南将教您如何在iOS设备上使用Capgo Social Login设置Google登录。 一般设置指南.

使用Google登录在iOS

在iOS中设置Google登录

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

   1. 点击搜索栏

      

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

      

   3. 点击 Google 控制台中的 create credentials

      

   4. 选择 OAuth client ID

      

   5. 选择 Application type 应用 iOS

      

   6. 找到 bundle ID

      1. 打开 Xcode

      2. 双击 Xcode 项目导航器中的 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 items

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

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

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

      

   2. 右键单击这个文件并以源代码的形式打开code

      

   3. 您的文件底部会看到一个 Plist 标签 </dict> Info.plist文件中的字典标签

      

   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 Info.plist 中的实际反向客户端 ID 值插入到 URL 方案中

      

      确保该值

      从 开始 with com.googleusercontent.apps

   6. 在 Xcode 项目导航器中打开AppDelegate.swift 文件 Command + S

3. 修改 AppDelegate.swift

   1. 打开AppDelegate

      

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

      

   3. 函数 func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) AppDelegate.swift 文件中的原始应用程序 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(); context

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

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

前置调用登录函数：

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