Ćwiczenie — integrowanie aplikacji internetowej Next.js z usługą Azure AD

25 min

W tym ćwiczeniu przedstawiono proces konfigurowania prostej aplikacji opartej na pliku Next.js, która integruje się z identyfikatorem Entra firmy Microsoft.

W tym ćwiczeniu wykonasz następujące czynności:

Zarejestruj aplikację Firmy Microsoft Entra.
Zaimplementuj prostą zintegrowaną aplikację microsoft Entra Next.js.
Zweryfikuj integrację firmy Microsoft z aplikacją opartą na pliku Next.js.

Wymagania wstępne

Aby wykonać to ćwiczenie, potrzebne są następujące elementy:

Subskrypcja Azure.
Konto Microsoft lub konto Microsoft Entra z rolą Global Administracja istrator w dzierżawie Microsoft Entra skojarzonej z subskrypcją platformy Azure oraz z rolą Właściciel lub Współautor w subskrypcji platformy Azure.
Aby ukończyć pierwsze i drugie ćwiczenia tego modułu.
Komputer, na którym zainstalowano lub może zainstalować środowisko Node.js i narzędzie Git.

Uwaga

Aby uzyskać informacje na temat instalowania pliku Node.js, zobacz Pliki do pobrania node.js. Aby uzyskać informacje o usłudze Git, zapoznaj się z tematem Pliki do pobrania w usłudze Git. Zainstaluj oba przed rozpoczęciem tego ćwiczenia.

Rejestrowanie aplikacji przy użyciu identyfikatora Entra firmy Microsoft

Aby zaimplementować przykładową aplikację opartą na pliku Next.js, która używa uwierzytelniania Firmy Microsoft Entra w celu uzyskania dostępu do bazy danych usługi Azure Database for PostgreSQL, należy najpierw utworzyć obiekt aplikacji Entra firmy Microsoft i odpowiedni podmiot zabezpieczeń. Umożliwi to aplikacji opartej na pliku Next.js personifikację użytkowników firmy Microsoft Entra podczas uzyskiwania dostępu do obiektów bazy danych.

W razie potrzeby uruchom przeglądarkę internetową, przejdź do witryny Azure Portal i zaloguj się, aby uzyskać dostęp do subskrypcji platformy Azure, której będziesz używać w tym module.
Użyj pola tekstowego Wyszukaj zasoby, usługi i dokumenty, aby wyszukać identyfikator Entra firmy Microsoft, a następnie na liście wyników wybierz pozycję Microsoft Entra ID.
W bloku Microsoft Entra ID w menu pionowym w sekcji Zarządzanie wybierz pozycję Rejestracje aplikacji.
W bloku Rejestracje aplikacji wybierz pozycję + Nowa rejestracja.
W bloku Rejestrowanie aplikacji w polu tekstowym Nazwa wprowadź can-nextjs-app.
W sekcji Obsługiwane typy kont upewnij się, że wybrano opcję Konta tylko w tym katalogu organizacyjnym (tylko katalog domyślny — pojedyncza dzierżawa). W sekcji Identyfikator URI przekierowania (opcjonalnie) ustaw wpis Aplikacja jednostronicowa (SPA) na http://localhost:3000, a następnie wybierz pozycję Zarejestruj.

Uwaga

W tym momencie masz możliwość skonfigurowania obsługi wielodostępnej dla zarejestrowanych aplikacji firmy Microsoft Entra. Jednak szczegółowe pokrycie tego podejścia wykracza poza zakres tego modułu.

Uwaga

Po wdrożeniu aplikacji należy zmodyfikować wartość Identyfikator URI przekierowania (opcjonalnie), aby odzwierciedlić jej rzeczywisty adres URL.
W bloku can-nextjs-app przejrzyj wynikowe ustawienia i zarejestruj wartości identyfikatora aplikacji (klienta) i właściwości identyfikatora katalogu (dzierżawy).
W bloku can-nextjs-app w menu pionowym w sekcji Zarządzanie wybierz pozycję Uprawnienia interfejsu API.
W aplikacji can-nextjs-app | Blok uprawnień interfejsu API, wybierz pozycję + Dodaj uprawnienie, w bloku Uprawnienia interfejsu API żądania wybierz kartę Interfejsy API używane przez moją organizację, w polu tekstowym wyszukiwania wprowadź wartość Azure OSSRDBMS Database, a następnie na liście wyników wybierz pozycję Azure OSSRDBMS Database.
W bloku Uprawnienia interfejsu API żądania wybierz pozycję Uprawnienia delegowane, zaznacz pole wyboru user_impersonation, a następnie wybierz pozycję Dodaj uprawnienia.
Wróć do aplikacji can-nextjs-app | W bloku Uprawnienia interfejsu API wybierz pozycję Udziel zgody administratora dla katalogu domyślnego, a po wyświetleniu monitu o potwierdzenie wybierz pozycję Tak.
W aplikacji can-nextjs-app | Blok uprawnień interfejsu API— sprawdź, czy udzielono uprawnień.

