npm 包 angular-6-social-login-fixed 的使用教程

介绍

angular-6-social-login-fixed 是一个 Angular 模块，用于管理第三方社交媒体平台的登录。它支持 Google、Facebook、LinkedIn 等多种登录方式。

在本文中，我们将会介绍如何使用该 npm 包实现社交媒体平台的登录功能。

安装

首先，我们需要安装该 npm 包。在终端或命令行中输入以下命令：

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

配置

接着，我们需要进行一些配置。

首先，在你的 app.module.ts 文件中导入 SocialLoginModule，并将其添加到 imports 中。

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

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

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

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

接着，我们需要进行服务配置。在工程下新建 auth.service.ts 文件，用于处理第三方登录的数据。

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

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

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

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

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

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

-

我们需要在 auth.service.ts 中替换上三方平台的 client-id，才可以正常使用。

接着，我们需要在 app.module.ts 中添加以下服务配置：

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

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

其他一些设置详见官方文档说明。

使用教程

在 app.component.ts 中添加以下代码：

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

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

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

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

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

在 app.component.html 中添加以下代码：

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

这样就完成了整个登录功能的实现。

总结

通过本教程，我们学习了如何使用 angular-6-social-login-fixed 这个 npm 包实现社交媒体平台的登录功能，并进行了详细的介绍和配置。希望这篇文章对前端开发者有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668e7d9381d61a3540b57

阅读全文

猜你喜欢

  • npm 包 jsequation-solver 使用教程

    在前端开发中，我们可能会遇到需要解方程的问题。而解方程的过程中需要进行数学计算，如果手写代码实现解方程，则会比较繁琐。这时，我们可以使用 jsequation-solver 这个 npm 包来解决问题...

    3 年前
  • npm 包 react-observable-hook 使用教程

    在 React 应用中，常常需要管理数据流以及数据变更时对页面的响应。传统的做法是使用 Redux 或 MobX 等状态管理库，但是它们的使用成本较高且需要学习一定的语法和规范。

    3 年前
  • npm 包 sicoris-result-js 使用教程

    在前端开发过程中，我们经常需要对数据进行处理，尤其是对于不同的数据集合进行筛选、排序、分页等操作。如果我们手动编写这些逻辑代码，将会非常耗时费力。 幸运的是，有很多优秀的 npm 包可以帮助我们轻松地...

    3 年前
  • npm 包 gatsby-plugin-fabric-ui 使用教程

    在开发前端应用时，使用组件库可以提高开发效率和用户体验。Microsoft 的 Fabric UI 是一个非常优秀的组件库，在 React 中使用时可以通过 gatsby-plugin-fabric-...

    3 年前
  • npm 包 split-vendor-prefixes 使用教程

    前言 在前端开发中，我们经常用到各种第三方库和插件，以及一些自己编写的组件，这些组件包含了许多 CSS 样式属性，其中不乏一些带有浏览器私有前缀的样式属性。这些浏览器私有前缀可以提供一些新的 CSS ...

    3 年前
  • npm包 @longjs/session 使用教程

    前言 在前端开发中，需要对用户会话进行管理，以实现用户的登录、注销、页面权限控制等功能。为了解决这个问题，前端社区中出现了很多优秀的解决方案，其中 @longjs/session 是一款不错的方案，它...

    3 年前
  • npm 包 eslint-config-man 使用教程

    前端开发中，代码规范是非常重要的一部分。良好的代码规范有助于提高代码的可读性和可维护性，也有利于多人协作开发和代码review。而 eslint 这一工具则是实现代码规范的良好选择。

    3 年前
  • npm 包 cry-icon 使用教程

    什么是 cry-icon cry-icon 是一个基于 Font Awesome 的图标库，它是一个可以直接在 HTML 中使用的 npm 包。其中包含了一个全新的图标集，并且可以很方便地定制。

    3 年前
  • npm 包 zy-test-z27 使用教程

    在前端开发中，我们经常需要使用各种各样的 npm 包来提高我们的效率。zy-test-z27 是一个 npm 包，它提供了一组方便的工具来测试我们的代码。在本篇文章中，我们将学习如何使用它来进行测试。

    3 年前
  • npm 包 Jeedom 使用教程

    Jeedom 是一个开源的智能家居系统，允许用户通过一个中央接口控制他们各自的智能设备。Jeedom 通过使用插件来扩展其功能，其中包括许多易于使用的 npm 包。

    3 年前
  • npm 包 @longjs/database 使用教程

    简介 @longjs/database 是一个基于 Node.js 的数据库操作库，专为前端开发人员设计。它可支持多种数据库管理系统，如 MySQL，PostgreSQL，MongoDB 等，且使用简...

    3 年前
  • npm 包 playmobjs 使用教程

    在前端开发中我们经常需要使用各种工具和库来提高开发效率和实现功能。npm 是当前最流行的包管理器，有大量的开源工具和库。在这篇文章中，我们将介绍一个有趣的 npm 包——playmobjs，它可以帮助...

    3 年前
  • npm 包 tree-data-util 使用教程

    在前端开发中，树型结构数据的操作往往是一个非常普通并且重要的技能。npm 包 tree-data-util 正是一个提供方便的树型结构数据操作工具的包。本文将会详细介绍 tree-data-util ...

    3 年前
  • npm 包 egg-liteflake 使用教程

    前言 在现代 Web 开发中，生成唯一 ID 是一项很重要的功能，而在 Node.js 中，开发者可以使用 npm 包 egg-liteflake 来生成符合业务需求，且比传统 UUID 更轻量的 I...

    3 年前
  • npm 包 form-for-react 使用教程

    本文介绍了如何使用 npm 包 form-for-react 来简化前端表单的编写过程。 什么是 form-for-react form-for-react 是一个轻量级的 React 组件，用于...

    3 年前
  • npm 包 powerjinja-arguments 使用教程

    简介 powerjinja-arguments 是一个用于处理 Jinja2 模板的 powerjinja 插件，它的功能是根据函数的参数及其默认值生成调用函数时的实参。

    3 年前
  • npm 包 powerjinja-array 使用教程

    前言 随着前端的不断发展，前端工程化已经成为了前端开发中不可或缺的一环。而 npm 作为前端工程化的重要组成部分，提供了大量的开源库和包，为我们的开发提供了极大的便利。

    3 年前
  • npm 包 powerjinja-boolean 使用教程

    前言 在前端开发中，我们常常需要处理布尔值，比如逻辑判断，布尔运算等等。为了方便编码和提高开发效率，我们可以使用一些工具和库来简化操作。本文就介绍了一个能够处理布尔值的 npm 包：powerjinj...

    3 年前
  • npm 包 powerjinja-core 使用教程

    简介 在前端开发中，我们经常需要使用到模板引擎来实现数据渲染。而 PowerJinja 是一款基于 Jinja2 语法的 JavaScript 模板引擎，可以帮助我们快速、高效地处理数据渲染。

    3 年前
  • NPM包vue-message使用教程

    前言 随着现代前端开发的快速发展，使用NPM包管理工具是必须的一环。NPM众所周知，是Node.js的包管理工具，但它不仅仅限制于Node.js。在前端开发领域，NPM已经成为前端开发人员的首选之一。

    3 年前

相关推荐

    暂无文章