Condividi tramite

Esercitazione: Autenticare gli utenti in un'app React a pagina singola usando l'SDK JavaScript nativo per l'autenticazione

Si applica a: un cerchio verde con un segno di spunta bianco che indica che il contenuto seguente si applica ai tenant esterni. Tenant esterni (ulteriori informazioni)

Questa esercitazione illustra come consentire agli utenti di accedere a un'app a pagina singola React usando JavaScript SDK per l'autenticazione nativa.

In questa esercitazione, farai:

  • Aggiornare un'app React per l'accesso degli utenti.
  • Testare il flusso di accesso.

Prerequisiti

Creare componenti dell'interfaccia utente

In questa sezione viene creato il modulo che raccoglie le informazioni di accesso dell'utente:

  1. Creare una cartella denominata src/app/sign-in.

  2. Creare il file sign-in/components/InitialForm.tsx, quindi incollare il codice da sign-in/components/InitialForm.tsx. Questo componente visualizza un modulo che raccoglie il nome utente di un utente (indirizzo di posta elettronica).

  3. Se la scelta del metodo di autenticazione è di posta elettronica e passcode monouso, creare un file di accesso/components/CodeForm.tsx , quindi incollare il codice da sign-in/components/CodeForm.tsx. Se l'amministratore imposta il passcode monouso tramite posta elettronica come flusso di accesso nell'interfaccia di amministrazione di Microsoft Entra, questo componente visualizza un modulo per raccogliere il passcode monouso dall'utente.

  4. Se la scelta del metodo di autenticazione è email e password, crea un file sign-in/components/PasswordForm.tsx, quindi incolla il codice da sign-in/components/PasswordForm.tsx. Questo componente visualizza un modulo che raccoglie la password di un utente.

  5. Creare un file sign-in/components/UserInfo.tsx, quindi incollare il codice da sign-in/components/UserInfo.tsx. Questo componente visualizza il nome utente e lo stato di accesso di un utente connesso.

Gestire le interazioni con i moduli

In questa sezione viene aggiunto codice che gestisce le interazioni con i moduli di accesso, ad esempio l'avvio di un flusso di accesso, l'invio della password utente o un passcode monouso.

Creare il file sign-in/page.tsx per gestire la logica per un flusso di accesso. In questo file:

  • Importare i componenti necessari e visualizzare il formato corretto in base allo stato. Consultare un esempio completo 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>
    );
}

  • Per avviare il flusso di accesso, usare il frammento di codice seguente. Per sapere dove inserire il frammento di codice, vedere un esempio completo in sign-in/page.tsx :

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

    Il metodo di istanza dell'SDK, signIn(), avvia il flusso di accesso.

  • Se la scelta del flusso di autenticazione è di posta elettronica e passcode monouso, inviare il passcode monouso usando il frammento di codice seguente. Per sapere dove inserire il frammento di codice, vedere un esempio completo in sign-in/page.tsx :

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

    Lo stato di accesso submitCode() invia il passcode monouso.

  • Se la scelta del flusso di autenticazione è posta elettronica e password, inviare la password dell'utente usando il frammento di codice seguente. Per sapere dove inserire il frammento di codice, vedere un esempio completo in sign-in/page.tsx :

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

    Nello stato di accesso, submitPassword() invia la password dell'utente.

Gestire gli errori di iscrizione

Durante l'accesso, non tutte le azioni hanno esito positivo. Ad esempio, l'utente potrebbe tentare di accedere con un nome utente che non esiste o inviare un passcode monouso di posta elettronica non valido o una password che non soddisfa i requisiti minimi. Assicurarsi di gestire correttamente gli errori quando:

  • Avvia il flusso di accesso nel metodo signIn().

  • Invia il passcode monouso nel metodo submitCode().

  • Invia la password nel metodo submitPassword(). Gestisci questo errore se scegli la modalità di iscrizione tramite email e password.

Uno degli errori che possono derivare dal signIn() metodo è result.error?.isRedirectRequired(). Questo scenario si verifica quando l'autenticazione nativa non è sufficiente per completare il flusso di autenticazione. Ad esempio, se il server di autorizzazione richiede funzionalità che il client non può fornire. Altre informazioni sul fallback Web di autenticazione nativa e su come supportare il fallback Web nell'app React.

Eseguire e testare l'app

Usare la procedura descritta in Eseguire e testare l'app per eseguire l'app, quindi testare il flusso di accesso.

Abilitare l'accesso con un alias o un nome utente

È possibile consentire agli utenti che accedono con un indirizzo di posta elettronica e una password di accedere anche con un nome utente e una password. Il nome utente, detto anche identificatore di accesso alternativo, può essere un ID cliente, un numero di account o un altro identificatore che si sceglie di usare come nome utente.

È possibile assegnare i nomi utente all'account utente manualmente tramite l'interfaccia di amministrazione di Microsoft Entra o automatizzarla nell'app tramite l'API Microsoft Graph.

Usare la procedura descritta nell'articolo Accedere con un alias o un nome utente per consentire agli utenti di accedere usando un nome utente nell'applicazione:

  1. Abilita il nome utente nell'accesso.
  2. Crea utenti con nome utente nel centro amministrativo o aggiorna gli utenti esistenti aggiungendo un nome utente. In alternativa, puoi anche automatizzare la creazione e l'aggiornamento degli utenti nella tua app utilizzando l'API Microsoft Graph.

Contenuti correlati

  • Last updated on