介绍
ado-ng-auth 是一个基于 Angular 的 npm 包，帮助用户在应用中快速集成 Azure DevOps 的认证授权功能。Azure DevOps 是微软的一款云服务，它包括多种应用程序生命周期管理工具，例如 Git 存储库、CI/CD 管道等。通过 ado-ng-auth，用户可以使用 Azure DevOps 的认证机制验证和授权自己的 Angular 应用程序，以便于访问和使用 Azure DevOps 的 API、资源等。
安装
在安装之前，您需要准备好 Angular 环境并创建一个新的 Angular 项目。
- 首先，您需要在终端中输入以下命令安装
ado-ng-auth:
npm install ado-ng-auth --save
- 在
app.module.ts中，导入AdoNgAuthModule并在Ngmodule的imports数组中添加导入，如下所示：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- --------------
-----------
------------- -
------------
--
-------- -
--------------
---------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -- 在
app.component.ts中，导入AdoNgAuthService并在OnInit函数中添加以下代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- --------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
------------------- ------------ ----------------- --
---------- -
---------------------------------------------------- ------------------------------
-
-- 在
app.component.html中，采用*ngIf方式判断用户是否登录：
<ado-ng-auth-login *ngIf="authService.user"></ado-ng-auth-login>
至此，您已经成功地将 ado-ng-auth 添加到了您的 Angular 应用程序中。
使用
登录
用户可以通过在登录按钮中添加 AdoNgAuthLoginComponent 组件实现登录操作：
<button class="btn btn-primary"
*ngIf="!authService.user"
[adoNgAuthLogin]="azureDevops"
(adoNgAuthUserChange)="onUserChange($event)">登录</button>获取用户信息
在 OnInit 中，我们已经初始化了 AdoNgAuthService，用户可以直接在代码中访问 user 实例获取当前已登录用户的信息。例如：
console.log(this.authService.user);
获取 Azure DevOps API Token
在 Azure DevOps 中，API Token 提供了一种安全的授权访问机制。 通过在按钮上添加 AdoNgAuthTokenComponent 组件，用户可以获取已登录用户的 Azure DevOps API Token：
<button class="btn btn-secondary"
*ngIf="authService.user"
[adoNgAuthToken]="azureDevops"
(adoNgAuthTokenChange)="onTokenChange($event)">获取 API Token</button>在 TypeScript 中，我们可以通过以下代码访问 API Token：
console.log(this.authService.token);
验证 API Token
用户可以通过 AdoNgAuthService 提供的 verifyToken 方法，验证当前已登录用户的 Azure DevOps API Token 是否合法。例如：
this.authService.verifyToken(environment.azureDevops.apiToken)
.subscribe(
(response) => console.log(response),
(error) => console.error(error)
)示例代码
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- --------------
------ - ----------- - ---- ------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
------------------- ------------ ----------------- --
---------- -
---------------------------------------------------- ------------------------------
-
------------------ ---- -
------------------
-
-------------------- ---- -
-------------------
-
------------- -
--------------------------------------------------------------
-----------
---------- -- ----------------------
------- -- --------------------
-
-
--- -------------------- ---- -------
------------------
------- ---------- ------------
-------------------------
------------------------------
--------------------------------------------------------
------- ---------- --------------
------------------------
------------------------------
------------------------------------------------- --- --------------
------- ---------- ------------ -------------------------- --- --------------
------------------ ---------------------------------------------总结
使用 ado-ng-auth 可以为您的 Angular 应用程序提供 Azure DevOps 的认证授权功能。 通过几个简单的步骤，您就可以快速地将认证授权功能添加到自己的应用程序中，并使用 Azure DevOps 相关的 API、资源等。同时，您也可以通过 AdoNgAuthService 获取到当前已登录用户的相关信息和 API Token 并进行进一步的验证和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5d51ab1864dac670f5