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

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 du Kit de développement logiciel (SDK) JavaScript d’authentification native.

Dans ce tutoriel, vous allez :

  • Mettez à jour une application React pour connecter des utilisateurs.
  • Testez le flux de connexion.

Conditions préalables

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 à sign-in/page.tsx pour savoir où placer 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.

    Note

    Le username paramètre accepte l’adresse e-mail de l’utilisateur ou son nom d’utilisateur (alias) lorsque l’attribut utilisateur intégré nom d’utilisateur est activé dans le flux utilisateur de votre locataire. L’utilisateur peut entrer l’une ou l’autre valeur pour se connecter. Pour activer l’attribut, consultez Activer le nom d’utilisateur dans la stratégie d’identificateur 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 à sign-in/page.tsx pour savoir où placer 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);
};

    La méthode submitCode() de l’état de connexion envoie le code secret à 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 à sign-in/page.tsx pour savoir où placer 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.

Contenu connexe

  • Last updated on