Registrieren von Benutzern bei einem React SPA mithilfe des nativen Authentifizierungs-SDKs - Microsoft identity platform

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 eine einzelseitige React-App erstellen, die Benutzer mithilfe des JavaScript-SDKs der systemeigenen Authentifizierung registriert.

In diesem Tutorial erfahren Sie:

Erstellen Sie ein React-Next.js-Projekt.
Fügen Sie MSAL JS SDK hinzu.
Fügen Sie Ui-Komponenten der App hinzu.
Richten Sie das Projekt ein, um Benutzer zu registrieren.

Voraussetzungen

Führen Sie die Schritte in der Schnellstartanleitung aus: Anmelden von Benutzern in einer React-Einzelseiten-App mit systemeigenem JavaScript SDK. Diese Schnellstartanleitung zeigt, wie Sie ein Beispiel für React-Code ausführen.
Führen Sie die Schritte im Einrichten des CORS-Proxyservers aus, um CORS-Header für die systemeigene Authentifizierung zu verwalten.
Visual Studio Code oder ein anderer Code-Editor.
Node.js

Erstellen eines React-Projekts und Installieren von Abhängigkeiten

Führen Sie an einem Speicherort ihrer Wahl auf Ihrem Computer die folgenden Befehle aus, um ein neues React-Projekt mit dem Namen reactspazu erstellen, navigieren Sie in den Projektordner, und installieren Sie dann Pakete:

npx create-next-app@latest
cd reactspa
npm install

Nachdem Sie die Befehle erfolgreich ausgeführt haben, sollten Sie über eine App mit der folgenden Struktur verfügen:

spasample/
└──node_modules/
   └──...
└──public/
   └──...
└──src/
   └──app/
      └──favicon.ico
      └──globals.css
      └──page.tsx
      └──layout.tsx
└──postcss.config.mjs
└──package-lock.json
└──package.json
└──tsconfig.json
└──README.md
└──next-env.d.ts
└──next.config.ts

Hinzufügen des JavaScript-SDK zu Ihrem Projekt

Um das systemeigene Authentifizierungs-JavaScript SDK in Ihrer App zu verwenden, verwenden Sie Ihr Terminal, um es mithilfe des folgenden Befehls zu installieren:

npm install @azure/msal-browser

Die systemeigenen Authentifizierungsfunktionen sind Teil der azure-msal-browser Bibliothek. Um systemeigene Authentifizierungsfeatures zu verwenden, importieren Sie aus @azure/msal-browser/custom-auth. Beispiel:

  import CustomAuthPublicClientApplication from "@azure/msal-browser/custom-auth";

Hinzufügen der Clientkonfiguration

In diesem Abschnitt definieren Sie eine Konfiguration für die systemeigene öffentliche Clientanwendung für die Authentifizierung, damit sie mit der Schnittstelle des SDK interagieren kann. Erstellen Sie dazu eine Datei namens "src/config/auth-config.ts", und fügen Sie dann den folgenden Code hinzu:

export const customAuthConfig: CustomAuthConfiguration = {
  customAuth: {
    challengeTypes: ["password", "oob", "redirect"],
    authApiProxyUrl: "http://localhost:3001/api",
  },
  auth: {
    clientId: "Enter_the_Application_Id_Here",
    authority: "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com",
    redirectUri: "/",
    postLogoutRedirectUri: "/",
    navigateToLoginRequestUrl: false,
  },
  cache: {
    cacheLocation: "sessionStorage",
  },
  system: {
    loggerOptions: {
      loggerCallback: (
        level: LogLevel,
        message: string,
        containsPii: boolean
      ) => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
        }
      },
    },
  },
};

Suchen Sie im Code den Platzhalter:

Enter_the_Application_Id_Here ersetzen Sie sie dann durch die Anwendungs-ID (Client) der App, die Sie zuvor registriert haben.
Enter_the_Tenant_Subdomain_Here ersetzen Sie sie dann durch die Mandantendomäne in Ihrem Microsoft Entra Admin Center. Wenn Ihre primäre Mandantendomäne z. B. contoso.onmicrosoft.comist, verwenden Sie contoso. Wenn Sie Ihren Mandantennamen nicht kennen, finden Sie weitere Informationen unter Auslesen der Details Ihres Mandanten.

