Freigeben über

Lernprogramm: Anmelden von Benutzern bei einer React-Einzelseiten-App mithilfe des javaScript SDK für systemeigene Authentifizierung

Gilt für: Grüner Kreis mit einem weißen Häkchensymbol, das angibt, dass der folgende Inhalt für externe Mandanten gilt. Externe Mandanten (weitere Informationen)

In diesem Lernprogramm erfahren Sie, wie Sie Benutzer mit dem nativen JavaScript-SDK bei einer React Single Page App (SPA) anmelden.

In diesem Tutorial erfahren Sie:

  • Aktualisieren Sie eine React-App, um Benutzer anzumelden.
  • Testen Sie den Anmeldefluss.

Voraussetzungen

Erstellen von UI-Komponenten

In diesem Abschnitt erstellen Sie das Formular, das die Anmeldeinformationen des Benutzers sammelt:

  1. Erstellen Sie einen Ordner namens "src/app/sign-in".

  2. Erstellen Sie die Datei "sign-in/components/InitialForm.tsx ", und fügen Sie dann den Code aus "sign-in/components/InitialForm.tsx" ein. Diese Komponente zeigt ein Formular an, das den Benutzernamen (E-Mail) eines Benutzers sammelt.

  3. Wenn Es sich bei der Wahl der Authentifizierungsmethode um E-Mail und einmalige Kennung handelt, erstellen Sie eine Anmelde-/Komponenten/CodeForm.tsx-Datei , und fügen Sie dann den Code aus "sign-in/components/CodeForm.tsx" ein. Wenn der Administrator die Einmalige E-Mail-Kennung als Anmeldefluss im Microsoft Entra Admin Center festlegt, zeigt diese Komponente ein Formular an, um die einmalige Kennung des Benutzers zu erfassen.

  4. Wenn Ihre Wahl der Authentifizierungsmethode E-Mail und Kennwort ist, erstellen Sie eine Anmelde-/Komponenten/PasswordForm.tsx-Datei , und fügen Sie dann den Code aus "sign-in/components/PasswordForm.tsx" ein. Diese Komponente zeigt ein Formular an, das das Kennwort eines Benutzers sammelt.

  5. Erstellen Sie eine Datei "sign-in/components/UserInfo.tsx ", und fügen Sie dann den Code aus "sign-in/components/UserInfo.tsx" ein. Diese Komponente zeigt den Benutzernamen und den Anmeldestatus eines angemeldeten Benutzers an.

Bearbeitung von Formularinteraktionen

In diesem Abschnitt fügen Sie Code hinzu, der Anmeldeformularinteraktionen behandelt, z. B. das Starten eines Anmeldeflusses, das Übermitteln des Benutzerkennworts oder eine Einmalkennung.

Erstellen Sie die Datei "sign-in/page.tsx ", um die Logik für einen Anmeldeablauf zu verarbeiten. In dieser Datei:

  • Importieren Sie die erforderlichen Komponenten, und zeigen Sie das richtige Formular basierend auf dem Zustand an. Ein vollständiges Beispiel finden Sie unter 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>
    );
}

  • Verwenden Sie den folgenden Codeausschnitt, um den Anmeldeablauf zu starten. Ein vollständiges Beispiel finden Sie unter "sign-in/page.tsx ", um zu erfahren, wo der Codeausschnitt platziert werden soll:

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

    Die Instanzmethode signIn()des SDK startet den Anmeldefluss.

  • Wenn Sie den Authentifizierungsfluss E-Mail und Einmalkennwort gewählt haben, übermitteln Sie das Einmalkennwort mithilfe des folgenden Codeausschnitts. Ein vollständiges Beispiel finden Sie unter "sign-in/page.tsx ", um zu erfahren, wo der Codeausschnitt platziert werden soll:

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

    Der Anmeldestatus submitCode() übermittelt die Einmalkennung.

  • Wenn die Wahl des Authentifizierungsflusses E-Mail und Kennwort ist, übergeben Sie das Kennwort des Benutzers mit folgendem Codeausschnitt. Ein vollständiges Beispiel finden Sie unter "sign-in/page.tsx ", um zu erfahren, wo der Codeausschnitt platziert werden soll:

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

    Das Kennwort des Benutzers wird vom Anmeldestatus submitPassword() übermittelt.

Behandeln von Registrierungsfehlern

Bei der Anmeldung sind nicht alle Aktionen erfolgreich. Beispielsweise kann der Benutzer versuchen, sich mit einem Benutzernamen anzumelden, der nicht vorhanden ist oder eine ungültige E-Mail-Kennung oder ein Kennwort sendet, das die Mindestanforderungen nicht erfüllt. Stellen Sie sicher, dass Fehler ordnungsgemäß behandelt werden, wenn Sie:

  • Starten Sie den Anmeldefluss in der signIn() Methode.

  • Übermitteln Sie das Einmalpasswort in der submitCode() Methode.

  • Senden Sie das Kennwort in der submitPassword() Methode. Sie bearbeiten diesen Fehler, wenn die Auswahl des Registrierungsablaufs per E-Mail und Kennwort erfolgt ist.

Einer der Fehler, die aus der signIn() Methode resultieren können, ist result.error?.isRedirectRequired(). Dieses Szenario tritt auf, wenn die native Authentifizierung nicht ausreicht, um den Authentifizierungsflow abzuschließen. Wenn beispielsweise der Autorisierungsserver Funktionen benötigt, die der Client nicht bereitstellen kann. Erfahren Sie mehr über den nativen Authentifizierungs-Web-Fallback und wie Sie den Web-Fallback in Ihrer React-App unterstützen.

Ausführen und Testen der App

Führen Sie die Schritte in "App ausführen und testen" aus, und testen Sie dann den Anmeldeablauf.

Aktivieren der Anmeldung mit einem Alias oder Benutzernamen

Sie können Benutzern, die sich mit einer E-Mail-Adresse und einem Kennwort anmelden, auch die Möglichkeit geben, sich mit einem Benutzernamen und Kennwort anzumelden. Der Benutzername wird auch als alternativer Anmeldebezeichner bezeichnet, kann eine Kunden-ID, Kontonummer oder ein anderer Bezeichner sein, den Sie als Benutzernamen verwenden möchten.

Sie können dem Benutzerkonto Benutzernamen manuell über das Microsoft Entra Admin Center zuweisen oder in Ihrer App über die Microsoft Graph-API automatisieren.

Führen Sie die Schritte im Artikel 'Anmelden mit einem Alias oder Benutzernamen' aus, um Ihren Benutzern die Anmeldung mit einem Benutzernamen in Ihrer Anwendung zu ermöglichen:

  1. Aktivieren Sie die Anmeldung mit dem Benutzernamen.
  2. Erstellen Sie Benutzer mit Benutzername im Admin Center , oder aktualisieren Sie vorhandene Benutzer, indem Sie einen Benutzernamen hinzufügen. Alternativ können Sie auch die Benutzererstellung und -aktualisierung in Ihrer App mithilfe der Microsoft Graph-API automatisieren.

Verwandte Inhalte

  • Last updated on