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

適用対象: 次の内容が外部テナントに適用されることを示す白いチェックマーク記号が付いた緑の円。外部テナント (詳細)

このチュートリアルでは、ネイティブ認証を使用して React シングルページアプリ (SPA) でパスワードをリセットする方法について説明します。

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

React アプリを更新して、ユーザーのパスワードをリセットします。
パスワードリセットフローをテストする

[前提条件]

「チュートリアル: ネイティブ認証の CORS ヘッダーを管理するように CORS プロキシサーバーを設定する」の手順を完了します。

アプリがネイティブ認証 API に対して行う呼び出しの種類を定義する

パスワードリセットフロー中、アプリは、パスワードリセット要求の開始やパスワードリセットフォームの送信など、ネイティブ認証 API を複数回呼び出します。

これらの呼び出しを定義するには、scr/client/RequestTypes.ts ファイルを開き、次のコードスニペットを追加します。

    export interface ResetPasswordStartRequest {
        username: string;
        challenge_type: string;
        client_id: string;
    }

    export interface ResetPasswordSubmitRequest {
        client_id: string;
        continuation_token: string;
        new_password: string;
    }

    export interface ResetPasswordSubmitForm {
        continuation_token: string;
        new_password: string;
    }

ネイティブ認証 API からアプリが受け取る応答の種類を定義する

パスワードリセット操作のネイティブ認証 API からアプリが受信できる応答の種類を定義するには、src/client/ResponseTypes.ts ファイルを開き、次のコードスニペットを追加します。

    export interface ChallengeResetResponse {
        continuation_token: string;
        expires_in: number;
    }

    export interface ResetPasswordSubmitResponse {
        continuation_token: string;
        poll_interval: number;
    }

パスワードリセット要求を処理する

このセクションでは、パスワードリセットフロー要求を処理するコードを追加します。これらの要求の例として、パスワードリセット要求を開始し、パスワードリセットフォームを送信します。

これを行うには、src/client/ResetPasswordService.ts という名前のファイルを作成し、次のコードスニペットを追加します。

    import { CLIENT_ID, ENV } from "../config";
    import { postRequest } from "./RequestClient";
    import { ChallengeForm, ChallengeRequest, ResetPasswordStartRequest, ResetPasswordSubmitForm, ResetPasswordSubmitRequest } from "./RequestTypes";
    import { ChallengeResetResponse, ChallengeResponse, ResetPasswordSubmitResponse } from "./ResponseTypes";

    export const resetStart = async ({ username }: { username: string }) => {
        const payloadExt: ResetPasswordStartRequest = {
            username,
            client_id: CLIENT_ID,
            challenge_type: "password oob redirect",
        };

        return await postRequest(ENV.urlResetPwdStart, payloadExt);
    };

    export const resetChallenge = async ({ continuation_token }: { continuation_token: string }): Promise<ChallengeResponse> => {
        const payloadExt: ChallengeRequest = {
            continuation_token,
            client_id: CLIENT_ID,
            challenge_type: "oob redirect",
        };

        return await postRequest(ENV.urlResetPwdChallenge, payloadExt);
    };

    export const resetSubmitOTP = async (payload: ChallengeForm): Promise<ChallengeResetResponse> => {
        const payloadExt = {
            client_id: CLIENT_ID,
            continuation_token: payload.continuation_token,
            oob: payload.oob,
            grant_type: "oob",
        };

        return await postRequest(ENV.urlResetPwdContinue, payloadExt);
    };

    export const resetSubmitNewPassword = async (payload: ResetPasswordSubmitForm): Promise<ResetPasswordSubmitResponse> => {
        const payloadExt: ResetPasswordSubmitRequest = {
            client_id: CLIENT_ID,
            continuation_token: payload.continuation_token,
            new_password: payload.new_password,
        };

        return await postRequest(ENV.urlResetPwdSubmit, payloadExt);
    };

    export const resetPoll = async (continuation_token: string): Promise<ChallengeResetResponse> => {
        const payloadExt = {
            client_id: CLIENT_ID,
            continuation_token,
        };
        return await postRequest(ENV.urlResetPwdPollComp, payloadExt);
    };

challenge_type プロパティは、クライアントアプリがサポートする認証方法を示します。のチャレンジの種類について詳しく読む。

UI コンポーネントを作成する

パスワードリセットフロー中に、このアプリはさまざまな画面で、ユーザーのユーザー名 (電子メール)、ワンタイムパスコード、および新しいユーザーパスワードを収集します。

src フォルダー内に、/pages/resetpassword という名前のフォルダーを作成します。

パスワードリセットフォームを作成、表示、送信するには、src/pages/resetpassword/ResetPassword.tsx ファイルを作成し、次のコードを追加します。

// ResetPassword.tsx
import React, { useState } from "react";
import { resetChallenge, resetStart, resetSubmitNewPassword, resetSubmitOTP } from "../../client/ResetPasswordService";
import { ChallengeResetResponse, ChallengeResponse, ErrorResponseType } from "../../client/ResponseTypes";

