Tutorial: Criar uma aplicação de uma página de reagir que usa fluxo de código auth - Microsoft Entra

Artigo
12/05/2022
15 minutos para ler

Neste tutorial, você constrói uma aplicação react de uma página única (SPA) que assina nos utilizadores e chama o Microsoft Graph usando o fluxo de código de autorização com PKCE. O SPA que constrói utiliza a Microsoft Authentication Library (MSAL) para Reagir.

Neste tutorial:

Criar um projeto Reagir com npm
Registe a inscrição no portal Azure
Adicione código para suportar a inscrição do utilizador e a sua s inscrição
Adicione código para ligar para a Microsoft Graph API
Testar a aplicação

A MSAL React suporta o fluxo de código de autorização no navegador em vez do fluxo implícito de concessão. MSAL React NÃO suporta o fluxo implícito.

Pré-requisitos

Node.js para gerir um webserver local
Código do Estúdio Visual ou outro editor de código

Como funciona a aplicação tutorial

Diagram showing the authorization code flow in a single-page application

A aplicação que cria neste tutorial permite a um React SPA consultar a API do Microsoft Graph, adquirindo fichas de segurança a partir da plataforma de identidade da Microsoft. Utiliza o MSAL para Reagir, um invólucro da biblioteca V2 MSAL.js. O MSAL React permite que as aplicações React 16+ autentem utilizadores empresariais utilizando o Azure Ative Directory (Azure AD), bem como utilizadores com contas da Microsoft e identidades sociais como facebook, Google e LinkedIn. A biblioteca também permite que as aplicações tenham acesso aos serviços de cloud da Microsoft e ao Microsoft Graph.

Neste cenário, após a indicação de um utilizador, é solicitado um token de acesso e adicionado aos pedidos HTTP no cabeçalho de autorização. A aquisição e renovação de token são tratadas pela MSAL for React (MSAL React).

Bibliotecas

Este tutorial utiliza as seguintes bibliotecas:

Biblioteca	Description
Reação MSAL	Biblioteca de autenticação da Microsoft para o invólucro de react de JavaScript
Navegador MSAL	Biblioteca de autenticação da Microsoft para pacote de navegador JavaScript v2

Obtenha a amostra de código completa

Prefere baixar o projeto de amostra concluído deste tutorial? Para executar o projeto utilizando um servidor web local, como Node.js, clone o repositório ms-identidade-javascript-react-spa :

git clone https://github.com/Azure-Samples/ms-identity-javascript-react-spa

Em seguida, para configurar a amostra de código antes de executá-la, salte para o passo de configuração.

Para continuar com o tutorial e construir a aplicação por si mesmo, passe para a secção seguinte, Crie o seu projeto.

Criar o seu projeto

Uma vez instaladosNode.js , abra uma janela do terminal e, em seguida, execute os seguintes comandos:

npx create-react-app msal-react-tutorial # Create a new React app
cd msal-react-tutorial # Change to the app directory
npm install @azure/msal-browser @azure/msal-react # Install the MSAL packages
npm install react-bootstrap bootstrap # Install Bootstrap for styling

Já você usou um pequeno projeto React usando Create React App. Este será o ponto de partida que o resto deste tutorial irá construir. Se quiser ver as alterações na sua aplicação enquanto está a trabalhar neste tutorial, pode executar o seguinte comando:

npm start

Uma janela do navegador deve ser aberta automaticamente para a sua aplicação. Se não, abra o seu navegador e navegue para http://localhost:3000. Cada vez que guardar um ficheiro com código atualizado, a página recarregará para refletir as alterações.

Registar a aplicação

Siga os passos na aplicação de página única: Registo de aplicações para criar um registo de aplicações para o seu SPA utilizando o portal Azure.

No URI de redirecionamento: MSAL.js 2.0 com passo de fluxo de código auth , insira http://localhost:3000, o local padrão onde a aplicação create-react servirá a sua aplicação.

Configure o seu JavaScript SPA

Crie um ficheiro nomeado authConfig.js na pasta src para conter os parâmetros de configuração para autenticação e, em seguida, adicione o seguinte código:

