npm 包 ng2-account-kit 使用教程

介绍

ng2-account-kit 是一个 Angular 2+ 的第三方 npm 包，该包可以让开发人员轻松集成 Facebook Account Kit 的身份验证服务和手机号码授权功能。本篇文章将详细介绍该 npm 包的使用，包括安装和集成使用等。

安装

要使用 ng2-account-kit 包，请在你的项目目录下打开命令行终端，并输入以下命令：

npm i --save ng2-account-kit

该命令会自动在你的 package.json 文件中加入对该 npm 包的依赖。

集成使用

引入依赖

要使用 ng2-account-kit 包，需要在你的模块文件中引入它，并且将 Ng2AccountKitModule 添加到你的模块的 imports 数组中，示例如下：

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

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

配置服务

为了能够使用 Account Kit 服务，我们需要先在 Facebook 开发者中心创建一个新的应用程序。在创建应用程序的时候，需要注意以下几个关键的信息：

  • 应用 ID
  • 应用的有效域
  • 身份验证和登录客户端 Token

之后，还需要在 app.module.ts 文件中提供以下服务：

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

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

注：请注意将 [YOUR_APP_ID] 替换为你的应用 ID。

集成服务

在模板文件中使用 ng2-account-kit 组件，并将其嵌入到你的组件中，示例如下：

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

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

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

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

创建样式

为了定义 Account Kit 组件的样式，我们需要引入 ng2-account-kit.css 文件，并将其添加到我们的全局样式表中，在 SCSS 文件中声明如下：

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

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

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

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

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

示例代码

以下是完整的、可供参考的组件代码示例：

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

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

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

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

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

可以将此组件添加到你的 HTML 文件中，如下所示：

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

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

总结

通过本篇文章，我们了解了如何使用 npm 包 ng2-account-kit：安装、引用依赖、配置服务、集成服务和创建样式。同样的，我们还通过示例代码来演示了如何使用该 npm 包进行身份验证和手机号码授权功能的实现。希望这篇介绍对您有所帮助，谢谢。

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

阅读全文

