Google 登录 Web

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

介绍

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

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

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

如果您已经为 Android 配置了 Google 登录，则可以跳过此步骤，因为您已经创建了一个 web 客户端。您可以直接跳到步骤 2。
1. 点击搜索栏
2. 搜索 credentials 并点击选项（截图中的第 2 项） APIs and Services 显示 API 和服务的搜索结果，凭据选项高亮
3. 点击 Google Console create credentials
4. 选择 OAuth client ID
5. 选择 Application type 作为 Web application
6. 为您的客户端命名并点击 Create
7. 复制客户端 ID，您将其用作 webClientId 在您的应用中
配置 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 添加 URI 对话框中的重定向 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',
   }
 })
})

当使用 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
});

__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 登录 来规划身份验证和帐户流程，连接它到使用 @capgo/capacitor-social-login 使用 @capgo/capacitor-social-login 使用 @capgo/capacitor-social-login 使用 @capgo/capacitor-passkey 使用 @capgo/capacitor-passkey 继续使用 @capgo/capacitor-social-login @capgo/capacitor-native-biometric 在 @capgo/capacitor-native-biometric 中的实现细节双因素认证双因素认证的实现细节

Google 登录 Web

介绍

使用 Google 登录

继续使用 Google Web 登录