Bagikan melalui

Skenario: Aplikasi Asli memanggil API Web

  • Artikel

Berlaku untuk: Windows Server 2022, Windows Server 2019, AD FS 2019 dan yang lebih baru

Pelajari cara membuat pengguna masuk aplikasi asli yang diautentikasi oleh LAYANAN Federasi Direktori Aktif 2019 dan memperoleh token menggunakan pustaka MSAL untuk memanggil API web.

Sebelum membaca artikel ini, Anda harus terbiasa dengan konsep LAYANAN Federasi Direktori Aktif dan alur pemberian kode otorisasi

Gambaran Umum

Overview

Dalam alur ini Anda menambahkan autentikasi ke Aplikasi Asli (klien publik), yang karenanya dapat memasukkan pengguna dan memanggil API Web. Untuk memanggil API Web dari Aplikasi Asli yang memasukkan pengguna, Anda dapat menggunakan metode akuisisi token AcquireTokenInteractive MSAL. Untuk mengaktifkan interaksi ini, MSAL memanfaatkan browser web.

Untuk lebih memahami cara mengonfigurasi Aplikasi Native di Layanan Federasi Direktori Aktif untuk memperoleh token akses secara interaktif, mari kita gunakan sampel yang tersedia di sini dan menelusuri langkah-langkah pendaftaran aplikasi dan konfigurasi kode.

Prasyarat

  • Alat klien GitHub
  • Layanan Federasi Direktori Aktif 2019 atau yang lebih baru dikonfigurasi dan dijalankan
  • Visual Studio 2013 atau yang lebih baru

Pendaftaran Aplikasi di Layanan Federasi Direktori Aktif

Bagian ini menunjukkan cara mendaftarkan Aplikasi Asli sebagai klien publik dan API Web sebagai Pihak Yang Mengandalkan (RP) di Layanan Federasi Direktori Aktif

  1. Di Manajemen Layanan Federasi Direktori Aktif, klik kanan pada Grup Aplikasi dan pilih Tambahkan Grup Aplikasi.

  2. Pada Wizard Grup Aplikasi, untuk Nama masukkan NativeAppToWebApi dan di bawah Aplikasi Client-Server pilih aplikasi Asli yang mengakses templat API Web. Klik Berikutnya.

    Screenshot of the Welcome page of the Add Application Group Wizard showing the Native application accessing a Web API template highlighted.

  3. Salin nilai Pengidentifikasi Klien. Ini akan digunakan nanti sebagai nilai untuk ClientId dalam file App.config aplikasi. Masukkan yang berikut ini untuk URI Pengalihan:https://ToDoListClient. Klik Tambahkan. Klik Berikutnya.

    Screenshot of the Native application page of the Add Application Group Wizard showing the redirect U R I.

  4. Pada layar KonfigurasiKAN API Web, masukkan Pengidentifikasi:https://localhost:44321/. Klik Tambahkan. Klik Berikutnya. Nilai ini akan digunakan nanti dalam file App.config dan Web.config aplikasi.

    Screenshot of the Configure Web API page of the Add Application Group Wizard showing the correct identifier.

  5. Pada layar Terapkan Kebijakan Kontrol Akses, pilih Izinkan semua orang dan klik Berikutnya.

    Screenshot of the Choose Access Control Policy page of the Add Application Group Wizard showing the Permit everyone option highlighted.

  6. Pada layar Konfigurasikan Izin Aplikasi, pastikan openid dipilih dan klik Berikutnya.

    Screenshot of the Configure Application Permissions page of the Add Application Group Wizard showing open I D selected.

  7. Pada layar Ringkasan, klik Berikutnya.

  8. Pada layar Selesai, klik Tutup.

  9. Di Manajemen Layanan Federasi Direktori Aktif, klik Grup Aplikasi dan pilih Grup aplikasi NativeAppToWebApi . Klik kanan dan pilih Properti.

    Screenshot of the A D F S Management dialog box showing the NativeAppToWebApi group highlighted and the Properties option in the dropdown list.

  10. Pada layar properti NativeAppToWebApi, pilih NativeAppToWebApi – Web API di bawah API Web dan klik Edit...

    Screenshot of the NativeAppToWebApi Properties dialog box showing the NativeAppToWebApi - Web A P I application highlighted.

  11. Pada layar NativeAppToWebApi – Properti API Web, pilih tab Aturan Transformasi Penerbitan dan klik Tambahkan Aturan...

    Screenshot of the NativeAppToWebApi - Web A P I Properties dialog box showing the Issuance Transform Rules tab.

  12. Pada Wizard Tambahkan Aturan Klaim Transformasi, pilih Ubah Klaim Masuk dari templat aturan Klaim: dropdown dan klik Berikutnya.

    Screenshot of the Select Rule Template page of the Add Transform Claim Rule Wizard showing the Transform an Incoming Claim option selected.

  13. Masukkan NameID di Nama aturan klaim: bidang. Pilih Nama untuk Jenis klaim masuk:, ID Nama untuk Jenis klaim keluar: dan Nama Umum untuk format ID nama keluar:. klik Selesai.

    Screenshot of the Configure Rule page of the Add Transform Claim Rule Wizard showing the configuration explained above.

  14. Klik OK di layar NativeAppToWebApi – Web API Properties lalu layar NativeAppToWebApi Properties.

