通过

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

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

本教程介绍如何使用本机身份验证 JavaScript SDK 在 Angular 单页应用中启用密码重置。 密码重置适用于将电子邮件与密码身份验证流配合使用的用户帐户。

在本教程中，你将：

  • 更新 Angular 应用以重置用户的密码。
  • 测试密码重置流

先决条件

创建密码重置组件

  1. 运行以下命令，使用 Angular CLI 为组件文件夹中的密码重置生成新组件：

    cd components
ng generate component reset-password

  2. 打开 reset-password/reset-password.component.ts 文件，并将其内容替换为来自reset-password.component.ts的内容

  3. 打开 reset-password/reset-password.component.html 文件，并从 reset-password.component.html添加内容。

    • reset-password.component.ts中的以下逻辑确定初始重置密码作后的下一步。 根据结果，它会在 reset-password.component.html 中显示代码输入窗体以继续密码重置过程：

      const result = await client.resetPassword({ username: this.email });
if (result.isCodeRequired()) {
            this.showCode = true;
            this.isReset = false;
            this.showNewPassword = false;
        }
      • SDK 的实例方法 resetPassword（） 启动密码重置流。
      • 在 reset-password.component.html 文件中：
      <form *ngIf="showCode" (ngSubmit)="submitCode()">
    <input type="text" [(ngModel)]="code" name="code" placeholder="OTP Code" required />
    <button type="button" (click)="submitCode()" [disabled]="loading">{{ loading ? 'Verifying...' : 'Verify Code' }}</button>
    </form>

    • 成功调用后 submitCode() ，结果确定下一步：如果需要密码，则会显示新密码表单，供用户继续密码重置过程。

      if (result.isPasswordRequired()) {
    this.showCode = false;
    this.showNewPassword = true;
    this.isReset = false;
    this.resetState = result.state;
}

      在 reset-password.component.html 文件中：

      <form *ngIf="showNewPassword" (ngSubmit)="submitNewPassword()">
    <input type="password" [(ngModel)]="newPassword" name="newPassword" placeholder="New Password" required />
    <button type="button" (click)="submitNewPassword()" [disabled]="loading">{{ loading ? 'Submitting...' : 'Submit New Password' }}</button>
  </form>

    • 如果希望用户在重置密码完成后立即启动登录流，请使用以下代码片段：

      <div *ngIf="isReset">
    <p>The password has been reset, please click <a href="/sign-in">here</a> to sign in.</p>
</div>

重置密码后自动登录（可选）

可以在成功重置密码后自动登录用户，而无需启动新的登录流。 为此，请使用以下代码片段。 请参阅 reset-password.component.ts的完整示例：

if (this.resetState instanceof ResetPasswordCompletedState) {
    const result = await this.resetState.signIn();
    
    if (result.isFailed()) {
        this.error = result.error?.errorData?.errorDescription || "An error occurred during auto sign-in";
    }
    
    if (result.isCompleted()) {
        this.userData = result.data;
        this.resetState = result.state;
        this.isReset = true;
        this.showCode = false;
        this.showNewPassword = false;
    }
}

在用户中自动签名时，请在 reset-password.component.html使用以下代码片段：

<div *ngIf="userData && !isSignedIn">
    <p>Password reset completed, and signed in as {{ userData?.getAccount()?.username }}</p>
</div>
<div *ngIf="isReset && !userData">
    <p>Password reset completed! Signing you in automatically...</p>
</div>

更新路由模块

打开 src/app/app.routes.ts 文件，然后添加密码重置组件的路由：

import { ResetPasswordComponent } from './reset-password/reset-password.component';

const routes: Routes = [
    { path: 'reset-password', component: ResetPasswordComponent },
    ...
];

测试密码重置功能

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

    npm run cors

  2. 若要启动应用程序，请在终端中运行以下命令：

    npm start

  3. 打开 Web 浏览器并导航到 http://localhost:4200/reset-password。 此时会显示注册表单。

  4. 若要重置现有用户帐户的密码，请输入详细信息，选择“ 继续 ”按钮，然后按照提示进行作。

在 next.config.js 中设置poweredByHeader: false

  • 在 Next.js中，x 驱动的标头默认包含在 HTTP 响应中，以指示应用程序由 Next.js提供支持。 但是，出于安全或自定义原因，可能需要删除或修改此标头。

    const nextConfig: NextConfig = {
  poweredByHeader: false,
  /* other config options here */
};

相关内容

  • Last updated on