Google 登录 Web

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

介绍

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

使用 Google 登录（Web）非常简单。为了使用它，您需要完成以下步骤：

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

如果您已经为 Android 配置了 Google 登录，则可以跳过此步骤，因为您已经创建了一个 Web 客户端。您可以直接跳到步骤 2。
1. 点击搜索栏
2. 搜索 credentials 并点击选项（截图中的第 2 项） APIs and Services 显示 API 和服务的搜索结果，凭据选项高亮
3. 点击 Google 控制台中的 create credentials
4. 选择 OAuth client ID
5. 选择 Application type 作为 Web application
6. 为您的客户端命名并点击 Create
7. 复制客户端 ID，您将在应用程序中使用它 webClientId 在应用程序中使用的客户端 ID详细信息显示 Web 客户端 ID
配置 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 再次
4. 点击 save

现在，您应该准备好从JavaScript中调用 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 当单击时，

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-social-login的实现细节使用@capgo/capacitor-passkey 为@capgo/capacitor-passkey的实现细节 capgo/capacitor-native-biometric capgo/capacitor-native-biometric 双因素认证双因素认证

Google 登录 Web

介绍

在Web上使用Google登录

继续使用Google Web登录