介绍
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