Udostępnij za pośrednictwem

Samouczek: przepływ uwierzytelniania z usługi App Service za pośrednictwem interfejsu API zaplecza do programu Microsoft Graph

  • Artykuł

Dowiedz się, jak utworzyć i skonfigurować usługę App Service zaplecza w celu akceptowania poświadczeń użytkownika aplikacji frontonu, a następnie wymieniać te poświadczenia dla podrzędnej usługi platformy Azure. Dzięki temu użytkownik może zalogować się do usługi App Service frontonu, przekazać swoje poświadczenia do usługi App Service zaplecza, a następnie uzyskać dostęp do usługi platformy Azure przy użyciu tej samej tożsamości.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

  • 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 App Services 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 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.

Architectural image of App Service connecting to App Service connecting to Microsoft Graph on behalf of a signed-in user.

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

Omówiony poprzedni samouczek :

  1. Zaloguj użytkownika do usługi App Service frontonu skonfigurowanej do używania usługi Active Directory jako dostawcy tożsamości.
  2. Usługa App Service frontonu przekazuje token użytkownika do usługi App Service zaplecza.
  3. Aplikacja zaplecza jest zabezpieczona, aby umożliwić frontonowi wysyłanie żądania interfejsu API. Token dostępu użytkownika ma odbiorców dla interfejsu API zaplecza i zakresu user_impersonation.
  4. Rejestracja aplikacji zaplecza ma już program Microsoft Graph z zakresem User.Read. Jest on domyślnie dodawany do wszystkich rejestracji aplikacji.
  5. Na końcu poprzedniego samouczka fałszywy profil został zwrócony do aplikacji frontonu, ponieważ program 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 frontonu na token dostępu z wymaganym uprawnieniem dla programu Microsoft Graph.
  3. Podaj kod, aby mieć token wymiany aplikacji zaplecza dla nowego tokenu z zakresem podrzędnej usługi platformy Azure, takiej jak Microsoft Graph.
  4. Podaj kod, aby aplikacja zaplecza korzystała z nowego tokenu w celu uzyskania dostępu do usługi podrzędnej jako bieżącego użytkownika uwierzytelnienia.
  5. Ponownie wdróż aplikację zaplecza za pomocą polecenia az webapp up.
  6. Na końcu tego samouczka rzeczywisty profil jest zwracany do aplikacji frontonu, ponieważ program Graph jest połączony.

Ten samouczek nie obejmuje następujących funkcji:

  • Zmień aplikację frontonu 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 frontonu zostanie wyświetlone wyskakujące okienko z prośbą o zgodę użytkownika.

W tym samouczku, aby odczytać profil użytkownika z programu Microsoft Graph, aplikacja zaplecza musi wymienić token dostępu zalogowanego użytkownika na nowy token dostępu z wymaganymi uprawnieniami dla programu 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.

  1. Otwórz witrynę Azure Portal i wyszukaj swoje badania dotyczące usługi App Service zaplecza.

  2. Znajdź sekcję Ustawienia —> Uwierzytelnianie.

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

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

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

    Screenshot of Azure portal authentication app with admin consent button highlighted.

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

  7. Sprawdź, czy w kolumnie Stan jest wyświetlany komunikat Udzielono 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.

    Screenshot of Azure portal authentication app with admin consent granted in status column.

2. Instalowanie pakietów npm

W poprzednim samouczku aplikacja zaplecza nie potrzebowała żadnych pakietów npm do uwierzytelniania, ponieważ jedyne uwierzytelnianie zostało udostępnione przez skonfigurowanie dostawcy tożsamości w witrynie Azure Portal. W tym samouczku token dostępu zalogowanego użytkownika dla interfejsu API zaplecza musi zostać zamieniony na token dostępu z programem Microsoft Graph w swoim zakresie. Ta wymiana jest zakończona z dwiema bibliotekami, ponieważ ta wymiana nie używa już uwierzytelniania usługi App Service, ale bezpośrednio microsoft Entra ID i MSAL.js.

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

  2. Zainstaluj pakiet npm usługi Azure MSAL:

    npm install @azure/msal-node

  3. Zainstaluj pakiet npm programu Microsoft Graph:

    npm install @microsoft/microsoft-graph-client

3. Dodawanie kodu w celu wymiany bieżącego tokenu dla tokenu programu 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. Ponownie wdróż aplikację zaplecza:

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

4. Sprawdzanie kodu zaplecza w celu wymiany tokenu interfejsu API zaplecza dla tokenu programu Microsoft Graph

Aby zmienić token odbiorców interfejsu API zaplecza dla tokenu programu Microsoft Graph, aplikacja zaplecza musi znaleźć identyfikator dzierżawy i użyć go w ramach obiektu konfiguracji MSAL.js. Ponieważ aplikacja zaplecza skonfigurowana z firmą Microsoft jako dostawca tożsamości, identyfikator dzierżawy i kilka innych wymaganych wartości są już w ustawieniach aplikacji usługi App Service.

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

Sprawdzanie kodu w celu uzyskania identyfikatora dzierżawy

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

  2. getTenantId() Przejrzyj funkcję.

    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 analizowany ze zmiennej za pomocą wyrażenia regularnego.

Sprawdzanie kodu w celu uzyskania tokenu programu Graph przy użyciu biblioteki MSAL.js

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

  2. Skompiluj obiekt konfiguracji MSAL.js, użyj konfiguracji biblioteki MSAL, aby utworzyć klientaCredentialAuthority. Skonfiguruj żądanie w imieniu. Następnie użyj metody acquireTokenOnBehalfOf, aby wymienić token dostępu interfejsu API zaplecza dla tokenu dostępu programu 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 programu Microsoft Graph jako użytkownik zalogowany do aplikacji frontonu, zmiany obejmują:

  • Konfiguracja rejestracji aplikacji usługi Active Directory z uprawnieniem interfejsu API do usługi podrzędnej 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 frontonu na token dostępu z wymaganym uprawnieniem dla usługi podrzędnej 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. getGraphProfile() W funkcji pobierz token, a następnie uwierzytelnionego klienta z tokenu, a następnie 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 internetowej frontonu w przeglądarce. Adres URL ma format https://<front-end-app-name>.azurewebsites.net/. Może być konieczne odświeżenie tokenu, jeśli wygasł.

  2. Wybierz opcję Get user's profile. Spowoduje to przekazanie uwierzytelniania w tokenie elementu nośnego do zaplecza.

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

    Screenshot of web browser showing frontend application after successfully getting real profile from backend app.

7. Czyszczenie

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

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

  2. Użyj identyfikatora klienta aplikacji uwierzytelniania, które wcześniej znaleziono i zanotuj w Enable authentication and authorization sekcjach dotyczących aplikacji zaplecza i frontonu.

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

Często 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. Ten błąd jest spowodowany brakiem uprawnień do rejestracji User.Read aplikacji.

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 Administracja zgody. Ponieważ błąd jest wyświetlany w dzienniku aplikacji zaplecza, aplikacja frontonu nie może poinformować użytkownika, dlaczego nie widzi swojego profilu w aplikacji frontonu.

Jak mogę połączyć się 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.

  1. Brak zmian w aplikacji frontonu. Zmiany tylko w kodzie źródłowym aplikacji uwierzytelniania zaplecza i aplikacji zaplecza.
  2. Wymiana tokenu użytkownika w zakresie interfejsu API zaplecza dla tokenu 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.

Następne kroki