Cvičení – integrace webové aplikace Next.js s Azure AD

25 min

Toto cvičení vás provede procesem konfigurace jednoduché aplikace založené na next.js, která se integruje s Microsoft Entra ID.

V tomto cvičení:

Zaregistrujte aplikaci Microsoft Entra.
Implementujte jednoduchou aplikaci založenou na microsoft Entra integrated Next.js.
Ověřte integraci Microsoft Entra aplikace založené na next.js.

Požadavky

K provedení tohoto cvičení budete potřebovat:

Předplatné Azure.
Účet Microsoft nebo účet Microsoft Entra s rolí Globální Správa istrator v tenantovi Microsoft Entra přidruženém k předplatnému Azure a s rolí Vlastník nebo Přispěvatel v předplatném Azure.
Abyste dokončili první a druhé cvičení tohoto modulu.
Počítač, na kterém jste nainstalovali, nebo můžete nainstalovat Node.js a Git.

Poznámka:

Informace o instalaci Node.js naleznete v části Soubory ke stažení Node.js. Informace o Gitu najdete ve staženém gitu. Před zahájením tohoto cvičení nainstalujte obojí.

Registrace aplikace pomocí Microsoft Entra ID

Pokud chcete implementovat ukázkovou aplikaci založenou na next.js, která pro přístup k databázi Azure Database for PostgreSQL používá ověřování Microsoft Entra, musíte nejprve vytvořit objekt aplikace Microsoft Entra a odpovídající objekt zabezpečení. To umožní aplikaci založené na next.js zosobnit uživatele Microsoft Entra při přístupu k databázovým objektům.

V případě potřeby spusťte webový prohlížeč, přejděte na web Azure Portal a přihlaste se, abyste získali přístup k předplatnému Azure, které budete v tomto modulu používat.
Pomocí textového pole Hledat prostředky, služby a dokumenty vyhledejte ID Microsoft Entra a v seznamu výsledků vyberte Microsoft Entra ID.
V okně Microsoft Entra ID v vertikální nabídce v části Spravovat vyberte Registrace aplikací.
V okně Registrace aplikací vyberte + Nová registrace.
V okně Zaregistrovat aplikaci zadejte do textového pole Název aplikaci can-nextjs-app.
V části Podporované typy účtů se ujistěte, že je vybraná možnost Účty v tomto adresáři organizace (pouze výchozí adresář – jeden tenant). V části Identifikátor URI přesměrování (volitelné) nastavte položku http://localhost:3000Jednostránkové aplikace (SPA) a pak vyberte Zaregistrovat.

Poznámka:

V tuto chvíli máte možnost nakonfigurovat podporu víceklientských aplikací pro vaše registrované aplikace Microsoft Entra. Podrobné pokrytí tohoto přístupu je však mimo rozsah tohoto modulu.

Poznámka:

Po nasazení aplikace budete muset upravit hodnotu identifikátoru URI přesměrování (volitelné) tak, aby odrážela její skutečnou adresu URL.
V okně aplikace can-nextjs-app zkontrolujte výsledná nastavení a poznamenejte si hodnoty ID aplikace (klienta) a vlastností ID adresáře (tenanta).
V okně aplikace can-nextjs-app v vertikální nabídce v části Spravovat vyberte oprávnění rozhraní API.
V aplikaci can-nextjs-| Okno Oprávnění rozhraní API, vyberte + Přidat oprávnění, v okně Požádat o oprávnění rozhraní API vyberte rozhraní API, která moje organizace používá, ve vyhledávacím textovém poli zadejte databázi Azure OSSRDBMS a potom v seznamu výsledků vyberte databázi Azure OSSRDBMS.
V okně Požádat o oprávnění rozhraní API vyberte Delegovaná oprávnění, zaškrtněte políčko user_impersonation a pak vyberte Přidat oprávnění.
Zpět na aplikaci can-nextjs-| Okno Oprávnění rozhraní API, vyberte Udělit souhlas správce pro výchozí adresář a po zobrazení výzvy k potvrzení vyberte Ano.
V aplikaci can-nextjs-| Okno Oprávnění rozhraní API ověřte, že byla udělena oprávnění.

Implementace jednoduché aplikace založené na Microsoft Entra integrované na next.js

S aplikací zaregistrovanou v tenantovi Microsoft Entra teď můžete pokračovat v implementaci. Pro zjednodušení úlohy naklonujete úložiště GitHub obsahující ukázkový kód Next.js a přizpůsobíte ho pro integraci s vaším tenantem Microsoft Entra.

Na místním počítači spusťte příkazový řádek Node.js.

Poznámka:

Nezapomeňte to spustit pomocí místní instalace Node.js na vašem počítači.
Z příkazového řádku Node.js spusťte následující příkaz, který naklonuje úložiště GitHub obsahující ukázkový kód aplikace Next.js, který použijete v tomto cvičení:
```
git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
```
Spuštěním následujícího příkazu přepněte do adresáře, který je hostitelem klonu úložiště GitHub:
```
cd ./mslearn-cloud-native-apps/m06u07
```

Pomocí preferovaného textového editoru zkontrolujte obsah souboru ./src/App.jsx , který načte přístupový token z ID Microsoft Entra pro jednostránkové aplikace:

Poznámka:

Ukázkový kód je založený na kurzu: Přihlášení uživatelů a volání rozhraní Microsoft Graph API z jednostránkové aplikace React (SPA) pomocí toku kódu ověřování.

Soubor ./src/App.jsx obsahuje následující obsah:

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

Pomocí upřednostňovaného textového editoru zkontrolujte obsah souboru ./src/authConfig.js , který ukládá informace potřebné k identifikaci cílové aplikace Microsoft Entra, kterou jste zaregistrovali v předchozím úkolu tohoto cvičení.

