Google 登录

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

介绍

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

使用 Google 登录于 web 中相当简单。为了使用它，您必须遵循以下步骤：

在 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. 为您的客户端命名并点击 webClientId Web 客户端创建表单中名称字段突出显示
在 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. 已授权的重定向 URI 部分添加 URI 按钮 ADD URL 输入您的 URL 并单击
4. 点击 save

现在，你应该准备好像这样调用 login 从JavaScript中像这样调用：

首先，导入 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));

如果您正在使用 Google 登录（Web） 来规划身份验证和帐户流程，连接它到使用 @capgo/capacitor-social-login 为本地能力的 native 能力在使用 @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上使用Google登录

从 Google 登录（Web）继续