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

Dowiedz się, jak utworzyć i skonfigurować aplikację usługi App Service zaplecza w celu akceptowania poświadczeń użytkownika aplikacji front-endowej, a następnie wymieniać te poświadczenia na podrzędną usługę platformy Azure. Takie podejście umożliwia użytkownikowi logowanie się do aplikacji frontowej usługi App Service, przekazywanie poświadczeń do usługi zaplecza App Service, a następnie uzyskiwanie dostępu do usługi platformy Azure z tą samą tożsamością.

W tym poradniku nauczysz się, jak:

  • Skonfiguruj aplikację uwierzytelniania zaplecza, aby zapewnić token o określonym zakresie dla podrzędnej usługi 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

Zanim rozpoczniesz pracę z tym samouczkiem, ukończ poprzedni samouczek Uzyskaj dostęp do Microsoft Graph z zabezpieczonej aplikacji JavaScript przez użytkownika. Nie usuwaj zasobów na końcu samouczka. W tym samouczku założono, że masz dwie usługi aplikacji i odpowiadające im aplikacje 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 tutorialu pokazano, jak przekazać poświadczenia użytkownika dostarczone przez aplikację frontową do aplikacji zaplecza, a następnie do usługi 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:

W poprzednim samouczku opisano następujące zagadnienia:

  1. Zaloguj użytkownika do aplikacji front-end skonfigurowanej do korzystania z Active Directory jako dostawcy tożsamości.
  2. Usługa aplikacji front-end przekazuje token użytkownika do usługi aplikacji back-end.
  3. Aplikacja back-endu jest zabezpieczona, aby umożliwić front-endowi wysyłanie żądania do interfejsu programowania aplikacji (API). Token dostępu użytkownika jest przeznaczony dla interfejsu API zaplecza i ma zakres user_impersonation.
  4. Rejestracja aplikacji back-end już zawiera Microsoft Graph z zakresem User.Read. Ten zakres jest domyślnie dodawany do wszystkich rejestracji aplikacji.
  5. Na końcu poprzedniego samouczka fałszywy profil został zwrócony do aplikacji front-end, ponieważ Graph nie był połączony.

Ten samouczek rozszerza architekturę:

  1. Udziel zgody administratora, aby pominąć ekran zgody użytkownika dla aplikacji zaplecza.
  2. Zmień kod aplikacji, aby przekonwertować token dostępu wysyłany z aplikacji front-endowej na token dostępu z wymaganym uprawnieniem dla Microsoft Graph.
  3. Udostępnij kod, aby aplikacja back-end wymieniła token na nowy token z zakresem usługi platformy Azure, takiej jak Microsoft Graph.
  4. Podaj kod, aby aplikacja zaplecza korzystała z nowego tokenu , aby uzyskać dostęp do usługi podrzędnej jako bieżący uwierzytelniony użytkownik.
  5. Wdroż aplikację back-end za pomocą az webapp deploy.
  6. Na końcu tego samouczka rzeczywisty profil jest zwracany do aplikacji front-end, ponieważ Graph jest połączony.

Ten samouczek nie zawiera:

  • Zmień aplikację front-endową z poprzedniego poradnika.
  • Zmień uprawnienia zakresu aplikacji uwierzytelniania serwerowej, ponieważ User.Read jest dodawane domyślnie do wszystkich aplikacji uwierzytelniania.

W poprzednim samouczku, gdy użytkownik loguje się do aplikacji front-end, pojawi się okno z prośbą 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. Aby udzielić zgody administratora, musisz obejść ten problem, konfigurując rejestrację aplikacji zaplecza w usłudze Microsoft Entra ID. Administrator firmy Microsoft Entra zwykle wprowadza tę zmianę ustawienia.

  1. Otwórz portal Azure i wyszukaj zasób dla usługi zaplecza App Service.

  2. Znajdź sekcję Ustawienia>uwierzytelniania .

  3. Wybierz dostawcę tożsamości, aby przejść do aplikacji uwierzytelniania.

  4. W aplikacji uwierzytelniania wybierz pozycję Zarządzaj uprawnieniami>interfejsu API.

  5. Wybierz pozycję Udziel zgody administratora dla katalogu domyślnego.

    Zrzut ekranu przedstawiający aplikację uwierzytelniania w witrynie Azure Portal z wyróżnionym przyciskiem zgody administratora.

  6. W oknie podręcznym wybierz Tak, aby potwierdzić zgodę.

  7. 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.

    Zrzut ekranu przedstawiający aplikację uwierzytelniania w witrynie Azure Portal z zgodą administratora udzieloną w kolumnie stan.

2. Instalowanie pakietów npm