Erstellen von UI-Komponenten

Diese App sammelt Benutzerdetails wie Vorname, Benutzername (E-Mail), Kennwort und eine Einmalkennung des Benutzers. Daher muss die App über ein Formular verfügen, das diese Informationen sammelt.

Erstellen Sie einen Ordner namens "src/app/sign-up " im Ordner "src ".
Erstellen Sie die Datei "sign-up/components/InitialForm.tsx ", und fügen Sie dann den Code aus "sign-up/components/InitialForm.tsx" ein. Diese Komponente zeigt ein Formular an, das Benutzeranmeldungsattribute sammelt.
Erstellen Sie eine Datei "sign-up/components/CodeForm.tsx ", und fügen Sie dann den Code aus "sign-up/components/CodeForm.tsx" ein. Diese Komponente zeigt ein Formular an, das eine einmal an den Benutzer gesendete Kennung sammelt. Sie benötigen dieses Formular für E-Mails mit Kennwort oder E-Mail mit einmaliger Kennungsauthentifizierungsmethode.
Wenn Ihre Wahl der Authentifizierungsmethode E-Mail mit Kennwort ist, erstellen Sie eine Registrierungs-/Komponenten/PasswordForm.tsx-Datei , und fügen Sie dann den Code aus "sign-up/components/PasswordForm.tsx" ein. Diese Komponente zeigt ein Kennworteingabeformular an.

Behandeln der Formularinteraktion

In diesem Abschnitt fügen Sie Code hinzu, der Anmeldeformularinteraktionen behandelt, z. B. das Übermitteln von Benutzeranmeldungsdetails oder eine einmalige Kennung oder ein Kennwort.

Erstellen Sie "sign-up/page.tsx ", um logik für einen Registrierungsablauf zu behandeln. 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-up/page.tsx":

    import { useEffect, useState } from "react";
    import { customAuthConfig } from "../../config/auth-config";
    import { styles } from "./styles/styles";
    import { InitialFormWithPassword } from "./components/InitialFormWithPassword";

    import {
    CustomAuthPublicClientApplication,
    ICustomAuthPublicClientApplication,
    SignUpCodeRequiredState,
    // Uncomment if your choice of authentication method is email with password
    // SignUpPasswordRequiredState,
    SignUpCompletedState,
    AuthFlowStateBase,
  } from "@azure/msal-browser/custom-auth";

    import { SignUpResultPage } from "./components/SignUpResult";
    import { CodeForm } from "./components/CodeForm";
    import { PasswordForm } from "./components/PasswordForm";    
export default function SignUpPassword() {
    const [authClient, setAuthClient] = useState<ICustomAuthPublicClientApplication | null>(null);
    const [firstName, setFirstName] = useState("");
    const [lastName, setLastName] = useState("");
    const [jobTitle, setJobTitle] = useState("");
    const [city, setCity] = useState("");
    const [country, setCountry] = useState("");
    const [email, setEmail] = useState("");
    //Uncomment if your choice of authentication method is email with password
    //const [password, setPassword] = useState("");
    const [code, setCode] = useState("");
    const [error, setError] = useState("");
    const [loading, setLoading] = useState(false);
    const [signUpState, setSignUpState] = useState<AuthFlowStateBase | null>(null);
    const [loadingAccountStatus, setLoadingAccountStatus] = useState(true);
    const [isSignedIn, setSignInState] = 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()) {
                setSignInState(true);
            }
            setLoadingAccountStatus(false);
        };
        checkAccount();
    }, [authClient]);

    const renderForm = () => {
        if (loadingAccountStatus) {
            return;
        }
        if (isSignedIn) {
            return (
                <div style={styles.signed_in_msg}>Please sign out before processing the sign up.</div>
            );
        }
        if (signUpState instanceof SignUpCodeRequiredState) {
            return (
                <CodeForm
                    onSubmit={handleCodeSubmit}
                    code={code}
                    setCode={setCode}
                    loading={loading}
                />
            );
        } 
        //Uncomment the following block of code if your choice of authentication method is email with password 
        /*
        else if(signUpState instanceof SignUpPasswordRequiredState) {
            return <PasswordForm
                onSubmit={handlePasswordSubmit}
                password={password}
                setPassword={setPassword}
                loading={loading}
            />;
        }
        */
        else if (signUpState instanceof SignUpCompletedState) {
            return <SignUpResultPage />;
        } else {
            return (
                <InitialForm
                    onSubmit={handleInitialSubmit}
                    firstName={firstName}
                    setFirstName={setFirstName}
                    lastName={lastName}
                    setLastName={setLastName}
                    jobTitle={jobTitle}
                    setJobTitle={setJobTitle}
                    city={city}
                    setCity={setCity}
                    country={country}
                    setCountry={setCountry}
                    email={email}
                    setEmail={setEmail}
                    loading={loading}
                />
            );
        }
    }
    return (
        <div style={styles.container}>
            <h2 style={styles.h2}>Sign Up</h2>
            {renderForm()}
            {error && <div style={styles.error}>{error}</div>}
        </div>
    );
}

