Google登录（Web）

复制一个包含安装步骤和本插件的完整 Markdown 指南的配置提示。

介绍

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

标题为“在 Web 上使用 Google 登录”的部分

在 Web 上使用 Google 登录相当简单。

注意事项
1. 点击搜索栏
2. 搜索 credentials 并点击 APIs and Services 选项（截图中的第 2 个选项）
3. 点击 create credentials
4. 选择 OAuth client ID
5. 选择 Application type 作为 Web application
6. 命名您的客户端并点击 Create
7. 复制客户端ID，您将其用作 webClientId 在您的应用中
在Google控制台中配置Web客户端
1. 请打开凭证页面并点击您的Web客户端
2. 现在，请添加 Authorized JavaScript origins. 本地地址应该包括您应用程序可能使用的所有地址。在我的情况下，我只会 ONLY 使用localhost，但由于我使用自定义端口，因此必须添加两者 http://localhost 和 http://localhost:5173
  1. 请单击 add URI
  2. 请在 URL 框中输入您的 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
});

Create a login button that calls SocialLogin.login 复制到剪贴板

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

Google 登录在 Web 上 来规划身份验证和帐户流程，连接它 to plan authentication and account flows, connect it with 使用 @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, 和双因素认证为实现细节在双因素认证.

Google登录（Web）

介绍

通用设置指南

标题：从 Web 上的 Google 登录继续