猜你喜欢

  • npm 包 redux-advanced-subscribe 使用教程

    前言 在前端中使用 Redux 管理状态是非常常见的，但是，当 Redux 应用变得越来越复杂时，如何有效地管理状态呢？这里介绍一款 npm 包，它可以帮助我们更高效地管理我们的状态。

    2 年前
  • npm包hosted-fields-react使用教程

    在前端开发中，很多时候需要集成第三方支付或结算平台，一般情况下都需要使用到支付表单。而使用Hosted Fields React这个npm包可以快速、简单地集成支付表单，提高开发效率并提供优秀的用户体...

    2 年前
  • npm 包 node-chain-middleware 使用教程

    node-chain-middleware 是一款强大的中间件库，可用于在 Node.js 应用程序中管理和执行多个中间件函数。本文将详细介绍如何使用该 npm 包，包括安装、基本使用、高级使用和示例...

    2 年前
  • NPM 包 react-particle-io-utilities 使用教程

    引言 React-particle-io-utilities 是一个 npm 包，它提供了一个在 React 中使用 Particle IoT 设备的简单桥接器。本文将介绍如何使用该包，并给出相应示例...

    2 年前
  • npm 包 cerebro-fix-path 使用教程

    简介 cerebro-fix-path 是一款实现路径自动补全的 npm 包，适用于 Node.js 和前端开发。当我们在编写代码时，输入路径时很容易犯错，此时使用 cerebro-fix-path ...

    2 年前
  • npm 包 vcalc-stylus 使用教程

    背景 在前端开发过程中，我们经常需要使用到样式表（stylesheet）来美化和布局网页。样式表是一种描述元素外观和位置的语言，通常包括样式规则、选择器和属性等。其中，属性是样式表中最重要的组成部分之...

    2 年前
  • npm 包 lighter-http 使用教程

    前言 在前端开发中，HTTP 请求是必不可少的一部分。我们通常使用 axios、fetch 等工具来处理请求，它们非常实用。但是，当我们有一些简单的请求需要发送时，我们不必依赖于这些工具。

    2 年前
  • npm 包 ember-classy-computed

    介绍 在 Ember.js 中，computed property 是一种十分常见的模式，用于根据模型中的属性计算出其他属性的值。但是，在一个大型的应用程序中，computed property 的代...

    2 年前
  • npm 包 react-native-smart-camera-roll-picker 使用教程

    在移动端开发中，我们常常需要使用到相机和相册等功能。react-native-smart-camera-roll-picker 是一个方便的 npm 包，它可以让我们实现相机拍照或者在相册中选取某张图...

    2 年前
  • npm包safe-encrypt使用教程

    在前端开发中，数据的安全性往往是一个至关重要的问题。为了保护敏感信息，前端开发者经常需要进行加密处理。安全加密npm包safe-encrypt就成为了一个不错的选择。

    2 年前
  • npm 包 gar-starwars 使用教程

    npm 包 gar-starwars 使用教程 前言 在前端的开发中，我们经常会遇到需要使用第三方库或工具的情况，而 npm 就是最好的选择。在 npm 上，有非常多的开源库和工具可供我们使用。

    2 年前
  • npm 包 gar-wars 使用教程

    Gar-wars 是一个利用 Star Wars 数据 API 来获取关于 Star Wars 角色，电影，飞船和星系的信息的 npm 包。 安装 你可以通过在你的项目中使用 npm 来安装 gar-...

    2 年前
  • npm 包 magu-plugin-say 使用教程

    在前端开发中，我们经常需要向用户展示提示信息或与用户进行交互。其中，语音交互成为近年来越来越流行的交互方式之一。而 magu-plugin-say 就是一款能够在网页中实现语音交互的 npm 包。

    2 年前
  • npm 包 bloggify-paths 使用教程

    在前端开发中，我们通常会使用到很多 npm 包来帮助我们更加高效地开发网站和应用程序。在这篇文章中，我将会介绍一个非常实用的 npm 包，即 bloggify-paths，它能够帮助我们更好地管理和组...

    2 年前
  • npm 包 ds-accordion 使用教程

    随着前端技术的发展，越来越多的工具和库被创建。npm 是目前最受欢迎的 JavaScript 包管理器之一，它允许开发者轻松地分享、发现和安装依赖项。其中一个非常受欢迎的 npm 包是 ds-acco...

    2 年前
  • npm 包 eslint-plugin-react-ep 使用教程

    随着前端技术的不断发展，我们写代码的时候越来越倾向于使用高级语法和框架来提升效率和代码可维护性，其中 React 已经成为了非常流行的前端框架之一。然而，由于语言本身的限制和个人习惯的不同，我们很容易...

    2 年前
  • `npm` 包`inline-ng2-resources` 使用教程

    inline-ng2-resources是一个优秀的npm包，用于在Angular应用程序中嵌入外部样式表和脚本。在该文章中，我将会深入讲解如何使用该包在您的Angular应用程序中嵌入外部的资源，并...

    2 年前
  • npm 包 z-modal 使用教程

    在前端开发中，弹窗是非常常用的交互组件之一，而需要开发弹窗的时候，我们可以通过引入一些开源的 npm 包来快速搭建弹窗组件。z-modal 就是其中一款能够提供便捷弹窗功能的 npm 包。

    2 年前
  • npm 包 guardini 使用教程

    前言 在现代 Web 应用程序中，前端与后端使用多个技术栈或平台共同工作。使用 npm 包可以使前端开发更加快捷且高效。随着项目规模的增大，应用程序中的代码也会变得更加复杂，因此需要有效地保证代码的质...

    2 年前
  • npm 包 react-easy-intl 使用教程

    随着时代的变迁，互联网浪潮中 WEB 前端越来越重要，同时跨国公司的出现，WEB 前端的国际化需求也愈加严重。国际化便是指在软件开发中为适应 "不同国家，不同语言，不同习惯" 的用户使用而进行的软件全...

    2 年前

相关推荐

    暂无文章