Sdílet prostřednictvím

Kurz: Ověřování toku ze služby App Service přes back-endové rozhraní API do Microsoft Graphu

Zjistěte, jak vytvořit a nakonfigurovat back-endovou službu App Service tak, aby přijímala přihlašovací údaje uživatele front-endové aplikace, a pak si je vyměňte pro podřízenou službu Azure. To uživateli umožní přihlásit se k front-endové službě App Service, předat své přihlašovací údaje back-endové službě App Service a pak přistupovat ke službě Azure se stejnou identitou.

V tomto návodu se naučíte, jak:

  • Konfigurace back-endové ověřovací aplikace tak, aby poskytovala token s vymezeným oborem pro podřízenou službu Azure
  • Použijte javascriptový kód k výměně přístupového tokenu přihlášeného uživatele pro nový token pro podřízenou službu.
  • Pro přístup ke podřízené službě použijte javascriptový kód.

Požadavky

Před zahájením tohoto kurzu proveďte přístup k Microsoft Graphu ze zabezpečené javascriptové aplikace jako uživatel, ale neodebívejte prostředky na konci kurzu. V tomto kurzu se předpokládá, že máte dvě služby App a jejich odpovídající ověřovací aplikace.

Předchozí kurz použil Azure Cloud Shell jako prostředí pro Azure CLI. Tento kurz pokračuje v tomto využití.

Architektura

V tomto kurzu se dozvíte, jak předat přihlašovací údaje uživatele poskytnuté front-endovou aplikací do back-endové aplikace a pak do služby Azure. V tomto kurzu je podřízená služba Microsoft Graph. Přihlašovací údaje uživatele se používají k získání svého profilu z Microsoft Graphu.

Obrázek architektury služby App Service připojující se k Microsoft Graphu jménem přihlášeného uživatele.

Průběh ověřování aby uživatel získal informace Microsoft Graphu v této architektuře:

Předchozí tutoriál pokrýval:

  1. Přihlaste uživatele k front-endové aplikaci služby, která je nakonfigurována pro použití Active Directory jako poskytovatele identity.
  2. Front-endová služba App Service předává token uživatele do back-endové služby App Service.
  3. Back-endová aplikace je zabezpečená, aby front-end mohl vytvořit požadavek rozhraní API. Přístupový token uživatele má cílovou skupinu pro back-endové rozhraní API a rozsah user_impersonation.
  4. Registrace back-endové aplikace už má Microsoft Graph s oborem User.Read. Tato možnost se ve výchozím nastavení přidá do všech registrací aplikací.
  5. Na konci předchozího kurzu se do front-endové aplikace vrátil falešný profil, protože Graph nebyl připojený.

Tento kurz rozšiřuje architekturu:

  1. Udělte správci souhlas s obejití obrazovky souhlasu uživatele pro back-endovou aplikaci.
  2. Změňte kód aplikace tak, aby převáděl přístupový token odeslaný z front-endové aplikace na přístupový token s požadovaným oprávněním pro Microsoft Graph.
  3. Poskytněte kód pro back-endovou aplikaci k výměně tokenu za nový token s rozsahem pro podřízenou službu Azure, jako je Microsoft Graph.
  4. Poskytněte kód, aby back-endová aplikace použila nový token pro přístup k podřízené službě jako aktuálně ověřený uživatel.
  5. Opětovné nasazení backendové aplikace pomocí az webapp up.
  6. Na konci tohoto kurzu se do front-endové aplikace vrátí skutečný profil, protože Graph je připojen.

Tento kurz neobsahuje:

  • Změňte front-endovou aplikaci z předchozího kurzu.
  • Změňte oprávnění oboru back-endové ověřovací aplikace, protože User.Read je ve výchozím nastavení přidána do všech ověřovacích aplikací.

V předchozím kurzu se při přihlášení uživatele k front-endové aplikaci zobrazí automaticky otevírané okno s žádostí o souhlas uživatele.

