npm 包 angular5-social-auth2 使用教程

简介

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。在项目根目录下运行以下命令：

--- ------- ---------------------

配置

在使用 angular5-social-auth2 包之前，需要进行一些配置步骤。具体来说，需要在 Web 应用程序中创建社交媒体应用程序，并在将 angular5-social-auth2 包集成到应用程序中时提供相关社交媒体平台的 API 凭证。

Facebook

要使用 Facebook 登录，需要在 Facebook 开发者网站上创建一个应用程序。创建应用程序后，在“设置”选项卡中找到“应用程序 ID”和“应用程序密钥”（也称为“应用程序密码”或“客户端密钥”）。将这些凭据添加到应用程序环境文件（例如“environment.ts”）中，例如：

------ ----- ----------- - -
  ----------- ------
  -------------- -------------------
  ------------------ ----------------------------
--

Google

要使用 Google 登录，需要在 Google API 控制台中创建一个新的项目，并为此项目启用 Google 登录 API。启用 API 后，需要创建凭据以供应用程序使用。在“凭据”选项卡中创建 OAuth 客户端 ID，并选择“网络应用程序”作为应用程序类型。在“授权 JavaScript 来自以下来源的 JavaScript 压缩文件”文本框中填入以逗号分隔的 Web 应用程序域名。将生成的“客户端 ID”和“客户端密码”添加到应用程序环境文件中，例如：

------ ----- ----------- - -
  ----------- ------
  --------------- -----------------------------------------------------------
  ------------------- ----------------------------
--

LinkedIn

要使用 LinkedIn 登录，需要在 LinkedIn 开发者中心中注册一个新的应用程序。注册应用程序后，需要验证域名，并设置 OAuth 2.0 客户端凭据。将客户端凭据添加到应用程序环境文件中，例如：

------ ----- ----------- - -
  ----------- ------
  ----------------- -----------------------
  --------------------- ----------------------------
--

Microsoft

要使用 Microsoft 登录，需要注册 Azure 新应用程序。在注册应用程序后，需要为其添加授权并创建一个客户端 ID。将此客户端 ID 添加到应用程序环境文件中，例如：

------ ----- ----------- - -
  ----------- ------
  ------------------ ---------------------------------------
  ---------------------- ----------------------------
--

Twitter

要使用 Twitter 登录，需要创建一个新的 Twitter 应用程序。创建应用程序后，需要将应用程序的 OAuth 1.0a 凭据添加到应用程序环境文件中，例如：

------ ----- ----------- - -
  ----------- ------
  ------------------- --------------
  ---------------------- -----------------------------------
--

请注意，Twitter Developer 账户需要进行验证，并且可能需要等待几天才能获得 OAuth 1.0a 凭据。在获得凭据后，应将其视为私有信息，并妥善保管。

使用

使用 angular5-social-auth2 包非常简单。要使用此包，需要在应用程序的模块中导入 SocialLoginModule：

------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------------- - ---- ------------------------

-----------
  -------- -
    -------------
    ------------------------------------------
  --
  ------------- --- ---------- ----
  -------- --- ---------- ---
--
------ ----- --------- - -

在导入 SocialLoginModule 时，应同时初始化各种社交应用程序平台，并在初始化时提供平台所需的应用程序凭据和其他设置。具体来说，应在初始化时传递包含应用程序 ID和密钥的对象，如下所示：

------------------------------------------

现在，在组件中，可以使用 SocialAuthService 服务来执行社交登录操作。语法如下：

------ - --------- - ---- ----------------
------ - ------------------ ---------------------- ------------------- - ---- ------------------------

------------
  --------- -----------
  ------------ -----------------------
--
------ ----- ------------- -
  ------- ------------------ ------------------

  ------------------------------ ------------------ -
    ---------------------- - ------------------
  -

  ------ ---------------- ---- -
    -----------------------------------------------------------------
  -

  ------ -------------- ---- -
    ---------------------------------------------------------------
  -
-

在组件的构造函数中，将 SocialAuthService 服务注入到组件中。在登录按钮的点击事件处理程序方法中，可以使用 SocialAuthService.signIn 方法来启动社交登录流程。根据需要，可以选择为 signIn 方法提供 PROVIDER_ID 常量。默认情况下，如果未提供 PROVIDER_ID，则使用应用程序环境中定义的默认值。

一旦用户进行了社交登录，SocialAuthService 服务将发出名为“socialLogin”的事件，可以通过订阅该事件来获取有关用户登录的详细信息：

-------------------------------------------
  ------ -- -
    ----------------- ------------ ------
  -
--

这些信息包括来自社交媒体平台的基本信息、唯一标识符和用于存储在应用程序数据库中的其他信息。

示例

以下是一个演示如何使用 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

阅读全文

