Övning – Integrera Next.js-webbapp med Azure AD

Slutförd

Den här övningen beskriver hur du konfigurerar ett enkelt Next.js-baserat program som integreras med Microsoft Entra-ID.

I den här övningen kommer du att:

  • Registrera ett Microsoft Entra-program.
  • Implementera ett enkelt Microsoft Entra-integrerat Next.js-baserat program.
  • Verifiera Microsoft Entra-integreringen av det Next.js-baserade programmet.

Förutsättningar

För att utföra den här övningen behöver du:

  • En Azure-prenumeration
  • Ett Microsoft-konto eller ett Microsoft Entra-konto med rollen Global administratör i Microsoft Entra-klientorganisationen som är associerad med Azure-prenumerationen och med rollen Ägare eller Deltagare i Azure-prenumerationen.
  • Att ha slutfört de första och andra övningarna i den här modulen.
  • En dator där du antingen har installerat eller kan installera Node.js och Git.

Kommentar

Information om hur du installerar Node.js finns i Node.js-nedladdningar. Information om Git finns i Git-nedladdningar. Installera båda innan du påbörjar den här övningen.

Registrera ett program med Microsoft Entra-ID

Om du vill implementera ett Next.js-exempelbaserat program som använder Microsoft Entra-autentisering för att få åtkomst till en Azure Database for PostgreSQL-databas måste du först skapa ett Microsoft Entra-programobjekt och motsvarande säkerhetsobjekt. På så sätt kan det Next.js-baserade programmet personifiera Microsoft Entra-användare vid åtkomst till databasobjekt.

  1. Om det behövs startar du en webbläsare, navigerar till Azure-portalen och loggar in för att komma åt den Azure-prenumeration som du använder i den här modulen.

  2. Använd textrutan Sök resurser, tjänster och dokument för att söka efter Microsoft Entra-ID och i listan med resultat väljer du Microsoft Entra-ID.

  3. På bladet Microsoft Entra-ID går du till den lodräta menyn i avsnittet Hantera och väljer Appregistreringar.

  4. På bladet Appregistreringar väljer du + Ny registrering.

  5. På bladet Registrera ett program går du till textrutan Namn och anger can-nextjs-app.

  6. I avsnittet Kontotyper som stöds kontrollerar du att alternativet Endast konton i den här organisationskatalogen (endast standardkatalog – enskild klientorganisation) är markerat. I avsnittet Omdirigerings-URI (valfritt) anger du posten Enkelsidigt program (SPA) till http://localhost:3000och väljer sedan Registrera.

    Screenshot of the Register an application blade in the Azure portal.

    Kommentar

    Du har möjlighet att konfigurera stöd för flera klienter för dina Microsoft Entra-registrerade program just nu. Detaljerad täckning av den här metoden ligger dock utanför omfånget för den här modulen.

    Kommentar

    När du har distribuerat programmet måste du ändra värdet omdirigerings-URI (valfritt) för att återspegla dess faktiska URL.

  7. På bladet can-nextjs-app granskar du de resulterande inställningarna och registrerar värdena för program-ID:t (klient- och katalog-ID:t).

    Screenshot of the cna-nextjs-app blade in the Azure portal.

  8. På bladet can-nextjs-app går du till den lodräta menyn i avsnittet Hantera och väljer API-behörigheter.

    Screenshot of the cna-nextjs-app API permissions blade in the Azure portal.

  9. I can-nextjs-app | Bladet API-behörigheter, välj + Lägg till en behörighet. Väljfliken API:er som min organisation använder i söktextrutan, ange Azure OSSRDBMS Database och välj sedan Azure OSSRDBMS Database i resultatlistan.

    Screenshot of the Request API permissions blade in the Azure portal.

  10. På bladet Förfrågnings-API-behörighet väljer du Delegerade behörigheter, markerar kryssrutan user_impersonation och väljer sedan Lägg till behörigheter.

    Screenshot of the Request API permissions blade in the Azure portal, with the Delegated permissions option selected.

  11. Tillbaka till can-nextjs-app | Bladet API-behörigheter , välj Bevilja administratörsmedgivande för Standardkatalog och välj Ja när du uppmanas att bekräfta.

    Screenshot of the cna-nextjs-app API permissions blade in the Azure portal, with the prompt to confirm granting of the admin consent.

  12. I can-nextjs-app | Bladet API-behörigheter kontrollerar att behörigheterna har beviljats.

    Screenshot of the cna-nextjs-app API permissions blade in the Azure portal, with the consent and permissions granted.

