Přihlášení uživatelů v React SPA pomocí nativního ověřování - Microsoft identity platform

Platí pro: Zelený kruh s bílým symbolem zaškrtnutí, který označuje, že následující obsah platí pro externí nájemce. Externí nájemci (další informace)

V tomto kurzu se naučíte přihlásit uživatele k jednostránkové aplikaci React (SPA) pomocí nativního ověřování.

V tomto kurzu se naučíte:

Aktualizujte aplikaci React tak, aby se přihlásili uživatelé pomocí uživatelského jména (e-mailu) a hesla.
Otestujte tok přihlášení.

Požadavky

Dokončete kroky v Kurzu: Nastavení proxy serveru CORS pro správu hlaviček CORS pro nativní ověřování.

Definování typů volání, která aplikace provede do nativního ověřovacího rozhraní API

Během toku přihlašování aplikace provádí více volání nativního ověřovacího rozhraní API, jako je spuštění žádosti o přihlášení, výběr metody ověřování a vyžádání tokenů zabezpečení.

Pokud chcete definovat tato volání, otevřete soubor scr/client/RequestTypes.ts a připojte následující fragment kódu:

   export interface TokenRequestType {
        continuation_token: string;
        client_id: string;
        grant_type: string;
        scope: string;
        password?: string;
        oob?: string;
        challenge_type?: string;
    }

    // Sign in
    export interface TokenSignInType {
        continuation_token: string;
        grant_type: string;
        password?: string;
        oob?: string;
    }

    export interface ChallengeRequest {
        client_id: string;
        challenge_type: string;
        continuation_token: string;
    }

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

    export interface SignInTokenRequest {
        client_id: string;
        grant_type: string;
        continuation_token: string;
        scope: string;
        challenge_type?: string;
        password?: string;
        oob?: string;
    }

Definování typu aplikace odpovědí, která přijímá z nativního rozhraní API pro ověřování

Pokud chcete definovat typ odpovědí, které aplikace může přijímat z nativního ověřovacího rozhraní API pro operaci přihlášení, otevřete soubor src/client/ResponseTypes.ts a připojte následující fragment kódu:

    export interface TokenResponseType {
        token_type: string;
        scope: string;
        expires_in: number;
        access_token: string;
        refresh_token: string;
        id_token: string;
    }

V této části přidáte kód, který zpracovává požadavky na tok přihlašování. Příkladem těchto požadavků je spuštění toku přihlášení, výběr metody ověřování nebo vyžádání tokenu zabezpečení.