export const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
    authority: "Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here", // This is a URL (e.g. https://login.microsoftonline.com/{your tenant ID})
    redirectUri: "Enter_the_Redirect_Uri_Here",
  },
  cache: {
    cacheLocation: "sessionStorage", // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
  }
};

// Add scopes here for ID token to be used at Microsoft identity platform endpoints.
export const loginRequest = {
 scopes: ["User.Read"]
};

// Add the endpoints here for Microsoft Graph API services you'd like to use.
export const graphConfig = {
    graphMeEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me"
};

Modifique os valores na msalConfig secção descrita aqui:

Nome do valor	Sobre
`Enter_the_Application_Id_Here`	O ID de Aplicação (cliente) do formulário que registou.
`Enter_the_Cloud_Instance_Id_Here`	O caso da nuvem Azure em que a sua aplicação está registada. Para a nuvem azure principal (ou global), entre `https://login.microsoftonline.com`. Para nuvens nacionais (por exemplo, China), você pode encontrar valores apropriados nas nuvens nacionais.
`Enter_the_Tenant_Info_Here`	Definir uma das seguintes opções: Se a sua candidatura suporta contas neste diretório organizacional, substitua este valor pelo ID do diretório (inquilino) ou nome do inquilino (por exemplo, contoso.microsoft.com). Se a sua candidatura suporta contas em qualquer diretório organizacional, substitua este valor por organizações. Se a sua aplicação suportar contas em qualquer diretório organizacional e contas pessoais da Microsoft, substitua este valor por comum. Para restringir apenas o suporte às contas pessoais da Microsoft, substitua este valor pelos consumidores.
`Enter_the_Redirect_Uri_Here`	Substitua-a por http://localhost:3000.
`Enter_the_Graph_Endpoint_Here`	A instância da Microsoft Graph API a aplicação deve comunicar com. Para o ponto final global da Microsoft Graph API, substitua ambas as instâncias desta cadeia por `https://graph.microsoft.com`. Para pontos finais em implementações nacionais em nuvem, consulte as implementações nacionais em nuvem na documentação do Microsoft Graph.

Para obter mais informações sobre as opções disponíveis, consulte As aplicações do cliente Inicialize.

Abra o ficheiro src/index.js e adicione as seguintes importações:

import "bootstrap/dist/css/bootstrap.min.css";
import { PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";
import { msalConfig } from "./authConfig";

Por baixo das importações em src/index.js criar um PublicClientApplication exemplo utilizando a configuração do passo 1.
```
const msalInstance = new PublicClientApplication(msalConfig);
```

Encontre o <App /> componente no src/index.js e enrole-o no MsalProvider componente. A sua função de renderização deve ser assim:

root.render(
    <React.StrictMode>
        <MsalProvider instance={msalInstance}>
            <App />
        </MsalProvider>
    </React.StrictMode>
);

Crie uma pasta em src chamados componentes e crie um ficheiro dentro desta pasta chamada SignInButton.jsx. Adicione o código de qualquer uma das seguintes secções para invocar o login utilizando uma janela pop-up ou um redirecionamento de quadro completo:

Adicione o seguinte código ao src/componentes/SignInButton.jsx para criar um componente de botão que invocará um login pop-up quando selecionado:

import React from "react";
import { useMsal } from "@azure/msal-react";
import { loginRequest } from "../authConfig";
import Button from "react-bootstrap/Button";


/**
 * Renders a button which, when selected, will open a popup for login
 */
export const SignInButton = () => {
    const { instance } = useMsal();

    const handleLogin = (loginType) => {
        if (loginType === "popup") {
            instance.loginPopup(loginRequest).catch(e => {
                console.log(e);
            });
        }
    }
    return (
        <Button variant="secondary" className="ml-auto" onClick={() => handleLogin("popup")}>Sign in using Popup</Button>
    );
}

Adicione o seguinte código ao src/componentes/SignInButton.jsx para criar um componente de botão que invocará um login de redirecionamento quando selecionado:

import React from "react";
import { useMsal } from "@azure/msal-react";
import { loginRequest } from "../authConfig";
import Button from "react-bootstrap/Button";


/**
 * Renders a button which, when selected, will redirect the page to the login prompt
 */
export const SignInButton = () => {
    const { instance } = useMsal();

    const handleLogin = (loginType) => {
        if (loginType === "redirect") {
            instance.loginRedirect(loginRequest).catch(e => {
                console.log(e);
            });
        }
    }
    return (
        <Button variant="secondary" className="ml-auto" onClick={() => handleLogin("redirect")}>Sign in using Redirect</Button>
    );
}

Crie outro ficheiro na pasta de componentes chamada PageLayout.jsx e adicione o seguinte código para criar um componente de navbar que contenha o botão de inserção que acabou de criar:

import React from "react";
import Navbar from "react-bootstrap/Navbar";
import { useIsAuthenticated } from "@azure/msal-react";
import { SignInButton } from "./SignInButton";

/**
 * Renders the navbar component with a sign-in button if a user is not authenticated
 */
export const PageLayout = (props) => {
    const isAuthenticated = useIsAuthenticated();

    return (
        <>
            <Navbar bg="primary" variant="dark">
                <a className="navbar-brand" href="/">MSAL React Tutorial</a>
                { isAuthenticated ? <span>Signed In</span> : <SignInButton /> }
            </Navbar>
            <h5><center>Welcome to the Microsoft Authentication Library For React Tutorial</center></h5>
            <br />
            <br />
            {props.children}
        </>
    );
};

Agora abra o src/App.js e adicione substituir o conteúdo existente pelo seguinte código:

import React from "react";
import { PageLayout } from "./components/PageLayout";

function App() {
  return (
      <PageLayout>
          <p>This is the main app content!</p>
      </PageLayout>
  );
}

export default App;

A sua aplicação tem agora um botão de entrada, que só é apresentado para utilizadores não autenticados!

Quando um utilizador seleciona o Sinal na utilização do Popup ou do Início de Sação utilizando o botão De redirecionamento pela primeira vez, o onClick manipulador chama loginPopup (ou loginRedirect) para iniciar sação no utilizador. O loginPopup método abre uma janela pop-up com o ponto final da plataforma de identidade da Microsoft para solicitar e validar as credenciais do utilizador. Após uma entrada bem sucedida, msal.js inicia o fluxo de código de autorização.

Neste ponto, um código de autorização protegido por PKCE é enviado para o ponto final de token protegido pelo CORS e é trocado por fichas. Um token de ID, token de acesso e token de atualização são recebidos pela sua aplicação e processados por msal.js, e a informação contida nos tokens está em cache.

Inscreva os utilizadores

Em src/componentes criar um ficheiro chamado SignOutButton.jsx. Adicione o código de qualquer uma das seguintes secções para invocar o logout utilizando uma janela pop-up ou um redirecionamento de quadro completo:

Assine usando pop-ups

Adicione o seguinte código ao src/componentes/SignOutButton.jsx para criar um componente de botão que invocará um logout pop-up quando selecionado:

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

/**
 * Renders a button which, when selected, will open a popup for logout
 */
export const SignOutButton = () => {
    const { instance } = useMsal();

    const handleLogout = (logoutType) => {
        if (logoutType === "popup") {
            instance.logoutPopup({
                postLogoutRedirectUri: "/",
                mainWindowRedirectUri: "/" // redirects the top level app after logout
            });
        }
    }

    return (
        <Button variant="secondary" className="ml-auto" onClick={() => handleLogout("popup")}>Sign out using Popup</Button>
    );
}

Inscreva-se usando redirecionamentos

Adicione o seguinte código ao src/componentes/SignOutButton.jsx para criar um componente de botão que invocará um logout de redirecionamento quando selecionado:

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

/**
 * Renders a button which, when selected, will redirect the page to the logout prompt
 */
export const SignOutButton = () => {
    const { instance } = useMsal();
    
    const handleLogout = (logoutType) => {
        if (logoutType === "redirect") {
           instance.logoutRedirect({
                postLogoutRedirectUri: "/",
            });
        }
    }

    return (
        <Button variant="secondary" className="ml-auto" onClick={() => handleLogout("redirect")}>Sign out using Redirect</Button>
    );
}

Adicione o botão de inscrição

Atualize o seu PageLayout componente em src/components/PageLayout.jsx para tornar o novo SignOutButton componente para utilizadores autenticados. O código deverá ser semelhante a:

import React from "react";
import Navbar from "react-bootstrap/Navbar";
import { useIsAuthenticated } from "@azure/msal-react";
import { SignInButton } from "./SignInButton";
import { SignOutButton } from "./SignOutButton";

/**
 * Renders the navbar component with a sign-in button if a user is not authenticated
 */
export const PageLayout = (props) => {
    const isAuthenticated = useIsAuthenticated();

    return (
        <>
            <Navbar bg="primary" variant="dark">
                <a className="navbar-brand" href="/">MSAL React Tutorial</a>
                { isAuthenticated ? <SignOutButton /> : <SignInButton /> }
            </Navbar>
            <h5><center>Welcome to the Microsoft Authentication Library For React Tutorial</center></h5>
            <br />
            <br />
            {props.children}
        </>
    );
};

Componentes de renderização condicional

Para tornar certos componentes apenas para utilizadores autenticados ou não autenticados, utilize o AuthenticateTemplate e/ou UnauthenticatedTemplate como demonstrado abaixo.

Adicione a seguinte importação ao src/App.js:

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

Para tornar certos componentes apenas para utilizadores autenticados atualizar a sua App função em src/App.js com o seguinte código:

function App() {
    return (
        <PageLayout>
            <AuthenticatedTemplate>
                <p>You are signed in!</p>
            </AuthenticatedTemplate>
        </PageLayout>
    );
}

Para tornar certos componentes apenas para utilizadores não autenticados, como uma sugestão de login, atualizar a sua App função em src/App.js com o seguinte código:

function App() {
    return (
        <PageLayout>
            <AuthenticatedTemplate>
                <p>You are signed in!</p>
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate>
                <p>You are not signed in! Please sign in.</p>
            </UnauthenticatedTemplate>
        </PageLayout>
    );
}

Adquirir um token

Antes de chamar uma API, como o Microsoft Graph, terá de adquirir um token de acesso. Adicione um novo componente ao src/App.js chamado ProfileContent com o seguinte código:

function ProfileContent() {
    const { instance, accounts, inProgress } = useMsal();
    const [accessToken, setAccessToken] = useState(null);

    const name = accounts[0] && accounts[0].name;

    function RequestAccessToken() {
        const request = {
            ...loginRequest,
            account: accounts[0]
        };

        // Silently acquires an access token which is then attached to a request for Microsoft Graph data
        instance.acquireTokenSilent(request).then((response) => {
            setAccessToken(response.accessToken);
        }).catch((e) => {
            instance.acquireTokenPopup(request).then((response) => {
                setAccessToken(response.accessToken);
            });
        });
    }

    return (
        <>
            <h5 className="card-title">Welcome {name}</h5>
            {accessToken ? 
                <p>Access Token Acquired!</p>
                :
                <Button variant="secondary" onClick={RequestAccessToken}>Request Access Token</Button>
            }
        </>
    );
};

Atualize as suas importações em src/App.js para corresponder ao seguinte corte:

import React, { useState } from "react";
import { PageLayout } from "./components/PageLayout";
import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from "@azure/msal-react";
import { loginRequest } from "./authConfig";
import Button from "react-bootstrap/Button";

Por fim, adicione o seu novo ProfileContent componente como criança do AuthenticatedTemplate seu App componente em src/App.js. O seu App componente deve ser assim:

function App() {
  return (
      <PageLayout>
          <AuthenticatedTemplate>
              <ProfileContent />
          </AuthenticatedTemplate>
          <UnauthenticatedTemplate>
              <p>You are not signed in! Please sign in.</p>
          </UnauthenticatedTemplate>
      </PageLayout>
  );
}

O código acima irá renderizar um botão para ser assinado nos utilizadores, permitindo-lhes solicitar um token de acesso para o Microsoft Graph quando o botão for selecionado.

Depois de um utilizador entrar, a sua aplicação não deve pedir aos utilizadores que reauttenenássem sempre que precisam de aceder a um recurso protegido (isto é, para solicitar um token). Para evitar tais pedidos de reautornação, ligue para acquireTokenSilent o primeiro que procurará um token de acesso em cache e não percebido e, se necessário, use o token de atualização para obter um novo token de acesso. Existem algumas situações, no entanto, em que poderá ser necessário obrigar os utilizadores a interagirem com a plataforma de identidade da Microsoft. Por exemplo:

Os utilizadores precisam de reentrar nas suas credenciais porque a sessão expirou.
O token refresh expirou.
A sua aplicação está a solicitar o acesso a um recurso e precisa do consentimento do utilizador.
É necessária autenticação de dois fatores.

A chamada acquireTokenPopup abre uma janela pop-up (ou acquireTokenRedirect redireciona os utilizadores para a plataforma de identidade da Microsoft). Nessa janela, os utilizadores precisam interagir confirmando as suas credenciais, dando consentimento ao recurso necessário ou completando a autenticação de dois fatores.

Se estiver a utilizar o Internet Explorer, recomendamos que utilize os loginRedirect métodos e acquireTokenRedirect métodos devido a um problema conhecido com o Internet Explorer e janelas pop-up.

Ligue para a Microsoft Graph API

Crie um ficheiro nomeado graph.js na pasta src e adicione o seguinte código para e fazer chamadas REST para a API do Gráfico microsoft:

import { graphConfig } from "./authConfig";

/**
 * Attaches a given access token to a Microsoft Graph API call. Returns information about the user
 */
export async function callMsGraph(accessToken) {
    const headers = new Headers();
    const bearer = `Bearer ${accessToken}`;

    headers.append("Authorization", bearer);

    const options = {
        method: "GET",
        headers: headers
    };

    return fetch(graphConfig.graphMeEndpoint, options)
        .then(response => response.json())
        .catch(error => console.log(error));
}

Em seguida, crie um ficheiro chamado ProfileData.jsx em src/componentes e adicione o seguinte código:

import React from "react";

/**
 * Renders information about the user obtained from Microsoft Graph
 */
export const ProfileData = (props) => {
    return (
        <div id="profile-div">
            <p><strong>First Name: </strong> {props.graphData.givenName}</p>
            <p><strong>Last Name: </strong> {props.graphData.surname}</p>
            <p><strong>Email: </strong> {props.graphData.userPrincipalName}</p>
            <p><strong>Id: </strong> {props.graphData.id}</p>
        </div>
    );
};

Em seguida, abrir src/App.js e adicionar as seguintes importações:

import { ProfileData } from "./components/ProfileData";
import { callMsGraph } from "./graph";

Por fim, atualize o seu ProfileContent componente no src/App.js para ligar para o Microsoft Graph e apresentar os dados do perfil após a aquisição do token. O seu ProfileContent componente deve ser assim:

function ProfileContent() {
    const { instance, accounts } = useMsal();
    const [graphData, setGraphData] = useState(null);

    const name = accounts[0] && accounts[0].name;

    function RequestProfileData() {
        const request = {
            ...loginRequest,
            account: accounts[0]
        };

        // Silently acquires an access token which is then attached to a request for Microsoft Graph data
        instance.acquireTokenSilent(request).then((response) => {
            callMsGraph(response.accessToken).then(response => setGraphData(response));
        }).catch((e) => {
            instance.acquireTokenPopup(request).then((response) => {
                callMsGraph(response.accessToken).then(response => setGraphData(response));
            });
        });
    }

    return (
        <>
            <h5 className="card-title">Welcome {name}</h5>
            {graphData ? 
                <ProfileData graphData={graphData} />
                :
                <Button variant="secondary" onClick={RequestProfileData}>Request Profile Information</Button>
            }
        </>
    );
};

Nas alterações efetuadas acima, o callMSGraph() método é utilizado para fazer um pedido HTTP GET contra um recurso protegido que requer um token. Em seguida, o pedido devolve o conteúdo ao autor da chamada. Este método adiciona o token adquirido no cabeçalho de autorização HTTP. Na aplicação de amostra criada neste tutorial, o recurso protegido é o ponto final do Microsoft Graph API me que exibe as informações de perfil do utilizador inscrito.

Teste a sua aplicação

Concluiu a criação da aplicação e está agora pronto para lançar o servidor web e testar a funcionalidade da aplicação.

Sirva a sua aplicação executando o seguinte comando a partir da raiz da sua pasta de projeto:
```
npm start
```
Uma janela do navegador deve ser aberta automaticamente para a sua aplicação. Se não o fizer, abra o seu navegador e navegue para http://localhost:3000. Devia ver uma página que se parece com a de baixo.
Selecione o botão de iniciar sção para iniciar sação.

A primeira vez que iniciar sessão na sua candidatura, é-lhe pedido que lhe conceda acesso ao seu perfil e o inscreva:

Content dialog displayed in web browser

Se concordar com as permissões solicitadas, as aplicações web exibem o seu nome, o que significa um login bem sucedido:

Results of a successful sign-in in the web browser

Ligue para a API do Gráfico

Depois de iniciar sessão, selecione Ver Perfil para visualizar as informações do perfil do utilizador devolvidas na resposta da chamada para a API do Gráfico da Microsoft:

Profile information from Microsoft Graph displayed in the browser

Mais informações sobre âmbitos e permissões delegadas

A API do Microsoft Graph requer que o âmbito de leitura do utilizador.leia para ler o perfil de um utilizador. Por predefinição, este âmbito é automaticamente adicionado em todas as aplicações registadas no portal Azure. Outros APIs para o Microsoft Graph, bem como APIs personalizados para o seu servidor back-end, podem necessitar de âmbitos adicionais. Por exemplo, a API do Gráfico microsoft requer o âmbito Mail.Read para listar o e-mail do utilizador.

À medida que adiciona âmbitos, os seus utilizadores podem ser solicitados a fornecer consentimento adicional para os âmbitos adicionados.

Ajuda e suporte

Se precisar de ajuda, quer relatar um problema ou quer aprender sobre as suas opções de suporte, consulte ajuda e apoio aos desenvolvedores.

Passos seguintes

Se quiser mergulhar mais profundamente no desenvolvimento de aplicações de página única do JavaScript na plataforma de identidade da Microsoft, consulte a nossa série de cenários multi-partes:

Cenário: Aplicação de página única

Pré-requisitos

Como funciona a aplicação tutorial

Bibliotecas

Obtenha a amostra de código completa

Criar o seu projeto

Registar a aplicação

Configure o seu JavaScript SPA

Inscreva os utilizadores

Assine usando pop-ups

Inscreva-se usando redirecionamentos

Adicione o botão de inscrição

Componentes de renderização condicional

Adquirir um token

Ligue para a Microsoft Graph API

Teste a sua aplicação

Ligue para a API do Gráfico

Mais informações sobre âmbitos e permissões delegadas

Ajuda e suporte

Passos seguintes

Recursos adicionais

Recursos adicionais

Tutorial: Inscreva-se nos utilizadores e ligue para a API do Gráfico Microsoft a partir de uma aplicação de página única (SPA) usando fluxo de código auth

Pré-requisitos

Como funciona a aplicação tutorial

Bibliotecas

Obtenha a amostra de código completa

Criar o seu projeto

Registar a aplicação

Configure o seu JavaScript SPA

Inscreva-se nos utilizadores

Iniciar s-in usando pop-ups

Iniciar s-se-in usando redirecionamentos

Adicione o botão de iniciar s-in

Inscreva os utilizadores

Assine usando pop-ups

Inscreva-se usando redirecionamentos

Adicione o botão de inscrição

Componentes de renderização condicional

Adquirir um token

Ligue para a Microsoft Graph API

Teste a sua aplicação

Fornecer consentimento para acesso à aplicação

Ligue para a API do Gráfico

Mais informações sobre âmbitos e permissões delegadas

Ajuda e suporte

Passos seguintes

Recursos adicionais

Recursos adicionais