Sdílet prostřednictvím

Kurz: Přihlášení uživatelů k jednostráňové aplikaci React pomocí nativní sady JavaScript SDK pro ověřování

Platí pro: Zelený kruh s bílým symbolem zaškrtnutí, který označuje, že následující obsah platí pro externí nájemce. Externí nájemci (další informace)

V tomto kurzu se dozvíte, jak se přihlásit uživatele k jednostránkové aplikaci React (SPA) pomocí nativní sady JavaScript SDK pro ověřování.

V tomto kurzu se naučíte:

  • Aktualizujte aplikaci React tak, aby se přihlásili uživatelé.
  • Otestujte tok přihlášení.

Požadavky

Vytvoření komponent uživatelského rozhraní

V této části vytvoříte formulář, který shromažďuje přihlašovací údaje uživatele:

  1. Vytvořte složku s názvem src/app/sign-in.

  2. Vytvořte soubor sign-in/components/InitialForm.tsx a vložte kód z přihlášení/components/InitialForm.tsx. Tato komponenta zobrazí formulář, který shromažďuje uživatelské jméno uživatele (e-mail).

  3. Pokud je vaše volba metody ověřování e-mailem a jednorázovým heslem, vytvořte soubor sign-in/components/CodeForm.tsx a vložte kód z přihlášení/components/CodeForm.tsx. Pokud správce nastaví jednorázové heslo e-mailu jako tok přihlašování v Centru pro správu Microsoft Entra, zobrazí tato komponenta formulář pro shromáždění jednorázového hesla od uživatele.

  4. Pokud je zvolená metoda ověřování e-mail a heslo, vytvořte soubor sign-in/components/PasswordForm.tsx a vložte kód z přihlášení/components/PasswordForm.tsx. Tato komponenta zobrazí formulář, který shromažďuje heslo uživatele.

  5. Vytvořte soubor přihlášení/components/UserInfo.tsx a vložte kód z přihlášení/components/UserInfo.tsx. Tato komponenta zobrazuje uživatelské jméno přihlášeného uživatele a stav přihlášení.

Zpracování interakcí formuláře

V této části přidáte kód, který zpracovává interakce s přihlašovacími formuláři, jako je spuštění toku přihlašování, odeslání hesla uživatele nebo jednorázové heslo.

Vytvořte soubor sign-in/page.tsx pro zpracování logiky pro tok přihlašování. V tomto souboru:

  • Naimportujte potřebné součásti a zobrazte správný formulář na základě stavu. Podívejte se na úplný příklad v 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>
    );
}

  • Pokud chcete spustit tok přihlašování, použijte následující fragment kódu. Podívejte se na úplný příklad na adrese sign-in/page.tsx a zjistěte, kam umístit fragment kódu:

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

    Instance metody SDK signIn() spustí tok přihlášení.

  • Pokud je váš výběr toku ověřování e-mailem a jednorázovým heslem, odešlete jednorázový přístupový kód pomocí následujícího fragmentu kódu. Podívejte se na úplný příklad na adrese sign-in/page.tsx a zjistěte, kam umístit fragment kódu:

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

    Přihlašovací proces submitCode() odešle jednorázové heslo.

  • Pokud máte na výběr toku ověřování e-mail a heslo, odešlete heslo uživatele pomocí následujícího fragmentu kódu. Podívejte se na úplný příklad na adrese sign-in/page.tsx a zjistěte, kam umístit fragment kódu:

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

    Přihlašovací stav submitPassword() odešle heslo uživatele.

Zpracování chyb registrace

Během přihlašování nejsou všechny akce úspěšné. Uživatel se například může pokusit přihlásit pomocí uživatelského jména, které neexistuje, nebo odeslat neplatný e-mail jednorázovým heslem nebo heslem, které nesplňuje minimální požadavky. Ujistěte se, že chyby zpracováváte správně, když:

  • Spusťte tok přihlášení v signIn() metodě.

  • Odešle jednorázový přístupový kód v submitCode() metodě.

  • Odešlete heslo v submitPassword() metodě. Tuto chybu zpracujete v případě, že váš zvolený způsob registrace je přihlášení e-mailem a heslem.

Jednou z chyb, které mohou být výsledkem metody signIn() , je result.error?.isRedirectRequired(). K tomuto scénáři dochází v případě, že k dokončení toku ověřování nestačí nativní ověřování. Pokud například autorizační server vyžaduje možnosti, které klient nemůže poskytnout. Přečtěte si další informace o náhradním webu nativního ověřování a o tom, jak podporovat záložní web v aplikaci React.

Spuštění a otestování aplikace

Pomocí kroků v části Spustit a otestovat aplikaci spusťte aplikaci a pak otestujte tok přihlášení.

Povolení přihlášení pomocí aliasu nebo uživatelského jména

Uživatelům, kteří se přihlašují pomocí e-mailové adresy a hesla, můžete také povolit přihlášení pomocí uživatelského jména a hesla. Uživatelské jméno označované také jako alternativní přihlašovací identifikátor může být ID zákazníka, číslo účtu nebo jiný identifikátor, který se rozhodnete použít jako uživatelské jméno.

Uživatelské jména můžete k uživatelskému účtu přiřadit ručně prostřednictvím Centra pro správu Microsoft Entra nebo ho v aplikaci automatizovat prostřednictvím rozhraní Microsoft Graph API.

Pomocí postupu přihlášení pomocí aliasu nebo článku o uživatelském jménu můžete uživatelům povolit přihlášení pomocí uživatelského jména ve vaší aplikaci:

  1. Povolte přihlášení pomocí uživatelského jména.
  2. Vytvořte uživatele s uživatelským jménem v Centru pro správu nebo aktualizujte stávající uživatele přidáním uživatelského jména. Alternativně můžete také automatizovat vytváření a aktualizace uživatelů ve vaší aplikaci pomocí rozhraní Microsoft Graph API.

Související obsah

  • Last updated on