Exercício - Integrar o aplicativo Web Next.js com o Azure AD

25 minutos

Este exercício leva você pelo processo de configuração de um aplicativo simples baseado em Next.js que se integra ao Microsoft Entra ID.

Neste exercício, irá:

Registre um aplicativo Microsoft Entra.
Implemente um aplicativo simples baseado em Next.js integrado ao Microsoft Entra.
Valide a integração do Microsoft Entra do aplicativo baseado em Next.js.

Pré-requisitos

Para realizar este exercício, você precisará:

Uma subscrição do Azure.
Uma conta Microsoft ou uma conta Microsoft Entra com a função de Administrador Global no inquilino do Microsoft Entra associada à subscrição do Azure e com a função de Proprietário ou Colaborador na subscrição do Azure.
Ter concluído o primeiro e segundo exercícios deste módulo.
Um computador no qual você instalou ou pode instalar o Node.js e o Git.

Nota

Para obter informações sobre como instalar o Node.js, consulte Node.js Downloads. Para obter informações sobre o Git, consulte Downloads do Git. Instale ambos antes de iniciar este exercício.

Registar uma aplicação com o Microsoft Entra ID

Para implementar um exemplo de aplicativo baseado em Next.js que usa a autenticação do Microsoft Entra para acessar um banco de dados do Azure Database for PostgreSQL, você deve primeiro criar um objeto de aplicativo Microsoft Entra e a entidade de segurança correspondente. Isso permitirá que o aplicativo baseado em Next.js represente os usuários do Microsoft Entra ao acessar objetos de banco de dados.

Se necessário, inicie um navegador da Web, navegue até o portal do Azure e entre para acessar a assinatura do Azure que você usará neste módulo.
Use a caixa de texto Pesquisar recursos, serviços e documentos para pesquisar ID do Microsoft Entra e, na lista de resultados, selecione ID do Microsoft Entra.
Na folha ID do Microsoft Entra, no menu vertical, na seção Gerenciar, selecione Registros de aplicativos.
Na folha Registos da aplicação, selecione + Novo registo.
Na folha Registrar um aplicativo, na caixa de texto Nome, digite can-nextjs-app.
Na seção Tipos de conta suportados, verifique se a opção Contas somente neste diretório organizacional (Somente diretório padrão - Locatário único) está selecionada. Na seção Redirecionar URI (opcional), defina a entrada Aplicativo de página única (SPA) como http://localhost:3000e selecione Registrar.

Nota

Neste momento, você tem a opção de configurar o suporte multilocatário para seus aplicativos registrados no Microsoft Entra. No entanto, a cobertura detalhada desta abordagem está fora do âmbito deste módulo.

Nota

Depois de implantar seu aplicativo, você precisará modificar o valor de URI de redirecionamento (opcional) para refletir sua URL real.
Na folha can-nextjs-app, revise as configurações resultantes e registre os valores das propriedades da ID do aplicativo (cliente) e da ID do diretório (locatário).
Na folha can-nextjs-app, no menu vertical, na seção Gerenciar, selecione Permissões de API.
No aplicativo can-nextjs | Folha de permissões de API, selecione + Adicionar uma permissão, na folha Solicitar permissão de API, selecione a guia APIs que minha organização usa, na caixa de texto de pesquisa, digite Banco de Dados OSSRDBMS do Azure e, na lista de resultados, selecione Banco de Dados OSSRDBMS do Azure.
Na folha Solicitar permissão da API, selecione Permissões delegadas, marque a caixa de seleção user_impersonation e selecione Adicionar permissões.
De volta ao can-nextjs-app | Folha Permissões da API, selecione Conceder consentimento de administrador para o Diretório Padrão e, quando for solicitada a confirmação, selecione Sim.
No aplicativo can-nextjs | Folha de permissões da API, verifique se as permissões foram concedidas.

Implemente um aplicativo simples baseado em Next.js integrado ao Microsoft Entra

Com a aplicação registada no inquilino do Microsoft Entra, pode agora prosseguir com a sua implementação. Para simplificar sua tarefa, você clonará um repositório GitHub contendo um exemplo de código Next.js e personalizá-lo-á para integrar com seu locatário do Microsoft Entra.

