Web 端 Google Login

复制一条配置 prompt，包含安装步骤和该插件的完整 Markdown 指南。

简介

在本指南中，你将学习如何使用 Capgo Social Login 为 Web 应用设置 Google Login。我假设你已经阅读过通用设置指南.

在 Web 端使用 Google Login 相当简单。要使用它，你需要执行以下操作：

在 Google Console 中创建 Web 客户端

如果你已经为 Android 配置过 Google Login，可以跳过此步骤，因为你已经创建过 Web 客户端。你可以直接进入第 2 步。
1. 点击搜索栏
2. 搜索 credentials 然后点击 APIs and Services 选项（如截图中的第 2 项）
3. 点击 create credentials
4. 选择 OAuth client ID
5. 选择 Application type 作为 Web application
6. 为您的客户端命名并点击 Create
7. 复制 Client ID，稍后将作为 webClientId 在您的应用程序中使用
在 Google Console 中配置 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

现在，你就可以在 JavaScript 中调用 login 了，如下所示：

首先，导入 SocialLogin

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

然后，调用 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 登录时，你必须在发生重定向时调用插件中的任意函数来初始化插件，以便其处理重定向并关闭弹出窗口。你可以调用 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
});

创建一个登录按钮，并在点击时调用 SocialLogin.login when clicked

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

如果你正在使用 Web 端 Google Login 规划身份验证和账户流程，并将它与使用 @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 中的实现细节，以及双重身份验证了解双因素认证中的实现细节。

Web 端 Google Login

简介

在 Web 端使用 Google Login

在 Web 端继续使用 Google Login