Introdução ao MSAL React

Este artigo orientará você sobre como começar a usar @azure/msal-react. Abordaremos a inicialização, determinando se um usuário está autenticado, protegendo componentes, assinando um usuário e adquirindo um token de acesso.

Pré-requisitos

Inicialização

@azure/msal-react é baseado na API de contexto do React, e todas as partes do seu aplicativo que exigem autenticação devem ser envolvidas pelo componente MsalProvider. Primeiro, você precisará inicializar uma instância de PublicClientApplication e depois passá-la para MsalProvider como propriedade.

import React from "react";
import { createRoot } from "react-dom/client";

import { MsalProvider } from "@azure/msal-react";
import { Configuration,  PublicClientApplication } from "@azure/msal-browser";

import App from "./app.jsx";

// MSAL configuration
const configuration: Configuration = {
    auth: {
        clientId: "client-id"
    }
};

const pca = new PublicClientApplication(configuration);

// Component
const AppProvider = () => (
    <MsalProvider instance={pca}>
        <App />
    </MsalProvider>
);

const root = createRoot(document.getElementById("root"));
root.render(<AppProvider />);

Todos os componentes sob MsalProvider terão acesso à instância de PublicClientApplication via contexto, assim como a todos os hooks e componentes fornecidos por @azure/msal-react.

Determinando se um usuário está autenticado

A maioria dos aplicativos precisará renderizar condicionalmente determinados componentes com base em se um usuário está conectado ou não. @azure/msal-react fornece duas maneiras fáceis de fazer isso.

AuthenticatedTemplate e UnauthenticatedTemplate

AuthenticatedTemplate e UnauthenticatedTemplate os componentes só renderizarão seus filhos se um usuário for autenticado ou não autenticado, respectivamente.

import React from 'react';
import { AuthenticatedTemplate, UnauthenticatedTemplate } from "@azure/msal-react";

export function App() {
    return (
        <React.Fragment>
            <p>Anyone can see this paragraph.</p>
            <AuthenticatedTemplate>
                <p>At least one account is signed in!</p>
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate>
                <p>No users are signed in!</p>
            </UnauthenticatedTemplate>
        </React.Fragment>
    );
}

Gancho useIsAuthenticated

Como alternativa aos componentes encapsuladores acima, seu aplicativo poderá usar o gancho useIsAuthenticated. Você pode ler mais sobre isso em Hooks em MSAL React.

import React from 'react';
import { useIsAuthenticated } from "@azure/msal-react";

export function App() {
    const isAuthenticated = useIsAuthenticated();

    return (
        <React.Fragment>
            <p>Anyone can see this paragraph.</p>
            {isAuthenticated && (
                <p>At least one account is signed in!</p>
            )}
            {!isAuthenticated && (
                <p>No users are signed in!</p>
            )}
        </React.Fragment>
    );
}

Proteção de componentes

Se você tiver componentes que só deseja mostrar aos usuários autenticados, poderá usar qualquer um dos métodos acima. Mas e se você quiser invocar automaticamente um logon se um usuário ainda não estiver autenticado? @azure/msal-react fornece duas formas de fazer isso por meio do hook MsalAuthenticationTemplate ou do hook useMsalAuthentication.

MsalAuthenticationTemplate componente

O componente MsalAuthenticationTemplate renderizará seus filhos se um usuário for autenticado ou tentar conectar um usuário. Basta fornecer o tipo de interação que você deseja usar (redirecionamento ou pop-up) e, opcionalmente, um objeto de solicitação a ser passado para a API de logon, um componente a ser exibido enquanto a autenticação estiver em andamento ou um componente a ser exibido se ocorrer um erro.

Você pode encontrar um exemplo funcional disso em qualquer um dos nossos exemplos na /profile página.

import React from "react";
import { MsalAuthenticationTemplate } from "@azure/msal-react";
import { InteractionType } from "@azure/msal-browser";

function ErrorComponent({error}) {
    return <p>An Error Occurred: {error}</p>;
}

function LoadingComponent() {
    return <p>Authentication in progress...</p>;
}

export function Example() {
    const authRequest = {
        scopes: ["openid", "profile"]
    };

    return (
        // authenticationRequest, errorComponent and loadingComponent props are optional
        <MsalAuthenticationTemplate 
            interactionType={InteractionType.Popup} 
            authenticationRequest={authRequest} 
            errorComponent={ErrorComponent} 
            loadingComponent={LoadingComponent}
        >
            <p>At least one account is signed in!</p>
        </MsalAuthenticationTemplate>
      )
};

Gancho useMsalAuthentication

O useMsalAuthentication gancho primeiro verificará se um usuário está conectado e tentará conectar um usuário se não houver usuários conectados. Você precisará fornecer o tipo de interação que deseja usar (redirecionamento ou pop-up). Ele retornará o resultado da operação de logon, qualquer erro que ocorreu e a função de logon que você pode usar se precisar tentar novamente.

Você pode ler mais sobre esse gancho na documentação sobre ganchos.

import React from 'react';
import { useMsalAuthentication } from "@azure/msal-react";
import { InteractionType } from '@azure/msal-browser';

