通过

教程：使用本机身份验证 JavaScript SDK 在 Angular SPA 中登录用户

适用于： 绿色圆圈，带有白色复选标记符号，指示以下内容适用于外部租户。 外部租户（了解详细信息）

本教程介绍如何使用本机身份验证 JavaScript SDK 将用户登录到 Angular 单页应用（SPA）。

在本教程中，你将：

  • 更新 Angular 应用以登录用户。
  • 测试登录流。

先决条件

创建登录组件

  1. 运行以下命令，使用 Angular CLI 为组件文件夹中的登录页生成新 组件 ：

    cd components
ng generate component sign-in

  2. 打开登录/sign-in.component.ts文件，并将其内容替换为来自sign-in.component.ts的内容

  3. 打开 登录/sign-in.component.html 文件，然后从 sign-in.component.html添加内容。

    • sign-in.component.ts中的以下逻辑确定初始登录尝试后的下一步。 根据结果，它会在 sign-in.component.html 中显示密码或一次性代码表单，以指导用户完成登录过程的相应部分：

          const result: SignInResult = await client.signIn({ username: this.username });

    if (result.isPasswordRequired()) {
        this.showPassword = true;
        this.showCode = false;
    } else if (result.isCodeRequired()) {
        this.showPassword = false;
        this.showCode = true;
    } else if (result.isCompleted()) {
        this.isSignedIn = true;
        this.userData = result.data;
    }

      • SDK 的实例方法启动 signIn() 登录流。

      • 在 sign-in.component.html 文件中：

      <form *ngIf="showPassword" (ngSubmit)="submitPassword()">
    <input type="password" [(ngModel)]="password" name="password" placeholder="Password" required />
    <button type="submit" [disabled]="loading">{{ loading ? 'Verifying...' : 'Submit Password' }}</button>
</form>
<form *ngIf="showCode" (ngSubmit)="submitCode()">
    <input type="text" [(ngModel)]="code" name="code" placeholder="OTP Code" required />
    <button type="submit" [disabled]="loading">{{ loading ? 'Verifying...' : 'Submit Code' }}</button>
</form>

更新路由模块

打开 src/app/app.routes.ts 文件，然后添加登录组件的路由：

import { SignInComponent } from './components/sign-in/sign-in.component';

export const routes: Routes = [
    ...
    { path: 'sign-in', component: SignInComponent },
];

测试登录功能

  1. 若要启动 CORS 代理服务器，请在终端中运行以下命令：

    npm run cors

  2. 若要启动 Angular 应用，请打开另一个终端窗口，然后运行以下命令：

    npm start

  3. 打开 Web 浏览器并导航到 http://localhost:4200/sign-in。 会显示一个登录表单。

  4. 若要登录到现有帐户，请输入详细信息，选择“登录”按钮，然后按照提示进行作。

使用别名或用户名启用登录

你可以允许使用电子邮件地址和密码登录的用户也使用用户名和密码登录。 用户名也称为备用登录标识符，可以是客户 ID、帐户号或你选择用作用户名的另一个标识符。

可以通过 Microsoft Entra 管理中心手动将用户名分配给用户帐户，或者通过 Microsoft 图形 API 在应用中自动分配用户名。

使用 别名或用户名文章中的 步骤让用户使用应用程序中的用户名登录：

  1. 在登录中启用用户名。
  2. 在管理中心创建用户并为其设置用户名 ，或通过 添加用户名更新现有用户。 或者，还可以 使用 Microsoft 图形 API 在应用中自动创建和更新用户。

后续步骤

教程：使用本机身份验证 JavaScript SDK 在 Angular 单页应用中重置密码

  • Last updated on