猜你喜欢

  • npm 包 c4webservice 使用教程

    在前端开发中，我们经常需要使用后台服务接口。而在 Node.js 环境中，有一个强大的包管理工具 npm，通过 npm 包我们可以方便地使用各种接口库。其中，c4webservice 是一款常用的 W...

    3 年前
  • npm 包 rodys-cp 使用教程

    在前端开发中，常常需要进行文件复制、剪切、删除等操作。npm 中有很多工具包可以实现这些操作，而 rodys-cp 是其中一个简单易用的包，能够实现复制和剪切文件的功能。

    3 年前
  • npm 包 remembera 使用教程

    前言 在前端开发中，我们经常会使用各种 npm 包，这些包能够大大提高我们的开发效率。其中，remembera 这个 npm 包可以帮助我们实现数据持久化，让我们的应用程序更加稳定。

    3 年前
  • NPM包cordova-plugin-redhatcat-imagepicker使用教程

    简介 Cordova-plugin-redhatcat-imagepicker是一个为Cordova和Ionic框架提供支持的NPM包，其主要功能是方便地从设备相册或相机中选择和获取图像。

    3 年前
  • npm包react-progressive-list-typescript使用教程

    简介 react-progressive-list-typescript是一个React组件库，用于构建大数据量列表和表格。与大多数React列表和表格组件不同，此组件库专注于性能。

    3 年前
  • npm包@waynecz/ui-recorder使用教程

    前言 在前端领域，我们经常需要测试自己的代码，尤其是在研发自己的UI组件库时，我们需要对组件的功能进行测试。通常，我们会使用录制工具来模拟用户对组件的操作行为。在此，我们为大家介绍一款npm包@way...

    3 年前
  • npm 包 chartjs-chart-radial-gauge 使用教程

    前言 在前端开发中，常常需要使用图表来展示数据，而 Chart.js 是一款优秀的图表库，它简单易用，支持多种类型的图表。而本文介绍的 npm 包 chartjs-chart-radial-gauge...

    3 年前
  • npm 包 Webshot-factory 使用教程

    前言 在 Web 开发中，我们经常需要将网页转换为图片或 PDF 文件。原生 JavaScript 并不能直接完成这项任务，但我们可以使用 npm 包 Webshot-factory 来帮助我们，该 ...

    3 年前
  • npm 包 graphql-to-sql 使用教程

    简介 graphql-to-sql 是一款基于 Node.js 的 npm 包，它的功能是将 GraphQL 查询语句转换为 SQL 语句。这个包的出现使得前端开发在使用 GraphQL 时，不再需要...

    3 年前
  • npm 包 fluent-grapesjs 使用教程

    在前端开发中，我们常常需要使用各种第三方库来提高开发效率和代码质量。其中，npm 是前端开发中最常用的包管理器之一。而 fluent-grapesjs 则是一个基于 Grapesjs 构建的 UI 套...

    3 年前
  • npm包 @cocopina/transform-keys使用教程

    前言 在很多前端开发项目中，我们常常需要对 JavaScript 对象的键（key）进行转换，例如将驼峰式命名转为下划线式命名、将下划线式命名转为驼峰式命名等。手动进行转换过程可能比较繁琐，所以我们可...

    3 年前
  • npm包@ccurtin/mui-datatables使用教程

    前言 前端开发者处理数据表格是比较常见的一项工作，而 mui-datatables 是一个基于 Material-UI 的 React 数据表格组件。但是时间管理效率非常低，所以本文介绍的是另一款前端...

    3 年前
  • npm 包 @pawbor/maybe 使用教程

    前言 在前端开发中，我们经常需要处理可能为 null 或 undefined 的数据，而频繁的判断和处理这些情况会使代码变得复杂而且难以维护。这时就可以使用 Maybe 函数库来简化这个过程。

    3 年前
  • npm 包 dibk-wizard-framework 使用教程

    本文将介绍如何使用 npm 包 dibk-wizard-framework 来创建一个交互式向导组件。 作为一个前端开发人员，我们经常需要在应用程序中实现一个向导流程，以引导用户完成某些特定任务。

    3 年前
  • npm 包 json-sv 使用教程

    1. 简介 在前端开发中，我们经常需要处理 JSON 数据。JSON Schema Validator 是一个常用的工具，用于验证 JSON 数据的正确性和规范性，而 json-sv 就是针对 JSO...

    3 年前
  • npm包jsonld-stable-stringify使用教程

    在使用JavaScript编写Web应用程序时，经常需要将JSON数据序列化为字符串。JSON数据是基于JavaScript对象的，其结构可以无限扩展。但是，当我们使用JSON.stringify()...

    3 年前
  • npm 包 liyad-lisp-pkg-example 使用教程

    介绍 liyad-lisp-pkg-example 是一个基于 JavaScript 的 lisp 语言解释器，以 npm 包的形式发布。它支持所有符合 Lisp 语法的表达式，并且可以自定义函数和宏...

    3 年前
  • npm 包 @pinguinosod/david-test 使用教程

    简介 npm 是一个 Node.js 的包管理工具，开发者可以通过它方便地查找、安装和管理应用程序的依赖包。@pinguinosod/david-test 是一个基于 npm 构建的前端包，提供了 J...

    3 年前
  • NPM包Autofont使用教程

    #NPM包Autofont使用教程 在前端开发中，我们经常需要考虑不同的设备和屏幕尺寸。这就要求我们在设计和开发过程中使用一种自适应的方式来处理字体大小。这时，Autofont就是一个非常好用的工具。

    3 年前
  • npm 包 generator-psmodule 使用教程

    在前端开发过程中，我们经常需要编写一些小的 JavaScript 模块，以便满足项目的需求。这些模块有时会被多个项目所共用，因此我们需要将它们封装成 npm 包并发布到 npm 上，方便其他项目引用。

    3 年前

相关推荐

    暂无文章