Öğretici: App Service'ten arka uç API'si aracılığıyla Microsoft Graph'a akış kimlik doğrulama süreci

Arka uç bir App Service uygulamasını, ön uç uygulamasının kullanıcı kimlik bilgilerini kabul etmek ve ardından bu kimlik bilgilerini bir Azure hizmetiyle değiş tokuş etmek için oluşturmayı ve yapılandırmayı öğrenin. Bu yaklaşım, kullanıcının bir ön uç App Service uygulamasında oturum açmasına, kimlik bilgilerini arka uç App Service'e geçirmesine ve ardından aynı kimliğe sahip bir Azure hizmetine erişmesine olanak tanır.

Bu eğitimde şunları öğreniyorsunuz:

Arka uç kimlik doğrulama uygulamasını aşağı akış Azure hizmeti için kapsamlı bir belirteç sağlayacak şekilde yapılandırın.
JavaScript kodunu kullanarak oturum açmış kullanıcının erişim belirtecini aşağı akış hizmeti için yeni bir belirteçle değiştirin.
Aşağı akış hizmetine erişmek için JavaScript kodunu kullanın.

Önkoşullar

Bu öğreticiye başlamadan önce kullanıcı olarak güvenli bir JavaScript uygulamasından Microsoft Graph'a erişme öğreticisini tamamlayın. Öğreticinin sonundaki kaynakları kaldırmayın. Bu öğreticide, iki uygulama hizmetine ve bunlara karşılık gelen kimlik doğrulama uygulamalarına sahip olduğunuz varsayılır.

Önceki öğreticide Azure CLI için kabuk olarak Azure Cloud Shell kullanılmıştır. Bu öğreticide bu kullanım devam eder.

Mimarlık

Öğretici, ön uç uygulaması tarafından sağlanan kullanıcı kimlik bilgilerinin arka uç uygulamasına ve ardından bir Azure hizmetine nasıl geçireceğini gösterir. Bu öğreticide alt hizmet Microsoft Graph'tır. Kullanıcının kimlik bilgileri, profilini Microsoft Graph'ten almak için kullanılır.

Oturum açmış bir kullanıcı adına Microsoft Graph'a bağlanan bir App Service ile bağlantılı olan App Service'in mimari görüntüsü.

Kullanıcının bu mimaride Microsoft Graph bilgilerini alması için kimlik doğrulama akışı:

Önceki öğreticide şu konular ele alınmıştır:

Kimlik sağlayıcısı olarak Active Directory kullanmak üzere yapılandırılmış bir ön uç uygulamasında kullanıcı oturum açın.
Ön uç uygulama hizmeti, kullanıcının belirtecini arka uç uygulama hizmetine geçirir.
Arka uç Uygulaması, ön ucun API isteğinde bulunabilmesi için güvenlidir. Kullanıcının erişim jetonunun arka uç API'si için bir hedef kitlesi ve user_impersonation için bir kapsamı vardır.
Arka uç uygulama kaydı, kapsamına User.Readsahip Microsoft Graph'a zaten sahiptir. Bu kapsam varsayılan olarak tüm uygulama kayıtlarına eklenir.
Önceki öğreticinin sonunda, Graph bağlı olmadığından ön uç uygulamasına sahte bir profil döndürüldü.

Bu öğretici, mimariyi geliştirmeye yönelik adımlar sunar.

Arka uç uygulaması için kullanıcı onayı ekranını atlamak için yönetici onayı verin.
Ön uç uygulamasından gönderilen erişim belirtecini Microsoft Graph için gerekli izinlere sahip bir erişim belirtecine dönüştürmek için uygulama kodunu değiştirin.
Arka uç uygulamanın token'ı, Microsoft Graph gibi alt akış Azure hizmetlerinin kapsamına sahip yeni bir token ile değiştirmesi için kod sağlayın.
Arka uç uygulamasının geçerli kimliği doğrulanmış kullanıcı olarak alt hizmete erişmek için yeni belirteci kullanmasını sağlayacak kod sağlayın.
Arka uç uygulamayıaz webapp up yeniden dağıt.
Bu öğreticinin sonunda, Graph bağlı olduğundan ön uç uygulamasına gerçek bir profil döndürülür.

Bu öğretici şunları yapmaz:

Önceki öğretiden front-end uygulamasını değiştirin.
Arka uç kimlik doğrulama uygulamasının kapsam iznini değiştirin, çünkü User.Read varsayılan olarak tüm kimlik doğrulama uygulamalarına eklenir.

Önceki öğreticide, kullanıcı ön uç uygulamasında oturum açtığında bir açılır pencere kullanıcı onayı ister.

