Poradnik: przepływ uwierzytelniania z usługi App Service za pomocą zaplecza serwera API do programu Microsoft Graph

Dowiedz się, jak utworzyć i skonfigurować usługę aplikacji zaplecza w celu akceptowania poświadczeń użytkownika aplikacji frontowej, a następnie wymieniać te poświadczenia na podrzędną usługę platformy Azure. Dzięki temu użytkownik może zalogować się do usługi frontendowej aplikacji, przekazać swoje poświadczenia do usługi zaplecza aplikacji, a następnie uzyskać dostęp do usługi platformy Azure z tą samą tożsamością.

W tym poradniku nauczysz się, jak:

Konfigurowanie aplikacji uwierzytelniania zaplecza w celu zapewnienia tokenu objętego zakresem dla podrzędnej usługi platformy Azure
Użyj kodu JavaScript, aby wymienić token dostępu zalogowanego użytkownika dla nowego tokenu dla usługi podrzędnej.
Użyj kodu JavaScript, aby uzyskać dostęp do usługi podrzędnej.

Wymagania wstępne

Ukończ poprzedni samouczek Uzyskiwanie dostępu do programu Microsoft Graph z zabezpieczonej aplikacji JavaScript jako użytkownika przed rozpoczęciem tego samouczka, ale nie usuwaj zasobów na końcu samouczka. W tym samouczku założono, że masz dwie usługi aplikacyjne oraz odpowiadające im aplikacje do uwierzytelniania.

W poprzednim samouczku użyto usługi Azure Cloud Shell jako powłoki dla interfejsu wiersza polecenia platformy Azure. Ten samouczek kontynuuje to użycie.

Architektura

W samouczku pokazano, jak przekazać poświadczenia użytkownika dostarczone przez aplikację frontonu do aplikacji zaplecza, a następnie przejść do usługi platformy Azure. W tym samouczku usługa podrzędna to Microsoft Graph. Poświadczenia użytkownika służą do pobierania profilu z programu Microsoft Graph.

Obraz architektury usługi App Service, która łączy się z Microsoft Graph w imieniu zalogowanego użytkownika.

Przepływ uwierzytelniania dla użytkownika w celu uzyskania informacji o programie Microsoft Graph w tej architekturze:

Poprzedni samouczek omawiał :

Zaloguj użytkownika do usługi App Service frontend skonfigurowanej do używania Active Directory jako dostawcy tożsamości.
Usługa frontend App service przekazuje token użytkownika do usługi backend App service.
Aplikacja zaplecza jest zabezpieczona, aby umożliwić frontendowi wysyłanie żądania API. Token dostępu użytkownika ma odbiorcę dla interfejsu API zaplecza i zakres user_impersonation.
Rejestracja aplikacji backendu ma już usługę Microsoft Graph z zakresem User.Read. Jest on domyślnie dodawany do wszystkich rejestracji aplikacji.
Na końcu poprzedniego samouczka fałszywy profil został zwrócony do aplikacji frontendowej, ponieważ Graph nie był połączony.

Ten samouczek rozszerza architekturę:

Udziel zgody administratora, aby pominąć ekran zgody użytkownika dla aplikacji zaplecza.
Zmień kod aplikacji, aby przekonwertować token dostępu wysyłany z aplikacji front-endowej na token dostępu z wymaganym uprawnieniem dla Microsoft Graph.
Podaj kod, aby wymienić token aplikacji zaplecza na nowy token z zakresem usługi platformy Azure, takiej jak Microsoft Graph.
Podaj kod, aby aplikacja zaplecza korzystała z nowego tokenu w celu uzyskania dostępu do usługi podrzędnej jako aktualnie uwierzytelniony użytkownik.
Ponownie wdróż aplikację zaplecza za pomocą polecenia az webapp up.
Na koniec tego samouczka rzeczywisty profil jest zwracany do aplikacji frontendowej, ponieważ Graph jest połączony.

Ten samouczek nie zawiera:

Zmień aplikację frontendową z poprzedniego samouczka.
Zmień uprawnienie zakresu aplikacji uwierzytelniania zaplecza, ponieważ User.Read jest domyślnie dodawane do wszystkich aplikacji uwierzytelniania.