export const ResetPassword: React.FC = () => {
  const [username, setUsername] = useState<string>("");
  const [otp, setOTP] = useState<string>("");
  const [newPassword, setNewPassword] = useState<string>("");
  const [error, setError] = useState<string>("");
  const [step, setStep] = useState<number>(1);
  const [isLoading, setIsloading] = useState<boolean>(false);
  const [tokenRes, setTokenRes] = useState<ChallengeResponse>({
    binding_method: "",
    challenge_channel: "",
    challenge_target_label: "",
    challenge_type: "",
    code_length: 0,
    continuation_token: "",
    interval: 0,
  });
  const [otpRes, setOTPRes] = useState<ChallengeResetResponse>({
    expires_in: 0,
    continuation_token: "",
  });

  const handleResetPassword = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!username) {
      setError("Username is required");
      return;
    }
    setError("");
    try {
      setIsloading(true);
      const res1 = await resetStart({ username });
      const tokenRes = await resetChallenge({ continuation_token: res1.continuation_token });
      setTokenRes(tokenRes);
      setStep(2);
    } catch (err) {
      setError("An error occurred during password reset " + (err as ErrorResponseType).error_description);
    } finally {
      setIsloading(false);
    }
  };

  const handleSubmitCode = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!otp) {
      setError("All fields are required");
      return;
    }
    setError("");
    try {
      setIsloading(true);
      const res = await resetSubmitOTP({
        continuation_token: tokenRes.continuation_token,
        oob: otp,
      });
      setOTPRes(res);
      setStep(3);
    } catch (err) {
      setError("An error occurred while submitting the otp code " + (err as ErrorResponseType).error_description);
    } finally {
      setIsloading(false);
    }
  };

  const handleSubmitNewPassword = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!newPassword) {
      setError('All fields are required');
      return;
    }
    setError('');
    try {
      setIsloading(true);
      await resetSubmitNewPassword({
        continuation_token: otpRes.continuation_token,
        new_password: newPassword,
      });
      setStep(4);
    } catch (err) {
      setError("An error occurred while submitting the new password " + (err as ErrorResponseType).error_description);
    } finally {
      setIsloading(false);
    }
  };

  return (
    <div className="reset-password-form">
    //collect username to initiate password reset flow
      {step === 1 && (
        <form onSubmit={handleResetPassword}>
          <h2>Reset Password</h2>
          <div className="form-group">
            <label>Username:</label>
            <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} required />
          </div>
          {error && <div className="error">{error}</div>}
          {isLoading && <div className="warning">Sending request...</div>}
          <button type="submit">Reset Password</button>
        </form>
      )}
        //collect OTP
      {step === 2 && (
        <form onSubmit={handleSubmitCode}>
          <h2>Submit one time code received via email at {tokenRes.challenge_target_label}</h2>
          <div className="form-group">
            <label>One time code:</label>
            <input type="text" maxLength={tokenRes.code_length} value={otp} onChange={(e) => setOTP(e.target.value)} required />
          </div>
          {error && <div className="error">{error}</div>}
          {isLoading && <div className="warning">Sending request...</div>}
          <button type="submit">Submit code</button>
        </form>
      )}
        //Collect new password
      {step === 3 && (
        <form onSubmit={handleSubmitNewPassword}>
          <h2>Submit New Password</h2>
          <div className="form-group">
            <label>New Password:</label>
            <input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} required />
          </div>
          {error && <div className="error">{error}</div>}
          {isLoading && <div className="warning">Sending request...</div>}
          <button type="submit">Submit New Password</button>
        </form>
      )}
        //report success after password reset is successful
      {step === 4 && (
        <div className="reset-password-success">
          <h2>Password Reset Successful</h2>
          <p>Your password has been reset successfully. You can now log in with your new password.</p>
        </div>
      )}
    </div>
  );
};

アプリルートを追加する

src/AppRoutes.tsx ファイルを開き、次のコード行のコメントを解除します。

    //uncomment
    import { ResetPassword } from "./pages/ResetAccount/ResetPassword";
    //...
    
    export const AppRoutes = () => {
      return (
        <Routes>
            //uncomment
            <Route path="/reset" element={<ResetPassword />} />
        </Routes>
      );
    };

アプリを実行してテストする

「実行」の手順に従って、アプリをテストしてアプリを実行します。ただし、パスワードリセットフローは、前にサインアップしたユーザーアカウントのみを使用してテストします。

Azure Function Appを使用してネイティブ認証 API を使用するシングルページアプリのリバースプロキシを設定します。
ネイティブ認証を使用するシングルページアプリの運用環境でリバースプロキシとして Azure Front Door を使用します。
ネイティブ認証 API リファレンス。

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-06-26

次の方法で共有

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

[前提条件]

アプリがネイティブ認証 API に対して行う呼び出しの種類を定義する

ネイティブ認証 API からアプリが受け取る応答の種類を定義する

パスワード リセット要求を処理する

UI コンポーネントを作成する

アプリ ルートを追加する

アプリを実行してテストする

関連コンテンツ

フィードバック

その他のリソース

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

パスワードリセット要求を処理する

アプリルートを追加する