Connecter des utilisateurs dans React SPA à l’aide de l’authentification native - Microsoft identity platform

S’applique à : cercle vert avec un symbole de coche blanc qui indique que le contenu suivant s’applique aux locataires externes. Locataires externes (en savoir plus)

Dans ce tutoriel, vous allez apprendre à connecter des utilisateurs à une application monopage React à l’aide de l’authentification native.

Dans ce tutoriel, vous allez :

Mettez à jour l’application React pour connecter des utilisateurs avec nom d’utilisateur(e-mail) et mot de passe.
Tester le flux de connexion.

Conditions préalables

Suivez les étapes de Tutoriel : Configurer le serveur proxy CORS pour gérer les en-têtes CORS pour l’authentification native.

Définir les types d’appels effectués par l’application à l’API d’authentification native

Pendant le flux de connexion, l’application effectue plusieurs appels à l’API d’authentification native, comme le démarrage d’une demande de connexion, la sélection d’une méthode d’authentification et la demande de jetons de sécurité.

Pour définir ces appels, ouvrez le fichier scr/client/RequestTypes.ts, puis ajoutez l’extrait de code suivant :

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

Définir le type de réponse reçu par l’API d’authentification native

Pour définir le type de réponses que l’application peut recevoir à partir de l’API d’authentification native pour l’opération de connexion, ouvrez le fichier src/client/ResponseTypes.ts, puis ajoutez l’extrait de code suivant :

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

Dans cette section, vous ajoutez du code qui traite les demandes de flux de connexion. Par exemple, ces requêtes démarrent un flux de connexion, sélectionnent une méthode d’authentification ou demandent un jeton de sécurité.

Pour ce faire, créez un fichier appelé src/client/SignInService.ts, puis ajoutez l’extrait de code suivant :

    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);
    };

La propriété challenge_type affiche les méthodes d’authentification que l’application cliente prend en charge. Cette application se connecte à l’aide de l’e-mail avec mot de passe, de sorte que la valeur du type de défi est la redirection oob de mot de passe. En savoir plus sur les types de défis .

Créer des composants d’interface utilisateur

Pendant le flux de connexion, cette application collecte les informations d’identification, le nom d’utilisateur (e-mail) et le mot de passe de l’utilisateur pour se connecter. Une fois l’utilisateur connecté, l’application affiche les détails de l’utilisateur.

Créez un dossier appelé /pages/signin dans le dossier src.

Pour créer, afficher et envoyer le formulaire de connexion, créez un fichier src/pages/signin/SignIn.tsx, puis ajoutez le code suivant :

    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>
      );
    };

Pour afficher les détails de l’utilisateur après une connexion réussie :

Créez un fichier appelé client/Utils.ts, puis ajoutez l’extrait de code suivant :

    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);
    }

Créez un dossier appelé user dans le dossier src/pages.

Créez un fichier appelé src/pages/user/UserInfo.tsx, puis ajoutez l’extrait de code suivant :

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

Ajouter des itinéraires d’application

Ouvrez le fichier src/AppRoutes.tsx, puis remplacez son contenu par le code suivant :

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>
  );
};

Exécuter et tester votre application

Utilisez les étapes de Exécuter et tester votre application pour exécuter votre application, mais cette fois, testez le flux de connexion à l’aide du compte d’utilisateur que vous avez enregistré précédemment.

Vous pouvez autoriser les utilisateurs qui se connectent avec une adresse e-mail et un mot de passe à se connecter avec un nom d’utilisateur et un mot de passe. Le nom d'utilisateur, également connu sous le nom d'identifiant de connexion alternatif, peut être un ID client, un numéro de compte ou un autre identifiant que vous choisissez d'utiliser comme nom d'utilisateur.

Vous pouvez affecter manuellement des noms d’utilisateur au compte d’utilisateur via le Centre d’administration Microsoft Entra ou l’automatiser dans votre application via l’API Microsoft Graph.

Utilisez les étapes de connexion avec un alias ou un nom d’utilisateur pour permettre à vos utilisateurs de se connecter en utilisant un nom d'utilisateur dans votre application:

Étape suivante

Tutoriel : Réinitialisation du mot de passe dans une application React pour utilisateurs d’un client externe utilisant l’authentification native

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2025-11-21

Partager via

Tutoriel : Connecter des utilisateurs à une application à page unique React à l’aide de l’authentification native (préversion)