Gyakorlat – A Next.js webalkalmazás integrálása az Azure AD-vel

25 perc

Ez a gyakorlat végigvezeti egy egyszerű Next.js-alapú alkalmazás konfigurálásának folyamatán, amely integrálható a Microsoft Entra-azonosítóval.

Ebben a gyakorlatban a következőket fogja végrehajtani:

Microsoft Entra-alkalmazás regisztrálása.
Implementáljon egy egyszerű Microsoft Entra integrált Next.js-alapú alkalmazást.
Ellenőrizze a Next.js-alapú alkalmazás Microsoft Entra-integrációját.

Előfeltételek

A gyakorlat elvégzéséhez a következőkre lesz szüksége:

Azure-előfizetés.
Egy Microsoft-fiók vagy Egy Microsoft Entra-fiók, amely globális Rendszergazda istrator szerepkörrel rendelkezik az Azure-előfizetéshez társított Microsoft Entra-bérlőben, valamint az Azure-előfizetés tulajdonosi vagy közreműködői szerepkörével.
A modul első és második gyakorlatának elvégzése.
Olyan számítógép, amelyre telepítette vagy telepítheti a Node.js-t és a Gitet.

Megjegyzés:

A Node.js telepítésével kapcsolatos információkért tekintse meg a Node.js letöltéseit. A Gitről további információt a Git-letöltésekben talál. A gyakorlat megkezdése előtt telepítse mindkettőt.

Alkalmazás regisztrálása a Microsoft Entra-azonosítóval

Ha egy Microsoft Entra-hitelesítést használó Next.js-alapú mintaalkalmazást szeretne implementálni egy Azure Database for PostgreSQL-adatbázis eléréséhez, először létre kell hoznia egy Microsoft Entra-alkalmazásobjektumot és a megfelelő biztonsági tagot. Ez lehetővé teszi, hogy a Next.js-alapú alkalmazás megszemélyesítse a Microsoft Entra-felhasználókat adatbázis-objektumok elérésekor.

Szükség esetén indítsa el a webböngészőt, lépjen az Azure Portalra, és jelentkezzen be a modulban használni kívánt Azure-előfizetés eléréséhez.
Az erőforrások, szolgáltatások és dokumentumok keresése szövegmezővel keresse meg a Microsoft Entra-azonosítót, és a találatok listájában válassza a Microsoft Entra-azonosítót.
A Microsoft Entra ID panel függőleges menüjének Kezelés szakaszában válassza a Alkalmazásregisztrációk.
A Alkalmazásregisztrációk panelen válassza az + Új regisztráció lehetőséget.
Az Alkalmazás regisztrálása panel Név szövegmezőjében adja meg a can-nextjs-app kifejezést.
A Támogatott fióktípusok szakaszban győződjön meg arról, hogy a csak ebben a szervezeti címtárban lévő fiókok (csak alapértelmezett címtár – egyetlen bérlő) lehetőség van kiválasztva. Az Átirányítási URI (nem kötelező) szakaszban állítsa be az egyoldalas alkalmazás (SPA) bejegyzést a következőrehttp://localhost:3000, majd válassza a Regisztráció lehetőséget.

Megjegyzés:

Jelenleg lehetősége van több-bérlős támogatás konfigurálására a Microsoft Entra regisztrált alkalmazásaihoz. Ennek a megközelítésnek a részletes lefedettsége azonban nem tartozik a modul hatókörébe.

Megjegyzés:

Az alkalmazás üzembe helyezése után módosítania kell az átirányítási URI (nem kötelező) értékét, hogy tükrözze annak tényleges URL-címét.
A can-nextjs-app panelen tekintse át az eredményként kapott beállításokat, és rögzítse az alkalmazás (ügyfél) azonosítójának és a címtár (bérlő) azonosítójának tulajdonságait.
A can-nextjs-app panel függőleges menüjének Kezelés szakaszában válassza ki az API-engedélyeket.
A can-nextjs-appban | API-engedélyek panelen válassza a + Engedély hozzáadása lehetőséget, a Kérelem API engedély paneljén válassza ki a szervezetem által használt API-kat, a keresőmezőbe írja be az Azure OSSRDBMS-adatbázist, majd a találatok listájában válassza az Azure OSSRDBMS-adatbázist.
A Kérelem API engedélypaneljén válassza a Delegált engedélyek lehetőséget, jelölje be a user_impersonation jelölőnégyzetet, majd válassza az Engedélyek hozzáadása lehetőséget.
Vissza a can-nextjs-apphoz | AZ API-engedélyek panelen válassza az Alapértelmezett címtár rendszergazdai hozzájárulásának megadása lehetőséget, és ha megerősítést kér, válassza az Igen lehetőséget.
A can-nextjs-appban | API-engedélyek panelen ellenőrizze, hogy az engedélyek meg lettek-e adva.

