跳过内容

Android 上的 Google 登录

GitHub

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

In Android 中,您将学习如何设置 Google 登录。

  1. 创建Android客户端ID

    1. 点击搜索栏

      Google控制台搜索栏
    2. 搜索 credentials 并点击 APIs and Services 第一个(截图中的第2个)

      显示API和服务选项的搜索结果
    3. 点击 create credentials

      Google控制台中的创建凭证按钮
    4. 选择 OAuth client ID

      在凭据创建菜单中的OAuth客户端ID选项
    5. 选择 Android 应用程序类型

      应用程序类型选择,Android选项突出显示
    6. 打开Android Studio

    7. 在导航器的最下方,找到 Gradle Scripts

      Android Studio项目导航器中的Gradle Scripts部分
    8. 找到 build.gradle 模块 app

      build.gradle (Module: app)文件在Gradle Scripts部分
    9. 复制 android.defaultConfig.applicationId. 这将是您的 package name 在 Google 控制台中

      Build.gradle 文件显示 applicationId 配置
    10. 现在,打开终端。确保您在应用程序的文件夹中并运行 android 终端显示 gradlew signInReport 命令 ./gradlew signInReport

    滚动到此命令的顶部。您应该看到以下内容。复制
    1. 终端输出显示 SHA1 证书指纹 SHA1.
    现在,返回到 Google 控制台。输入您的
    1. 作为 applicationId 并您的 SHA1 在证书字段中并点击 Package Name Android 客户端创建表单,包名和 SHA1 字段已填充 create
    Android client creation form with package name and SHA1 fields filled in
  2. 创建一个 Web 客户端(这是 Android 必须的)

    1. 前往 Google 控制台的 Create credentials 页面

    2. 设置应用类型为 Web

      选择应用类型,Web 选项高亮
    3. 点击 Create

      创建 Web 客户端表单,底部有 Create 按钮
    4. 复制客户 ID,您将其用作您的 JS/TS __CAPGO_KEEP_0__ webClientId in your JS/TS code

      修改您的
  3. 请打开您的应用程序在 Android Studio 中。您可以运行 MainActivity

    1. 在 Android Studio 中打开您的应用程序。您可以运行 cap open android

    2. 查找 MainActivity.java

      1. 打开 app 文件夹

        在 Android Studio 项目导航器中找到 App 文件夹
      2. 查找 java

        在 Android Studio 项目结构中找到 Java 文件夹
      3. 找到并点击 MainActivity.java MainActivity.java 文件在包结构中

        修改
    3. 请添加以下内容 __CAPGO_KEEP_0__ MainActivity.java. Please add the following code

      import ee.forgr.capacitor.social.login.GoogleProvider;
      import ee.forgr.capacitor.social.login.SocialLoginPlugin;
      import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
      import com.getcapacitor.PluginHandle;
      import com.getcapacitor.Plugin;
      import android.content.Intent;
      import android.util.Log;
      import com.getcapacitor.BridgeActivity;
      // ModifiedMainActivityForSocialLoginPlugin is VERY VERY important !!!!!!
      public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {
      @Override
      public void onActivityResult(int requestCode, int resultCode, Intent data) {
      super.onActivityResult(requestCode, resultCode, data);
      if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
      PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
      if (pluginHandle == null) {
      Log.i("Google Activity Result", "SocialLogin login handle is null");
      return;
      }
      Plugin plugin = pluginHandle.getInstance();
      if (!(plugin instanceof SocialLoginPlugin)) {
      Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
      return;
      }
      ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
      }
      }
      // This function will never be called, leave it empty
      @Override
      public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
      }
    4. 保存文件

  4. 在应用程序中使用Google登录

    1. 首先,导入 SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';
    2. 调用初始化。应仅调用一次。

      // onMounted is Vue specific
      // webClientId is the client ID you got in the web client creation step not the android client ID.
      onMounted(() => {
      SocialLogin.initialize({
      google: {
      webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
      }
      })
      })
    3. 调用 SocialLogin.login在应用程序中创建一个按钮,点击后执行以下code。

      const res = await SocialLogin.login({
      provider: 'google',
      options: {}
      })
      // handle the response
      console.log(JSON.stringify(res))
  5. 在您的后端存储Google刷新令牌,并在后端刷新

    1. 配置模拟器进行测试 Device manager 进入

      并点击加号按钮
    2. 在Android Studio的设备管理器中

      创建虚拟设备
    3. 虚拟设备配置中的创建虚拟设备按钮 Play Store 选择任何具有

      硬件选择显示支持Play商店的设备

      如您所见, pixel 8 支持的 Play Store 服务

    4. 点击 next

      设备创建向导中的下一步按钮
    5. context":"Capgo Builder / 原生云构建产品页面。角色:短的UI标签或导航项。消息键`native_build_builder_credit_next`(原生构建构建者信用下一步)。" Google Play. 确保OS映像类型为 必须 Google Play

      类型为
    6. 系统映像选择显示Google Play类型的映像

      点击下一步按钮
    7. 确认您的设备。您可以为模拟器命名

      设备配置验证屏幕
    8. 进入 Device Manager 并启动您的模拟器

      设备管理器中列出了虚拟设备并显示播放按钮
    9. 模拟器启动后,进入其设置

      Android模拟器显示设置应用
    10. 进入 Google Play

    设置屏幕显示Google Play选项
    1. 点击 Update 等待约60秒
    Google Play更新屏幕显示更新按钮
  6. 测试您的应用程序

    如果您正确完成了所有步骤,您应该看到Google登录流程正常工作:

    Android上的Google登录流程演示,显示登录过程和成功身份验证

