简介
本文将介绍如何使用 Angular 和 TypeScript 在 Azure AD B2C 上进行真实验证。Azure AD B2C 是一个面向消费者和企业的云身份验证解决方案，可帮助您构建可靠的、安全的、可伸缩的应用程序。
我们将使用 Angular CLI 创建项目，使用 Azure AD B2C 配置认证策略，并使用 TypeScript 和 Angular 编写真实的代码。
Azure AD B2C 配置
在 Azure 门户中，创建一个名为“myb2c”的应用程序。在应用程序中，创建一个名为“myb2c-policies”的策略。打开“myb2c-policies”的所有策略的“Identity Providers”选项卡，启用 Microsoft 身份验证的支持。此外，您可以启用更多的身份验证提供者，例如 Google、Facebook 等。
在“myb2c-policies”的所有策略中，确保“Application claims”选项卡中启用了必要的声明，例如“signInNames.emailAddress”和“extension_access”.。此外，您还需要设置“Sign-up Policy”的“sign-up attributes”，例如用户的姓名、电子邮件地址等。
Angular 项目创建
在命令行中使用 Angular CLI 创建项目，执行以下命令：
ng new my-project --routing --style=scss
完成后进入目录：
cd my-project
添加依赖包
添加依赖项 angular-oauth2-oidc：
npm install angular-oauth2-oidc --save
配置应用程序
编辑 app.module.ts 文件并直接在模块中导入以下模块：
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
import { JwksValidationHandler } from 'angular-oauth2-oidc';
import { MsalModule, MsalInterceptor } from '@azure/msal-angular';
import { MyAuthService } from './services/my-auth.service';
import { MyHttpInterceptor } from './interceptors/my-http.interceptor';在 NgModule 中添加以下项：
-- -------------------- ---- -------
-------- -
--------------
-----------------
-----------------
----------------------
--------------------
--------- -----------------
---------- -----------------
------------------ -----
------------ ---------------------- - ----
-------------------------- ------
---
--
---------- -
-
-------- ------------------
--------- ------------------
------ ----
--
--------------
--
---------- -
------------
--请注意，您需要在“clientID”和“authority”中设置 Azure AD B2C 中的值。另外，我们在 NgModules 中添加了“providers“以指定我们自己的验证服务和 HTTP 拦截器。
编写自定义服务
我们需要编写自己的认证服务，以实现用户验证和授权。我们称它为“my-auth.service.ts”：
-- -------------------- ---- -------
-------------
------ ----- ------------- ---------- ----------- -
------- ------- - --- --------- --------------- ----------------------------------- ---
------------------- ------------- ------------- --
------------- -
-- ----------------------------------------- -
------ -----
-
------ ------
-
------- -
----------------------------------
-
-------- -
---------------------------
-
------------ -
------ ----------------------------------------
-
-我们提供了这些方法：
- canActivate()
- login()
- hlogout()
- isLoggedIn()
您还需要按照以下方法对 OAuthService 进行配置：
-- -------------------- ---- -------
-----------------------------
-------------- ----------------------------------------------------------------
--------- -------------------------------------------------------------------------------------
--------- -----------------
------ ------- ----- ------- ----------------
------------- --------- -------
---------------------- ---------------------- - ----
---------------------------------- ------
----------------- -----
------------------------- ---------------------- - ----
--------------------- ------
------------------- -----
---------------------------- ------
---------------- -----
--------------------- -----
------------------ -
-------------- -----------
------ ----------
--
------------------ ----------------------
-------- ---------------
---请注意，您需要在“tokenEndpoint”、“loginUrl”和“clientId”中设置 Azure AD B2C 中的值。您还可以设置自定义查询参数、存储方式，以及其他 OAuth 配置。
编写拦截器
我们还需要编写 HTTP 拦截器，以确保路由需要身份验证。我们称它为“my-http.interceptor.ts”：
-- -------------------- ---- -------
-------------
------ ----- ----------------- ---------- --------------- -
------------------- -------- -------------- --
------------------ ----------------- ----- ------------- -------------------------- -
-- --------------------------- -
----- ----- - ------------------------------
------- - ---------------
----------- -
-------------- ------- ----------
--
---
-
------ ---------------------
-
-请注意，我们使用 AuthService 中的“isLoggedOn()”来检查用户是否已验证并获取访问令牌，以设置 HTTP 请求头。
编写组件
现在，我们可以开始编写组件。在“app.component.ts”中，我们将使用 MyAuthService 并导入 Microsoft Graph API：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------- - ---- -----------------------------
------ - -- -------------- ---- -----------------------------------
------------
--------- -----------
------------ -----------------------
---------- -------------------------
--
------ ----- ------------ ---------- ------ -
----- - -------------
----- --------------------
------------------- ------------ -------------- --
---------- -
-- ------------------------------- -
----------------------------------------------- ---- -- -
--------- - -----
---
-
-
------- -
-------------------------
-
-------- -
--------------------------
-
-在 HTML 模板中，我们使用以下标记：
-- -------------------- ---- ------- ---- ------------- ------- -- ---------------- -- ------ ---- -------------- ------- ---------------------- ----------- ------ ---- ------------- ------- ----------------------- ------------ ------
请注意，我们导入了“Microsoft Graph API”以获取有关已登录用户的信息。在 ngOnInit() 中，我们检查用户是否已经登录，如果是，我们使用“getUserInfo()”方法在服务中检索用户信息并将其分配给“user”属性。
结论
通过本文，你已经了解了如何使用 Angular + TypeScript + Azure AD B2C 实现真实的身份验证和授权服务，并自定义了一些组件和拦截器。这对于构建可扩展、安全的 Web 应用程序非常有用。在此基础上，可以继续编写更复杂和功能强大的应用程序，升级使用最新和最先进的云身份验证解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6749d026a1ce006354717ad0