export function App() {
    const {login, result, error} = useMsalAuthentication(InteractionType.Popup);

    return (
        <React.Fragment>
            <p>Anyone can see this paragraph.</p>
            <AuthenticatedTemplate>
                <p>At least one account is signed in!</p>
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate>
                <p>No users are signed in!</p>
            </UnauthenticatedTemplate>
        </React.Fragment>
    );
}

Conectar um usuário usando as APIs de logon fornecidas por @azure/msal-browser

Outra maneira de invocar uma entrada é usando APIs de @azure/msal-browser diretamente da instância PublicClientApplication no contexto. Há três maneiras de acessar a instância a partir do contexto.

Gancho useMsal

Um gancho que retorna a instância PublicClientApplication, uma matriz de todas as contas atualmente conectadas e um valor inProgress que indica o que a MSAL está fazendo no momento.

Você pode ler mais sobre esse gancho na documentação sobre ganchos.

import React from 'react';
import { useMsal } from "@azure/msal-react";

export function App() {
    const { instance, accounts, inProgress } = useMsal();

    if (accounts.length > 0) {
        return <span>There are currently {accounts.length} users signed in!</span>
    } else if (inProgress === "login") {
        return <span>Login is currently in progress!</span>
    } else {
        return (
            <>
                <span>There are currently no users signed in!</span>
                <button onClick={() => instance.loginPopup()}>Login</button>
            </>
        );
    }
}

Consumir o contexto bruto

Se você estiver usando um componente de classe e não puder usar hooks, poderá acessar o contexto bruto do MSAL por meio de MsalContext. Você pode ler mais sobre como usar @azure/msal-react em componentes de classe aqui.

import React from "react";
import { MsalContext } from "@azure/msal-react";

class App extends React.Component {
    static contextType = MsalContext;

    render() {
        if (this.context.accounts.length > 0) {
            return <span>There are currently {this.context.accounts.length} users signed in!</span>
        } else if (this.context.inProgress === "login") {
            return <span>Login is currently in progress!</span>
        } else {
            return (
                <>
                    <span>There are currently no users signed in!</span>
                    <button onClick={() => this.context.instance.loginPopup()}>Login</button>
                </>
            );
        }
    }
}

Encapsular seu componente com o Componente de Ordem Superior da withMsal

Outra maneira de consumir o contexto da MSAL em componentes de classe e função é encapsular seu componente com o HOC da withMsal, o que injetará o contexto nas propriedades do seu componente.

import React from "react";
import { withMsal } from "@azure/msal-react";

class LoginButton extends React.Component {
    render() {
        const isAuthenticated = this.props.msalContext.accounts.length > 0;
        const msalInstance = this.props.msalContext.instance;
        if (isAuthenticated) {
            return <button onClick={() => msalInstance.logout()}>Logout</button>    
        } else {
            return <button onClick={() => msalInstance.loginPopup()}>Login</button>
        }
    }
}

export default YourWrappedComponent = withMsal(LoginButton);

Adquirir um token de acesso

Recomendamos que seu aplicativo chame a acquireTokenSilent API em seu PublicClientApplication objeto sempre que você precisar de um token de acesso para acessar uma API. Isso pode ser feito de forma semelhante às maneiras estabelecidas na seção anterior.

import React, { useState, useEffect } from "react"
import { useMsal, useAccount } from "@azure/msal-react";

export function App() {
    const { instance, accounts, inProgress } = useMsal();
    const account = useAccount(accounts[0] || {});
    const [apiData, setApiData] = useState(null);

    useEffect(() => {
        if (account) {
            instance.acquireTokenSilent({
                scopes: ["User.Read"],
                account: account
            }).then((response) => {
                if(response) {
                    callMsGraph(response.accessToken).then((result) => setApiData(result));
                }
            });
        }
    }, [account, instance]);

    if (accounts.length > 0) {
        return (
            <>
                <span>There are currently {accounts.length} users signed in!</span>
                {apiData && (<span>Data retreived from API: {JSON.stringify(apiData)}</span>)}
            </>
        );
    } else if (inProgress === "login") {
        return <span>Login is currently in progress!</span>
    } else {
        return <span>There are currently no users signed in!</span>
    }
}

Aquisição de um token de acesso fora de um componente React

Se você precisar de um token de acesso fora de um componente React, poderá chamar diretamente a função acquireTokenSilent em PublicClientApplication. Não recomendamos chamar funções que alterem o estado de autenticação do usuário (login, logout) fora do contexto do React fornecido por MsalProvider, pois os componentes dentro desse contexto podem não ser atualizados corretamente.

Tenha em mente que o usuário precisa ser conectado antes que você possa adquirir um token.

import { PublicClientApplication } from "@azure/msal-browser";

// This should be the same instance you pass to MsalProvider
const msalInstance = new PublicClientApplication(config);

const acquireAccessToken = async (msalInstance) => {
    const activeAccount = msalInstance.getActiveAccount(); // This will only return a non-null value if you have logic somewhere else that calls the setActiveAccount API
    const accounts = msalInstance.getAllAccounts();

    if (!activeAccount && accounts.length === 0) {
        /*
        * User is not signed in. Throw error or wait for user to login.
        * Do not attempt to log a user in outside of the context of MsalProvider
        */   
    }
    const request = {
        scopes: ["User.Read"],
        account: activeAccount || accounts[0]
    };

    const authResult = await msalInstance.acquireTokenSilent(request);

    return authResult.accessToken
};

Consulte também

  • Last updated on