如何添加 Google 社交登录按钮 - Javascript (1)

📌 相关文章

📜 如何添加 Google 社交登录按钮 - Javascript (1)

📅 最后修改于: 2023-12-03 15:09:12.656000 🧑 作者: Mango

如何添加 Google 社交登录按钮 - Javascript

如果你正在开发一个 Web 应用程序，并想让你的用户通过 Google 登录，那么你会需要添加 Google 社交登录按钮。这可以通过使用 Google API 完成。在本篇文章中，我们将介绍如何添加 Google 社交登录按钮并使用 Javascript 调用 Google API。

步骤

步骤1：创建 Google API Console 项目

首先，你需要创建一个 Google API Console 项目。为此，请遵循以下步骤：

转到 Google API Console。
选择或创建一个项目。
在左侧导航菜单中，选择“凭据”。
点击“创建凭据”按钮并选择“OAuth 客户端 ID”。
选择应用类型为“Web 应用程序”。
输入一个名称。
在“已授权的 JavaScript 来源”字段中，输入你的应用程序的 URL。
在“已授权的重定向 URI”字段中，输入授权后 Google 将会回调的 URL。例如：https://yourapp.com/callback.

步骤2：添加 Google 社交登录按钮

在 HTML 文件中，插入以下代码：

<button onclick="googleLogin()">Google Sign-in</button>

这将创建一个按钮，当单击它时，将调用 googleLogin 函数。

在 Javascript 文件中，引用 Google API 库并定义 googleLogin 函数。代码如下：

<script src="https://apis.google.com/js/platform.js" async defer></script>

<script>
function googleLogin() {
  gapi.auth2.getAuthInstance().signIn().then(onSuccess, onError);
}

function onSuccess(googleUser) {
  // 处理登录成功的逻辑
  console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
}

function onError(error) {
  // 处理登录失败的逻辑
  console.log(error);
}
</script>

以上代码：

在 HTML 文件中，引用了 Google API 库。该库的作用是为了提供 'gapi' 对象，它可以用来调用 Google API。
创建了 googleLogin 函数。该函数的作用是调用 'gapi.auth2.getAuthInstance().signIn()'，这将打开一个 Google 登录窗口。登录成功后，将调用 onSuccess 函数；登录失败后，将调用 onError 函数。
创建了 onSuccess 和 onError 函数。在这些函数中，你可以处理登录成功或失败的逻辑。

步骤3: 授权应用程序

完成以上步骤后，你需要调用 Google 授权服务器来授权你的应用程序访问用户的 Google 帐户。请按照以下步骤进行操作：

调用 gapi.auth2.init 初始化 gapi 对象：

    gapi.auth2.init({
      client_id: 'YOUR_CLIENT_ID'
    });

在 HTML 文件中，添加 "meta" 标签来指定要请求的权限：

  <head>
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
  </head>

步骤4：测试应用程序

完成以上步骤后，你的 Google 社交登录按钮将会在你的应用程序中工作。你可以测试你的应用程序并验证是否可以使用 Google 登录。