W poprzednim samouczku, po zalogowaniu się użytkownika do aplikacji frontendowej, wyświetlono wyskakujące okienko proszące o zgodę użytkownika.

W tym samouczku, aby odczytać profil użytkownika z usługi Microsoft Graph, aplikacja zaplecza musi wymienić token dostępu zalogowanego użytkownika na nowy token dostępu z wymaganymi uprawnieniami dla usługi Microsoft Graph. Ponieważ użytkownik nie jest bezpośrednio połączony z aplikacją zaplecza, nie może interaktywnie uzyskać dostępu do ekranu zgody. Należy to obejść, konfigurując rejestrację aplikacji zaplecza w identyfikatorze Entra firmy Microsoft, aby udzielić zgody administratora. Jest to zmiana ustawienia zwykle wykonywana przez administratora usługi Active Directory.

Otwórz witrynę Azure Portal i wyszukaj swoje badania dotyczące usługi App Service zaplecza.
Znajdź sekcję Ustawienia —> uwierzytelnianie .
Wybierz dostawcę tożsamości, aby przejść do aplikacji uwierzytelniania.
W aplikacji uwierzytelniania wybierz pozycję Zarządzaj —> uprawnienia interfejsu API.
Wybierz pozycję Udziel zgody administratora dla katalogu domyślnego.
W oknie podręcznym wybierz Tak, aby potwierdzić zgodę.
Sprawdź, czy w kolumnie Stan znajduje się komunikat Przyznano dla katalogu domyślnego. Dzięki temu ustawieniu aplikacja zaplecza nie jest już wymagana do wyświetlania ekranu zgody dla zalogowanego użytkownika i może bezpośrednio zażądać tokenu dostępu. Zalogowany użytkownik ma dostęp do User.Read ustawienia zakresu, ponieważ jest to domyślny zakres, za pomocą którego jest tworzona rejestracja aplikacji.

2. Instalowanie pakietów npm

W poprzednim samouczku aplikacja zaplecza nie potrzebowała żadnych pakietów npm do uwierzytelniania, ponieważ jedyne uwierzytelnianie było zapewniane poprzez konfigurację dostawcy tożsamości w portalu Azure. W tym samouczku należy wymienić token dostępu zalogowanego użytkownika dla interfejsu API zaplecza na token dostępu, który ma zakres obejmujący Microsoft Graph. Ta wymiana jest zakończona z dwiema bibliotekami, ponieważ ta wymiana nie używa już uwierzytelniania przy użyciu usługi App Service, ale bezpośredniego użycia Microsoft Entra ID i MSAL.js.

@azure/MSAL-node — token wymiany
@microsoft/microsoft-graph-client — nawiązywanie połączenia z programem Microsoft Graph

Otwórz usługę Azure Cloud Shell i przejdź do aplikacji zaplecza przykładowego katalogu:
```
cd js-e2e-web-app-easy-auth-app-to-app/backend
```
Zainstaluj pakiet npm usługi Azure MSAL:
```
npm install @azure/msal-node
```

Zainstaluj pakiet npm programu Microsoft Graph:

npm install @microsoft/microsoft-graph-client

3. Dodaj kod, aby wymienić bieżący token na token Microsoft Graph

Kod źródłowy do wykonania tego kroku jest dostarczany. Aby je uwzględnić, wykonaj następujące czynności.

Otwórz plik ./src/server.js.
Usuń komentarz z następującej zależności w górnej części pliku:
```
import { getGraphProfile } from './with-graph/graph';
```
W tym samym pliku usuń komentarz ze zmiennej graphProfile :
```
let graphProfile={};
```

W tym samym pliku usuń komentarz z następujących getGraphProfile wierszy w get-profile trasie, aby pobrać profil z programu Microsoft Graph:

// where did the profile come from
profileFromGraph=true;

// get the profile from Microsoft Graph
graphProfile = await getGraphProfile(accessToken);

// log the profile for debugging
console.log(`profile: ${JSON.stringify(graphProfile)}`);

Zapisz zmiany: Ctrl + s.

Ponownie wdróż aplikację zaplecza:

az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name>

4. Zbadaj kod backendu, aby wymienić token interfejsu API backendu na token Microsoft Graph