故障排除

故障排除

如果您遇到任何问题,请首先将您的应用程序配置与Google Cloud Console值进行比较。 Android Google Sign-In故障通常由包名、SHA-1或客户端ID不匹配而导致。

凭证管理器、SHA-1和Firebase

故障排除

在Android上,这个插件使用Google凭证管理器(androidx.credentials 和Google登录),而不是遗留的 GoogleSignInClient API。 Logcat错误,如 GetCredentialCustomException: [28444] Developer console is not set up correctly 来自该堆栈。

过滤 Logcat GoogleProviderCapgoSocialLogin Google Cloud Console webClientId Google Cloud Console

您需要在同一个 Google Cloud 项目中创建两个 OAuth 2.0 客户端 ID 类型:

类型

用途

位置Web 应用服务器/ID 令牌受众
Required Google Cloud setup您需要在同一个 Google Cloud 项目中创建两个 OAuth 2.0 客户端 ID 类型:webClientIdSocialLogin.initialize()
Android中,每个签名密钥证明您的APK有权调用Google仅限Google Cloud Console。不要将此ID传递给 webClientId

常见的错误是使用Android客户端ID webClientId。凭证管理器要求在那里使用Web客户端ID。Android客户端只需要在控制台中正确的包名和SHA-1注册。

为每个签名证书创建一个Android OAuth客户端,用于测试的构建:

  • Debug:从 ./gradlew signingReport 用于调试版本。
  • Release:从您实际安装的APK或AAB中。
  • Play App Signing:从Play Console > App integrity > App signing key certificate。即使您的上传密钥SHA-1已经注册,也需要此项以支持Play Store构建。

The applicationIdandroid/app/build.gradle 必须完全匹配 Android OAuth 客户端包名,包括任何后缀。 .debug 如果 OAuth 同意屏幕处于测试模式,请在 Audience > 测试用户下添加您测试的每个 Google 帐户。发布应用到生产环境不是必需的,

email 范围。数字资产链接( profile )不需要通过凭据管理器进行 Google 登录。assetlinks.jsonGoogle Cloud 的更改可能需要几小时才能传播。

错误 28444:开发者控制台设置不正确

. 请按照以下检查清单进行工作: webClientId__CAPGO_KEEP_0__

  1. 确认 webClientId 是Web应用程序客户端ID,结尾为 .apps.googleusercontent.com.
  2. 运行应用程序,重现故障,并阅读Logcat以获取 GoogleProvider, signingSha1=, 和 package=.
  3. Google Cloud Console > Credentials,打开您的Android OAuth客户端并验证exact包名和SHA-1。
  4. 如果测试发布版,请注册该版本的SHA-1,而不是仅限调试keystore。
  5. 如果应用程序通过Play Store分发,也注册Play App Signing SHA-1。
  6. 确保Web和Android客户端位于同一个Google Cloud项目中。
  7. 如果consent屏幕处于测试状态,请确认Google账户是测试用户。
  8. 等待并在控制台更改后重试。

USER_CANCELLED 在一个配置错误的调试构建中选择一个账户后,仍然可能出现 SHA-1 或客户端 ID 匹配问题。首先修复控制台设置。

从安装的构建中提取 SHA-1

从安装的构建中提取 SHA-1

调试或本地构建:

终端窗口
cd android && ./gradlew signingReport

签名的发布 APK:

终端窗口
keytool -printcert -jarfile android/app/release/app-release.apk

将该 SHA-1 添加到与包名匹配的 Android OAuth 客户端中,重新安装相同的签名 APK,然后再次测试:

终端窗口
adb install android/app/release/app-release.apk

读取登录结果

标题:读取登录结果

在此处找到 result:

const login = await SocialLogin.login({ provider: 'google' });
const idToken = login.result?.idToken;

对于 Firebase Auth,请使用以下凭据创建凭据 idToken 并使用 Web 客户端 ID 作为 webClientIdinitialize.

如果您无法获取开发 SHA-1 证书,请尝试自定义 keystore。 此问题评论 解释了如何将 keystore 添加到您的项目中。

继续从 Android Google 登录

标题:继续从 Android Google 登录

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