Oefening: Next.js-web-app integreren met Azure AD

25 minuten

In deze oefening wordt u begeleid bij het configureren van een eenvoudige next.js-gebaseerde toepassing die kan worden geïntegreerd met Microsoft Entra ID.

In deze oefening gaat u het volgende doen:

Registreer een Microsoft Entra-toepassing.
Implementeer een eenvoudige, op Microsoft Entra geïntegreerde Next.js-toepassing.
Valideer de Microsoft Entra-integratie van de next.js-gebaseerde toepassing.

Vereisten

Als u deze oefening wilt uitvoeren, hebt u het volgende nodig:

Een Azure-abonnement.
Een Microsoft-account of een Microsoft Entra-account met de rol Global Beheer istrator in de Microsoft Entra-tenant die is gekoppeld aan het Azure-abonnement en met de rol Eigenaar of Inzender in het Azure-abonnement.
De eerste en tweede oefeningen van deze module hebben voltooid.
Een computer waarop u Node.js en Git hebt geïnstalleerd of waarop u Kunt installeren.

Notitie

Raadpleeg Node.js Downloads voor informatie over het installeren van Node.js. Raadpleeg Git-downloads voor meer informatie over Git. Installeer beide voordat u deze oefening start.

Een toepassing registreren bij Microsoft Entra-id

Als u een voorbeeldtoepassing op basis van Next.js wilt implementeren die gebruikmaakt van Microsoft Entra-verificatie voor toegang tot een Azure Database for PostgreSQL-database, moet u eerst een Microsoft Entra-toepassingsobject en de bijbehorende beveiligingsprincipal maken. Hierdoor kan de next.js-gebaseerde toepassing Microsoft Entra-gebruikers imiteren bij het openen van databaseobjecten.

Start zo nodig een webbrowser, navigeer naar Azure Portal en meld u aan voor toegang tot het Azure-abonnement dat u in deze module gaat gebruiken.
Gebruik het tekstvak Zoekbronnen, services en documenten om naar Microsoft Entra-id te zoeken en selecteer In de lijst met resultaten Microsoft Entra-id.
Selecteer op de blade Microsoft Entra-id in het verticale menu in de sectie Beheren App-registraties.
Selecteer + Nieuwe registratie op de blade App-registraties.
Voer op de blade Een toepassing registreren in het tekstvak Naam de can-nextjs-app in.
Zorg ervoor dat in de sectie Ondersteunde accounttypen alleen de optie Accounts in deze organisatiemap (alleen standaardmap - één tenant) is geselecteerd. Stel in de sectie Omleidings-URI (optioneel) de spa-vermelding http://localhost:3000(single-page application) in en selecteer vervolgens Registreren.

Notitie

U hebt de mogelijkheid om op dit moment multitenant-ondersteuning voor uw geregistreerde Microsoft Entra-toepassingen te configureren. Gedetailleerde dekking van deze aanpak valt echter buiten het bereik van deze module.

Notitie

Nadat u uw toepassing hebt geïmplementeerd, moet u de omleidings-URI-waarde (optioneel) wijzigen om de werkelijke URL weer te geven.
Controleer op de blade can-nextjs-app de resulterende instellingen en noteer de waarden van de toepassings-id (client) en de eigenschappen directory-id (tenant).
Selecteer OP de blade can-nextjs-app, in het verticale menu, in de sectie Beheren, API-machtigingen.
In de can-nextjs-app | Blade API-machtigingen, selecteer + Een machtiging toevoegen, selecteer op de blade Api-machtiging aanvragen de API's die mijn organisatie gebruikt, voer in het zoektekstvak Azure OSSRDBMS Database in en selecteer vervolgens Azure OSSRDBMS-database in de lijst met resultaten.
Selecteer op de blade Api-machtigingen aanvragen gedelegeerde machtigingen, schakel het selectievakje user_impersonation in en selecteer vervolgens Machtigingen toevoegen.
Terug op de can-nextjs-app | Blade API-machtigingen , selecteer Beheerderstoestemming verlenen voor Standaardmap en selecteer Ja wanneer u om bevestiging wordt gevraagd.
In de can-nextjs-app | Blade API-machtigingen , controleer of de machtigingen zijn verleend.

