Google 登录在 iOS 上

复制一个包含安装步骤和完整Markdown指南的设置提示。

简介

在本指南中，您将学习如何设置 Google 登录和 Capgo 社交登录 iOS。我假设您已经阅读了通用设置指南.

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

在 Google 控制台中创建 iOS 客户端 ID
1. 点击搜索栏
2. 在搜索框中 credentials 并点击截图中的第二个选项 APIs and Services 截图中第二个选项（第 2 项）
3. 点击 Google 控制台中的 create credentials
4. 选择 OAuth client ID
5. 选择 Application type 到 iOS
6. 找到 bundle ID
  1. 打开 Xcode
  2. 双击 Xcode 项目导航器中的 App
  3. 在 Xcode 中选择 App 的 Targets -> App
  4. 在 Xcode 项目设置中的 Bundle Identifier
  5. 到 Bundle Identifier 可选地，添加您的 Bundle ID
7. __CAPGO_KEEP_0__ App Store ID __CAPGO_KEEP_0__ Team ID 如果您已经将应用程序发布到 App Store，则需要将此客户端 ID 输入到客户端 ID 中
8. 填写所有详细信息后，点击 create
9. 点击 OK
10. 打开新创建的 iOS 客户端
11. 复制以下数据
  
  The nr. 1 在这张图片中将会变成 iOSClientId 在 initialize 拨号。
  The nr. 2 在这张图片中将会变成 YOUR_DOT_REVERSED_IOS_CLIENT_ID
修改您的应用程序的Info.plist
1. 打开Xcode并找到 Info.plist 文件
2. 右键单击此文件并以源代码code打开
3. 您的应用程序的底部 Plist 您将看到一个文件 </dict> 标签
4. 在关闭标签之前，插入以下片段 </dict> Info.plist 文件，包含 URL 方案 __CAPGO_KEEP_0__ 在关闭字典标签之前
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Info.plist 文件，包含实际反转的客户端 ID 在 URL 方案中 YOUR_DOT_REVERSED_IOS_CLIENT_ID 注意
  
  确保此值以开始 com.googleusercontent.apps
6. 保存文件 Command + S

修改 AppDelegate.swift

在 Xcode 项目导航器中打开 AppDelegate 文件
在 AppDelegate.swift 文件中添加 GoogleSignIn 导入 import GoogleSignIn 找到
__CAPGO_KEEP_0__ func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) __CAPGO_KEEP_0__

修改函数使其类似于此

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 登录（code）

导入 SocialLogin 和 Capacitor

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

调用初始化方法（仅应在第一次调用）

基本设置（在线模式 - 大多数应用推荐）：
```
// onMounted is Vue specific
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Default mode
    }
  })
})
```
__CAPGO_KEEP_0__
```
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'
    }
  })
})
```
注意
__CAPGO_KEEP_0__的要求:
- iOSClientId: 必需 - 必须以 googleusercontent.com (从步骤 1 中)
- webClientId: 可选 - 只有在您也支持 web 平台或需要高级功能时才需要
- iOSServerClientId: 可选 - 应该与 webClientId 当提供时
高级设置 webClientId 和 iOSServerClientId详见 web 设置指南创建这些凭据
关于离线模式: 在使用 mode: 'offline'时，登录响应将不包含用户数据。相反，您将接收一个服务器认证code，必须通过您的后端服务器交换为用户信息。 SocialLogin.refresh({ provider: 'google' }) 在此模式下不可用；刷新必须在您的后端服务器上发生后交换 serverAuthCode. 参见查看实现详细信息。

实现登录功能。创建一个按钮并在点击时运行以下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)

测试您的应用
1. 构建您的应用并运行 cap sync
2. 如果您已经完成了所有步骤，应该看到Google登录流程正常工作

已知问题

隐私屏幕插件不兼容性

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

解决方法： 调用 await PrivacyScreen.disable(); __CAPGO_KEEP_0__:

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

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

Google 登录在 iOS 上

简介

在 iOS 中使用 Google 登录

已知问题

隐私屏幕插件不兼容性