Dieser Code erstellt auch eine Instanz der systemeigenen öffentlichen Authentifizierungs-App mithilfe der Clientkonfiguration:

const appInstance = await CustomAuthPublicClientApplication.create(customAuthConfig);
setAuthClient(appInstance);

Verwenden Sie den folgenden Codeausschnitt, um die ursprüngliche Formularübermittlung zu behandeln. Ein vollständiges Beispiel finden Sie unter "sign-up/page.tsx ", um zu erfahren, wo der Codeausschnitt platziert werden soll:

const handleInitialSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setLoading(true);

    if (!authClient) return;

    const attributes: UserAccountAttributes = {
        displayName: `${firstName} ${lastName}`,
        givenName: firstName,
        surname: lastName,
        jobTitle: jobTitle,
        city: city,
        country: country,
    };

    const result = await authClient.signUp({
        username: email,
        attributes
    });
    const state = result.state;

    if (result.isFailed()) {
        if (result.error?.isUserAlreadyExists()) {
            setError("An account with this email already exists");
        } else if (result.error?.isInvalidUsername()) {
            setError("Invalid uername");
        } else if (result.error?.isInvalidPassword()) {
            setError("Invalid password");
        } else if (result.error?.isAttributesValidationFailed()) {
            setError("Invalid attributes");
        } else if (result.error?.isMissingRequiredAttributes()) {
            setError("Missing required attributes");
        } else {
            setError(result.error?.errorData.errorDescription || "An error occurred while signing up");
        }
    } else {
        setSignUpState(state);
    }
    setLoading(false);
};

Die Instanzmethode signUp() des SDK startet den Registrierungsablauf.

Verwenden Sie den folgenden Codeausschnitt, um die einmalige Kennungsübermittlung zu verarbeiten. Ein vollständiges Beispiel finden Sie unter "sign-up/page.tsx ", um zu erfahren, wo der Codeausschnitt platziert werden soll:

const handleCodeSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setLoading(true);

    try {
        if (signUpState instanceof SignUpCodeRequiredState) {
            const result = await signUpState.submitCode(code);
            if (result.error) {
                if (result.error.isInvalidCode()) {
                    setError("Invalid verification code");
                } else {
                    setError("An error occurred while verifying the code");
                }
                return;
            }
            if (result.state instanceof SignUpCompletedState) {
                setSignUpState(result.state);
            }
        }
    } catch (err) {
        setError("An unexpected error occurred");
        console.error(err);
    } finally {
        setLoading(false);
    }
};

