Tutoriel : Connecter les utilisateurs à une application monopage React en utilisant le kit de développement logiciel (SDK) JavaScript d’authentification native

S’applique à : Locataires externes (en savoir plus)

Dans ce tutoriel, vous allez apprendre à connecter des utilisateurs à une application monopage React à l’aide du Kit de développement logiciel (SDK) JavaScript d’authentification native.

Dans ce tutoriel, vous allez :

Conditions préalables

• Suivez les étapes de l’inscription des utilisateurs dans une application à page unique React à l’aide du Kit de développement logiciel (SDK) JavaScript d’authentification native.

Créer des composants d’interface utilisateur

Dans cette section, vous allez créer le formulaire qui collecte les informations de connexion de l’utilisateur :

1. Créez un dossier appelé src/app/sign-in.

2. Créez sign-in/components/InitialForm.tsx, puis collez le code de sign-in/components/InitialForm.tsx. Ce composant affiche un formulaire qui collecte le nom d’utilisateur (e-mail).

3. Si votre choix de méthode d’authentification est l’e-mail et le code secret à usage unique, créez un fichier connexion/components/CodeForm.tsx, puis collez le code de connexion/components/CodeForm.tsx. Si l’administrateur définit le code secret à usage unique par e-mail comme flux de connexion dans le Centre d’administration Microsoft Entra, ce composant affiche un formulaire pour collecter le code secret à usage unique de l’utilisateur.

4. Si votre choix de méthode d’authentification est un e-mail et un mot de passe, créez un fichier de connexion/components/PasswordForm.tsx , puis collez le code de connexion/components/PasswordForm.tsx. Ce composant affiche un formulaire qui collecte le mot de passe d’un utilisateur.

5. Créez un fichier sign-in/components/UserInfo.tsx, puis collez le code de sign-in/components/UserInfo.tsx. Ce composant affiche le nom d’utilisateur et l’état de connexion d’un utilisateur connecté.

Gérer les interactions de formulaire

Dans cette section, vous ajoutez du code qui gère les interactions de formulaire de connexion, telles que le démarrage d’un flux de connexion, l’envoi d’un mot de passe utilisateur ou un code secret à usage unique.

Créez un fichier de connexion/page.tsx pour gérer la logique d’un flux de connexion. Dans ce fichier :

• Importez les composants nécessaires et affichez le formulaire approprié en fonction de l’état. Consultez un exemple complet dans sign-in/page.tsx :

  import {
    CustomAuthPublicClientApplication,
    ICustomAuthPublicClientApplication,
    SignInCodeRequiredState,
    // Uncommon if using a Email + Password flow
    // SignInPasswordRequiredState,
    SignInCompletedState,
    AuthFlowStateBase,
  } from "@azure/msal-browser/custom-auth";
  
  export default function SignIn() {
      const [authClient, setAuthClient] = useState<ICustomAuthPublicClientApplication | null>(null);
      const [username, setUsername] = useState("");
      //If you are sign in using a Email + Password flow, uncomment the following line
      //const [password, setPassword] = useState("");
      const [code, setCode] = useState("");
      const [error, setError] = useState("");
      const [loading, setLoading] = useState(false);
      const [signInState, setSignInState] = useState<AuthFlowStateBase | null>(null);
      const [data, setData] = useState<CustomAuthAccountData | undefined>(undefined);
      const [loadingAccountStatus, setLoadingAccountStatus] = useState(true);
      const [isSignedIn, setCurrentSignInStatus] = useState(false);
  
      useEffect(() => {
          const initializeApp = async () => {
              const appInstance = await CustomAuthPublicClientApplication.create(customAuthConfig);
              setAuthClient(appInstance);
          };
  
          initializeApp();
      }, []);
  
      useEffect(() => {
          const checkAccount = async () => {
              if (!authClient) return;
  
              const accountResult = authClient.getCurrentAccount();
  
              if (accountResult.isCompleted()) {
                  setCurrentSignInStatus(true);
              }
  
              setData(accountResult.data);
  
              setLoadingAccountStatus(false);
          };
  
          checkAccount();
      }, [authClient]);
  
      const renderForm = () => {
          if (loadingAccountStatus) {
              return;
          }
  
          if (isSignedIn || signInState instanceof SignInCompletedState) {
              return <UserInfo userData={data} />;
          }
          //If you are signing up using Email + Password flow, uncomment the following block of code
          /*
          if (signInState instanceof SignInPasswordRequiredState) {
              return (
                  <PasswordForm
                      onSubmit={handlePasswordSubmit}
                      password={password}
                      setPassword={setPassword}
                      loading={loading}
                  />
              );
          }
          */
          if (signInState instanceof SignInCodeRequiredState) {
              return <CodeForm onSubmit={handleCodeSubmit} code={code} setCode={setCode} loading={loading} />;
          }
  
          return <InitialForm onSubmit={startSignIn} username={username} setUsername={setUsername} loading={loading} />;
      };
  
      return (
          <div style={styles.container}>
              <h2 style={styles.h2}>Sign In</h2>
              <>
                  {renderForm()}
                  {error && <div style={styles.error}>{error}</div>}
              </>
          </div>
      );
  }
  

