Google iOS登录

GitHub

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

介绍

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

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

在Google控制台中创建一个iOS客户端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. 双击 Xcode 项目导航器中的 App
  3. 找到 Xcode 项目设置中的 Targets -> App
  4. context Bundle Identifier
  5. context Bundle Identifier 进入 Bundle ID
7. 或者 App Store ID 或者 Team ID 进入客户端 ID
8. 填写所有详细信息后，点击 create
9. 点击 OK
10. 打开刚创建的 iOS 客户端
11. 复制以下数据
  
  在这个图片中将会变成 nr. 1 在 iOSClientId 调用的 initialize 在这个图片中将会变成
  在这个图片中将会变成 nr. 2 修改您的应用程序的 Info.plist YOUR_DOT_REVERSED_IOS_CLIENT_ID
打开 Xcode 并找到
1. 文件 Info.plist 客户端 ID
2. 右键单击此文件并以源代码形式打开code
3. 您的 Plist 文件底部，您将看到一个 </dict> 标签
4. 在关闭的dict标签之前，插入以下片段 </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

Setup Google login in your JavaScript/TypeScript 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
    }
  })
})
```
高级设置（附带客户端 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后在您的后端进行。请参阅常规设置指南了解实现细节。

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

已知问题

隐私屏幕插件不兼容性

隐私屏幕插件不兼容 @capacitor/隐私屏幕使用两者同时时，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: {}
});

Google Login on iOS 来规划认证和账户流程， 与@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login进行连接 @capgo/capacitor-social-login 为使用 @capgo/capacitor-social-login 的原生能力 @capgo/capacitor-社交登录为 @capgo/capacitor-social-login 的实现细节 @capgo/capacitor-passkey 为 @capgo/capacitor-passkey 的实现细节为 @capgo/capacitor-native-biometric 的实现细节对于在 @capgo/capacitor-native-biometric 中的实现细节为两因素认证的实现细节编辑页面

Google iOS登录

介绍

使用 Google 登录在 iOS 设备上

已知问题

隐私屏幕插件不兼容性

继续从Google Login on iOS