V tomto kurzu potřebuje back-endová aplikace pro čtení profilu uživatele z Microsoft Graphu vyměnit přístupový token přihlášeného uživatele za nový přístupový token s požadovanými oprávněními pro Microsoft Graph. Protože uživatel není přímo připojený k back-endové aplikaci, nemůže interaktivně získat přístup k obrazovce souhlasu. Musíte to obejít tak, že nakonfigurujete registraci aplikace back-endu v Microsoft Entra ID, aby se udělil souhlas správce. Jedná se o změnu nastavení, kterou obvykle provádí správce služby Active Directory.

  1. Otevřete Azure Portal a vyhledejte svůj výzkum back-endové služby App Service.

  2. Najděte část Nastavení –> Ověřování .

  3. Výběrem zprostředkovatele identity přejděte do ověřovací aplikace.

  4. V ověřovací aplikaci vyberte Spravovat –> oprávnění rozhraní API.

  5. Vyberte Udělit souhlas správce pro výchozí adresář.

    Snímek obrazovky ověřovací aplikace webu Azure Portal se zvýrazněným tlačítkem souhlasu správce

  6. V automaticky otevíracím okně vyberte Ano pro potvrzení souhlasu.

  7. Ověřte, že sloupec Stav uvádí Poskytnuto pro výchozí adresář. Díky tomuto nastavení už back-endová aplikace nemusí zobrazovat přihlašovací obrazovku přihlášeného uživatele a může požádat přímo o přístupový token. Přihlášený uživatel má přístup k User.Read nastavení oboru, protože se jedná o výchozí obor, pomocí kterého se vytvoří registrace aplikace.

    Snímek obrazovky s ověřovací aplikací webu Azure Portal se souhlasem správce uděleným ve sloupci stavu

2. Instalace balíčků npm

V předchozím kurzu back-endová aplikace pro ověřování nepotřebovala žádné balíčky npm, protože jediné ověřování bylo poskytnuto konfigurací zprostředkovatele identity na webu Azure Portal. V tomto tutoriálu musí být přístupový token přihlášeného uživatele pro back-endové rozhraní API vyměněn za přístupový token s Microsoft Graphem v jeho rozsahu. Tato výměna je dokončena se dvěma knihovnami, protože tato výměna už nepoužívá ověřování služby App Service, ale ID Microsoft Entra a MSAL.js přímo.

  1. Otevřete Azure Cloud Shell a přejděte do back-endové aplikace ukázkového adresáře:

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

  2. Nainstalujte balíček npm Azure MSAL:

    npm install @azure/msal-node

  3. Nainstalujte balíček npm Microsoft Graphu:

    npm install @microsoft/microsoft-graph-client

3. Přidání kódu pro výměnu aktuálního tokenu pro token Microsoft Graphu

Zdrojový kód k dokončení tohoto kroku je pro vás k dispozici. K zahrnutí použijte následující postup.

  1. Otevřete soubor ./src/server.js.

  2. Odkomentujte následující závislost v horní části souboru:

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

  3. Ve stejném souboru odkomentujte proměnnou graphProfile :

    let graphProfile={};

  4. Ve stejném souboru odkomentujte následující getGraphProfile řádky v get-profile trase, abyste získali profil z 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. Uložte změny: Ctrl + s.

  6. Opětovné nasazení back-endové aplikace:

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

4. Kontrola back-endového kódu za účelem výměny tokenu rozhraní API back-endu pro token Microsoft Graphu

Aby bylo možné změnit token příjemce rozhraní API back-endu pro token Microsoft Graphu, musí back-endová aplikace najít ID tenanta a použít ho jako součást objektu konfigurace MSAL.js. Vzhledem k tomu, že back-endová aplikace je nakonfigurována s Microsoftem jako zprostředkovatelem identity, ID tenanta a několik dalších potřebných hodnot je již v nastavení aplikace služby App Service.

Následující kód je již k dispozici v ukázkové aplikaci. Potřebujete pochopit, proč je tam a jak funguje, abyste mohli tuto práci použít u jiných aplikací, které sestavujete, které potřebují stejnou funkci.

Kontrola kódu pro získání ID tenanta

  1. Otevřete soubor ./backend/src/with-graph/auth.js.

  2. getTenantId() Zkontrolujte funkci.

    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. Tato funkce získá aktuální ID tenanta WEBSITE_AUTH_OPENID_ISSUER z proměnné prostředí. ID se parsuje z proměnné pomocí regulárního výrazu.

