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 aplikaci App Service tak, aby přijímala přihlašovací údaje uživatele front-endové aplikace, a pak si je vyměňujte pro podřízenou službu Azure. Tento přístup umožňuje uživateli přihlásit se k front-endové aplikaci 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:

  • Nakonfigurujte back-endovou ověřovací aplikaci tak, aby poskytovala token vymezený 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 dokončete přístup k Microsoft Graphu ze zabezpečené javascriptové aplikace jako uživatel. Neodstraňujte zdroje na konci kurzu. V tomto kurzu se předpokládá, že máte dvě aplikační služby a 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 poskytované 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í kurz zahrnoval:

  1. Přihlášení uživatele do front-endové aplikace nakonfigurované tak, aby používala 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. Tento obor 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, který umožní vyměnit token za nový s oprávněními pro použití služeb Azure, jako je Microsoft Graph.
  4. Zadejte kód, aby back-endová aplikace používala nový token pro přístup ke podřízené službě jako aktuální ověřený uživatel.
  5. Znovu nasadit backendovou aplikaci s 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.
  • Upravte rozsah oprávnění back-endové ověřovací aplikace, protože User.Read je automaticky přidáváno jako výchozí do všech ověřovacích aplikací.

Když se uživatel v předchozím kurzu přihlásí k front-endové aplikaci, automaticky otevírané okno požádá 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. Tento problém musíte vyřešit tak, že nakonfigurujete registraci backendové aplikace v Microsoft Entra ID, abyste udělili souhlas správce. Správce Microsoft Entra obvykle provede tuto změnu nastavení.

  1. Otevřete Azure portal a vyhledejte váš prostředek pro back-endovou službu 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 k 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. Místo toho používá Microsoft Entra ID 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 Microsoft Authentication Library (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. Zkontrolujte backendový kód za účelem výměny tokenu rozhraní API backendu za token Microsoft Graphu.

Aby bylo možné změnit token cílové skupiny 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 nakonfigurovaná s Microsoftem jako zprostředkovatelem identity, ID tenanta a několik dalších požadovaných hodnot už jsou v nastavení aplikace služby App Service.

Následující kód je 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 zkontrolujte funkci getGraphToken().

  2. Sestavte objekt konfigurace MSAL.js. Pomocí konfigurace MSAL vytvořte clientCredentialAuthority. Nakonfigurujte žádost jménem uživatele. Pak použijte acquireTokenOnBehalfOf k výměně přístupového tokenu backendového API za přístupový token Graphu.

    // ./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() nejprve získejte token, z něj ověřeného klienta a poté 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, budete možná muset token aktualizovat.

  2. Vyberte možnost Get user's profile. Tím se přenese autentizace v přenosném tokenu do back-endu.

  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. Pokud chcete odstranit skupinu prostředků, spusťte v Cloud Shellu následující příkaz. Tento příkaz může chvíli trvat, než se spustí.

    az group delete --name myAuthResourceGroup

  2. Použijte ID klientů, které jste dříve našli a poznamenali si v Enable authentication and authorization částech pro backendové a frontendové aplikace.

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

    # delete app - do this for both front-end and back-end client ids
az ad app delete --id <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 back-endová ověřovací aplikace 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č se mu ve front-endové aplikaci nezobrazuje jeho 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. Stejný obecný postup je možné použít pro přístup k jakékoli službě Azure jménem uživatele.

  1. Žádná změna front-endové aplikace. Provedou se pouze změny v registraci autentizační aplikace back-endu a ve zdrojovém kódu back-endové aplikace.
  2. Vyměňte token uživatele s rozsahem pro back-endové API za token pro cílovou službu, k níž chcete získat 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.

Související obsah

  • Last updated on