Google 网页登录

简介

在本指南中，您将了解如何为 Web 应用程序设置 Google 使用 Capgo 社交登录登录。我假设您已经阅读了一般设置指南。

使用 Google 在网络上登录

在网络上使用谷歌登录相当简单。为了使用它，您必须执行以下操作：

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

:::注意如果您已经为 Android 配置了 Google 登录，则可以跳过此步骤，因为您已经创建了 Web 客户端。您可以直接进行步骤 2。 :::
1. 点击搜索栏
2. 搜索 credentials 并单击“API 和服务”选项（屏幕截图中的数字 2）
3. 单击“创建凭据”
4. 选择OAuth client ID
5. 选择“应用程序类型”为“Web 应用程序”
6. 为您的客户命名并点击 Create
7. 复制客户端 ID，您将在应用程序中使用它作为 webClientId
在 Google 控制台中配置 Web 客户端
1. 请打开凭据页面并单击您的网络客户端
2. 现在，请添加 Authorized JavaScript origins。这应该包括您的应用程序可能使用的所有地址。在可能的情况下，我将仅使用 localhost，但由于我使用自定义端口，我必须添加 http://localhost 和 http://localhost:5173
  1. 请点击“添加URI”
  2. 请输入您的网址
  3. 请重复，直到添加所有 URL
  4. 完成后，您的屏幕应如下所示
3. 现在，请添加一些“授权重定向 URI”。这将取决于您依赖哪个页面来使用 CapacitorSocialLogin 插件。就我而言，我将在 http://localhost:5173/auth 上使用它
  1. 请点击“添加 URI”
  2. 输入您的 URL，然后再次单击“添加 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',
   }
 })
})

:::注意[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));