前言
随着互联网技术的飞速发展,越来越多的应用都被迁移至Web端。而Web应用的开发中,前端技术作为其中至关重要的环节,受到了越来越多的关注。Angular5作为目前最受欢迎的前端框架之一,其优秀的性能和开发体验,使得它在前端技术中拥有很高的市场占有率。而本文将会讲解一个 npm 包,它将会与 Angular5 框架良好的结合,让我们可以更加方便地实现一个安全的单页Web应用。
前置知识
- 了解 Angular5
- 熟悉 TypeScript
- 了解 Azure AD
npm 包 Angular5-ADAL 简介
Angular5-ADAL 是一个基于Azure Active Directory实现的认证流程的前端库,它内建在 Angular5 中,提供了一个针对 Angular5 、Active Directory 的认证体验。Angular5-ADAL 所提供的认证方式适用于所有仅运行于安全网络内的应用,它基于 OAuth 2.0 协议,支持多种认证场景。
npm 包 Angular5-ADAL 安装
- 第一步是安装 npm 包。使用以下命令:
npm install angular5-adal --save
- 接下来,你需要在 app.module.ts 中引入 AdalService , 并在 providers 数组中注入 AdalService 。具体如下:
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ----------- - ---- ---------------- ----- ----------- ----- ---------- -------------- ----- -- ------ ----- --------- --
- 在 @NgModule 中使用 forRoot() 函数:
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------ --------------- - ---- ---------------- ------ - ----------------- - ---- ----------------------- ------ - ---------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - ---------------- - ---- ----------------------- ----- ------ - - --------- ----------------- ------- -------------- ------------ ------------------------ ---------- - ------------------------ ---------------------------------- -- -------------------------- ------ -- ----------- ------------- - ------------ -- -------- - -------------- ----------- ---------------- -- ---------- - ------------ - -------- ------------------ --------- ---------------- ------ ---- -- -- ---------- - ------------ - -- ------ ----- --------- - ------------------------ ------------ - ------------------------- - -
//注意,请替换上面的 YOUR_CLIENT_ID和 YOUR_TENANT 内容为你的 Azure AD 的应用程序客户端ID 和租户。
npm 包 Angular5-ADAL 使用
Angular5 的 AdalService 提供了一些常用的 API,以实现整个认证流程,包括登录、注销、检测用户是否认证、获取用户信息等等。可以通过注入 AdalService 来调用 API。具体如下:
-- -------------------- ---- ------- ------ - ----------- - ---- ---------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ ---------- ------ - ------------------- ------------ ------------ -- ---------- - ---------------------------------------- --------------------------- - ------- - ------------------------- - -------- - -------------------------- - --- --------- - ------ ------------------------------------------------ - --- - -
其中,handleWindowCallback() 和 getUser() 分别用于处理 JWT 和获取登录用户的信息。getUser() 函数返回用户的信息,如下:
-- -------------------- ---- ------- - --------- --------------------- -------- - ------------ ------ ----------- ------- ----- ----- ----- ------------ --------------------------------------- ------ --------------------- -- ---------------- ----- ------------ ------ ---------- --- ------- ---------------- -
示例
以一个简单的应用为例,说明如何使用 Angular5-ADAL。在应用中,我们需要实现认证、显示用户信息、执行 API 请求等功能。以下是一个示例:
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - ----------- - ---- ---------------- ------ - ---------- - ---- ----------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ ---------- ------ - ------ ---------------- -------- ------ ----- ---- ------ ------------ ---- ------------ ------- ------------ ------------ ------- ----- ----------- -- ---------- - -------------------- - ------------------------------------------ -- ---------------------- - -- ------------ - --------- - ---------------------------------- - ------------------- --------------- - ---- - ------------------------- - - ------------- - ------------------------------------------------- -- - -------------- - ---------------------- --- - --------- - ---------------------------------------------- -- - ---------------- - --------- --- - -------- - -------------------------- - -
-- -------------------- ---- ------- ------ ------------- -------- ---- ------------------------ ------------ -- --------- ------- ------ --------- ------- ------- ---------------------------------- ------ ---- ------------------------- ------- -------------------------------- ------ ---- ------ ------------- ------- ----------- - ---- --------
- 若要启用 API 保护,可以通过 AdalService 的 http 对象进行对 api 请求的拦截:
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------- - ---- ---------------- ------ - ---------- - ---- ----------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------------ ------------ ------------ ----- ----------- - -------------------------- - -------- - -------------- ------- ------------------------------ - --------------------- -- ----------------------- - -
总结
Angular5-ADAL 是一个适用于 Angular5 应用程序的基于 Azure AD 的认证库,它从认证的角度出发,提供了一些常用的认证 API,让我们可以更加方便地实现一个安全的单页 Web 应用。总得来说,npm 包 Angular5-ADAL 使用起来比较方便,你只需认真阅读和理解上述使用方法,请结合自己的应用场景,去使用它,相信它能为你的 Web 应用增添新的功能和安全性。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005713181e8991b448e816d