Tutorial: Conectar usuários em um aplicativo de página única do React usando o SDK javaScript de autenticação nativa

Aplica-se a: Círculo verde com um símbolo de marca de seleção branca que indica que o conteúdo a seguir se aplica a locatários externos. Locatários externos (saiba mais)

Neste tutorial, você aprenderá a conectar usuários em um SPA (aplicativo de página única) do React usando o SDK javaScript de autenticação nativa.

Neste tutorial, você:

  • Atualize um aplicativo React para conectar usuários.
  • Teste o fluxo de login.

Pré-requisitos

Criar componentes de interface do usuário

Nesta seção, você criará o formulário que coleta as informações de entrada do usuário:

  1. Crie uma pasta chamada src/app/login.

  2. Crie o arquivo sign-in/components/InitialForm.tsx e depois cole o código de sign-in/components/InitialForm.tsx. Esse componente exibe um formulário que coleta o nome de usuário (email) de um usuário.

  3. Se sua opção de método de autenticação for email e código de uso único, crie um arquivo sign-in/components/CodeForm.tsx e cole o código de sign-in/components/CodeForm.tsx. Se o administrador definir a senha única de email como o fluxo de entrada no Centro de administração do Microsoft Entra, esse componente exibirá um formulário para coletar a senha única do usuário.

  4. Se sua opção de método de autenticação for email e senha, crie um arquivo sign-in/components/PasswordForm.tsx e cole o código de sign-in/components/PasswordForm.tsx. Esse componente exibe um formulário que coleta a senha de um usuário.

  5. Crie um arquivo sign-in/componentes/UserInfo.tsx, então cole o código de sign-in/componentes/UserInfo.tsx. Esse componente exibe o nome de usuário e o status de entrada de um usuário conectado.

Gerenciar interações de formulário

Nesta seção, você adicionará um código que manipula interações de formulário de entrada, como iniciar um fluxo de entrada, enviar senha de usuário ou uma senha única.

Crie o arquivo sign-in/page.tsx para manipular a lógica de um fluxo de login. Neste arquivo:

  • Importe os componentes necessários e exiba o formulário adequado com base no estado. Veja um exemplo completo em login/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>
    );
}

  • Para iniciar o fluxo de login, use o trecho de código a seguir. Veja um exemplo completo em sign-in/page.tsx para saber onde colocar o snippet de código:

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

    O método de instância do SDK signIn() inicia o fluxo de entrada.

    Note

    O username parâmetro aceita o endereço de email do usuário ou seu nome de usuário (alias) quando o atributo de usuário interno Username está habilitado no fluxo de usuário do locatário. O usuário pode inserir qualquer valor para entrar. Para habilitar o atributo, consulte Habilitar nome de usuário na política de identificador de entrada.

  • Se sua opção de fluxo de autenticação for email e senha única, envie a senha única usando o snippet de código a seguir. Veja um exemplo completo em sign-in/page.tsx para saber onde colocar o snippet de código:

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

    O submitCode() do estado de logon envia a senha de uso único.

  • Se sua opção de fluxo de autenticação for email e senha, envie a senha do usuário usando o snippet de código a seguir. Veja um exemplo completo em sign-in/page.tsx para saber onde colocar o snippet de código:

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

    O submitPassword() do estado de logon envia a senha do usuário.

Tratar erros de inscrição

Durante o login, nem todas as ações são bem-sucedidas. Por exemplo, o usuário pode tentar entrar com um nome de usuário que não existe ou enviar uma senha única de email inválida ou uma senha que não atenda aos requisitos mínimos. Certifique-se de lidar com erros corretamente ao:

  • Inicie o fluxo de login no método signIn().

  • Envie o código único pelo método submitCode().

  • Enviar senha no método submitPassword(). Você lidará com esse erro se sua opção de fluxo de inscrição for por email e senha.

Um dos erros que podem resultar do signIn() método é result.error?.isRedirectRequired(). Esse cenário ocorre quando a autenticação nativa não é suficiente para concluir o fluxo de autenticação. Por exemplo, se o servidor de autorização exigir recursos que o cliente não pode fornecer. Saiba mais sobre o fallback para Web na autenticação nativa e como oferecer suporte ao fallback para Web no seu aplicativo React.

Executar e testar seu aplicativo

Use as etapas em Executar e teste seu aplicativo para executar seu aplicativo e teste o fluxo de entrada.

Conteúdo relacionado

  • Last updated on