Google 登录 Web

介绍

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

在Web上使用Google登录

使用 Google 登录于 web 相对简单。 为了使用它，您必须完成以下步骤：

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

   注意

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

   1. 点击搜索栏

      

   2. 搜索 credentials 并点击选项（截图中的第 2 项） APIs and Services 显示凭据选项的搜索结果，APIs 和 Services 高亮

      

   3. 点击 Google Console create credentials

      

   4. 选择 OAuth client ID

      

   5. 选择 Application type 作为 Web application

      

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

      

   7. 复制客户端 ID，您将在应用程序中使用 webClientId 在应用程序中使用的客户端 ID 详情，显示 Web 客户端 ID

      

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 重定向处理

   当使用 Google 登录时，在 Web 上，您 必须 在重定向发生时，调用插件中的任何函数以初始化插件，使其可以处理重定向并关闭弹出窗口。您可以调用任意一个 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', ... }) 创建一个登录按钮，单击时调用

   3. __CAPGO_KEEP_0__ SocialLogin.login __CAPGO_KEEP_1__

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

继续使用 Google Web 登录

如果您正在使用 Google Web 登录 来规划身份验证和帐户流程，连接它到 使用 @capgo/capacitor 社交登录 为 @capgo/capacitor 社交登录 的本地能力 使用 @capgo/capacitor 社交登录 为 @capgo/capacitor 社交登录 的实现细节 使用 @capgo/capacitor Passkey 为 @capgo/capacitor Passkey 的实现细节 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric 双因素认证 双因素认证