Tutorial: Autentikasi alur dari App Service melalui API back-end ke Microsoft Graph

Pelajari cara membuat dan mengonfigurasi layanan Aplikasi backend untuk menerima kredensial pengguna aplikasi frontend, lalu menukar kredensial tersebut dengan layanan Azure hilir. Ini memungkinkan pengguna untuk masuk ke layanan App frontend, meneruskan kredensial mereka ke layanan App backend, lalu mengakses layanan Azure dengan identitas yang sama.

Dalam tutorial ini, Anda akan belajar cara:

Mengonfigurasi aplikasi autentikasi backend untuk menyediakan token yang terlingkup untuk layanan Azure hilir
Gunakan kode JavaScript untuk menukar token akses pengguna yang masuk dengan token baru untuk layanan hilir.
Gunakan kode JavaScript untuk mengakses layanan hilir.

Prasyarat

Selesaikan tutorial sebelumnya, Akses Microsoft Graph dari aplikasi JavaScript aman sebagai pengguna, sebelum memulai tutorial ini tetapi jangan hapus sumber daya di akhir tutorial. Tutorial ini mengasumsikan Anda memiliki dua layanan Aplikasi dan aplikasi autentikasi yang sesuai.

Tutorial sebelumnya menggunakan Azure Cloud Shell sebagai shell untuk Azure CLI. Tutorial ini melanjutkan penggunaan tersebut.

Arsitektur

Tutorial menunjukkan cara meneruskan kredensial pengguna yang disediakan oleh aplikasi frontend ke aplikasi backend lalu ke layanan Azure. Dalam tutorial ini, layanan hilir adalah Microsoft Graph. Kredensial pengguna digunakan untuk mendapatkan profil mereka dari Microsoft Graph.

Gambar arsitektur App Service yang terhubung ke App Service yang terhubung ke Microsoft Graph atas nama pengguna yang masuk.

Alur autentikasi bagi pengguna untuk mendapatkan informasi Microsoft Graph dalam arsitektur ini:

Tutorial sebelumnya tercakup:

Masukkan pengguna ke layanan aplikasi frontend yang dikonfigurasi untuk menggunakan Active Directory sebagai penyedia identitas.
Layanan App frontend meneruskan token pengguna ke layanan App backend.
Aplikasi backend diamankan untuk memungkinkan frontend membuat permintaan API. Token akses pengguna memiliki audiens yang ditujukan untuk API backend dan cakupan user_impersonation.
Pendaftaran aplikasi backend sudah memiliki Microsoft Graph dengan lingkup User.Read. Ini ditambahkan secara default ke semua pendaftaran aplikasi.
Di akhir tutorial sebelumnya, profil palsu dikembalikan ke aplikasi frontend karena Graph tidak terhubung.

Tutorial ini memperluas arsitektur:

Berikan persetujuan admin untuk melewati layar persetujuan pengguna untuk aplikasi back-end.
Ubah kode aplikasi untuk mengonversi token akses yang dikirim dari aplikasi front-end ke token akses dengan izin yang diperlukan untuk Microsoft Graph.
Sediakan kode untuk aplikasi backend yang menukar token dengan token baru yang memiliki lingkup layanan Azure seperti Microsoft Graph.
Berikan kode agar aplikasi backend menggunakan token baru untuk mengakses layanan hilir sebagai pengguna autentikasi saat ini.
Sebarkan ulang aplikasi backend dengan az webapp up.
Di akhir tutorial ini, profil nyata dikembalikan ke aplikasi frontend karena Graph terhubung.

Tutorial ini tidak:

Ubah aplikasi frontend dari tutorial sebelumnya.
Ubah izin cakupan aplikasi autentikasi backend karena User.Read ditambahkan secara default ke semua aplikasi autentikasi.

Dalam tutorial sebelumnya, ketika pengguna masuk ke aplikasi frontend, pop-up ditampilkan meminta persetujuan pengguna.