Egyszerű Microsoft Entra integrált Next.js-alapú alkalmazás implementálása

Ha az alkalmazás regisztrálva van a Microsoft Entra-bérlőben, folytathatja annak implementálását. A feladat egyszerűsítése érdekében klónozni fog egy Next.js-kódot tartalmazó GitHub-adattárat, és testre szabja azt a Microsoft Entra-bérlővel való integrációhoz.

Indítsa el a Node.js parancssort a helyi számítógépen.

Megjegyzés:

Győződjön meg arról, hogy ezt a Node.js helyi telepítésével futtatja a számítógépen.
A Node.js parancssorban futtassa a következő parancsot a gyakorlatban használt Next.js mintaalkalmazás-kódot tartalmazó GitHub-adattár klónozásához:
```
git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
```
Futtassa a következő parancsot a GitHub-adattár klónját futtató könyvtárra való váltáshoz:
```
cd ./mslearn-cloud-native-apps/m06u07
```

Az előnyben részesített szövegszerkesztővel tekintse át a ./src/App.jsx fájl tartalmát, amely egy hozzáférési jogkivonatot kér le a Microsoft Entra-azonosítóból egy egyoldalas alkalmazáshoz:

Megjegyzés:

A mintakód az oktatóanyagon alapul: Jelentkezzen be a felhasználókba, és hívja meg a Microsoft Graph API-t egy React egyoldalas alkalmazásból (SPA) auth code flow használatával.

A ./src/App.jsx fájl tartalma a következő:

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

Az előnyben részesített szövegszerkesztővel tekintse át a ./src/authConfig.js fájl tartalmát, amely a gyakorlat előző feladatában regisztrált Cél Microsoft Entra-alkalmazás azonosításához szükséges információkat tárolja.

A ./src/authConfig.js fájl tartalma a következő:

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

A ./src/authConfig.js fájl tartalmát megjelenítő szövegszerkesztőben cserélje le a helyőrzőket a <tenant_ID><client_ID> megfelelő értékekre, amelyeket a gyakorlat előző feladatában azonosított.
A ./src/authConfig.js fájl tartalmát megjelenítő szövegszerkesztőben cserélje le a bejegyzést scopes: ["User.Read"] a következőrescopes: ["User.Read","https://ossrdbms-aad.database.windows.net/user_impersonation"]: .
Mentse a módosításokat, és zárja be a fájlt.

A Next.js-alapú alkalmazás Microsoft Entra-integrációjának ellenőrzése

Készen áll az alkalmazás Microsoft Entra-integrációjának ellenőrzésére. Tárolóba is telepítheti, de az egyszerűség kedvéért először helyileg fogja futtatni a számítógépen, a Node.js fejlesztői környezetben. Ezzel gyorsan ellenőrizheti a funkcióját, és meggyőződhet arról, hogy a tárolók használata életképes megoldás.

A Node.js parancssorban futtassa a következő parancsot a Next.js mintaalkalmazás függőségi csomagjainak telepítéséhez:
```
npm install
```
Megjegyzés:

Várja meg, amíg a telepítési folyamat befejeződik.
A Node.js parancssorból futtassa a következő parancsot a Next.js alkalmazás létrehozásához:
```
npm run-script build
```
Megjegyzés:

Várja meg, amíg a buildelési folyamat befejeződik.
A Node.js parancssorából futtassa a következő parancsot a Next.js alkalmazás elindításához:
```
npm run-script start
```
Megjegyzés:

Ezzel automatikusan megnyílik egy böngészőablak, amelyen megjelenik a JavaScripthez készült Microsoft Authentication Library – React rövid útmutató oldal.
Zárja be a böngészőablakot, és nyissa meg a JavaScripthez készült Microsoft Authentication Library – React rövid útmutatót , inkognitó/InPrivate módban nyisson meg egy másik böngészőablakot, és navigáljon az http://localhost:3000 URL-címre.
A JavaScripthez készült Microsoft Authentication Library – React rövid útmutató lapján válassza a Bejelentkezés lehetőséget, majd a kibővítő menüben válassza a Bejelentkezés az előugró ablak használatával lehetőséget.
Amikor a rendszer kéri a bejelentkezést, hitelesítse magát az adatumuser1userPrincipalName és a pa55w.rd1234 jelszavával.

Megjegyzés:

Ezt a felhasználói fiókot a modul első gyakorlatban hozta létre.
A JavaScripthez készült Microsoft Authentication Library – React rövid útmutató lapján válassza a Profiladatok kérése lehetőséget.

Megjegyzés:

Ellenőrizze, hogy a kimenet tartalmazza-e az adatumuser1 Microsoft Entra felhasználói fiók e-mail-címét, azonosítóját és hozzáférési jogkivonatát.
Nyisson meg egy másik böngészőlapot ugyanabban a böngészőablakban, és keresse meg az előző gyakorlatban üzembe helyezett webalkalmazást.

Megjegyzés:

Az URL-cím formátumának a következőnek kell lennie: https://<webapp_name>.azurewebsites.net/auth

Megjegyzés:

Ellenőrizze, hogy az eredményként kapott weblap megjeleníti-e az első bérlő leltáradatait.

Megjegyzés:

Ha a kezdeti kísérlet sikertelen, próbálkozzon újra.
Zárja be a böngészőablakot inkognitó/InPrivate módban.

Megjegyzés:

Most ugyanazt a lépéssorozatot fogja megismételni, mint a contosouser1 , és ellenőrizze, hogy a második bérlőnek megfelelő rekordkészletet is elérheti-e a leltáradatokhoz, és megjelenítheti-e a rekordkészletet.
Inkognitó/InPrivate módban nyisson meg egy másik böngészőablakot, és keresse meg az http://localhost:3000 URL-címet.
A JavaScripthez készült Microsoft Authentication Library – React rövid útmutató lapján válassza a Bejelentkezés lehetőséget, majd a kibővítő menüben válassza a Bejelentkezés az előugró ablak használatával lehetőséget.
Amikor a rendszer arra kéri, hogy jelentkezzen be, hitelesítse magát a contosouser1userPrincipalName és annak Pa55w.rd1234 jelszavával.

Megjegyzés:

Ezt a felhasználói fiókot a modul első gyakorlatban hozta létre.

Megjegyzés:

Ha a rendszer kéri, fogadja el a hozzáférési kérést, és módosítsa a contosouser1 fiók jelszavát.
A JavaScripthez készült Microsoft Authentication Library – React rövid útmutató lapján válassza a Profiladatok kérése lehetőséget.

Megjegyzés:

Ellenőrizze, hogy a kimenet tartalmazza-e a Contosouser1 Microsoft Entra felhasználói fiók e-mail-címét, azonosítóját és hozzáférési jogkivonatát.
Nyisson meg egy másik böngészőlapot ugyanabban a böngészőablakban, és keresse meg az előző gyakorlatban üzembe helyezett webalkalmazást.

Megjegyzés:

Ellenőrizze, hogy az eredményként kapott weblap megjeleníti-e a második bérlő leltáradatait.

EREDMÉNY

Gratulálunk! Elvégezte a modul harmadik gyakorlatát. Ebben a gyakorlatban implementált egy egyszerű AD-integrált Next.js-alapú alkalmazást, és ellenőrizte annak működését.

Az erőforrások eltávolítása

Az Azure-erőforrások használatának szükségtelen költségeinek elkerülése érdekében törölje a modul előző gyakorlatában létrehozott postgresql-db-RG és can-aadexpress-RG erőforráscsoportokat. Ehhez az Azure Portalon navigáljon az egyes erőforráscsoportok paneljére, és válassza az eszköztárOn az Erőforráscsoport törlése bejegyzést. Az ERŐFORRÁSCSOPORT NEVE szövegmezőbe írja be az erőforráscsoport nevét, majd válassza a Törlés lehetőséget.

Folytatás