Aby zmienić token odbiorców interfejsu API backendu dla tokenu Microsoft Graph, aplikacja backendu musi znaleźć "Tenant ID" i użyć go jako część obiektu konfiguracji MSAL.js. Ponieważ aplikacja zaplecza została skonfigurowana przez firmę Microsoft jako dostawca tożsamości, identyfikator dzierżawy i kilka innych wymaganych wartości znajduje się już w ustawieniach aplikacji usługi Microsoft App Service.

Poniższy kod został już udostępniony w przykładowej aplikacji. Musisz zrozumieć, dlaczego istnieje i jak działa, aby można było zastosować tę pracę do innych aplikacji, które budujesz, które wymagają tej samej funkcjonalności.

Inspekcja kodu w celu uzyskania identyfikatora najemcy

Otwórz plik ./backend/src/with-graph/auth.js.

Przejrzyj funkcję getTenantId().

export function getTenantId() {

    const openIdIssuer = process.env.WEBSITE_AUTH_OPENID_ISSUER;
    const backendAppTenantId = openIdIssuer.replace(/https:\/\/sts\.windows\.net\/(.{1,36})\/v2\.0/gm, '$1');

    return backendAppTenantId;
}

Ta funkcja pobiera bieżący identyfikator dzierżawy ze zmiennej środowiskowej WEBSITE_AUTH_OPENID_ISSUER . Identyfikator jest parsowany z danych zmiennej za pomocą wyrażenia regularnego.

Sprawdź kod, aby uzyskać token Graph przy użyciu MSAL.js

Nadal w ./backend/src/with-graph/auth.js pliku przejrzyj getGraphToken() funkcję .

Skompiluj obiekt konfiguracji MSAL.js, użyj konfiguracji MSAL, aby utworzyć 'clientCredentialAuthority'. Skonfiguruj żądanie w imieniu kogoś. Następnie użyj metody acquireTokenOnBehalfOf, aby wymienić token dostępu zaplecza API na token dostępu Graph API.

// ./backend/src/auth.js
// Exchange current bearerToken for Graph API token
// Env vars were set by App Service
export async function getGraphToken(backEndAccessToken) {

    const config = {
        // MSAL configuration
        auth: {
            // the backend's authentication CLIENT ID 
            clientId: process.env.WEBSITE_AUTH_CLIENT_ID,
            // the backend's authentication CLIENT SECRET 
            clientSecret: process.env.MICROSOFT_PROVIDER_AUTHENTICATION_SECRET,
            // OAuth 2.0 authorization endpoint (v2)
            // should be: https://login.microsoftonline.com/BACKEND-TENANT-ID
            authority: `https://login.microsoftonline.com/${getTenantId()}`
        },
        // used for debugging
        system: {
            loggerOptions: {
                loggerCallback(loglevel, message, containsPii) {
                    console.log(message);
                },
                piiLoggingEnabled: true,
                logLevel: MSAL.LogLevel.Verbose,
            }
        }
    };

    const clientCredentialAuthority = new MSAL.ConfidentialClientApplication(config);

    const oboRequest = {
        oboAssertion: backEndAccessToken,
        // this scope must already exist on the backend authentication app registration 
        // and visible in resources.azure.com backend app auth config
        scopes: ["https://graph.microsoft.com/.default"]
    }

    // This example has App service validate token in runtime
    // from headers that can't be set externally

    // If you aren't using App service's authentication, 
    // you must validate your access token yourself
    // before calling this code
    try {
        const { accessToken } = await clientCredentialAuthority.acquireTokenOnBehalfOf(oboRequest);
        return accessToken;
    } catch (error) {
        console.log(`getGraphToken:error.type = ${error.type}  ${error.message}`);
    }
}

5. Sprawdzanie kodu zaplecza w celu uzyskania dostępu do programu Microsoft Graph przy użyciu nowego tokenu

Aby uzyskać dostęp do programu Microsoft Graph jako użytkownik zalogowany do aplikacji frontonu, zmiany obejmują:

Konfiguracja rejestracji aplikacji w Active Directory z uprawnieniem API do podrzędnej usługi Microsoft Graph, z wymaganym zakresem User.Read.
Udziel zgody administratora, aby pominąć ekran zgody użytkownika dla aplikacji zaplecza.
Zmień kod aplikacji, aby przekonwertować token dostępu wysyłany z aplikacji front-endowej na token dostępu z wymaganymi uprawnieniami dla usługi Microsoft Graph.

Teraz, gdy kod ma prawidłowy token dla programu Microsoft Graph, użyj go do utworzenia klienta w programie Microsoft Graph, a następnie uzyskania profilu użytkownika.

Otwórz ./backend/src/graph.js

Funkcja getGraphProfile(): najpierw pobierz token, potem uwierzytelnionego klienta z tokenu, a na koniec profil.

// 
import graph from "@microsoft/microsoft-graph-client";
import { getGraphToken } from "./auth.js";

// Create client from token with Graph API scope
export function getAuthenticatedClient(accessToken) {
    const client = graph.Client.init({
        authProvider: (done) => {
            done(null, accessToken);
        }
    });

    return client;
}
export async function getGraphProfile(accessToken) {
    // exchange current backend token for token with 
    // graph api scope
    const graphToken = await getGraphToken(accessToken);

    // use graph token to get Graph client
    const graphClient = getAuthenticatedClient(graphToken);

    // get profile of user
    const profile = await graphClient
        .api('/me')
        .get();

    return profile;
}

6. Testowanie zmian

Użyj witryny internetowej front-endu w przeglądarce. Może być konieczne odświeżenie tokenu, jeśli wygasł.
Wybierz opcję Get user's profile. Spowoduje to przekazanie uwierzytelniania w tokenie elementu nośnego do zaplecza.
Zaplecze odpowiada rzeczywistym profilem programu Microsoft Graph dla Twojego konta.

7. Czyszczenie

W poprzednich krokach utworzono zasoby platformy Azure w grupie zasobów.

Usuń grupę zasobów, uruchamiając następujące polecenie w usłudze Cloud Shell. Wykonanie tego polecenia może potrwać około minutę.
```
az group delete --name myAuthResourceGroup
```
Użyj identyfikatora klienta aplikacji do uwierzytelniania, który wcześniej znaleziono i zanotowano w Enable authentication and authorization sekcjach aplikacji zaplecza i interfejsu użytkownika.

Usuń rejestracje aplikacji zarówno dla aplikacji frontonu, jak i zaplecza.

# delete app - do this for both frontend and backend client ids
az ad app delete --id <client-id>

Najczęściej zadawane pytania

Wystąpił błąd `80049217`, co to znaczy?

Ten błąd oznacza, CompactToken parsing failed with error code: 80049217że usługa App Service zaplecza nie jest autoryzowana do zwracania tokenu programu Microsoft Graph. Błąd ten występuje, ponieważ w rejestracji aplikacji brakuje uprawnienia User.Read.

Wystąpił błąd `AADSTS65001`, co to znaczy?

Ten błąd oznacza, AADSTS65001: The user or administrator has not consented to use the application with ID \<backend-authentication-id>. Send an interactive authorization request for this user and resourceże aplikacja uwierzytelniania zaplecza nie została skonfigurowana pod kątem zgody administratora. Ponieważ błąd jest wyświetlany w dzienniku aplikacji zaplecza, aplikacja frontendowa nie może poinformować użytkownika, dlaczego nie zobaczyli swojego profilu w aplikacji frontendowej.

Jak nawiązać połączenie z inną podrzędną usługą platformy Azure jako użytkownik?

W tym samouczku przedstawiono aplikację interfejsu API uwierzytelnianą w programie Microsoft Graph, jednak te same ogólne kroki można zastosować w celu uzyskania dostępu do dowolnej usługi platformy Azure w imieniu użytkownika.

Brak zmian w aplikacji frontendowej. Zmiany tylko w rejestracji aplikacji uwierzytelniającej zaplecza i kodzie źródłowym aplikacji zaplecza.
Wymień token użytkownika przeznaczony dla interfejsu API zaplecza na token do usługi podrzędnej, do której chcesz uzyskać dostęp.
Użyj tokenu w zestawie SDK usługi podrzędnej, aby utworzyć klienta.
Użyj klienta podrzędnego, aby uzyskać dostęp do funkcji usługi.

Dalsze kroki

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-05-28