Tutorial: Mengakses Microsoft Graph dari aplikasi JavaScript yang aman sebagai pengguna

Pelajari cara mengakses Microsoft Graph dari aplikasi web yang berjalan di Azure App Service.

Diagram yang memperlihatkan mengakses Microsoft Graph.

Anda ingin menambahkan akses ke Microsoft Graph dari aplikasi web Anda dan melakukan beberapa tindakan sebagai pengguna yang masuk. Bagian ini menjelaskan cara memberikan izin yang didelegasikan ke aplikasi web dan mendapatkan informasi profil pengguna yang masuk dari Microsoft Entra ID.

Dalam tutorial ini, Anda akan mempelajari cara:

Memberikan izin yang didelegasikan ke aplikasi web.
Panggil Microsoft Graph dari aplikasi web untuk pengguna yang masuk.

Jika Anda tidak memiliki akun Azure, buat akun free sebelum Memulai.

Prasyarat

Aplikasi web yang berjalan di Azure App Service yang mengaktifkan modul autentikasi/otorisasi Layanan App.

Memberikan akses front-end untuk memanggil Microsoft Graph

Setelah Anda mengaktifkan autentikasi dan otorisasi di aplikasi web Anda, aplikasi web terdaftar di platform identitas Microsoft dan didukung oleh aplikasi Microsoft Entra. Dalam langkah ini, Anda memberikan izin aplikasi web untuk mengakses Microsoft Graph bagi pengguna.

Note

Secara teknis, Anda memberikan izin kepada aplikasi web Microsoft Entra untuk mengakses aplikasi Microsoft Graph Entra bagi pengguna.

Di Microsoft Entra admin center, pilih Entra ID.
Pilih App registrations>Aplikasi yang Dimiliki>Lihat semua aplikasi di direktori ini. Pilih nama aplikasi web Anda, lalu pilih izin API.
Pilih Tambahkan izin, lalu pilih API Microsoft, lalu Microsoft Graph.
Pilih Izin yang didelegasikan, lalu pilih Pengguna.Baca dari daftar. Pilih Tambahkan izin.

Mengonfigurasi App Service untuk mengembalikan token akses yang dapat digunakan

Aplikasi web sekarang memiliki izin yang diperlukan untuk mengakses Microsoft Graph sebagai pengguna yang masuk. Di bagian ini, Anda mengonfigurasi autentikasi dan otorisasi App Service untuk memberi Anda token akses yang dapat digunakan untuk mengakses Microsoft Graph. Untuk langkah ini, Anda perlu menambahkan User.Read ruang lingkup untuk layanan downstream (Microsoft Graph): https://graph.microsoft.com/User.Read.

Penting

Jika Anda tidak mengonfigurasi App Service untuk mengembalikan token akses yang dapat digunakan, Anda menerima kesalahan CompactToken parsing failed with error code: 80049217 saat memanggil API Microsoft Graph dalam kode Anda.

Azure Resource Explorer
Azure CLI

Buka Azure Resource Explorer dan gunakan pohon sumber daya, temukan aplikasi web Anda. URL sumber daya harus mirip dengan https://management.azure.com/subscriptions/subscriptionId/resourceGroups/SecureWebApp/providers/Microsoft.Web/sites/SecureWebApp20200915115914.

Azure Resource Explorer sekarang dibuka dengan aplikasi web Anda yang dipilih di pohon sumber daya.

Di bagian atas halaman, pilih Edit untuk mengaktifkan pengeditan sumber daya Azure Anda.
Di browser kiri, telusuri hingga config>authsettingsV2.
Dalam tampilan authsettingsV2, pilih Edit.

Temukan bagian logindari identityProviders>azureActiveDirectory dan tambahkan pengaturan loginParameters berikut: "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"
        ]
      }
    }
  }
},

Simpan pengaturan Anda dengan memilih PUT.

Pengaturan ini dapat memerlukan waktu beberapa menit untuk diterapkan. Aplikasi web Anda sekarang dikonfigurasi untuk mengakses Microsoft Graph dengan token akses yang tepat. Jika tidak, Microsoft Graph mengembalikan kesalahan yang menyatakan bahwa format token ringkas salah.

Gunakan Azure CLI untuk memanggil REST API App Service Web App ke get dan update pengaturan konfigurasi autentikasi sehingga aplikasi web Anda dapat memanggil Microsoft Graph.

