Google 登录 iOS

GitHub

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

介绍

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

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

在 Google 控制台中创建一个 iOS 客户端 ID
1. 点击搜索栏
2. 在搜索栏中输入 credentials 并点击 APIs and Services 截图中的第 2 项（数字 2）
3. 点击 create credentials
4. 选择 OAuth client ID
5. 选择 Application type to iOS
6. 在 Xcode 中找到 Bundle ID
  1. 在 Xcode 中打开
  2. 双击 App
  3. 确保您在 Xcode 中的 Targets 部分选择了 App Targets -> App
  4. Bundle Identifier 字段 Bundle Identifier
  5. 到 Bundle Identifier __CAPGO_KEEP_0__ Bundle ID
7. 如果您已经将应用程序发布到 App Store,则可选地添加 App Store ID 或 Team ID 到客户端 ID,如果您已经将应用程序发布到 App Store
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 Info.plist 文件在 Xcode 项目导航器中
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. 的值修改为上一步复制的值 YOUR_DOT_REVERSED_IOS_CLIENT_ID 在 Info.plist 文件中添加 URL 方案 __CAPGO_KEEP_0__
  
  确保此值以保存文件为 com.googleusercontent.apps
6. 修改 Command + S

打开AppDelegate AppDelegate.swift

AppDelegate.swift文件在Xcode项目导航器中
at the top of the file import GoogleSignIn Info.plist中包含实际的反转客户端 ID，已在 URL 方案中插入
找到 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参见查看一般设置指南

Implement the login function. Create a button and run the following code on click

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

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. Build your app and run cap sync
2. If you’ve done everything correctly, you should see the Google login flow working properly

已知问题

Google登录插件与

@__CAPGO_KEEP_0__/privacy-screen @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: {}
});

iOS上的Google登录 来规划身份验证和帐户流程，连接它到 使用@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login 来使用@capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login 在 @capgo/capacitor-social-login 中的实现细节 @capgo/capacitor-passkey 在 @capgo/capacitor-passkey 中的实现细节 @capgo/capacitor-native-biometric 在 @capgo/capacitor-native-biometric 中的实现细节，以及双因素认证在双因素认证中的实现细节

Google 登录 iOS

介绍

使用 Google 登录在 iOS

已知问题

Google登录插件与

标题：从iOS的Google登录继续