Bu öğreticide, Microsoft Graph'ten kullanıcı profilini okumak için arka uç uygulamasının oturum açmış olan kullanıcının erişim belirtecini Microsoft Graph için gerekli izinlerle yeni bir erişim belirteci için değiştirmesi gerekir. Kullanıcı arka uç uygulamasına doğrudan bağlı olmadığından, onay ekranına etkileşimli olarak erişemez. Yönetici onayı vermek için microsoft Entra ID'de arka uç uygulamasının uygulama kaydını yapılandırarak bu sorunu geçici olarak çözmeniz gerekir. Microsoft Entra yöneticisi genellikle bu ayarı değiştirir.

Azure portalını açın ve App Service için back-end kaynağınızı bulun.
Ayarlar>Kimlik Doğrulaması bölümünü bulun.
Kimlik doğrulama uygulamasına gitmek için kimlik sağlayıcısını seçin.
Kimlik doğrulama uygulamasındaAPI izinlerini> seçin.
Varsayılan Dizin için yönetici onayı ver'i seçin.
Onayı onaylamak için açılır pencerede Evet'i seçin.
Durum sütununda Varsayılan Dizin için Verildi ifadesini doğrulayın. Bu ayar sayesinde arka uç uygulamasının artık oturum açmış kullanıcıya onay ekranı göstermesi gerekmez ve doğrudan erişim belirteci isteyebilir. Uygulama kaydının varsayılan kapsamı olduğu için oturum açmış kullanıcı User.Read kapsam ayarına erişebilir.

2. npm paketlerini yükleme

Önceki öğreticide, azure portalında kimlik sağlayıcısı yapılandırılarak tek kimlik doğrulaması sağlandığı için arka uç uygulamasının kimlik doğrulaması için herhangi bir npm paketine ihtiyacı yoktu. Bu öğreticide, oturum açmış kullanıcının arka uç API'sine yönelik erişim belirteci, Microsoft Graph kapsamındaki bir erişim belirteci ile değiştokuş edilmelidir. Artık App Service kimlik doğrulaması kullanılmadığından, bu alışveriş iki kütüphane ile tamamlanır. Bunun yerine Doğrudan Microsoft Entra Id ve MSAL.js kullanır.

@azure/msal-node: exchange token
@microsoft/microsoft-graph-client: Microsoft Graph'a bağlanma

Azure Cloud Shell'i açın ve örnek dizinin arka uç uygulamasına geçin:
```
cd js-e2e-web-app-easy-auth-app-to-app/backend
```
Azure Microsoft Authentication Library (MSAL) npm paketini yükleyin:
```
npm install @azure/msal-node
```

Microsoft Graph npm paketini yükleyin:

npm install @microsoft/microsoft-graph-client

3. Geçerli belirteci Microsoft Graph belirteciyle değiştirmek için kod ekleyin.

Bu adımı tamamlamak için kaynak kodu sizin için sağlanır. Eklemek için aşağıdaki adımları kullanın.

./src/server.js dosyasını açın.
Dosyanın en üstünde aşağıdaki bağımlılığın açıklamasını kaldırın:
```
import { getGraphProfile } from './with-graph/graph';
```
Aynı dosyada değişkenin açıklamasını kaldırın graphProfile :
```
let graphProfile={};
```

Aynı dosyada, Microsoft Graph'tan profili almak için getGraphProfile rotasındaki aşağıdaki get-profile satırların açıklamalarını kaldırın.

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

Değişiklikleri kaydedin: Ctrl + s.

Arka uç uygulamasını yeniden dağıtın:

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

4. Microsoft Graph belirteci için arka uç API belirtecini değiştirmek için arka uç kodunu inceleyin

Microsoft Graph belirtecinin arka uç API hedef kitle belirtecini değiştirmek için arka uç uygulamasının Kiracı Kimliğini bulması ve bunu MSAL.js yapılandırma nesnesinin bir parçası olarak kullanması gerekir. Arka uç uygulaması kimlik sağlayıcısı olarak Microsoft ile yapılandırıldığından, Kiracı Kimliği ve diğer gerekli değerler Zaten App Service uygulama ayarlarındadır.

Örnek uygulamada sizin için aşağıdaki kod sağlanır. Bu çalışmayı oluşturduğunuz ve aynı işlevselliğe ihtiyaç duyan diğer uygulamalara uygulayabilmek için neden orada olduğunu ve nasıl çalıştığını anlamanız gerekir.

Kiracı Kimliğini almak için kodu inceleme

./backend/src/with-graph/auth.js dosyasını açın.