Buka jendela perintah dan masuk ke Azure CLI:
```
az login
```

Dapatkan setelan 'config/authsettingsv2' yang ada dan simpan ke file authsettings.json lokal.

az rest --method GET --url '/subscriptions/{SUBSCRIPTION_ID}/resourceGroups/{RESOURCE_GROUP}/providers/Microsoft.Web/sites/{WEBAPP_NAME}/config/authsettingsv2/list?api-version=2020-06-01' > authsettings.json

Buka file authsettings.json menggunakan editor teks pilihan Anda.
Temukan bagian login dari identityProviders>azureActiveDirectory.

Tambahkan setelan loginParameters berikut: "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"
        ]
      }
    }
  }
},

Simpan perubahan Anda ke file authsettings.json dan unggah pengaturan lokal ke aplikasi web Anda:

az rest --method PUT --url '/subscriptions/{SUBSCRIPTION_ID}/resourceGroups/{RESOURCE_GROUP}/providers/Microsoft.Web/sites/{WEBAPP_NAME}/config/authsettingsv2?api-version=2020-06-01' --body @./authsettings.json

Memanggil Microsoft Graph dari Node.js

Aplikasi web Anda sekarang memiliki izin yang diperlukan. Ini juga menambahkan ID klien Microsoft Graph ke parameter login.

Instal paket pustaka klien

Instal paket @azure/identity dan @microsoft/microsoft-graph-client dalam proyek Anda dengan npm.

npm install @microsoft/microsoft-graph-client

Mengonfigurasi informasi autentikasi

Buat objek untuk menahan pengaturan autentikasi:

// 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
        },
    },
}

Memanggil Microsoft Graph atas nama pengguna

Kode berikut menunjukkan cara memanggil pengontrol Microsoft Graph sebagai aplikasi dan mendapatkan beberapa informasi pengguna.

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

Kode sebelumnya bergantung pada fungsi getAuthenticatedClient berikut untuk mengembalikan klien 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;
}

Membersihkan sumber daya

Jika Anda menyelesaikan semua langkah dalam tutorial multipart ini, Anda membuat App Service, paket hosting App Service, dan akun penyimpanan dalam grup sumber daya. Anda juga membuat pendaftaran aplikasi di Microsoft Entra ID. Jika Anda memilih konfigurasi eksternal, Anda mungkin telah membuat penyewa (tenant) eksternal baru. Saat tidak lagi diperlukan, hapus sumber daya dan pendaftaran aplikasi ini agar Anda tidak terus dikenakan biaya.

Dalam tutorial ini, Anda akan mempelajari cara:

Hapus sumber daya Azure yang dibuat saat mengikuti tutorial.

Hapus grup sumber daya

Di portal Microsoft Azure, dari menu portal Microsoft Azure, pilih Grup sumber daya.
Pilih grup sumber daya yang berisi App Service dan rencana App Service Anda.
Pilih Hapus grup sumber daya untuk menghapus grup sumber daya dan semua sumber daya.

Tindakan ini mungkin memakan waktu beberapa menit.

Menghapus pendaftaran aplikasi

Di Microsoft Entra admin center, pilih App registrations. Kemudian pilih aplikasi yang Anda buat.
Di ikhtisar pendaftaran aplikasi, pilih Hapus.

Menghapus penyewa eksternal

Jika Anda membuat penyewa eksternal baru, Anda dapat menghapusnya.

Di pusat admin Microsoft Entra, telusuri Entra ID>Gambaran Umum>Kelola penyewa.
Pilih penyewa yang ingin Anda hapus, lalu pilih Hapus.

Anda mungkin perlu menyelesaikan tindakan yang diperlukan sebelum dapat menghapus penyewa. Misalnya, Anda mungkin perlu menghapus semua alur pengguna dan pendaftaran aplikasi di penyewa.
Jika Anda siap untuk menghapus penyewa, pilih Hapus.

Langkah berikutnya

Dalam tutorial ini, Anda mempelajari cara:

Memberikan izin yang didelegasikan ke aplikasi web.
Panggil Microsoft Graph dari aplikasi web untuk pengguna yang masuk.

layanan App mengakses Microsoft Graph sebagai aplikasi

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-04-24