Google 登录

介绍

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

在 web 上使用 Google 登录

在 web 上使用 Google 登录

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

   注意

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

   1. 点击搜索栏

      

   2. 在搜索结果中 credentials 并点击 APIs and Services 选项（截图中的第 2 个选项）

      

   3. 点击 create credentials

      

   4. 选择 OAuth client ID

      

   5. 选择 Application type 作为 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. 请输入您的 URL

         

      3. 请继续添加所有 URL

      4. 完成后，屏幕应该类似于以下内容

         

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

      1. 请点击 ADD URI

         

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

         

   4. 点击 save

      

3. 现在，您应该准备好调用 login 从 JavaScript 一样：

   1. 首先，导入 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() - both 会触发重定向处理:

   // 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', ... }) 当点击时，创建一个登录按钮，调用

   3. 复制到剪贴板 SocialLogin.login 继续从 Google 登录

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

继续从 Google 登录

如果您正在使用 Google Web 登录 来规划身份验证和帐户流程，连接它与 使用 @capgo/capacitor-social-login 为在使用 @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 的实现细节，和 双重验证 双重验证实现细节。