No computador local, inicie o prompt de comando Node.js.

Nota

Certifique-se de executar isso usando a instalação local do Node.js no seu computador.
No prompt de comando Node.js, execute o seguinte comando para clonar o repositório GitHub que contém o exemplo de código de aplicativo Next.js que você usará neste exercício:
```
git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
```
Execute o seguinte comando para alternar para o diretório que hospeda o clone do repositório GitHub:
```
cd ./mslearn-cloud-native-apps/m06u07
```

Use seu editor de texto preferido para revisar o conteúdo do arquivo ./src/App.jsx , que recupera um token de acesso do Microsoft Entra ID para um aplicativo de página única:

Nota

O código de exemplo é baseado em Tutorial: Entre em usuários e chame a API do Microsoft Graph de um aplicativo de página única (SPA) React usando o fluxo de código de autenticação.

O arquivo ./src/App.jsx tem o seguinte conteúdo:

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

var accessToken = '';

/**
 * Renders information about the signed-in user or a button to retrieve data about the user
 */
const ProfileContent = () => {
    const { instance, accounts } = useMsal();
    const [graphData, setGraphData] = useState(null);

    function RequestProfileData() {
        // Silently acquires an access token which is then attached to a request for MS Graph data
        instance.acquireTokenSilent({
            ...loginRequest,
            account: accounts[0]
        }).then((response) => {
            accessToken = response.accessToken;
            callMsGraph(response.accessToken).then(response => setGraphData(response));
        });
    }

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

/**
 * If a user is authenticated the ProfileContent component above is rendered. Otherwise, a message indicating a user is not authenticated is rendered.
 */
const MainContent = () => {    
    return (
        <div className="App">
            <AuthenticatedTemplate>
                <ProfileContent />
            </AuthenticatedTemplate>

            <UnauthenticatedTemplate>
                <h5 className="card-title">Please sign-in to review your profile information.</h5>
                </UnauthenticatedTemplate>
        </div>
    );
};

export default function App() {
    return (
        <PageLayout>
            <MainContent />
        </PageLayout>
    );
}

Use seu editor de texto preferido para revisar o conteúdo do arquivo ./src/authConfig.js , que armazena as informações necessárias para identificar o aplicativo Microsoft Entra de destino que você registrou na tarefa anterior deste exercício.

O arquivo ./src/authConfig.js tem o seguinte conteúdo:

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

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

/**
 * Configuration object to be passed to MSAL instance on creation. 
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */
export const msalConfig = {
    auth: {
        clientId: "<client_ID>",
        authority: "https://login.microsoftonline.com/<tenant_ID>",
        redirectUri: "http://localhost:3000"
    },
    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
    },
    system: {	
        loggerOptions: {	
            loggerCallback: (level, message, containsPii) => {	
                if (containsPii) {		
                    return;		
                }	
                switch (level) {		
                    case LogLevel.Error:		
                        console.error(message);		
                        return;		
                    case LogLevel.Info:		
                        console.info(message);		
                        return;		
                    case LogLevel.Verbose:		
                        console.debug(message);		
                        return;		
                    case LogLevel.Warning:		
                        console.warn(message);		
                        return;		
                }	
            }	
        }	
    }
};

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit: 
 * https://learn.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, review:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me"
};

No editor de texto que exibe o conteúdo do arquivo ./src/authConfig.js , substitua os <client_ID> espaços reservados e <tenant_ID> por seus respetivos valores, que você identificou na tarefa anterior deste exercício.
No editor de texto que exibe o conteúdo do arquivo ./src/authConfig.js , substitua a entrada scopes: ["User.Read"] por scopes: ["User.Read","https://ossrdbms-aad.database.windows.net/user_impersonation"].
Salve as alterações e feche o arquivo.

Validar a integração do Microsoft Entra do aplicativo baseado em Next.js

Você está pronto para validar a integração do aplicativo com o Microsoft Entra. Você pode conteinerizá-lo, mas para simplificar, você o executará localmente em seu computador primeiro, dentro do ambiente de desenvolvimento Node.js. Isso fornecerá uma maneira rápida de validar sua funcionalidade e garantir que a conteinerização seja uma opção viável.

