简介
angular5-social-auth2 是一个 Angular 5.x 包，可用于在 Web 应用程序中轻松添加社交认证功能。该包支持通过 Facebook、Google、LinkedIn、Microsoft 和 Twitter 登录，使用户能够使用他们喜欢的社交媒体帐户登录应用程序。本文将为读者详细介绍如何使用 angular5-social-auth2 包，以便于在自己的 Web 应用程序中集成社交认证功能。
安装
angular5-social-auth2 包可以通过 NPM 安装。在项目中安装该包之前，确保已经安装了 Angular 5.x 和 Angular CLI。在项目根目录下运行以下命令：
npm install angular5-social-auth2
配置
在使用 angular5-social-auth2 包之前，需要进行一些配置步骤。具体来说，需要在 Web 应用程序中创建社交媒体应用程序，并在将 angular5-social-auth2 包集成到应用程序中时提供相关社交媒体平台的 API 凭证。
要使用 Facebook 登录，需要在 Facebook 开发者网站上创建一个应用程序。创建应用程序后，在“设置”选项卡中找到“应用程序 ID”和“应用程序密钥”（也称为“应用程序密码”或“客户端密钥”）。将这些凭据添加到应用程序环境文件（例如“environment.ts”）中，例如：
export const environment = {
production: false,
facebookAppId: '1234567890123456',
facebookAppSecret: 'abcdefghijklmnopqrstuvwxyz'
};要使用 Google 登录，需要在 Google API 控制台中创建一个新的项目，并为此项目启用 Google 登录 API。启用 API 后，需要创建凭据以供应用程序使用。在“凭据”选项卡中创建 OAuth 客户端 ID，并选择“网络应用程序”作为应用程序类型。在“授权 JavaScript 来自以下来源的 JavaScript 压缩文件”文本框中填入以逗号分隔的 Web 应用程序域名。将生成的“客户端 ID”和“客户端密码”添加到应用程序环境文件中，例如：
export const environment = {
production: false,
googleClientId: '1234567890123456abcdefghijklm.apps.googleusercontent.com',
googleClientSecret: 'abcdefghijklmnopqrstuvwxyz'
};要使用 LinkedIn 登录，需要在 LinkedIn 开发者中心中注册一个新的应用程序。注册应用程序后，需要验证域名，并设置 OAuth 2.0 客户端凭据。将客户端凭据添加到应用程序环境文件中，例如：
export const environment = {
production: false,
linkedinClientId: '1234567890abcdefghij',
linkedinClientSecret: 'abcdefghijklmnopqrstuvwxyz'
};Microsoft
要使用 Microsoft 登录，需要注册 Azure 新应用程序。在注册应用程序后，需要为其添加授权并创建一个客户端 ID。将此客户端 ID 添加到应用程序环境文件中，例如：
export const environment = {
production: false,
microsoftClientId: '12345678-90ab-cdef-ghij-klmnopqrstuv',
microsoftClientSecret: 'abcdefghijklmnopqrstuvwxyz'
};要使用 Twitter 登录，需要创建一个新的 Twitter 应用程序。创建应用程序后，需要将应用程序的 OAuth 1.0a 凭据添加到应用程序环境文件中，例如：
export const environment = {
production: false,
twitterConsumerKey: 'abcdefghijk',
twitterConsumerSecret: 'uvwxyz1234567890ABCDEFGHIJKLMNOPQ'
};请注意，Twitter Developer 账户需要进行验证，并且可能需要等待几天才能获得 OAuth 1.0a 凭据。在获得凭据后，应将其视为私有信息，并妥善保管。
使用
使用 angular5-social-auth2 包非常简单。要使用此包，需要在应用程序的模块中导入 SocialLoginModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------------- - ---- ------------------------
-----------
-------- -
-------------
------------------------------------------
--
------------- --- ---------- ----
-------- --- ---------- ---
--
------ ----- --------- - -在导入 SocialLoginModule 时，应同时初始化各种社交应用程序平台，并在初始化时提供平台所需的应用程序凭据和其他设置。具体来说，应在初始化时传递包含应用程序 ID和密钥的对象，如下所示：
SocialLoginModule.initialize(environment);
现在，在组件中，可以使用 SocialAuthService 服务来执行社交登录操作。语法如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ ---------------------- ------------------- - ---- ------------------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------- -
------- ------------------ ------------------
------------------------------ ------------------ -
---------------------- - ------------------
-
------ ---------------- ---- -
-----------------------------------------------------------------
-
------ -------------- ---- -
---------------------------------------------------------------
-
-在组件的构造函数中，将 SocialAuthService 服务注入到组件中。在登录按钮的点击事件处理程序方法中，可以使用 SocialAuthService.signIn 方法来启动社交登录流程。根据需要，可以选择为 signIn 方法提供 PROVIDER_ID 常量。默认情况下，如果未提供 PROVIDER_ID，则使用应用程序环境中定义的默认值。
一旦用户进行了社交登录，SocialAuthService 服务将发出名为“socialLogin”的事件，可以通过订阅该事件来获取有关用户登录的详细信息：
this.socialAuthService.authState.subscribe(
(user) => {
console.log('User connected:', user);
}
);这些信息包括来自社交媒体平台的基本信息、唯一标识符和用于存储在应用程序数据库中的其他信息。
示例
以下是一个演示如何使用 angular5-social-auth2 包从 Facebook 登录并访问用户详细信息的示例应用程序组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ --------------------- - ---- ------------------------
------------
--------- --------------------
--------- -
------- ----------------------------- -- ---- -----------------
-- ------------------ -- --------- ------
-
--
------ ----- --------------------- -
------- ------------------ ------------------
------ ----- ----
------------------------------ ------------------ -
---------------------- - ------------------
-
------ ---------------- ---- -
----------------------------------------------------------------
---------------- ---- -- -
--------- - ---------
---
-
-此代码提供了一个按钮，当用户单击它时会调用 facebookLogin 方法。该方法使用 SocialAuthService.signIn 方法启动 Facebook 登录流程。如果登录成功，SocialAuthService.signIn 会返回一个承诺，该承诺解析为有关用户的信息。这些信息存储在 user 属性中，并在用户界面中显示。如果登录不成功，则 user 属性将设置为 null。
总结
本文为读者介绍了如何使用 angular5-social-auth2 包在 Angular 5.x Web 应用程序中添加社交认证功能。读者可以使用此包轻松添加 Facebook、Google、LinkedIn、Microsoft 和 Twitter 登录功能。本文重点介绍了如何配置每个社交媒体平台的 API 凭据，并提供了一个示例应用程序组件，演示了如何使用 SocialAuthService 服务进行社交登录并访问用户信息。读者可以通过此示例代码和本文所提供的指南来了解如何集成社交认证功能到其自己的 Angular 应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5951ab1864dac66e5c