Dalam tutorial ini, untuk membaca profil pengguna dari Microsoft Graph, aplikasi back-end perlu menukar token akses pengguna yang masuk dengan token akses baru dengan izin yang diperlukan untuk Microsoft Graph. Karena pengguna tidak terhubung langsung ke aplikasi backend, mereka tidak dapat mengakses layar persetujuan secara interaktif. Anda harus mengatasinya dengan mengonfigurasi pendaftaran aplikasi back-end di Microsoft Entra ID untuk memberikan persetujuan admin. Ini adalah perubahan pengaturan yang biasanya dilakukan oleh administrator Direktori Aktif.

Buka portal Microsoft Azure dan cari penelitian Anda untuk App Service backend.
Temukan bagian Pengaturan -> Autentikasi .
Pilih penyedia identitas untuk pergi ke aplikasi autentikasi.
Di aplikasi autentikasi, pilih Kelola -> Izin API.
Pilih Berikan persetujuan admin untuk Direktori Default.
Di jendela pop-up, pilih Ya untuk mengonfirmasi persetujuan.
Verifikasi kolom Status menunjukkan Diberikan untuk Direktori Bawaan. Dengan pengaturan ini, aplikasi back-end tidak lagi diperlukan untuk menampilkan layar persetujuan kepada pengguna yang masuk dan dapat langsung meminta token akses. Pengguna yang masuk memiliki akses ke User.Read pengaturan cakupan karena itu adalah cakupan default tempat pendaftaran aplikasi dibuat.

2. Pasang paket npm

Dalam tutorial sebelumnya, aplikasi backend tidak memerlukan paket npm untuk autentikasi karena satu-satunya autentikasi disediakan dengan mengonfigurasi idP di portal Microsoft Azure. Dalam tutorial ini, token akses pengguna yang masuk untuk API back-end harus ditukar dengan token akses dengan cakupan Microsoft Graph. Pertukaran ini selesai menggunakan dua pustaka karena pertukaran ini tidak lagi menggunakan autentikasi App Service, tetapi langsung menggunakan Microsoft Entra ID dan MSAL.js.

@azure/MSAL-node - pertukaran token
@microsoft/microsoft-graph-client - menyambungkan ke Microsoft Graph

Buka Azure Cloud Shell dan beralih ke direktori aplikasi backend dalam direktori sampel.
```
cd js-e2e-web-app-easy-auth-app-to-app/backend
```
Instal paket npm Azure MSAL:
```
npm install @azure/msal-node
```

Instal paket npm Microsoft Graph:

npm install @microsoft/microsoft-graph-client

3. Tambahkan kode untuk bertukar token saat ini untuk token Microsoft Graph

Kode sumber untuk menyelesaikan langkah ini disediakan untuk Anda. Gunakan langkah-langkah berikut untuk menyertakannya.

Buka file ./src/server.js.
Hapus tanda komentar pada dependensi berikut di bagian atas file.
```
import { getGraphProfile } from './with-graph/graph';
```
Dalam file yang sama, hapus tanda komentar variabel graphProfile.
```
let graphProfile={};
```

