教學課程：使用原生驗證在 React 單頁應用程式中重設密碼（預覽）

2025-06-26

適用於：白色圓圈內有灰色 X 符號勞動力租戶綠色圓圈內有白色勾選符號。外部租戶（了解更多）

在本教學課程中，您將瞭解如何使用原生驗證，在 React 單頁應用程式（SPA）中重設密碼。

在本教學課程中，您會：

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

先決條件

完成教學課程：設定 CORS Proxy 伺服器以管理原生驗證的 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 函式應用程式為使用原生驗證 API 的單頁應用程式設定反向 Proxy。
在生產環境中，將 Azure Front Door 用作具備原生驗證的單頁應用程式的反向代理。
原生驗證 API 參考。

共用方式為

教學課程：使用原生驗證在 React 單頁應用程式中重設密碼 （預覽）