Implementowanie prostej zintegrowanej aplikacji Microsoft Entra Next.js

Aplikacja zarejestrowana w dzierżawie microsoft Entra umożliwia teraz kontynuowanie jej implementacji. Aby uprościć zadanie, sklonujesz repozytorium GitHub zawierające przykładowy kod Next.js i dostosujesz go do integracji z dzierżawą firmy Microsoft Entra.

Na komputerze lokalnym uruchom wiersz polecenia Node.js.

Uwaga

Pamiętaj, aby uruchomić to polecenie przy użyciu lokalnej instalacji środowiska Node.js na komputerze.
W wierszu polecenia Node.js uruchom następujące polecenie, aby sklonować repozytorium GitHub zawierające przykładowy kod aplikacji Next.js, którego użyjesz w tym ćwiczeniu:
```
git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
```
Uruchom następujące polecenie, aby przełączyć się do katalogu, który hostuje klon repozytorium GitHub:
```
cd ./mslearn-cloud-native-apps/m06u07
```

Użyj preferowanego edytora tekstów, aby przejrzeć zawartość pliku ./src/App.jsx , który pobiera token dostępu z identyfikatora Entra firmy Microsoft dla aplikacji jednostronicowej:

Uwaga

Przykładowy kod jest oparty na artykule Samouczek: logowanie użytkowników i wywoływanie interfejsu API programu Microsoft Graph z aplikacji jednostronicowej React (SPA) przy użyciu przepływu kodu uwierzytelniania.

Plik ./src/App.jsx ma następującą zawartość:

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

Użyj preferowanego edytora tekstów, aby przejrzeć zawartość pliku ./src/authConfig.js , który przechowuje informacje wymagane do zidentyfikowania docelowej aplikacji Microsoft Entra zarejestrowanej w poprzednim zadaniu tego ćwiczenia.

Plik ./src/authConfig.js ma następującą zawartość:

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

W edytorze tekstów wyświetlającym zawartość pliku ./src/authConfig.js zastąp <client_ID> symbole zastępcze i <tenant_ID> odpowiednimi wartościami, które zostały zidentyfikowane w poprzednim zadaniu tego ćwiczenia.
W edytorze tekstów wyświetlającym zawartość pliku ./src/authConfig.js zastąp wpis .scopes: ["User.Read"]scopes: ["User.Read","https://ossrdbms-aad.database.windows.net/user_impersonation"]
Zapisz zmiany i zamknij plik.

Zweryfikuj integrację firmy Microsoft z aplikacją opartą na pliku Next.js

Wszystko jest gotowe do zweryfikowania integracji firmy Microsoft z aplikacją. Można go konteneryzować, ale dla uproszczenia uruchomisz go lokalnie na komputerze najpierw w środowisku deweloperów Node.js. Zapewni to szybki sposób weryfikacji jego funkcjonalności i upewnienia się, że konteneryzowanie jej jest opłacalną opcją.

W wierszu polecenia Node.js uruchom następujące polecenie, aby zainstalować pakiety zależności przykładowej aplikacji Next.js:
```
npm install
```
Uwaga

Poczekaj na zakończenie procesu instalacji.
W wierszu polecenia Node.js uruchom następujące polecenie, aby skompilować aplikację Next.js:
```
npm run-script build
```
Uwaga

Poczekaj na zakończenie procesu kompilacji.
W wierszu polecenia Node.js uruchom następujące polecenie, aby uruchomić aplikację Next.js:
```
npm run-script start
```
Uwaga

