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. 本例中应该包括您应用程序中可能使用的所有地址。在我的情况下，我只会使用localhost，但由于我使用自定义端口，因此必须添加两个 ONLY 请点击 http://localhost Authorized JavaScript origins 部分的 ADD URI 按钮 http://localhost:5173
  1. 请在 URL 框中输入您的 URL add URI
  2. 请重复添加所有 URL
  3. 已授权的 JavaScript 源，包含多个 localhost URL
  4. 现在，请添加一些
3. Now, please add some 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 登录 来规划身份验证和帐户流程，连接它 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 登录继续