次の方法で共有

チュートリアル: ネイティブ認証 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 プロキシ サーバーを起動するには、ターミナルで次のコマンドを実行します。

    npm run cors

  2. アプリケーションを起動するには、ターミナルで次のコマンドを実行します。

    npm start

  3. Web ブラウザーを開き、http://localhost:4200/reset-passwordに移動します。 サインアップ フォームが表示されます。

  4. 既存のユーザー アカウントのパスワードをリセットするには、詳細を入力し、[ 続行 ] ボタンを選択し、プロンプトに従います。

next.config.js で poweredByHeader: false を設定する

  • Next.jsでは、アプリケーションが Next.jsで動作していることを示す x-powered-by ヘッダーが既定で HTTP 応答に含まれます。 ただし、セキュリティ上またはカスタマイズ上の理由から、このヘッダーを削除または変更することが必要な場合があります。

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

関連コンテンツ

  • Last updated on