Uděláte to tak, že vytvoříte soubor s názvem src/client/SignInService.tsa pak přidáte následující fragment kódu:

    import { CLIENT_ID, ENV } from "../config";
    import { postRequest } from "./RequestClient";
    import { ChallengeRequest, SignInStartRequest, TokenRequestType, TokenSignInType } from "./RequestTypes";
    import { TokenResponseType } from "./ResponseTypes";

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

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

    export const signInChallenge = async ({ continuation_token }: { continuation_token: string }) => {
        const payloadExt: ChallengeRequest = {
            continuation_token,
            client_id: CLIENT_ID,
            challenge_type: "password oob redirect",
        };

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

    export const signInTokenRequest = async (request: TokenSignInType): Promise<TokenResponseType> => {
        const payloadExt: TokenRequestType = {
            ...request,
            client_id: CLIENT_ID,
            challenge_type: "password oob redirect",
            scope: "openid offline_access",
        };

        if (request.grant_type === "password") {
            payloadExt.password = request.password;
        }

        if (request.grant_type === "oob") {
            payloadExt.oob = request.oob;
        }

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

Vlastnost challenge_type zobrazuje metody ověřování, které klientská aplikace podporuje. Tato aplikace se přihlásí pomocí e-mailu s heslem, takže hodnota typu výzvy je přesměrování hesla oob. Přečtěte si více o výzvách typu .

Vytvoření komponent uživatelského rozhraní

Během toku přihlašování tato aplikace shromažďuje přihlašovací údaje uživatele, uživatelské jméno (e-mail) a heslo pro přihlášení uživatele. Jakmile se uživatel úspěšně přihlásí, aplikace zobrazí podrobnosti uživatele.

Vytvořte složku s názvem /pages/signin ve složce src.

Pokud chcete vytvořit, zobrazit a odeslat přihlašovací formulář, vytvořte soubor src/pages/signin/SignIn.tsxa přidejte následující kód:

    import React, { useState } from "react";
    import { Link as LinkTo, useNavigate } from "react-router-dom";
    import { signInStart, signInChallenge, signInTokenRequest } from "../../client/SignInService";
    import { ErrorResponseType } from "../../client/ResponseTypes";

    export const SignIn: React.FC = () => {
      const [email, setEmail] = useState<string>("");
      const [password, setPassword] = useState<string>("");
      const [error, setError] = useState<string>("");
      const [isLoading, setIsloading] = useState<boolean>(false);

      const navigate = useNavigate();
      const validateEmail = (email: string): boolean => {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(String(email).toLowerCase());
      };

      const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        if (!validateEmail(email)) {
          setError("Invalid email format");
          return;
        }
        setError("");
        setIsloading(true);
        try {
          const res1 = await signInStart({
            username: email,
          });
          const res2 = await signInChallenge({ continuation_token: res1.continuation_token });
          const res3 = await signInTokenRequest({
            continuation_token: res2.continuation_token,
            grant_type: "password",
            password: password,
          });
          navigate("/user", { state: res3 });
        } catch (err) {
          setError("An error has occured " + (err as ErrorResponseType).error_description);
        } finally {
          setIsloading(false);
        }
      };

      return (
        <div className="login-form">
          <form onSubmit={handleSubmit}>
            <h2>Login</h2>
            <div className="form-group">
              <label>Email:</label>
              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
            </div>
            <div className="form-group">
              <label>Password:</label>
              <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
            </div>
            {error && <div className="error">{error}</div>}
            {isLoading && <div className="warning">Sending request...</div>}
            <button type="submit" disabled={isLoading}>Login</button>
          </form>
        </div>
      );
    };

Zobrazení podrobností uživatele po úspěšném přihlášení:

Vytvořte soubor s názvem klient/Utils.tsa přidejte následující fragment kódu:

    export function parseJwt(token: string) {
        var base64Url = token.split(".")[1];
        var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
        var jsonPayload = decodeURIComponent(
            window
            .atob(base64)
            .split("")
            .map(function (c) {
                return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
            })
            .join("")
        );
        return JSON.parse(jsonPayload);
    }

Ve složce src/pages vytvořte složku s názvem user.

Vytvořte soubor s názvem src/pages/user/UserInfo.tsxa přidejte následující fragment kódu:

// User.tsx
import React from "react";
import { useLocation } from "react-router-dom";
import { parseJwt } from "../../client/Utils";

export const UserInfo: React.FC = () => {
  const { state } = useLocation();
  const decodedToken = parseJwt(state.access_token);
  const { given_name, scp, family_name, unique_name: email } = decodedToken;

  console.log(decodedToken);
  const familyName = family_name;
  const givenName = given_name;
  const tokenExpireTime = state.expires_in;
  const scopes = state.scope;

  return (
    <div className="user-info">
      <h2>User Information</h2>
      <div className="info-group">
        <label>Given Name:</label>
        <span>{givenName}</span>
      </div>
      <div className="info-group">
        <label>Family Name:</label>
        <span>{familyName}</span>
      </div>
      <div className="info-group">
        <label>Email:</label>
        <span>{email}</span>
      </div>
      <div className="info-group">
        <label>Token Expire Time:</label>
        <span>{tokenExpireTime}</span>
      </div>
      <div className="info-group">
        <label>Scopes:</label>
        <span>{scopes}</span>
      </div>
      <div className="info-group">
        <label>Token payload:</label>
        <span><pre>{JSON.stringify(decodedToken, null, 2)}</pre></span>
      </div>
    </div>
  );
};

Přidání tras aplikací

Otevřete soubor src/AppRoutes.tsx a nahraďte jeho obsah následujícím kódem:

import { Route, Routes } from "react-router-dom";
import { SignIn } from "./pages/SignIn/SignIn";
import { UserInfo } from "./pages/User/UserInfo";
import { SignUp } from "./pages/SignUp/SignUp";
import { SignUpChallenge } from "./pages/SignUp/SignUpChallenge";
import { SignUpCompleted } from "./pages/SignUp/SignUpCompleted";
//For password reset
//import { ResetPassword } from "./pages/ResetAccount/ResetPassword";

export const AppRoutes = () => {
  return (
    <Routes>
      <Route path="/" element={<SignUp />} />
      <Route path="/signin" element={<SignIn />} />
      <Route path="/user" element={<UserInfo />} />
      <Route path="/signup" element={<SignUp />} />
      <Route path="/signup/challenge" element={<SignUpChallenge />} />
      <Route path="/signup/completed" element={<SignUpCompleted />} />
      //For password reset
      //<Route path="/reset" element={<ResetPassword />} />
    </Routes>
  );
};

Spuštění a otestování aplikace

Použijte kroky v Spustit a otestovat vaši aplikaci ke spuštění vaší aplikace, ale tentokrát otestujte proces přihlášení pomocí uživatelského účtu, který jste si přihlásili dříve.

Uživatelům, kteří se přihlašují pomocí e-mailové adresy a hesla, můžete také povolit přihlášení pomocí uživatelského jména a hesla. Uživatelské jméno označované také jako alternativní přihlašovací identifikátor může být ID zákazníka, číslo účtu nebo jiný identifikátor, který se rozhodnete použít jako uživatelské jméno.

Uživatelské jména můžete k uživatelskému účtu přiřadit ručně prostřednictvím Centra pro správu Microsoft Entra nebo ho v aplikaci automatizovat prostřednictvím rozhraní Microsoft Graph API.

Pomocí postupu přihlášení pomocí aliasu nebo článku o uživatelském jménu můžete uživatelům povolit přihlášení pomocí uživatelského jména ve vaší aplikaci:

Další krok

Návod: Jak resetovat heslo v aplikaci React pro uživatele u externího nájemce pomocí nativního ověřování

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-11-21

Sdílet prostřednictvím

Kurz: Přihlášení uživatelů k jednostráňové aplikaci React pomocí nativního ověřování (Preview)