Spowoduje to automatyczne otwarcie okna przeglądarki z wyświetloną stroną Witamy w bibliotece Microsoft Authentication Library for JavaScript — React Quickstart .
Zamknij okno przeglądarki internetowej z wyświetloną pozycją Witamy w bibliotece Microsoft Authentication Library for JavaScript — React Quickstart , uruchom kolejne okno przeglądarki internetowej w trybie Incognito/InPrivate i przejdź do http://localhost:3000 adresu URL.
Na stronie Witamy w bibliotece Microsoft Authentication Library for JavaScript — React Quickstart wybierz pozycję Sign In (Zaloguj się), a następnie w menu rozwijanym wybierz pozycję Sign in using Popup (Zaloguj się przy użyciu menu podręcznego).
Po wyświetleniu monitu o zalogowanie się należy uwierzytelnić przy użyciu nazwy userPrincipalName adatumuser1i hasła Pa55w.rd1234.

Uwaga

To konto użytkownika zostało utworzone w pierwszym ćwiczeniu tego modułu.
Na stronie Microsoft Authentication Library for JavaScript — React Quickstart (Witamy w bibliotece Microsoft Authentication Library for JavaScript — React Quickstart ) wybierz pozycję Request Profile Information (Żądanie informacji o profilu).

Uwaga

Sprawdź, czy dane wyjściowe zawierają adres e-mail, identyfikator i token dostępu konta użytkownika adatumuser1 Microsoft Entra.
Otwórz inną kartę przeglądarki w tym samym oknie przeglądarki internetowej i przejdź do aplikacji internetowej wdrożonej w poprzednim ćwiczeniu.

Uwaga

Adres URL powinien mieć następujący format: https://<webapp_name>.azurewebsites.net/auth

Uwaga

Sprawdź, czy wynikowa strona internetowa wyświetla dane spisu dla pierwszej dzierżawy.

Uwaga

Jeśli próba początkowa zakończy się niepowodzeniem, spróbuj ponownie.
Zamknij okno przeglądarki internetowej w trybie Incognito/InPrivate.

Uwaga

Teraz powtórzysz tę samą sekwencję kroków co użytkownik contosouser1 i sprawdzisz, czy możesz również uzyskać dostęp do danych spisu i wyświetlić zestaw rekordów odpowiadających drugiej dzierżawie.
Uruchom kolejne okno przeglądarki internetowej w trybie Incognito/InPrivate i przejdź do http://localhost:3000 adresu URL.
Na stronie Witamy w bibliotece Microsoft Authentication Library for JavaScript — React Quickstart wybierz pozycję Sign In (Zaloguj się), a następnie w menu rozwijanym wybierz pozycję Sign in using Popup (Zaloguj się przy użyciu menu podręcznego).
Po wyświetleniu monitu o zalogowanie się należy uwierzytelnić przy użyciu nazwy userPrincipalName użytkownika contosouser1i hasła Pa55w.rd1234.

Uwaga

To konto użytkownika zostało utworzone w pierwszym ćwiczeniu tego modułu.

Uwaga

Jeśli zostanie wyświetlony monit, zaakceptuj żądanie dostępu i zmień hasło konta contosouser1 .
Na stronie Microsoft Authentication Library for JavaScript — React Quickstart (Witamy w bibliotece Microsoft Authentication Library for JavaScript — React Quickstart ) wybierz pozycję Request Profile Information (Żądanie informacji o profilu).

Uwaga

Sprawdź, czy dane wyjściowe zawierają adres e-mail, identyfikator i token dostępu konta użytkownika contosouser1 Microsoft Entra.
Otwórz inną kartę przeglądarki w tym samym oknie przeglądarki internetowej i przejdź do aplikacji internetowej wdrożonej w poprzednim ćwiczeniu.

Uwaga

Sprawdź, czy wynikowa strona internetowa wyświetla dane spisu dla drugiej dzierżawy.

Wyniki

Gratulacje! Ukończono trzecie ćwiczenie tego modułu. W tym ćwiczeniu zaimplementowano prostą zintegrowaną z usługą AD aplikację opartą na pliku Next.js i zweryfikowano jej funkcjonalność.

Oczyszczanie zasobów

Aby uniknąć niepotrzebnych opłat za korzystanie z zasobów platformy Azure, należy usunąć grupy zasobów postgresql-db-RG i can-aadexpress-RG utworzone w poprzednim ćwiczeniu tego modułu. W tym celu w witrynie Azure Portal przejdź do bloku każdej z tych grup zasobów i wybierz wpis Usuń grupę zasobów na pasku narzędzi. W polu tekstowym WPISZ NAZWĘ GRUPY ZASOBÓW wprowadź nazwę grupy zasobów, a następnie wybierz pozycję Usuń.

Kontynuuj