简介
@denkristoffer/auth0-lock 是一个让你可以轻松接入 Auth0 的锁定界面的 npm 包。Auth0 是一个提供身份验证和身份管理的云服务平台，而 @denkristoffer/auth0-lock 提供了一个可定制的登录界面，展示了用户登录流程以及一些关键信息。
安装
在你的项目中使用 @denkristoffer/auth0-lock，你需要先安装 npm 包。在终端中输入以下命令：
npm install @denkristoffer/auth0-lock
之后你应该会得到 @denkristoffer/auth0-lock 的最新版本。通过 --save 标志，该项目将成为您的项目的一部分：
npm install @denkristoffer/auth0-lock --save
使用
在安装完毕后，使用 @denkristoffer/auth0-lock 非常简单。只需在你的文件中引入它，然后初始化它。
import Auth0Lock from '@denkristoffer/auth0-lock';
const lock = new Auth0Lock('CLIENT_ID', 'DOMAIN');其中 CLIENT_ID 是你在 Auth0 中注册的应用程序的 ID，DOMAIN 是你的 Auth0 帐户的域名。
默认情况下，@denkristoffer/auth0-lock 将显示一个标准的用户名/密码登录表单。如果你想展示一个社交媒体提供商的登录方法，你需要指定一个额外的参数，称为 options，包含社交媒体提供商、语言设定、和其他属性。
公司和品牌标识
你可以使用两个选项来自定义你的应用程序的品牌标识，例如使用公司的徽标和名字。通过这种方式，你可以改变 Auth0 和 @denkristoffer/auth0-lock 展示表单的样式。
-- -------------------- ---- -------
------ --------- ---- ----------------------------
----- ----- - -
----- --------------------------------------
----- --- ------- -----
--
----- ---- - --- ---------------------- --------- -
------------------- -
------ ----------
--
------ -
----- -----------
-
---引入了一个新的对象 brand，它有一个 logo 和一个 name。这个对象被传递给 Auth0Lock 的 options 参数。上述代码解决了两个问题，将 name 作为应用程序标题语言字典（languageDictionary）的参数和将 logo 添加到主题（theme）中。
指定社交媒体帐户
默认情况下，@denkristoffer/auth0-lock 提供了几种社交媒体登陆方式。你可以通过 options 参数将它们指定为 true 或 false。例如，如果你想允许 Facebook 登陆，这样代码就可以实现：
-- -------------------- ---- -------
----- ---- - --- ---------------------- --------- -
----- -
------- -
------ ------- ------
-
--
--------- ------
------------------- -
------ --- ----- -----
--
------------------ ------
------------------ --------
------ -
----- --------------------------------------
------------- ---------
--
------------ -----
------------------- -------------
------------------ -----
-------------- -----------------
-------------------------- -----
----------------- -----
--------- ----
---在 allowedConnections 数组中，只传递你打算提供服务的社交媒体帐户。如果你涉及许多社交平台，列表可能很长。
自定义授权事件
如果你想定义自己的操作，例如欢迎新用户，你可以通过 @denkristoffer/auth0-lock 的回调函数来检测授权事件的类型。
例如，下面的代码仅在授权事件成功时向用户发送一条欢迎消息：
-- -------------------- ---- -------
----- ---- - --- ---------------------- ----------
------------------------ -------------------- -
---------------- --- --- ----------------
-- ----------------------- -- ------------------- -
-------------------- - ---
-------------------------------- --------------------
-------------------- --------
-
---
-------- --------------------- -------- -
------------------------------------ -------------
-------------------------------- ---------
-
-------- ---------------- -
----- ------- - -----------------------------------
----- ------- - ------- -- ----------------------------
----------------- - ----------------- -- ----------
----------------- - ----
-- ---------- -
-----------------------------------
-
-这个 on 函数来自 Auth0Lock，被用来注册授权事件的监听器。它通过给定的字符串来区分不同的事件类型，例如 authenticated 和 unrecoverable_error。我们传递一个函数作为第二个参数来检测何时成功授权。这个 authResult 对象包含授权过程中用到的一些关键信息，例如访问令牌（access_token）和身份验证令牌（id_token）。
指定用户名和密码
一个更复杂的应用程序可能需要从用户上下文中获取一些特定的信息，例如用户名和密码。当你使用 @denkristoffer/auth0-lock 定制你的应用程序时，你可以通过强制将表单呈现在屏幕上，以及增加 on 监听器来达到此目的。
-- -------------------- ---- -------
----- ---- - --- ---------------------- --------- -
----------- ------
------------------- -
------ --- ----- -----
-
---
-----------
-------- -- -- ----------------------
-------- -- -- --------------------
---
------------------------ -------------------- -
-- ----------------------- -- ------------------- -
-------------------- - ---
-------------------------------- --------------------
-------------------- --------
-
---
-------- --------------------- -------- -
------------------------------------ -------------
-------------------------------- ---------
-
-------- ---------------- -
----- ------- - -----------------------------------
----- ------- - ------- -- ----------------------------
----------------- - ----------------- -- ----------
----------------- - ----
-- ---------- -
-----------------------------------
-
-这个例子假设你已经从前端本身获取了用户的用户名和密码。 改变 allowLogin 的默认值 （true）来强制打开 @denkristoffer/auth0-lock 锁定窗口，从而可以具体自定义用户的登录方式。其中 show 方法用于打开屏幕，并绑定额外的监听器。
结论
使用 @denkristoffer/auth0-lock 可以帮助你在应用程序中快速设计一个完整、可定制的登录体验。在这个教程中，我们详细介绍了如何将 @denkristoffer/auth0-lock 引入您的项目、指定社交媒体帐户、自定义授权事件以及指定用户名和密码等方面，更深入地了解所有选项和代码示例可以前往官网或者 Github 的 Auth0-lock repository 查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/103616