如果你正在开发一个 Web 应用，而且想增加 Google 账号的登录支持，那么你需要使用一个称为 ngx-google-sign-in 的 npm 包。使用这个包，你可以快速简单地集成 Google Sign-In 功能到你的应用，允许用户使用其 Google 帐户进行身份验证。
安装
使用 npm 安装 ngx-google-sign-in:
--- ------- ------------------ ------
配置
在你的应用中的 app.module.ts 文件中导入 NgxGoogleSignInModule 模块。
------ - -------- - ---- ----------------
------ - --------------------- - ---- ---------------------
-----------
------------- --- --- ----
-------- -
-- --- --
-------------------------------
--------- -----------------
----------- ----
---
--
---------- --- --- ----
---------- --- --- ---
--
------ ----- --------- - -在这里，你需要设置你的 Google API 客户端 ID。你可以在 Google 开发者控制台中创建项目并添加 OAuth2 客户端 ID。
使用
在你的组件类中导入 NgxGoogleSignInService 并注入它，然后调用 signIn 方法。
------ - --------- - ---- ----------------
------ - ---------------------- - ---- ---------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - ---------
------------------- -------------------- ----------------------- --
-------- -
---------------------------------
---------- -- -------------------
-
-在这里，我们在组件类中创建一个 signIn 方法，调用 NgxGoogleSignInService 的 signIn 方法，并处理返回的 Promise。这个 Promise 解析后，我们可以打印用户信息到控制台中。
示例代码
------ - --------- - ---- ----------------
------ - ----------------------- ------------------- - ---- ---------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - ---------
----- ----
------------------- -------------------- ----------------------- --
-------- -
---------------------------------
---------------- -------------------- -- -
----------------------
--------- - ---------------------
---
-
--------- -
-----------------------------------
--------- - -----
-
-------------- -
----------------------------------------
--------- - -----
-
-------- ------------------ ------------------ ----------- ------- ------------------- ----------------- ------------ ------- ------------------------ ------------------- --------------- ---- ------------- ----------- -- --------- -------- ---- ------- ---------- --- ------- ------
这个例子中，我们在模板中使用了 *ngIf 指令，根据用户是否已登录来显示或隐藏不同的按钮。点击 "Sign In" 按钮会触发 signIn 函数，如果登录成功，它会将用户信息存储在组件中，并在页面上显示。点击 "Sign Out" 按钮，会调用 signOut 函数，清除用户信息并注销登录。点击 "Revoke Access" 按钮，调用 revokeAccess 函数，撤销应用的授权。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005600f81e8991b448ddec4