Google 提供了许多 API，其中就包括 Google 登录 API。通过 Google 登录 API，我们可以获取到用户的 Google 账号信息，甚至可以获得用户的 Gmail 联系人信息。为了方便前端开发者使用 Google 登录 API，有人开发了一个 npm 包叫做 google-login，它是一个带有完整文档的简单且易于使用的 Google 登录模块。
安装
使用 npm 安装：
--- ------- ------------
使用 yarn 安装：
---- --- ------------
如何使用
我们先来看一下 google-login 及其 API 的文件结构：
-------------
--- ---------
--- ------------
--- ---
--- --------------
--- --------------------
--- ---------------GoogleLogin.js：Google 登录功能的实现。GoogleLoginButton.js：一个简单的组件，用于在您的应用程序中添加一个 Google 登录按钮。GoogleLogout.js：Google 登出功能的实现。
接下来，我们将介绍如何使用这些 API。
步骤 1：创建一个 Google API 项目
首先，您需要前往Google API Console创建一个项目。在左上角的下拉菜单里，选择“新建项目”，然后输入项目名称。在“创建”按钮旁边的下拉菜单中，选择“Google API 项目”，然后点击“创建”。
在“API 和服务”页面，单击“启用 API 和服务”按钮并搜索“Google+ API”，单击“启用”。然后，返回“API 和服务”页面并搜索“Google 身份验证 API”，在搜索结果中单击“Google 身份验证 API”，然后单击“启用”。
现在，在“API 和服务”页面上，单击“凭据”。在“凭据”页面中，单击“创建凭据”并选择“OAuth 客户端 ID”。然后，在“OAuth 客户端 ID”页面上，选择“网络应用程序”，在“已授权的 JavaScript 对源”文本框中输入您的域名和端口。例如，如果您的域名和端口是“localhost:3000”，则输入“http://localhost:3000”。在“已授权的重定向 URI”文本框中输入重定向 URI，例如“http://localhost:3000/google/callback”。最后，单击“创建”。
现在，您已经拥有了一个客户端 ID 和客户端密码。请记下这些信息，因为您将在下面的步骤中使用它们。
步骤 2：使用 GoogleLogin 模块
在您的代码中引入 GoogleLogin 模块：
------ - ----------- - ---- ---------------
您可以传递以下参数：
clientId：您的 OAuth2 客户端ID。onSuccess：成功登录 Google 账号时的回调函数。onFailure：登录失败时的回调函数。
------ - ----------- - ---- ---------------
----- ----------------- - -- -- -
----- --------- - ------ -- -
-------------------- ----------
--
----- --------- - ------- -- -
------------------ -----------
--
------ -
------------
-------------------------
---------------------
---------------------
------------------
-----------------------------------
-----------------
--
--
--
------ ------- ------------------步骤 3：创建一个 Google 登录按钮
------ ----- ---- --------
------ ----------- ---- ---------------
----- ----------------- - -- -- -
----- --------- - ------ -- -
-------------------- ----------
--
----- --------- - ------- -- -
------------------ -----------
--
------ -
------------
-------------------------
---------------------
---------------------
------------------
-----------------------------------
-----------------
--
--
--
------ ------- ------------------通过这个按钮用户可以使用 Google 账号登录您的应用程序。
步骤 4：获取 Google 账户信息
在您的 onSuccess 回调函数中，您可以获得用户的 Google 账户信息：
----- --------- - ------ -- - ------------------ ------------------------ --- --- ------ -- ------- -- ------------ ------------------------- --------------------- --------------------- ------------------ ----------------------------------- ----------------- --
通过 profileObj 属性，您可以将用户的 Google 账户信息呈现出来。
总结
恭喜您成功地学会了如何在您的应用程序中使用 npm 包 google-login 实现 Google 账户的登录和登出。这个包非常简单易用，如果您想更深入了解它的实现原理，可以参考其源代码。希望这篇文章有助于您的前端开发工作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/82364