Kontrola kódu pro získání tokenu Graphu pomocí MSAL.js

  1. V souboru ./backend/src/with-graph/auth.js stále zkontrolujte funkci getGraphToken().

  2. Sestavte objekt konfigurace MSAL.js, pomocí konfigurace MSAL vytvořte clientCredentialAuthority. Nakonfigurujte žádost jménem někoho. Pak použijte acquireTokenOnBehalfOf k výměně přístupového tokenu rozhraní API back-endu za přístupový token pro 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. Kontrola back-endového kódu pro přístup k Microsoft Graphu pomocí nového tokenu

Pokud chcete získat přístup k Microsoft Graphu jako uživatel přihlášený k front-endové aplikaci, zahrnují tyto změny:

  • Konfigurace registrace aplikace Active Directory s oprávněním rozhraní API pro podřízenou službu Microsoft Graph s nezbytným rozsahem User.Read.
  • Udělte správci souhlas s obejití obrazovky souhlasu uživatele pro back-endovou aplikaci.
  • Změňte kód aplikace tak, aby převáděl přístupový token odeslaný z front-endové aplikace na přístupový token s požadovaným oprávněním pro podřízenou službu Microsoft Graph.

Teď, když má kód správný token pro Microsoft Graph, použijte ho k vytvoření klienta do Microsoft Graphu a pak získejte profil uživatele.

  1. Otevřete ./backend/src/graph.js

  2. Ve funkci getGraphProfile() získejte token, poté ověřeného klienta z tokenu, a nakonec 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. Otestování změn

  1. Použijte front-endový web v prohlížeči. Pokud platnost tokenu vypršela, možná budete muset token aktualizovat.

  2. Vyberte možnost Get user's profile. Tím se autentizace v bearer tokenu předá do backendu.

  3. Back-end odpoví skutečným profilem Microsoft Graphu pro váš účet.

    Snímek obrazovky webového prohlížeče zobrazující front-endovou aplikaci po úspěšném získání skutečného profilu z back-endové aplikace

7. Vyčistěte

V předchozích krocích jste ve skupině prostředků vytvořili zdroje Azure.

  1. Odstraňte skupinu prostředků spuštěním následujícího příkazu v Cloud Shellu. Spuštění tohoto příkazu může trvat přibližně minut.

    az group delete --name myAuthResourceGroup

  2. Použijte ID klienta ověřovacích aplikací, které jste dříve našli a zaznamenali v Enable authentication and authorization sekcích pro backendové a frontendové aplikace.

  3. Odstraňte registrace aplikací pro front-endové i back-endové aplikace.

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

Nejčastější dotazy

Zobrazila se mi chyba 80049217, co to znamená?

Tato chyba znamená, CompactToken parsing failed with error code: 80049217že back-endová služba App Service nemá oprávnění k vrácení tokenu Microsoft Graphu. Příčinou této chyby je chybějící User.Read oprávnění registrace aplikace.

Zobrazila se mi chyba AADSTS65001, co to znamená?

Tato chyba znamená, 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 aplikace pro ověřování back-endu nebyla nakonfigurována pro souhlas správce. Vzhledem k tomu, že se chyba zobrazí v protokolu back-endové aplikace, front-endová aplikace nemůže uživateli sdělit, proč v front-endové aplikaci nevidí svůj profil.

Jak se připojím k jiné podřízené službě Azure jako uživatel?

Tento kurz ukazuje aplikaci API ověřenou v Microsoft Graphu, ale stejný obecný postup se dá použít pro přístup k libovolné službě Azure jménem uživatele.

  1. Žádná změna front-endové aplikace. Změní se jenom registrace ověřovací aplikace backendu a zdrojový kód aplikace backendu.
  2. Vyměňte token uživatele, který je omezen na back-endové rozhraní API, za token pro podřízenou službu, ke které chcete přístup.
  3. K vytvoření klienta použijte token v sadě SDK podřízené služby.
  4. Pro přístup k funkcím služeb použijte podřízený klient.

Další kroky

  • Last updated on