İşlevi getTenantId() inceleyin.

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

Bu işlev, ortam değişkeninden WEBSITE_AUTH_OPENID_ISSUER geçerli kiracı kimliğini alır. Kimlik, değişkenden normal bir ifadeyle ayrıştırılır.

MSAL.js kullanarak Graph belirtecini almak için kodu inceleme

./backend/src/with-graph/auth.js dosyasında getGraphToken() işlevini gözden geçirin.

MSAL.js yapılandırma nesnesini oluşturun. MSAL yapılandırmasını kullanarak clientCredentialAuthority oluşturun. Bir başkası adına isteği yapılandırın. Ardından arka uç API erişim belirtecini, Graph erişim belirtecine dönüştürmek için acquireTokenOnBehalfOf öğesini kullanın.

// ./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. Yeni belirteçle Microsoft Graph'a erişmek için arka uç kodunu inceleyin

Microsoft Graph'a ön uç uygulamasında oturum açmış bir kullanıcı olarak erişmek için değişiklikler şunlardır:

Active Directory uygulama kaydının, gerekli kapsamına sahip aşağı akış hizmeti olan Microsoft Graph'e API izniyle yapılandırılması User.Read.
Arka uç uygulaması için kullanıcı onayı ekranını atlamak için yönetici onayı verin.
Ön uç uygulamasından gönderilen erişim belirtecini aşağı akış hizmeti microsoft graph için gerekli izinlere sahip bir erişim belirtecine dönüştürmek için uygulama kodunu değiştirin.

Kodun Microsoft Graph için doğru belirteci olduğuna göre, microsoft graph için bir istemci oluşturmak için kodu kullanın ve ardından kullanıcının profilini alın.

./backend/src/graph.js'ı aç

Önce getGraphProfile() işlevini kullanarak belirteci alın, ardından bu belirteçten kimliği doğrulanmış istemciyi alarak profili elde edin.

// 
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. Değişikliklerinizi test edin

Tarayıcıda ön uç web sitesini kullanın. Kimlik doğrulama bilgisi süresi dolduysa, yenilemeniz gerekebilir.
Get user's profileseçin. Bu, taşıyıcı belirtecindeki kimlik doğrulamanızı arka uca geçirir.
Arka uç, hesabınız için gerçek Microsoft Graph profiliyle yanıt verir.

7. Temizleme

Önceki adımlarda, bir kaynak grubunda Azure kaynakları oluşturdunuz.

Kaynak grubunu silmek için Cloud Shell'de aşağıdaki komutu çalıştırın. Bu komutun çalıştırılması bir dakika sürebilir.
```
az group delete --name myAuthResourceGroup
```
Arka uç ve ön uç uygulamalarının bölümlerinde daha önce bulduğunuz ve not ettiğiniz Enable authentication and authorization kullanın.

Hem ön uç hem de arka uç uygulamaları için uygulama kayıtlarını silin.

# delete app - do this for both front-end and back-end client ids
az ad app delete --id <client-id>

Sıkça sorulan sorular

Bir hata `80049217`aldım, ne anlama geliyor?

Bu hata, CompactToken parsing failed with error code: 80049217arka uç App Service'in Microsoft Graph belirtecini döndürme yetkisi olmadığı anlamına gelir. Uygulama kaydında User.Read izni eksik olduğu için bu hata oluşmaktadır.

Bir hata `AADSTS65001`aldım, ne anlama geliyor?

Bu hata, 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 resourcearka uç kimlik doğrulama uygulamasının Yönetici onayı için yapılandırılmadığı anlamına gelir. Hata arka uç uygulamasının günlüğüne kaydedildiğinden dolayı, ön uç uygulaması kullanıcıya profilini ön uçta neden göremediğini açıklayamaz.

Farklı bir aşağı akış Azure hizmetine kullanıcı olarak nasıl bağlanabilirim?

Bu öğretici, Microsoft Graph'a kimliği doğrulanmış bir API uygulamasını göstermektedir. Kullanıcı adına herhangi bir Azure hizmetine erişmek için de aynı genel adımlar uygulanabilir.

Ön uç uygulamasında değişiklik yok. Yalnızca arka uçta kimlik doğrulama uygulama kaydı ve arka uç uygulama kaynak kodunda yapılan değişiklikler.
Kullanıcının arka uç API'si için kapsamı belirlenmiş belirtecini, erişmek istediğiniz alt hizmet için bir belirteç ile değiştirin.
İstemciyi oluşturmak için alt hizmetin SDK'sında token'ı kullanın.
Hizmet işlevselliğine erişmek için aşağı akış istemcisini kullanın.

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2026-03-26