Samouczek: uzyskiwanie dostępu jako użytkownik do Microsoft Graph z zabezpieczonej aplikacji JavaScript

Dowiedz się, jak uzyskać dostęp do Microsoft Graph z poziomu aplikacji internetowej działającej w Azure App Service.

Diagram przedstawiający dostęp do Microsoft Graph.

Chcesz dodać dostęp do Microsoft Graph z aplikacji internetowej i wykonać jakąś akcję jako zalogowany użytkownik. W tej sekcji opisano sposób udzielania delegowanych uprawnień do aplikacji internetowej i uzyskiwania informacji o profilu zalogowanego użytkownika z Microsoft Entra ID.

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

  • Przyznawanie delegowanych uprawnień do aplikacji internetowej.
  • Wywołaj Microsoft Graph z aplikacji internetowej dla zalogowanego użytkownika.

Jeśli nie masz konta Azure, przed rozpoczęciem utwórz konto free.

Wymagania wstępne

  • Aplikacja internetowa działająca w Azure App Service z włączonym modułem uwierzytelniania/autoryzacji usługi App Service.

Udziel dostępu frontendowi do wywoływania Microsoft Graph

Po włączeniu uwierzytelniania i autoryzacji w aplikacji internetowej aplikacja internetowa jest zarejestrowana na platformie tożsamości firmy Microsoft i jest wspierana przez aplikację Firmy Microsoft Entra. W tym kroku przyznasz aplikacji internetowej uprawnienia dostępu do Microsoft Graph dla użytkownika.

Note

Technicznie przyznasz aplikacji internetowej Microsoft Entra uprawnienia dostępu do aplikacji Microsoft Entra programu Microsoft Graph dla użytkownika.

  1. W Microsoft Entra admin center wybierz Entra ID.

  2. Wybierz App registrations>Owned applications>Wyświetl wszystkie aplikacje w tym katalogu. Wybierz nazwę aplikacji internetowej, a następnie wybierz pozycję Uprawnienia interfejsu API.

  3. Wybierz pozycję Dodaj uprawnienie, a następnie wybierz pozycję Interfejsy API firmy Microsoft, a następnie pozycję Microsoft Graph.

  4. Wybierz pozycję Delegowane uprawnienia, a następnie wybierz pozycję User.Read z listy. Wybierz Przyznaj uprawnienia.

Konfigurowanie usługi App Service do zwracania nadającego się do użycia tokenu dostępu

Aplikacja internetowa ma teraz wymagane uprawnienia dostępu do Microsoft Graph jako zalogowany użytkownik. W tej sekcji skonfigurujesz uwierzytelnianie i autoryzację usługi App Service w celu udzielenia użytecznego tokenu dostępu do uzyskiwania dostępu do programu Microsoft Graph. W tym kroku należy dodać User.Read zakres usługi podrzędnej (Microsoft Graph): https://graph.microsoft.com/User.Read.

Ważne

Jeśli nie skonfigurujesz usługi App Service w celu zwrócenia użytecznego tokenu dostępu, podczas wywoływania interfejsów API Microsoft Graph w kodzie zostanie wyświetlony błąd CompactToken parsing failed with error code: 80049217.

Przejdź do Azure Resource Explorer i korzystając z drzewa zasobów, zlokalizuj swoją aplikację sieci Web. Adres URL zasobu powinien być podobny do https://management.azure.com/subscriptions/subscriptionId/resourceGroups/SecureWebApp/providers/Microsoft.Web/sites/SecureWebApp20200915115914.

Eksplorator zasobów Azure jest teraz otwarty z aplikacją internetową wybraną w drzewie zasobów.

  1. W górnej części strony wybierz pozycję Edytuj aby włączyć edytowanie zasobów Azure.

  2. W lewym panelu przeglądarki przejdź do config>authsettingsV2.

  3. W widoku authsettingsV2 wybierz pozycję Edytuj.

  4. Znajdź sekcję logowania w identityProviders>azureActiveDirectory i dodaj następujące ustawienia loginParameters: "loginParameters":[ "response_type=code id_token","scope=openid offline_access profile https://graph.microsoft.com/User.Read" ].

    "identityProviders": {
        "azureActiveDirectory": {
          "enabled": true,
          "login": {
            "loginParameters":[
              "response_type=code id_token",
              "scope=openid offline_access profile https://graph.microsoft.com/User.Read"
            ]
          }
        }
      }
    },
    
  5. Zapisz ustawienia, wybierając pozycję PUT.

Zastosowanie tego ustawienia może potrwać kilka minut. Aplikacja internetowa jest teraz skonfigurowana do uzyskiwania dostępu do Microsoft Graph przy użyciu odpowiedniego tokenu dostępu. Jeśli tego nie zrobisz, Microsoft Graph zwróci błąd z informacją, że format tokenu kompaktowego jest niepoprawny.

Wywoływanie Microsoft Graph z Node.js

Aplikacja internetowa ma teraz wymagane uprawnienia. Dodaje również identyfikator klienta programu Microsoft Graph do parametrów logowania.