Implementera ett enkelt Microsoft Entra-integrerat Next.js-baserat program

Med programmet registrerat i Microsoft Entra-klientorganisationen kan du nu fortsätta med implementeringen. För att förenkla uppgiften klonar du en GitHub-lagringsplats som innehåller en Next.js-exempelkod och anpassar den så att den integreras med din Microsoft Entra-klientorganisation.

  1. Starta kommandotolken Node.js på den lokala datorn.

    Kommentar

    Se till att köra detta med hjälp av den lokala installationen av Node.js på datorn.

  2. Från kommandotolken Node.js kör du följande kommando för att klona GitHub-lagringsplatsen som innehåller nästa.js-exempelprogramkod som du ska använda i den här övningen:

    git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
    
  3. Kör följande kommando för att växla till katalogen som är värd för klonen av GitHub-lagringsplatsen:

    cd ./mslearn-cloud-native-apps/m06u07
    
  4. Använd önskad textredigerare för att granska innehållet i ./src/App.jsx-filen , som hämtar en åtkomsttoken från Microsoft Entra-ID för ett ensidesprogram:

    Filen ./src/App.jsx har följande innehåll:

    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>
        );
    }
    
  5. Använd önskad textredigerare för att granska innehållet i ./src/authConfig.js-filen , som lagrar den information som krävs för att identifiera det Microsoft Entra-målprogram som du registrerade i föregående uppgift i den här övningen.

    Filen ./src/authConfig.js har följande innehåll:

    /*
     * 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"
    };
    
  6. I textredigeraren som visar innehållet i ./src/authConfig.js-filen ersätter <client_ID> du platshållarna och <tenant_ID> med deras respektive värden, som du identifierade i föregående uppgift i den här övningen.

  7. I textredigeraren som visar innehållet i filen ./src/authConfig.js ersätter du posten scopes: ["User.Read"] med scopes: ["User.Read","https://ossrdbms-aad.database.windows.net/user_impersonation"].

  8. Spara ändringarna och stäng filen.

Verifiera Microsoft Entra-integreringen av det Next.js-baserade programmet

Du är redo att verifiera Microsoft Entra-integreringen av appen. Du kan containerisera den, men för enkelhetens skull kör du den lokalt på datorn först i node.js-utvecklingsmiljön. Detta ger ett snabbt sätt att verifiera dess funktioner och se till att containerstorleken är ett genomförbart alternativ.

  1. Från kommandotolken Node.js kör du följande kommando för att installera beroendepaketen för next.js-exempelprogrammet:

    npm install
    

    Kommentar

    Vänta tills installationsprocessen har slutförts.

  2. Från kommandotolken Node.js kör du följande kommando för att skapa Next.js-programmet:

    npm run-script build
    

    Kommentar

    Vänta tills byggprocessen har slutförts.

  3. Från kommandotolken Node.js kör du följande kommando för att starta Next.js-programmet:

    npm run-script start
    

    Kommentar

    Då öppnas automatiskt ett webbläsarfönster med sidan Välkommen till Microsoft-autentiseringsbiblioteket för JavaScript – React .

  4. Stäng webbläsarfönstret som visar Välkommen till Microsofts autentiseringsbibliotek för JavaScript – React Snabbstartssida , starta ett annat webbläsarfönster i Läget Incognito/InPrivate och gå till http://localhost:3000 URL:en.

  5. På sidan Välkommen till Microsoft-autentiseringsbiblioteket för JavaScript – React väljer du Logga in. Välj sedan Logga in på den expanderande menyn och välj Logga in med popup-fönstret.

    Screenshot of the Welcome to the Microsoft Authentication Library For JavaScript - React Quickstart page with the Sign in using Popup menu option.

  6. När du uppmanas att logga in autentiserar du med hjälp av adatumuser1userPrincipalName och dess lösenord Pa55w.rd1234.

    Kommentar

    Du skapade det här användarkontot i den första övningen i den här modulen.

  7. På sidan Välkommen till Microsoft-autentiseringsbiblioteket för JavaScript – React väljer du Begär profilinformation.

    Screenshot of the Welcome to the Microsoft Authentication Library For JavaScript - React Quickstart page with the Request Profile Information button.

    Kommentar

    Kontrollera att utdata innehåller e-post, ID och åtkomsttoken för microsoft entra-användarkontot adatumuser1 .

    Screenshot of the Welcome to the Microsoft Authentication Library For JavaScript - React Quickstart page with the adatumuser1 profile information.

  8. Öppna en annan webbläsarflik i samma webbläsarfönster och gå till det webbprogram som du distribuerade i föregående övning.

    Kommentar

    URL:en bör ha följande format: https://<webapp_name>.azurewebsites.net/auth

    Kommentar

    Kontrollera att den resulterande webbsidan visar inventeringsdata för den första klientorganisationen.

    Kommentar

    Om det första försöket misslyckas kan du försöka igen.

    Screenshot of the page of the Express.js web app displaying the inventory data.

  9. Stäng webbläsarfönstret i Läget Incognito/InPrivate.

    Kommentar

    Nu upprepar du samma stegsekvens som contosouser1 och kontrollerar att du också kan komma åt inventeringsdata och visa uppsättning poster som motsvarar den andra klientorganisationen.

  10. Starta ett annat webbläsarfönster i Läget Incognito/InPrivate och navigera till http://localhost:3000 URL:en.

  11. På sidan Välkommen till Microsoft-autentiseringsbiblioteket för JavaScript – React väljer du Logga in. Välj sedan Logga in på den expanderande menyn och välj Logga in med popup-fönstret.

  12. När du uppmanas att logga in autentiserar du med hjälp av contosouser1userPrincipalName och dess lösenord Pa55w.rd1234.

    Kommentar

    Du skapade det här användarkontot i den första övningen i den här modulen.

    Kommentar

    Om du uppmanas att göra det godkänner du en åtkomstbegäran och ändrar lösenordet för contosouser1-kontot .

  13. På sidan Välkommen till Microsoft-autentiseringsbiblioteket för JavaScript – React väljer du Begär profilinformation.

    Kommentar

    Kontrollera att utdata innehåller e-post, ID och åtkomsttoken för Microsoft Entra-användarkontot contosouser1 .

  14. Öppna en annan webbläsarflik i samma webbläsarfönster och gå till det webbprogram som du distribuerade i föregående övning.

    Kommentar

    Kontrollera att den resulterande webbsidan visar inventeringsdata för den andra klientorganisationen.

Resultat

Gratulerar! Du har slutfört den tredje övningen i den här modulen. I den här övningen implementerade du ett enkelt AD-integrerat Next.js-baserat program och verifierade dess funktioner.

Rensa resurserna

För att undvika onödiga avgifter från att använda Azure-resurser bör du ta bort resursgrupperna postgresql-db-RG och can-aadexpress-RG som du skapade i föregående övning i den här modulen. Om du vill göra det går du till bladet för var och en av dessa resursgrupper i Azure-portalen och väljer posten Ta bort resursgrupp i verktygsfältet. I textrutan SKRIV RESURSGRUPPNAMN anger du namnet på resursgruppen och väljer sedan Ta bort.