Verwenden Sie den folgenden Codeausschnitt, um die Kennwortübermittlung zu verarbeiten. Sie behandeln die Kennwortübermittlung, wenn ihre Wahl der Authentifizierungsmethode E-Mail mit Kennwort ist. Ein vollständiges Beispiel finden Sie unter "sign-up/page.tsx ", um zu erfahren, wo der Codeausschnitt platziert werden soll:

    const handlePasswordSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError("");
        setLoading(true);

        if (signUpState instanceof SignUpPasswordRequiredState) {
            const result = await signUpState.submitPassword(password);
            const state = result.state;

            if (result.isFailed()) {
                if (result.error?.isInvalidPassword()) {
                    setError("Invalid password");
                } else {
                    setError(result.error?.errorData.errorDescription || "An error occurred while submitting the password");
                }
            } else {
                setSignUpState(state);
            }
        }

        setLoading(false);
    };

Verwenden Sie dies signUpState instanceof SignUpCompletedState , um anzugeben, dass der Benutzer registriert wurde und der Ablauf abgeschlossen ist. Ein vollständiges Beispiel finden Sie unter "sign-up/page.tsx":
```
if (signUpState instanceof SignUpCompletedState) {
    return <SignUpResultPage/>;
}
```

Während der Registrierung sind nicht alle Aktionen erfolgreich. Beispielsweise kann der Benutzer versuchen, sich mit einer bereits verwendeten E-Mail-Adresse zu registrieren oder einen ungültigen E-Mail-Einmal-Passcode zu senden. Stellen Sie sicher, dass Fehler ordnungsgemäß behandelt werden, wenn Sie:

Starten Sie den Registrierungsablauf in der signUp() Methode.
Übermitteln Sie die einmalkennung in der submitCode() Methode.
Senden Sie das Kennwort in der submitPassword() Methode. Sie behandeln diesen Fehler, wenn Die Auswahl des Registrierungsablaufs per E-Mail und Kennwort erfolgt.

Einer der Fehler, die aus der signUp() 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 native authentifizierungsweb fallback und wie Sie Web-Fallback in Ihrer React-App unterstützen.

Nachdem sich ein Benutzer erfolgreich registriert hat, können Sie sie direkt bei der App anmelden, ohne einen neuen Anmeldefluss zu initiieren. Verwenden Sie dazu den folgenden Codeschnipsel. Ein vollständiges Beispiel finden Sie unter "sign-up/page.tsx":

if (signUpState instanceof SignUpCompletedState) {
    const result = await signUpState.signIn();
    const state = result.state;
    if (result.isFailed()) {
        setError(result.error?.errorData?.errorDescription || "An error occurred during auto sign-in");
    }
    
    if (result.isCompleted()) {
        setData(result.data);
        setSignUpState(state);
    }
}

Ausführen und Testen der App

Öffnen Sie ein Terminalfenster, und navigieren Sie zum Stammordner Ihrer App:
```
cd reactspa
```
Führen Sie zum Starten des CORS-Proxyservers den folgenden Befehl in Ihrem Terminal aus:
```
npm run cors
```
Um die React-App zu starten, öffnen Sie ein weiteres Terminalfenster, und führen Sie dann den folgenden Befehl aus:
```
cd reactspa
npm start
```
Öffnen Sie einen Webbrowser, und navigieren Sie zu http://localhost:3000/sign-up. Ein Registrierungsformular wird angezeigt.
Wenn Sie sich für ein Konto registrieren möchten, geben Sie Ihre Details ein, wählen Sie die Schaltfläche " Weiter " aus, und folgen Sie dann den Eingabeaufforderungen.

Als Nächstes können Sie die React-App aktualisieren, um sich bei einem Benutzer anzumelden oder das Kennwort des Benutzers zurückzusetzen.

Einrichten von poweredByHeader auf "false" in next.config.js

Standardmäßig ist der x-powered-by Header in den HTTP-Antworten enthalten, um anzugeben, dass die Anwendung von Next.jsunterstützt wird. Aus Sicherheits- oder Anpassungsgründen möchten Sie diesen Header jedoch möglicherweise entfernen oder ändern:

const nextConfig: NextConfig = {
  poweredByHeader: false,
  /* other config options here */
};

Nächster Schritt

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

Feedback

War diese Seite hilfreich?

Last updated on 2025-11-18

Freigeben über

Lernprogramm: Registrieren von Benutzern bei einer React-Einzelseiten-App mithilfe des nativen Authentifizierungs-JavaScript-SDKs (Vorschau)