Instalowanie pakietów bibliotek klienta

Zainstaluj @azure/identity i pakiet @microsoft/microsoft-graph-client w projekcie za pomocą narzędzia npm.

npm install @microsoft/microsoft-graph-client

Konfigurowanie informacji o uwierzytelnianiu

Utwórz obiekt do przechowywania ustawień uwierzytelniania:

// partial code in app.js
const appSettings = {
    appCredentials: {
        clientId: process.env.WEBSITE_AUTH_CLIENT_ID, // Enter the client Id here,
        tenantId: "common", // Enter the tenant info here,
        clientSecret: process.env.MICROSOFT_PROVIDER_AUTHENTICATION_SECRET // Enter the client secret here,
    },
    authRoutes: {
        redirect: "/.auth/login/aad/callback", // Enter the redirect URI here
        error: "/error", // enter the relative path to error handling route
        unauthorized: "/unauthorized" // enter the relative path to unauthorized route
    },
    protectedResources: {
        graphAPI: {
            endpoint: "https://graph.microsoft.com/v1.0/me", // resource endpoint
            scopes: ["User.Read"] // resource scopes
        },
    },
}

Wywoływanie Microsoft Graph w imieniu użytkownika

Poniższy kod pokazuje, jak wywołać kontroler Microsoft Graph jako aplikację i uzyskać informacje o użytkowniku.

// controllers/graphController.js

// get the name of the app service instance from environment variables
const appServiceName = process.env.WEBSITE_SITE_NAME;

const graphHelper = require('../utils/graphHelper');

exports.getProfilePage = async(req, res, next) => {

    try {
        // get user's access token scoped to Microsoft Graph from session
        // use token to create Graph client
        const graphClient = graphHelper.getAuthenticatedClient(req.session.protectedResources["graphAPI"].accessToken);

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

        res.render('profile', { isAuthenticated: req.session.isAuthenticated, profile: profile, appServiceName: appServiceName });   
    } catch (error) {
        next(error);
    }
}

Poprzedni kod opiera się na następującej funkcji getAuthenticatedClient w celu zwrócenia klienta Microsoft Graph.

// utils/graphHelper.js

const graph = require('@microsoft/microsoft-graph-client');

getAuthenticatedClient = (accessToken) => {
    // Initialize Graph client
    const client = graph.Client.init({
        // Use the provided access token to authenticate requests
        authProvider: (done) => {
            done(null, accessToken);
        }
    });

    return client;
}

Czyszczenie zasobów

Jeśli wykonałeś wszystkie kroki opisane w tym wieloczęściowym samouczku, utworzyłeś usługę App Service, plan hostingowy usługi App Service oraz konto magazynu w grupie zasobów. Utworzono również rejestrację aplikacji w Microsoft Entra ID. Jeśli wybrano konfigurację zewnętrzną, mogłeś utworzyć nowy zewnętrzny tenant. Gdy te zasoby i rejestracja aplikacji nie będą już potrzebne, usuń je, aby nie były naliczane opłaty.

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

  • Usuń zasoby Azure utworzone podczas wykonywania kroków samouczka.

Usuwanie grupy zasobów

  1. W witrynie Azure Portal z menu witryny Azure Portal wybierz pozycję Grupy zasobów.

  2. Wybierz grupę zasobów zawierającą usługę App Service i plan usługi App Service.

  3. Wybierz pozycję Usuń grupę zasobów, aby usunąć grupę zasobów i wszystkie zasoby.

    Zrzut ekranu przedstawiający usuwanie grupy zasobów.

Ta akcja może potrwać kilka minut.

Usuwanie rejestracji aplikacji

  1. W Microsoft Entra admin center zaznacz Rejestracje aplikacji. Następnie wybierz utworzoną aplikację.

    Zrzut ekranu przedstawiający wybieranie rejestracji aplikacji.

  2. W przeglądzie rejestracji aplikacji wybierz opcję Usuń.

    Zrzut ekranu przedstawiający usuwanie rejestracji aplikacji.

Usuń zewnętrznego najemcę

Jeśli utworzono nowego zewnętrznego najemcę, możesz go usunąć.

  1. W centrum administracyjnym Microsoft Entra przejdź do Entra ID>Overview>Manage tenants.

  2. Wybierz klienta, którego chcesz usunąć, a następnie wybierz pozycję Usuń.

    Może być konieczne wykonanie wymaganych akcji przed usunięciem dzierżawy. Na przykład może być konieczne usunięcie wszystkich przepływów użytkownika i rejestracji aplikacji w dzierżawie.

  3. Jeśli jesteś gotowy do usunięcia dzierżawy, wybierz Usuń.

Następne kroki

W tym samouczku zawarto informacje na temat wykonywania następujących czynności:

  • Przyznawanie delegowanych uprawnień do aplikacji internetowej.
  • Wywołaj Microsoft Graph z aplikacji internetowej dla zalogowanego użytkownika.