Övning – Integrera Next.js webbapp med Azure AD

25 minuter

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:

För att ha slutfört övningarna konfigurerar du Microsoft Entra-ID och implementerar data för flera klientorganisationer i din 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.
En dator med Node.js och Git installerat.

Varning

Använd en testmiljö eftersom övningarna i den här modulen utför känsliga åtgärder som kräver utökade administrativa privilegier.

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 exempel Next.js-baserat 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. Detta gör att det Next.js-baserade programmet kan personifiera Microsoft Entra-användare vid åtkomst till databasobjekt.

Om det behövs startar du en webbläsare, navigerar till Azure Portal och loggar in för att komma åt den Azure-prenumeration som du använder i den här modulen.
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.
På bladet Microsoft Entra-ID går du till den lodräta menyn i avsnittet Hantera och väljer Appregistreringar.
På bladet Appregistreringar väljer du + Ny registrering.
På bladet Registrera ett program går du till textrutan Namn och anger can-nextjs-app.
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.

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.
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).
På bladet can-nextjs-app går du till den lodräta menyn i avsnittet Hantera och väljer API-behörigheter.
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.
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.
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.
I can-nextjs-app | Bladet API-behörigheter kontrollerar att behörigheterna har beviljats.

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 ett exempel Next.js kod och anpassar den så att den integreras med din Microsoft Entra-klientorganisation.

Starta kommandotolken Node.js på den lokala datorn.

Kommentar

Kör detta med hjälp av den lokala installationen av Node.js på datorn.
Från kommandotolken Node.js kör du följande kommando för att klona GitHub-lagringsplatsen som innehåller exemplet Next.js programkod som du ska använda i den här övningen:
```
git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
```
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
```

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:

Kommentar

Exempelkoden baseras på Självstudie: Logga in användare och anropa Microsoft Graph API från en React-enkelsidig app (SPA) med hjälp av autentiseringskodflödet.

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

Använd önskad textredigerare för att granska innehållet i filen ./src/authConfig.js , 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"
};

I textredigeraren som visar innehållet i filen ./src/authConfig.js 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.
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"].
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.

Från kommandotolken Node.js kör du följande kommando för att installera beroendepaketen i exempelprogrammet Next.js:
```
npm install
```
Kommentar

Vänta tills installationsprocessen har slutförts.
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.
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 .
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.
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.
När du uppmanas att logga in autentiserar du med hjälp av adatumuser1userPrincipalName och dess lösenord.

Kommentar

Du skapade det här användarkontot i den första övningen i den här modulen.
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 adatumuser1 .
Ö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.
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.
Starta ett annat webbläsarfönster i Läget Incognito/InPrivate och navigera till http://localhost:3000 URL:en.
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.
När du uppmanas att logga in autentiserar du med hjälp av contosouser1userPrincipalName och dess lösenord.

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 .
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 .
Ö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

Grattis! 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 Portal 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.