Dalam file yang sama, hapus komentar baris berikut getGraphProfile dalam get-profile rute untuk mendapatkan profil dari 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)}`);

Simpan perubahan: Ctrl + s.

Sebarkan ulang aplikasi backend:

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

4. Periksa kode backend untuk bertukar token API backend untuk token Microsoft Graph

Untuk mengubah token audiens API backend untuk token Microsoft Graph, aplikasi backend perlu menemukan ID Penyewa dan menggunakannya sebagai bagian dari objek konfigurasi MSAL.js. Karena aplikasi backend dikonfigurasi dengan Microsoft sebagai penyedia identitas, ID Penyewa dan beberapa nilai lain yang diperlukan sudah ada di pengaturan App Service aplikasi.

Kode berikut sudah disediakan untuk Anda di aplikasi sampel. Anda perlu memahami mengapa itu ada di sana dan cara kerjanya sehingga Anda dapat menerapkan pekerjaan ini ke aplikasi lain yang Anda bangun yang membutuhkan fungsionalitas yang sama ini.

Memeriksa kode untuk mendapatkan ID Penyewa

Buka file ./backend/src/with-graph/auth.js.

Tinjau fungsi getTenantId().

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

Fungsi ini mendapatkan ID penyewa saat ini dari WEBSITE_AUTH_OPENID_ISSUER variabel lingkungan. ID diurai dari variabel menggunakan ekspresi reguler.

Memeriksa kode untuk mendapatkan token Graph menggunakan MSAL.js

Masih dalam berkas ./backend/src/with-graph/auth.js, tinjau fungsi getGraphToken().

Buat objek konfigurasi MSAL.js, gunakan konfigurasi MSAL untuk membuat clientCredentialAuthority. Konfigurasikan permintaan atas nama orang lain. Kemudian gunakan acquireTokenOnBehalfOf untuk menukar token akses API backend dengan token akses 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. Periksa kode backend untuk mengakses Microsoft Graph dengan token baru

Untuk mengakses Microsoft Graph sebagai pengguna yang masuk ke aplikasi frontend, perubahan tersebut meliputi:

Konfigurasi pendaftaran aplikasi Active Directory dengan izin API ke layanan downstream, Microsoft Graph, dengan cakupan yang diperlukan dari User.Read.
Berikan persetujuan admin untuk melewati layar persetujuan pengguna untuk aplikasi back-end.
Ubah kode aplikasi untuk mengonversi token akses yang dikirim dari aplikasi front-end ke token akses dengan izin yang diperlukan untuk layanan hilir, Microsoft Graph.

Sekarang setelah kode memiliki token yang benar untuk Microsoft Graph, gunakan untuk membuat klien ke Microsoft Graph lalu mendapatkan profil pengguna.

Buka ./backend/src/graph.js

Dalam fungsi getGraphProfile(), dapatkan token, lalu dari token tersebut dapatkan klien yang sudah diautentikasi, kemudian dapatkan profilnya.

// 
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. Uji perubahan Anda

Gunakan situs web frontend di browser. Anda mungkin perlu memperbarui token tersebut jika kedaluwarsa.
Pilih Get user's profile. Ini meneruskan autentikasi Anda di token pembawa ke backend.
Server merespons dengan profil nyata Microsoft Graph untuk akun Anda.

7. Bersihkan

Di langkah-langkah sebelumnya, Anda membuat sumber daya Azure dalam grup sumber daya.

Hapus grup sumber daya dengan menjalankan perintah berikut di Cloud Shell. Perintah ini mungkin perlu waktu beberapa saat untuk dijalankan.
```
az group delete --name myAuthResourceGroup
```
Gunakan ID Klien aplikasi autentikasi, yang sebelumnya Anda temukan dan catat untuk bagian Enable authentication and authorization aplikasi backend dan frontend.

Hapus pendaftaran aplikasi untuk aplikasi frontend dan backend.

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

Tanya jawab umum

Saya mendapat kesalahan `80049217`, apa artinya?

Kesalahan ini, CompactToken parsing failed with error code: 80049217, berarti layanan Aplikasi backend tidak berwenang untuk mengembalikan token Microsoft Graph. Kesalahan ini disebabkan karena pendaftaran aplikasi tidak memiliki User.Read izin.

Saya mendapat kesalahan `AADSTS65001`, apa artinya?

Kesalahan ini, 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, berarti aplikasi autentikasi backend belum dikonfigurasi untuk persetujuan Admin. Karena kesalahan muncul di log untuk aplikasi backend, aplikasi frontend tidak dapat memberi tahu pengguna mengapa mereka tidak melihat profil mereka di aplikasi frontend.

Bagaimana cara menyambungkan ke layanan Azure hilir yang berbeda sebagai pengguna?

Tutorial ini menunjukkan aplikasi API yang diautentikasi ke Microsoft Graph, namun, langkah-langkah umum yang sama dapat diterapkan untuk mengakses layanan Azure apa pun atas nama pengguna.

Tidak ada perubahan pada aplikasi frontend. Hanya perubahan pada pendaftaran aplikasi autentikasi dan kode sumber aplikasi backend.
Tukarkan token pengguna yang memiliki cakupan API backend untuk mendapatkan token bagi layanan hilir yang ingin Anda akses.
Gunakan token di SDK layanan hilir untuk membuat klien.
Gunakan klien hilir untuk mengakses fungsionalitas layanan.

Langkah selanjutnya

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2023-03-23