No prompt de comando Node.js, execute o seguinte comando para instalar os pacotes de dependência do aplicativo Next.js de exemplo:
```
npm install
```
Nota

Aguarde a conclusão do processo de instalação.
No prompt de comando Node.js, execute o seguinte comando para criar o aplicativo Next.js:
```
npm run-script build
```
Nota

Aguarde a conclusão do processo de compilação.
No prompt de comando Node.js, execute o seguinte comando para iniciar o aplicativo Next.js:
```
npm run-script start
```
Nota

Isso abrirá automaticamente uma janela do navegador exibindo a página Bem-vindo à Biblioteca de Autenticação da Microsoft para JavaScript - Reagir Quickstart .
Feche a janela do navegador da Web exibindo Bem-vindo à página Microsoft Authentication Library For JavaScript - React Quickstart , inicie outra janela do navegador da Web no modo de navegação anônima/InPrivate e navegue até a http://localhost:3000 URL.
Na página Bem-vindo à Biblioteca de Autenticação da Microsoft para JavaScript - React Quickstart, selecione Entrar e, no menu de expansão, selecione Entrar usando Pop-up.
Quando solicitado a entrar, autentique-se usando o adatumuser1userPrincipalName e sua senha Pa55w.rd1234.

Nota

Você criou essa conta de usuário no primeiro exercício deste módulo.
Na página Bem-vindo à Biblioteca de Autenticação da Microsoft para JavaScript - React Quickstart, selecione Solicitar Informações do Perfil.

Nota

Verifique se a saída inclui o Email, o ID e o token de acesso da conta de usuário adatumuser1 Microsoft Entra.
Abra outra guia do navegador na mesma janela do navegador da Web e navegue até o aplicativo Web implantado no exercício anterior.

Nota

O URL deve ter o seguinte formato: https://<webapp_name>.azurewebsites.net/auth

Nota

Verifique se a página da Web resultante exibe os dados de inventário para o primeiro locatário.

Nota

Se a tentativa inicial falhar, tente novamente.
Feche a janela do navegador da Web no modo de navegação anônima/InPrivate.

Nota

Agora, você repetirá a mesma sequência de etapas que contosouser1 e verificará se também pode acessar os dados de inventário e exibir o conjunto de registros correspondente ao segundo locatário.
Inicie outra janela do navegador da Web no modo de navegação anônima/InPrivate e navegue até o http://localhost:3000 URL.
Na página Bem-vindo à Biblioteca de Autenticação da Microsoft para JavaScript - React Quickstart, selecione Entrar e, no menu de expansão, selecione Entrar usando Pop-up.
Quando solicitado a entrar, autentique-se usando o contosouser1userPrincipalName e sua senha Pa55w.rd1234.

Nota

Você criou essa conta de usuário no primeiro exercício deste módulo.

Nota

Se solicitado, aceite uma solicitação de acesso e altere a senha da conta contosouser1 .
Na página Bem-vindo à Biblioteca de Autenticação da Microsoft para JavaScript - React Quickstart, selecione Solicitar Informações do Perfil.

Nota

Verifique se a saída inclui o Email, a ID e o token de acesso da conta de usuário contosouser1 do Microsoft Entra.
Abra outra guia do navegador na mesma janela do navegador da Web e navegue até o aplicativo Web implantado no exercício anterior.

Nota

Verifique se a página da Web resultante exibe os dados de inventário para o segundo locatário.

Resultados

Parabéns! Concluiu o terceiro exercício deste módulo. Neste exercício, você implementou um aplicativo simples baseado em Next.js integrado ao AD e verificou sua funcionalidade.

Limpar os recursos

Para evitar cobranças desnecessárias ao usar recursos do Azure, você deve excluir os grupos de recursos postgresql-db-RG e can-aadexpress-RG criados no exercício anterior deste módulo. Para fazer isso, no portal do Azure, navegue até a folha de cada um desses grupos de recursos e selecione a entrada Excluir grupo de recursos na barra de ferramentas. Na caixa de texto DIGITE O NOME DO GRUPO DE RECURSOS, digite o nome do grupo de recursos e selecione Excluir.

Continuar