チュートリアル: ネイティブ認証 JavaScript SDK を使用して Angular シングルページ アプリのパスワードをリセットする

適用対象: 外部テナント (詳細)

このチュートリアルでは、ネイティブ認証 JavaScript SDK を使用して Angular シングルページ アプリでパスワードリセットを有効にする方法について説明します。 パスワードのリセットは、パスワード認証フローで電子メールを使用するユーザー アカウントで使用できます。

このチュートリアルでは、次の操作を行います。

[前提条件]

• 「チュートリアル: ネイティブ認証 JavaScript SDK を使用して Angular シングルページ アプリにユーザーをサインアップする」の手順を完了します。
• 外部テナントの顧客ユーザーに対してセルフサービス パスワード リセット (SSPR) を有効にします。 SSPR は、パスワード認証フローで電子メールを使用するアプリの顧客ユーザーが利用できます。

パスワード リセット コンポーネントを作成する

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 */
  };
  

関連コンテンツ

• チュートリアル: ネイティブ認証 JavaScript SDK で Web フォールバックをサポートします。