Google登录

简介

在本指南中，您将学习如何为 Web 应用程序设置 Google 登录和 Capgo 社交登录。 一般设置指南.

使用 Google 登录

使用 Google 登录在 Web 上相当简单。 为了使用它，您必须执行以下步骤：

1. 在 Google 控制台中创建 Web 客户端

   注意

   如果您已经为 Android 配置了 Google 登录，跳过此步骤，因为您已经创建了一个 Web 客户端。您可以直接跳到步骤 2。

   1. 点击搜索栏

      

   2. 搜索 credentials 并点击屏幕截图中的选项 (第 2 项) APIs and Services 显示 API 和服务高亮的凭据选项的搜索结果

      

   3. 创建凭据按钮 create credentials

      

   4. Select OAuth client ID

      

   5. 选项 Application type as Web application

      

   6. 命名您的客户并点击 Create

      

   7. 复制客户ID，您将其用作 webClientId 在您的应用

      

2. 在Google控制台中配置Web客户端

   1. 请打开 凭证页面 并点击您的Web客户端

      

   2. 现在，请添加 Authorized JavaScript origins。这应该包括您应用程序中使用的所有地址。在我的情况下，我将 仅使用 localhost，但由于我使用自定义端口，因此必须添加 http://localhost 和 http://localhost:5173

      1. 请单击 add URI

         

      2. 请在

         

      3. 请重复直到您添加了所有 URL

      4. 完成后，您的屏幕应该看起来像这样

         

   3. 现在，请添加一些 Authorized redirect URIs这将取决于您要在哪个页面使用CapacitorSocialLogin插件。在我的情况下，我将在 http://localhost:5173/auth

      1. 请点击 ADD URI

         

      2. 输入您的URL并点击 ADD URL 再次

         

   4. 点击 save

      

3. 现在，您应该准备好从JavaScript中调用 login 首先，导入

   1. import SocialLogin

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

   2. 然后，调用initialize。 这应该只被调用一次。

      // 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',
         }
       })
      })

   Web 重定向处理

   当在 web 上使用 Google 登录时，您必须 必须 在重定向发生时调用该插件中的任何函数以初始化该插件，使其可以处理重定向并关闭弹出窗口。 您可以调用 isLoggedIn() 或 initialize() - 两者都会触发重定向处理：

   // Option 1: Call isLoggedIn when the redirect page loads
   SocialLogin.isLoggedIn({ provider: 'google' }).catch(() => {
     // Ignore the result, this is just to initialize the plugin
   });
   
   // Option 2: Call initialize when the redirect page loads
   SocialLogin.initialize({
     google: {
       webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
     }
   }).catch(() => {
     // Ignore any errors, this is just to handle the redirect
   });

   注意

   在 Web 上 SocialLogin.refresh({ provider: 'google' }) 即使使用 google.mode: 'online'也没有实现。如果您需要在 Web 上获取一个新的 Google token，请再次调用 SocialLogin.login({ provider: 'google', ... }) again.

   3. 复制到剪贴板 SocialLogin.login 从 Google Login on Web 继续

      const res = await SocialLogin.login({
       provider: 'google',
       options: {}
      })
      // Handle the response
      console.log(JSON.stringify(res));

如果您正在使用

Google Web 为了计划身份验证和帐户流程，连接它 使用@capgo/capacitor-social-login 为@capgo/capacitor-social-login的本机能力 @capgo/capacitor-社交登录 为@capgo/capacitor-social-login的实现细节 @capgo/capacitor-二步验证密钥 为@capgo/capacitor-passkey的实现细节 @capgo/capacitor-native-生物识别 为@capgo/capacitor-native-biometric的实现细节，并 双因素身份验证 为双因素身份验证的实现细节。