Google 登录 iOS

简介

在本指南中，您将了解如何为 iOS 设置 Google 使用 Capgo 社交登录登录。我假设您已经阅读了一般设置指南。

使用 Google 登录 iOS

在本部分中，您将学习如何在 iOS 中设置 Google 登录。

在 Google 控制台中创建 iOS 客户端 ID
1. 点击搜索栏
2. 搜索 credentials 并单击“API 和服务”（屏幕截图中的数字 2）
3. 单击“创建凭据”
4. 选择OAuth client ID
5. 选择“应用程序类型”为 iOS
6. 查找捆绑包 ID
  1. 打开Xcode
  2. 双击App
  3. 确保您处于Targets -> App
  4. 找到您的“捆绑包标识符”
  5. 返回 Google 控制台并将“Bundle Identifier”粘贴到“Bundle ID”中
7. （可选）如果您已将应用程序发布到 App Store，请将您的 App Store ID 或“团队 ID”添加到客户端 ID 中
8. 填写完所有详细信息后，单击create
9. 单击OK
10. 打开新创建的 iOS 客户端
11. 复制以下数据
  
  :::注意此图像中的 nr. 1 稍后将成为 initialize 调用中的 iOSClientId 。
  
  此图像中的 nr. 2 稍后将变为 YOUR_DOT_REVERSED_IOS_CLIENT_ID :::
修改应用程序的 Info.plist
1. 打开 Xcode 并找到 Info.plist 文件
2. 右键单击该文件并将其作为源代码打开
3. 在 Plist 文件的底部，您将看到 </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. 使用“Command + S”保存文件

修改 AppDelegate.swift

打开 AppDelegate
在文件顶部插入 import GoogleSignIn
找到 func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) 函数

将函数修改为如下所示

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)
}

使用“Command + S”保存文件

在 JavaScript/TypeScript 代码中设置 Google 登录

导入 SocialLogin 和 Capacitor

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

调用 initialize 方法（应该只调用一次）

基本设置（在线模式，建议大多数应用程序使用）：
```
// 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'时，登录响应不会直接包含用户数据。相反，您将收到一个服务器身份验证代码，必须通过后端服务器将其交换为用户信息。请参阅一般设置指南了解实施细节。 :::

实现登录功能。创建一个按钮并在单击时运行以下代码

对于在线模式：

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
console.log('Server auth code:', res.result.serverAuthCode)

测试您的应用程序
1. 构建您的应用程序并运行“capsync”
2. 如果您已正确完成所有操作，您应该会看到 Google 登录流程正常工作

已知问题

隐私屏幕插件不兼容

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

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