W poprzednim samouczku aplikacja backendowa nie potrzebowała żadnych pakietów npm do uwierzytelniania, ponieważ jedyne uwierzytelnianie było zapewnione poprzez skonfigurowanie 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 realizowana z dwiema bibliotekami, ponieważ nie używa już uwierzytelniania usługi App Service. Zamiast tego używa bezpośrednio identyfikatora Entra firmy Microsoft i MSAL.js.

  1. Otwórz usługę Azure Cloud Shell i przejdź do aplikacji backendowej przykładowego katalogu.

    cd js-e2e-web-app-easy-auth-app-to-app/backend

  2. Zainstaluj pakiet npm biblioteki Microsoft Authentication Library (MSAL) platformy Azure:

    npm install @azure/msal-node

  3. 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.

  1. Otwórz plik ./src/server.js.

  2. Usuń komentarz z następującej zależności w górnej części pliku:

    import { getGraphProfile } from './with-graph/graph';

  3. W tym samym pliku usuń komentarz ze zmiennej graphProfile :

    let graphProfile={};

  4. 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)}`);

  5. Zapisz zmiany: Ctrl + s.

  6. Spakuj zaktualizowaną aplikację backendową bez lokalnych zależności i plików środowiskowych:

    zip -r ../backend-graph.zip . -x '*/node_modules/*' '*/.git/*' '*/.env*'

  7. Wdróż zaktualizowany pakiet:

    az webapp deploy --resource-group myAuthResourceGroup --name <back-end-app-name> --src-path ../backend-graph.zip --type zip

4. Sprawdź kod zaplecza, aby wymienić token interfejsu API zaplecza na token Microsoft Graph.

Aby zmienić token odbiorców API zaplecza na token programu Microsoft Graph, aplikacja zaplecza musi znaleźć identyfikator dzierżawy i użyć go w konfiguracji obiektu MSAL.js. Ponieważ aplikacja serwerowa jest skonfigurowana z Microsoft jako dostawcą tożsamości, Identyfikator dzierżawy i kilka innych wymaganych wartości konfiguracyjnych są już w ustawieniach aplikacji w usłudze App Service.

Poniższy kod jest udostępniany 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

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

  2. 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;
}

  3. 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

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

  2. Skompiluj obiekt konfiguracji MSAL.js. Użyj konfiguracji biblioteki MSAL, aby utworzyć element clientCredentialAuthority. Skonfiguruj żądanie z upoważnienia. Następnie użyj acquireTokenOnBehalfOf do zamiany tokenu dostępu interfejsu API zaplecza na token dostępu do Graph.

    // ./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 usługi Microsoft Graph jako użytkownik zalogowany do aplikacji front-end, 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.

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

  2. W funkcji getGraphProfile() najpierw pobierz token, potem na jego podstawie uzyskaj uwierzytelnionego klienta, a na końcu pobierz 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

  1. Użyj witryny front-end w przeglądarce. Może być konieczne odświeżenie tokenu, jeśli wygasł.

  2. Wybierz opcję Get user's profile. Spowoduje to przekazanie uwierzytelniania w tokenie nosiciela do zaplecza systemu.

  3. Zaplecze odpowiada rzeczywistym profilem programu Microsoft Graph dla Twojego konta.

    Zrzut ekranu przeglądarki internetowej przedstawiający aplikację front-end po pomyślnym uzyskaniu rzeczywistego profilu z aplikacji back-end.

7. Czyszczenie

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

  1. Aby usunąć grupę zasobów, uruchom następujące polecenie w usłudze Cloud Shell. Uruchomienie tego polecenia może potrwać minutę.

    az group delete --name myAuthResourceGroup

  2. Użyj identyfikatorów klienta, które wcześniej znalazłeś i zanotowałeś, w Enable authentication and authorization sekcjach dotyczących aplikacji zaplecza i front-endu.

  3. Usuń rejestracje aplikacji zarówno dla aplikacji front-endowej, jak i back-endowej.

    # delete app - do this for both front-end and back-end 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 back-end, aplikacja front-end nie może poinformować użytkownika, dlaczego nie widzi swojego profilu w aplikacji front-end.

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. Te same ogólne kroki można zastosować w celu uzyskania dostępu do dowolnej usługi platformy Azure w imieniu użytkownika.

  1. Brak zmian w aplikacji front-endowej. Zmiany dotyczą tylko rejestracji aplikacji uwierzytelniania zaplecza oraz kodu źródłowego aplikacji zaplecza.
  2. Wymień token użytkownika przeznaczony dla API zaplecza na token do usługi podrzędnej, do której chcesz uzyskać dostęp.
  3. Użyj tokenu w zestawie SDK usługi podrzędnej, aby utworzyć klienta.
  4. Użyj klienta podrzędnego, aby uzyskać dostęp do funkcji usługi.

Treści powiązane

  • Ostatnia aktualizacja o