• Pour démarrer le flux de connexion, utilisez l’extrait de code suivant. Consultez un exemple complet à connexion/page.tsx pour savoir où mettre l'extrait de code :

  const startSignIn = async (e: React.FormEvent) => {
      e.preventDefault();
      setError("");
      setLoading(true);
  
      if (!authClient) return;
  
      // Start the sign-in flow
      const result = await authClient.signIn({
          username,
      });
  
      // Thge result may have the different states,
      // such as Password required state, OTP code rquired state, Failed state and Completed state.
  
      if (result.isFailed()) {
          if (result.error?.isUserNotFound()) {
              setError("User not found");
          } else if (result.error?.isInvalidUsername()) {
              setError("Username is invalid");
          } else if (result.error?.isPasswordIncorrect()) {
              setError("Password is invalid");
  
          } else {
              setError(`An error occurred: ${result.error?.errorData?.errorDescription}`);
          }
      }
  
      if (result.isCompleted()) {
          setData(result.data);
      }
  
      setSignInState(result.state);
  
      setLoading(false);
  };
  

  La méthode d’instance du Kit de développement logiciel (SDK), signIn()démarre le flux de connexion.

• Si votre choix de flux d’authentification est l’e-mail et le code secret à usage unique, envoyez le code secret à usage unique à l’aide de l’extrait de code suivant. Consultez un exemple complet à connexion/page.tsx pour savoir où mettre l'extrait de code :

  const handleCodeSubmit = async (e: React.FormEvent) => {
      e.preventDefault();
      setError("");
      setLoading(true);
  
      if (signInState instanceof SignInCodeRequiredState) {
          const result = await signInState.submitCode(code);
  
          // the result object may have the different states, such as Failed state and Completed state.
  
          if (result.isFailed()) {
              if (result.error?.isInvalidCode()) {
                  setError("Invalid code");
              } else {
                  setError(result.error?.errorData?.errorDescription || "An error occurred while verifying the code");
              }
          }
  
          if (result.isCompleted()) {
              setData(result.data);
              setSignInState(result.state);
          }
      }
  
      setLoading(false);
  };
  

  L'état de connexion submitCode() soumet le code à usage unique.

• Si votre choix de flux d’authentification est e-mail et mot de passe, envoyez le mot de passe de l’utilisateur à l’aide de l’extrait de code suivant. Consultez un exemple complet à connexion/page.tsx pour savoir où mettre l'extrait de code :

  const handlePasswordSubmit = async (e: React.FormEvent) => {
      e.preventDefault();
      setError("");
      setLoading(true);
  
      if (signInState instanceof SignInPasswordRequiredState) {
          const result = await signInState.submitPassword(password);
  
          if (result.isFailed()) {
              if (result.error?.isInvalidPassword()) {
                  setError("Incorrect password");
              } else {
                  setError(
                      result.error?.errorData?.errorDescription || "An error occurred while verifying the password"
                  );
              }
          }
  
          if (result.isCompleted()) {
              setData(result.data);
  
              setSignInState(result.state);
          }
      }
  
      setLoading(false);
  };
  

  L'état de connexion submitPassword() soumet le mot de passe de l'utilisateur.

Gérer les erreurs d’inscription

Pendant la connexion, toutes les actions n’aboutissent pas. Par exemple, l’utilisateur peut tenter de se connecter avec un nom d’utilisateur qui n’existe pas ou d’envoyer un code secret à usage unique ou un mot de passe non valide qui ne répond pas aux exigences minimales. Vérifiez que vous gérez correctement les erreurs lorsque vous :

• Démarrez le processus de connexion dans la méthode signIn().

• Soumettez le code secret unique dans la méthode submitCode().

• Envoyez le mot de passe dans la submitPassword() méthode. Vous gérez cette erreur si votre choix de flux d’inscription est par e-mail et par mot de passe.

L’une des erreurs pouvant résulter de la signIn() méthode est result.error?.isRedirectRequired(). Ce scénario se produit quand l’authentification native n’est pas suffisante pour effectuer le flux d’authentification. Par exemple, si le serveur d’autorisation nécessite des fonctionnalités que le client ne peut pas fournir. En savoir plus sur l'authentification native avec secours web et sur la prise en charge du secours web dans votre application React.

Exécuter et tester votre application

Utilisez les étapes de Exécutez et testez votre application pour faire tourner votre application, puis testez son flux de connexion.

Activer la connexion avec un alias ou un nom d’utilisateur

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 appelé identifiant de connexion alternatif, peut être un ID client, un numéro de compte ou tout 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 l’article Se connecter avec un alias ou un nom d'utilisateur pour permettre à vos utilisateurs de se connecter à l’aide d’un nom d’utilisateur dans votre application :

1. Activez le nom d’utilisateur dans la connexion.
2. Créez des utilisateurs avec un nom d’utilisateur dans le Centre d’administration ou mettez à jour les utilisateurs existants en ajoutant un nom d’utilisateur. Vous pouvez également automatiser la création et la mise à jour des utilisateurs dans votre application à l’aide de l’API Microsoft Graph.

Contenu connexe

• Tutoriel : Réinitialiser le mot de passe dans une application à page unique React à l’aide du Kit de développement logiciel (SDK) JavaScript d’authentification native
• prend en charge le repli web dans votre application React.