Een eenvoudige, op Microsoft Entra geïntegreerde Next.js-toepassing implementeren

Wanneer de toepassing is geregistreerd in de Microsoft Entra-tenant, kunt u nu doorgaan met de implementatie ervan. Ter vereenvoudiging van uw taak kloont u een GitHub-opslagplaats met een next.js-voorbeeldcode en past u deze aan om te integreren met uw Microsoft Entra-tenant.

Start de opdrachtprompt Node.js op uw lokale computer.

Notitie

Zorg ervoor dat u dit uitvoert met behulp van de lokale installatie van Node.js op uw computer.
Voer vanaf de opdrachtprompt Node.js de volgende opdracht uit om de GitHub-opslagplaats te klonen met de voorbeeldtoepassingscode Next.js die u in deze oefening gaat gebruiken:
```
git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
```
Voer de volgende opdracht uit om over te schakelen naar de map die als host fungeert voor de kloon van de GitHub-opslagplaats:
```
cd ./mslearn-cloud-native-apps/m06u07
```

Gebruik de gewenste teksteditor om de inhoud van het ./src/App.jsx-bestand te controleren, waarmee een toegangstoken wordt opgehaald uit Microsoft Entra ID voor een toepassing met één pagina:

Notitie

De voorbeeldcode is gebaseerd op zelfstudie: Gebruikers aanmelden en de Microsoft Graph API aanroepen vanuit een React-app met één pagina (SPA) met behulp van de verificatiecodestroom.

Het bestand ./src/App.jsx heeft de volgende inhoud:

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

Gebruik de gewenste teksteditor om de inhoud van het bestand ./src/authConfig.js te controleren, waarin de informatie wordt opgeslagen die nodig is om de Microsoft Entra-doeltoepassing te identificeren die u in de vorige taak van deze oefening hebt geregistreerd.

Het bestand ./src/authConfig.js heeft de volgende inhoud:

/*
 * 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"
};

Vervang in de teksteditor de inhoud van het bestand ./src/authConfig.js door hun <client_ID><tenant_ID> respectieve waarden, die u in de vorige taak van deze oefening hebt geïdentificeerd.
Vervang de vermelding scopes: ["User.Read"]scopes: ["User.Read","https://ossrdbms-aad.database.windows.net/user_impersonation"]in de teksteditor die de inhoud van het bestand ./src/authConfig.js weergeeft.
Sla de wijzigingen op en sluit het bestand.

De Microsoft Entra-integratie van de next.js-gebaseerde toepassing valideren

U bent klaar om de Microsoft Entra-integratie van de app te valideren. U kunt deze in een container plaatsen, maar voor het gemak voert u deze eerst lokaal uit op uw computer, in de ontwikkelomgeving Node.js. Dit biedt een snelle manier om de functionaliteit ervan te valideren en ervoor te zorgen dat containeriseren een haalbare optie is.

Voer vanaf de opdrachtprompt Node.js de volgende opdracht uit om de afhankelijkheidspakketten van de next.js-voorbeeldtoepassing te installeren:
```
npm install
```
Notitie

Wacht tot het installatieproces is voltooid.
Voer vanaf de opdrachtprompt Node.js de volgende opdracht uit om de next.js-toepassing te bouwen:
```
npm run-script build
```
Notitie

Wacht totdat het buildproces is voltooid.
Voer vanaf de opdrachtprompt Node.js de volgende opdracht uit om de toepassing Next.js te starten:
```
npm run-script start
```
Notitie

Hiermee wordt automatisch een browservenster geopend met de welkomstpagina van de Microsoft Authentication Library for JavaScript - React Quickstart .
Sluit het browservenster met welkom bij de pagina Microsoft Authentication Library for JavaScript - React Quickstart , start een ander browservenster in de Incognito/InPrivate-modus en navigeer naar de http://localhost:3000 URL.
Selecteer op de pagina Welkom bij de Microsoft Authentication Library for JavaScript - React Quickstart de optie Aanmelden en selecteer vervolgens in het uitvouwen menu Aanmelden met pop-up.
Wanneer u wordt gevraagd om u aan te melden, verifieert u zich met behulp van de adatumuser1userPrincipalName en het bijbehorende wachtwoord Pa55w.rd1234.

Notitie

U hebt dit gebruikersaccount gemaakt in de eerste oefening van deze module.
Selecteer op de pagina Welkom bij de Microsoft Authentication Library for JavaScript - React Quickstart de optie Profielgegevens aanvragen.

Notitie

Controleer of de uitvoer het e-mailadres, de id en het toegangstoken van het microsoft Entra-gebruikersaccount adatumuser1 bevat.
Open een ander browsertabblad in hetzelfde browservenster en navigeer naar de webtoepassing die u in de vorige oefening hebt geïmplementeerd.

Notitie

De URL moet de volgende indeling hebben: https://<webapp_name>.azurewebsites.net/auth

Notitie

Controleer of op de resulterende webpagina de inventarisgegevens voor de eerste tenant worden weergegeven.

Notitie

Als de eerste poging mislukt, probeert u het opnieuw.
Sluit het browservenster in de Incognito-/InPrivate-modus.

Notitie

Nu herhaalt u dezelfde reeks stappen als contosouser1 en controleert u of u ook toegang hebt tot de inventarisgegevens en geeft u een set records weer die overeenkomen met de tweede tenant.
Start een ander browservenster in de Incognito-/InPrivate-modus en navigeer naar de http://localhost:3000 URL.
Selecteer op de pagina Welkom bij de Microsoft Authentication Library for JavaScript - React Quickstart de optie Aanmelden en selecteer vervolgens in het uitvouwen menu Aanmelden met pop-up.
Wanneer u wordt gevraagd om u aan te melden, verifieert u zich met behulp van de userPrincipalName contosouser1en het bijbehorende wachtwoord Pa55w.rd1234.

Notitie

U hebt dit gebruikersaccount gemaakt in de eerste oefening van deze module.

Notitie

Als u hierom wordt gevraagd, accepteert u een toegangsaanvraag en wijzigt u het wachtwoord van het contosouser1-account .
Selecteer op de pagina Welkom bij de Microsoft Authentication Library for JavaScript - React Quickstart de optie Profielgegevens aanvragen.

Notitie

Controleer of de uitvoer het e-mailadres, de id en het toegangstoken van het Microsoft Entra-gebruikersaccount contosouser1 bevat.
Open een ander browsertabblad in hetzelfde browservenster en navigeer naar de webtoepassing die u in de vorige oefening hebt geïmplementeerd.

Notitie

Controleer of op de resulterende webpagina de inventarisgegevens voor de tweede tenant worden weergegeven.

Resultaten

Gefeliciteerd. U hebt de derde oefening van deze module voltooid. In deze oefening hebt u een eenvoudige ad-geïntegreerde Next.js-toepassing geïmplementeerd en de functionaliteit ervan gecontroleerd.

De resources opschonen

Als u onnodige kosten voor het gebruik van Azure-resources wilt voorkomen, moet u de postgresql-db-RG en can-aadexpress-RG-resourcegroepen verwijderen die u in de vorige oefening van deze module hebt gemaakt. Hiervoor gaat u in Azure Portal naar de blade van elk van deze resourcegroepen en selecteert u de vermelding Resourcegroep verwijderen op de werkbalk. Voer in het tekstvak TYP DE NAAM VAN DE RESOURCEGROEP de naam van de resourcegroep in en selecteer Vervolgens Verwijderen.

Doorgaan