Delen via

Zelfstudie: Gebruikers aanmelden bij een React-app met één pagina met behulp van systeemeigen verificatie JavaScript SDK

Van toepassing op: Groene cirkel met een wit vinkje dat aangeeft dat de volgende inhoud van toepassing is op externe tenants. Externe tenants (meer informatie)

In deze zelfstudie leert u hoe u gebruikers kunt aanmelden bij een React-app met één pagina (SPA) met behulp van de javaScript SDK voor systeemeigen verificatie.

In deze handleiding leert u:

  • Werk een React-app bij om gebruikers aan te melden.
  • Test de aanmeldingsstroom.

Vereiste voorwaarden

UI-onderdelen maken

In deze sectie maakt u het formulier waarmee de aanmeldingsgegevens van de gebruiker worden verzameld:

  1. Maak een map met de naam src/app/sign-in.

  2. Maak sign-in/components/InitialForm.tsx-bestand en plak de code uit sign-in/components/InitialForm.tsx. In dit onderdeel wordt een formulier weergegeven waarin de gebruikersnaam van een gebruiker (e-mail) wordt verzameld.

  3. Als uw keuze voor verificatiemethode e-mail en eenmalige wachtwoordcode is, maakt u een sign-in/components/CodeForm.tsx-bestand en plakt u de code uit sign-in/components/CodeForm.tsx. Als de beheerder de optie 'eenmalige toegangscode per e-mail' instelt als het aanmeldproces in het Microsoft Entra-beheercentrum, geeft dit onderdeel een formulier weer om de eenmalige toegangscode van de gebruiker te verzamelen.

  4. Als uw keuze voor verificatiemethode e-mail en wachtwoord is, maakt u een sign-in/components/PasswordForm.tsx-bestand en plakt u de code uit sign-in/components/PasswordForm.tsx. In dit onderdeel wordt een formulier weergegeven waarmee het wachtwoord van een gebruiker wordt verzameld.

  5. Maak een sign-in/components/UserInfo.tsx-bestand en plak de code uit sign-in/components/UserInfo.tsx. In dit onderdeel worden de gebruikersnaam en aanmeldingsstatus van een aangemelde gebruiker weergegeven.

Formulierinteracties verwerken

In deze sectie voegt u code toe die interactie met aanmeldingsformulieren afhandelt, zoals het starten van een aanmeldingsstroom, het verzenden van een gebruikerswachtwoord of een eenmalige wachtwoordcode.

Maak een sign-in/page.tsx-bestand om logica voor een aanmeldingsstroom te verwerken. In dit bestand:

  • Importeer de benodigde onderdelen en geef het juiste formulier weer op basis van de status. Zie een volledig voorbeeld in 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>
    );
}

  • Gebruik het volgende codefragment om de aanmeldingsstroom te starten. Zie een volledig voorbeeld op sign-in/page.tsx voor meer informatie over het plaatsen van het codefragment:

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

    De instantiemethode van de SDK, signIn()start de aanmeldingsstroom.

  • Als uw keuze voor de verificatiestroom e-mail en eenmalige wachtwoordcode is, dient u de eenmalige wachtwoordcode in met behulp van het volgende codefragment. Zie een volledig voorbeeld op sign-in/page.tsx voor meer informatie over het plaatsen van het codefragment:

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

    De aanmeldingsmethode submitCode() verzendt de eenmalige wachtwoordcode.

  • Als uw keuze voor de verificatiestroom e-mail en wachtwoord is, dient u het wachtwoord van de gebruiker in met behulp van het volgende codefragment. Zie een volledig voorbeeld op sign-in/page.tsx voor meer informatie over het plaatsen van het codefragment:

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

    De aanmeldingsstatus submitPassword() verzendt het wachtwoord van de gebruiker.

Registratiefouten afhandelen

Tijdens het aanmelden slagen niet alle acties. De gebruiker kan zich bijvoorbeeld proberen aan te melden met een gebruikersnaam die niet bestaat of een ongeldige wachtwoordcode voor eenmalige e-mail of een wachtwoord indienen dat niet voldoet aan de minimale vereisten. Zorg ervoor dat u fouten correct afhandelt wanneer u het volgende doet:

  • Begin het aanmeldingsproces in de signIn() methode.

  • Verzend de eenmalige wachtwoordcode in de submitCode() methode.

  • Dien een wachtwoord in de submitPassword() methode in. U kunt deze fout afhandelen als uw keuze voor registratiestroom per e-mail en wachtwoord is.

Een van de fouten die kunnen voortvloeien uit de signIn() methode is result.error?.isRedirectRequired(). Dit scenario treedt op wanneer systeemeigen verificatie niet voldoende is om de verificatiestroom te voltooien. Als de autorisatieserver bijvoorbeeld mogelijkheden vereist die de client niet kan bieden. Meer informatie over native authenticatie-webterugval en hoe u webterugval kunt ondersteunen in uw React-app.

Uw app uitvoeren en testen

Gebruik de stappen in Uitvoeren en testen van uw app om uw app uit te voeren en test vervolgens de aanmeldingsstroom.

Aanmelden met een alias of gebruikersnaam inschakelen

U kunt gebruikers toestaan die zich aanmelden met een e-mailadres en wachtwoord, zich ook aan te melden met een gebruikersnaam en wachtwoord. De gebruikersnaam wordt ook wel een alternatieve aanmeldings-id genoemd, kan een klant-id, accountnummer of een andere id zijn die u als gebruikersnaam wilt gebruiken.

U kunt gebruikersnamen handmatig toewijzen aan het gebruikersaccount via het Microsoft Entra-beheercentrum of deze automatiseren in uw app via de Microsoft Graph API.

Gebruik de stappen in Aanmelden met een alias of gebruikersnaam-artikel om uw gebruikers toe te staan zich aan te melden met behulp van een gebruikersnaam in uw toepassing:

  1. Schakel gebruikersnaam in bij het inloggen.
  2. Maak gebruikers aan met een gebruikersnaam in het beheercentrum of werk bestaande gebruikers bij door een gebruikersnaam toe te voegen. Je kunt ook het aanmaken en updaten van gebruikers in je app automatiseren door gebruik te maken van de Microsoft Graph API.

Verwante inhoud

  • Last updated on