Soubor ./src/authConfig.js obsahuje následující obsah:

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

V textovém editoru zobrazující obsah souboru ./src/authConfig.js nahraďte <client_ID> a <tenant_ID> zástupné symboly odpovídajícími hodnotami, které jste identifikovali v předchozím úkolu tohoto cvičení.
V textovém editoru zobrazující obsah souboru ./src/authConfig.js nahraďte položku scopes: ["User.Read"]scopes: ["User.Read","https://ossrdbms-aad.database.windows.net/user_impersonation"].
Uložte změny a zavřete soubor.

Ověření integrace Microsoft Entra aplikace založené na next.js

Jste připraveni ověřit integraci aplikace Microsoft Entra. Kontejnerizovat ho můžete, ale kvůli jednoduchosti ho nejprve spustíte místně na počítači ve vývojovém prostředí Node.js. Tím získáte rychlý způsob, jak ověřit jeho funkčnost a zajistit, aby kontejnerizace byla proveditelnou možností.

Z příkazového řádku Node.js spusťte následující příkaz, který nainstaluje balíčky závislostí ukázkové aplikace Next.js:
```
npm install
```
Poznámka:

Počkejte na dokončení procesu instalace.
Z příkazového řádku Node.js spusťte následující příkaz pro sestavení aplikace Next.js:
```
npm run-script build
```
Poznámka:

Počkejte na dokončení procesu sestavení.
Z příkazového řádku Node.js spusťte následující příkaz a spusťte aplikaci Next.js:
```
npm run-script start
```
Poznámka:

Tím se automaticky otevře okno prohlížeče s úvodní stránkou Microsoft Authentication Library for JavaScript – React Quickstart .
Zavřete okno webového prohlížeče s úvodní stránkou Microsoft Authentication Library for JavaScript – React Pro rychlý start , spusťte další okno webového prohlížeče v anonymním režimu nebo inPrivate a přejděte na http://localhost:3000 adresu URL.
Na úvodní stránce Microsoft Authentication Library pro JavaScript – Rychlý start React vyberte Přihlásit se a pak v rozbalení nabídky vyberte Přihlásit se pomocí místní nabídky.
Po zobrazení výzvy k přihlášení se ověřte pomocí adatumuser1userPrincipalName a hesla Pa55w.rd1234.

Poznámka:

Tento uživatelský účet jste vytvořili v prvním cvičení tohoto modulu.
Na stránce Vítá vás knihovna Microsoft Authentication Library pro JavaScript – Rychlý start React vyberte Informace o profilu žádosti.

Poznámka:

Ověřte, že výstup obsahuje e-mail, ID a přístupový token uživatelského účtu adatumuser1 Microsoft Entra.
Ve stejném okně webového prohlížeče otevřete jinou kartu prohlížeče a přejděte na webovou aplikaci, kterou jste nasadili v předchozím cvičení.

Poznámka:

Adresa URL by měla mít následující formát: https://<webapp_name>.azurewebsites.net/auth

Poznámka:

Ověřte, že výsledná webová stránka zobrazuje data inventáře prvního tenanta.

Poznámka:

Pokud se počáteční pokus nezdaří, zkuste to znovu.
Zavřete okno webového prohlížeče v režimu Incognito/InPrivate.

Poznámka:

Teď zopakujete stejnou posloupnost kroků jako contosouser1 a ověříte, že máte také přístup k datům inventáře a zobrazíte sadu záznamů odpovídajících druhému tenantovi.
V režimu Incognito/InPrivate spusťte další okno webového prohlížeče a přejděte na http://localhost:3000 adresu URL.
Na úvodní stránce Microsoft Authentication Library pro JavaScript – Rychlý start React vyberte Přihlásit se a pak v rozbalení nabídky vyberte Přihlásit se pomocí místní nabídky.
Po zobrazení výzvy k přihlášení se ověřte pomocí userPrincipalName contosouser1a hesla Pa55w.rd1234.

Poznámka:

Tento uživatelský účet jste vytvořili v prvním cvičení tohoto modulu.

Poznámka:

Pokud se zobrazí výzva, přijměte žádost o přístup a změňte heslo účtu contosouser1 .
Na stránce Vítá vás knihovna Microsoft Authentication Library pro JavaScript – Rychlý start React vyberte Informace o profilu žádosti.

Poznámka:

Ověřte, že výstup obsahuje e-mail, ID a přístupový token uživatelského účtu contosouser1 Microsoft Entra.
Ve stejném okně webového prohlížeče otevřete jinou kartu prohlížeče a přejděte na webovou aplikaci, kterou jste nasadili v předchozím cvičení.

Poznámka:

Ověřte, že výsledná webová stránka zobrazuje data inventáře pro druhého tenanta.

Výsledky

Blahopřejeme! Dokončili jste třetí cvičení tohoto modulu. V tomto cvičení jste implementovali jednoduchou aplikaci založenou na ad-integrated Next.js a ověřili její funkčnost.

Vyčištění prostředků

Abyste se vyhnuli zbytečným poplatkům za používání prostředků Azure, měli byste odstranit skupiny prostředků postgresql-db-RG a can-aadexpress-RG, které jste vytvořili v předchozím cvičení tohoto modulu. Uděláte to tak, že na webu Azure Portal přejdete do okna každé z těchto skupin prostředků a na panelu nástrojů vyberete položku Odstranit skupinu prostředků. Do textového pole ZADEJTE NÁZEV SKUPINY PROSTŘEDKŮ zadejte název skupiny prostředků a pak vyberte Odstranit.

Pokračovat