网页 Google 登录

介绍

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

Section titled “使用 Google 登录”

在 web 上使用 Google 登录相当简单。为了使用它，您必须执行以下步骤：

注意
1. 如果您已经为 Android 配置了 Google 登录，则可以跳过此步骤，因为您已经创建了 web 客户端。您可以直接跳到步骤 2。
2. 在搜索框中 credentials 并点击截图中第 2 个选项 APIs and Services 截图中显示的凭据选项
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，但由于我使用自定义端口，因此我必须添加两个 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 首先，导入

复制到剪贴板 SocialLogin

import { SocialLogin } from '@capgo/capacitor-social-login';

复制到剪贴板

// 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
});

创建一个登录按钮，当点击时调用 SocialLogin.login 复制到剪贴板

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

网页 Google 登录

介绍

general setup 指南