共用方式為

教學課程：使用原生驗證 JavaScript SDK 在 Angular 單頁應用程式中重設密碼

適用於： 帶有白色核取記號符號的綠色圓圈，表示下列內容適用於外部租用戶。 外部租用戶 （深入瞭解）

在本教學課程中，您將瞭解如何使用原生驗證 JavaScript SDK 在 Angular 單頁應用程式中啟用密碼重設。 密碼重設適用於使用電子郵件搭配密碼驗證流程的用戶帳戶。

在本教學課程中，您會：

  • 更新 Angular 應用程式以重設用戶的密碼。
  • 測試密碼重設流程

先決條件

建立密碼重設元件

  1. 執行下列命令，使用 Angular CLI 在 components 資料夾內產生密碼重設的新元件：

    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 Proxy 伺服器，請在終端機中執行下列命令：

    npm run cors

  2. 若要啟動您的應用程式，請在終端機中執行下列命令：

    npm start

  3. 開啟 web 瀏覽器並巡覽至 http://localhost:4200/reset-password。 註冊表單出現。

  4. 若要重設現有使用者帳戶的密碼，請輸入詳細數據，選取 [ 繼續 ] 按鈕，然後遵循提示。

在 next.config.js 中設定poweredByHeader: false

  • 在 Next.js中，x powered-by 標頭預設包含在 HTTP 回應中，表示應用程式是由 Next.js提供電源。 不過，基於安全性或自定義原因，您可能會想要移除或修改此標頭。

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

相關內容

  • Last updated on