Konfigurasi Kode

Bagian ini menunjukkan cara mengonfigurasi Aplikasi Asli untuk masuk ke pengguna dan mengambil token untuk memanggil API Web

  1. Unduh sampel dari sini

  2. Buka sampel menggunakan Visual Studio

  3. Buka file App.config. Ubah yang berikut ini:

    • ida:Authority - enter https://[your AD FS hostname]/adfs

    • ida:ClientId - masukkan nilai Pengidentifikasi Klien dari #3 di bagian Pendaftaran Aplikasi di Layanan Federasi Direktori Aktif di atas.

    • ida:RedirectUri - masukkan nilai URI Pengalihan dari #3 di Bagian Pendaftaran Aplikasi di Layanan Federasi Direktori Aktif di atas.

    • todo:TodoListResourceId – masukkan nilai Pengidentifikasi dari #4 di Pendaftaran Aplikasi di bagian Layanan Federasi Direktori Aktif di atas

    • ida: todo:TodoListBaseAddress - masukkan nilai Pengidentifikasi dari #4 di bagian Pendaftaran Aplikasi di Layanan Federasi Direktori Aktif di atas.

      Screenshot of the App config file showing the modified values.

  4. Buka file Web.config. Ubah yang berikut ini:

    • ida:Audience - masukkan nilai Pengidentifikasi dari #4 di bagian Pendaftaran Aplikasi di Layanan Federasi Direktori Aktif di atas

    • ida: AdfsMetadataEndpoint - enter https://[your AD FS hostname]/federationmetadata/2007-06/federationmetadata.xml

      Screenshot of the web config file showing the modified values.

Uji sampel

Bagian ini menunjukkan cara menguji sampel yang dikonfigurasi di atas.

  1. Setelah perubahan kode dibuat, bangun kembali solusi

  2. Di Visual Studio, klik kanan pada solusi dan pilih Atur Proyek StartUp...

    Screenshot of the list that appears when you right-click the solution with the Set Start Up Projects option highlighted.

  3. Pada halaman Properti pastikan Tindakan diatur ke Mulai untuk setiap Proyek

    Screenshot of the Solution Property Pages dialog box showing the Multiple startup project option selected and all of the projects' actions set to Start.

  4. Di bagian atas Visual Studio, klik panah hijau.

    Screenshot of the Visual Studio UI with the Start option called out.

  5. Pada layar Utama Aplikasi Asli, klik Masuk.

    Screenshot of the To Do List Client dialog box.

Jika Anda tidak melihat layar aplikasi asli, cari dan hapus *msalcache.bin file dari folder tempat repositori proyek disimpan di sistem Anda.

  1. Anda akan diarahkan kembali ke halaman masuk Layanan Federasi Direktori Aktif. Lanjutkan dan masuk.

    Screenshot of the Sign In page.

  2. Setelah masuk, masukkan teks Build Native App to Web Api di item Buat yang Harus Dilakukan. Klik Tambahkan item. Ini akan memanggil Layanan Daftar Yang Harus Dilakukan (API Web) dan menambahkan item di cache.

    Screenshot of the To Do List Client dialog box with the new to do item populating the To Do Items section.

Langkah berikutnya

Alur Koneksi/OAuth OpenID Layanan Federasi Direktori Aktif dan Skenario Aplikasi