Mulai cepat: Menambahkan autentikasi aplikasi ke aplikasi web Anda yang berjalan di Azure App Service

Catatan

Mulai 1 Juni 2024, semua aplikasi App Service yang baru dibuat akan memiliki opsi untuk menghasilkan nama host default yang unik menggunakan konvensi <app-name>-<random-hash>.<region>.azurewebsites.netpenamaan . Nama aplikasi yang ada akan tetap tidak berubah.

Contoh: myapp-ds27dh7271aah175.westus-01.azurewebsites.net

Untuk detail lebih lanjut, lihat Nama Host Default Unik untuk Sumber Daya App Service.

Pelajari cara mengaktifkan autentikasi untuk aplikasi web yang berjalan di Azure App Service dan membatasi akses ke pengguna di organisasi Anda.

Dalam tutorial ini, Anda akan mempelajari cara:

• Mengonfigurasi autentikasi untuk aplikasi web.
• Batasi akses ke aplikasi web untuk pengguna di organisasi Anda dengan menggunakan Microsoft Entra sebagai penyedia identitas.

Autentikasi otomatis yang disediakan oleh App Service

App Service menyediakan dukungan autentikasi dan otorisasi bawaan, sehingga Anda dapat memasukkan pengguna tanpa kode di aplikasi web Anda. Menggunakan modul autentikasi/otorisasi App Service opsional menyederhanakan autentikasi dan otorisasi untuk aplikasi Anda. Saat Anda siap untuk autentikasi dan otorisasi kustom, Anda membangun arsitektur ini.

Autentikasi layanan aplikasi menyediakan:

• Aktifkan dan konfigurasikan dengan mudah melalui setelan portal Azure dan aplikasi.
• Tidak diperlukan SDK, bahasa tertentu, atau perubahan pada kode aplikasi
• Beberapa penyedia identitas didukung:
  • Microsoft Entra
  • Akun Microsoft
  • Facebook
  • Google
  • X

Jika modul autentikasi/otorisasi diaktifkan, setiap permintaan HTTP yang masuk akan melewatinya sebelum ditangani oleh kode aplikasi.​​ Untuk mempelajari selengkapnya, lihat Autentikasi dan otorisasi di Azure App Service.

1. Prasyarat

Jika Anda tidak memiliki Langganan Azure, buat Akun gratis Azure sebelum memulai.

2. Membuat dan menerbitkan aplikasi web di App Service

Untuk tutorial ini, Anda memerlukan aplikasi web yang disebarkan ke App Service. Anda dapat menggunakan aplikasi web yang sudah ada, atau Anda dapat mengikuti salah satu mulai cepat untuk membuat dan menerbitkan aplikasi web baru ke App Service:

• Inti ASP.NET
• Node.js
• Python
• Java

Baik Anda menggunakan aplikasi web yang sudah ada atau membuat yang baru, perhatikan hal-hal berikut:

• Nama aplikasi web.
• Grup sumber daya tempat aplikasi web disebarkan.

Anda memerlukan nama-nama berikut di sepanjang tutorial ini.

3. Mengonfigurasi autentikasi dan otorisasi

Setelah Anda memiliki aplikasi web yang berjalan di App Service, aktifkan autentikasi dan otorisasi. Anda menggunakan Microsoft Entra sebagai penyedia identitas. Untuk informasi selengkapnya, lihat Mengonfigurasi autentikasi Microsoft Entra untuk aplikasi App Service Anda.

Konfigurasi tenaga kerja

1. Pada menu portal Microsoft Azure, pilih Grup sumber daya, atau cari dan pilih Grup sumber daya dari halaman mana pun.

2. Di Grup sumber saya, temukan dan pilih grup sumber daya Anda. Di Gambaran umum, pilih halaman manajemen aplikasi Anda.

   

3. Di menu kiri aplikasi Anda, pilih Autentikasi, lalu pilih Tambahkan IdP.

4. Di halaman Tambahkan idP , pilih Microsoft sebagai Penyedia identitas untuk masuk ke Identitas Microsoft dan Microsoft Entra.

5. Untuk Jenis penyewa, pilih Konfigurasi tenaga kerja (penyewa saat ini) untuk karyawan dan tamu bisnis.

6. Untuk Jenis pendaftaran Aplikasi pendaftaran>aplikasi, pilih Buat pendaftaran aplikasi baru untuk membuat pendaftaran aplikasi baru di Microsoft Entra.

7. Masukkan Nama tampilan aplikasi Anda. Pengguna aplikasi Anda mungkin melihat nama tampilan saat mereka menggunakan aplikasi, misalnya selama masuk.

8. Untuk Pendaftaran>aplikasi Jenis akun yang didukung, pilih Penyewa tunggal penyewa saat ini sehingga hanya pengguna di organisasi Anda yang dapat masuk ke aplikasi web.

9. Di bagian Pemeriksaan tambahan, pilih:

   • Izinkan permintaan hanya dari aplikasi ini sendiri untuk persyaratan aplikasi Klien
   • Mengizinkan permintaan dari identitas apa pun untuk persyaratan Identitas
   • Izinkan permintaan hanya dari penyewa penerbit untuk persyaratan Penyewa

10. Di bagian Pengaturan autentikasi App Service, atur:

    • Memerlukan autentikasi untuk Autentikasi
    • Pengalihan HTTP 302 Ditemukan: direkomendasikan untuk situs web untuk permintaan yang tidak diautentikasi
    • Kotak penyimpanan token

11. Di bagian bawah halaman Tambahkan penyedia identitas, pilih Tambahkan untuk mengaktifkan autentikasi untuk aplikasi web Anda.

    

    Anda sekarang memiliki aplikasi yang diamankan oleh autentikasi dan otorisasi App Service.

    Catatan

    Untuk mengizinkan akun dari penyewa lain, ubah 'URL Penerbit' menjadi ‘https://login.microsoftonline.com/common/v2.0’' dengan mengedit 'Penyedia Identitas' dari bilah 'Autentikasi'.

Konfigurasi eksternal

1. Pada menu portal Microsoft Azure, pilih Grup sumber daya, atau cari dan pilih Grup sumber daya dari halaman mana pun.

2. Di Grup sumber saya, temukan dan pilih grup sumber daya Anda. Di Gambaran umum, pilih halaman manajemen aplikasi Anda.

   

3. Di menu kiri aplikasi Anda, pilih Autentikasi, lalu pilih Tambahkan IdP.

4. Di halaman Tambahkan idP , pilih Microsoft sebagai Penyedia identitas untuk masuk ke Identitas Microsoft dan Microsoft Entra.

5. Untuk Jenis penyewa, pilih Konfigurasi eksternal untuk pengguna eksternal.

6. Pilih Buat pendaftaran aplikasi baru untuk membuat pendaftaran aplikasi baru.

7. Pilih penyewa yang sudah ada untuk digunakan dari menu drop-down, atau pilih Buat baru untuk membuat penyewa eksternal baru.

   

8. (Opsional) Di halaman Buat penyewa , tambahkan Nama Penyewa* dan Nama Domain. Pilih Lokasi dan pilih Tinjau dan buat lalu Buat.

   

9. Pilih Konfigurasikan untuk mengonfigurasi autentikasi eksternal.

10. Browser membuka Konfigurasi autentikasi pelanggan. Di Siapkan masuk, pilih Buat baru untuk membuat pengalaman masuk untuk pengguna eksternal Anda.

11. Masukkan Nama untuk alur pengguna.

12. Untuk mulai cepat ini, pilih Email dan kata sandi yang memungkinkan pengguna baru untuk mendaftar dan masuk menggunakan alamat email sebagai nama masuk dan kata sandi sebagai kredensial faktor pertama mereka.

13. Pilih Buat untuk membuat alur pengguna.

    

14. Pilih Berikutnya untuk menyesuaikan branding.

15. Tambahkan logo perusahaan Anda, pilih warna latar belakang, dan pilih tata letak masuk.

    

16. Pilih Selanjutnya. Jika penyewa yang Anda pilih sudah memiliki konfigurasi branding, Anda harus mengonfirmasi bahwa Anda ingin mengambil alihnya.

17. Pilih Konfigurasikan di tab Tinjau untuk mengonfirmasi pembaruan penyewa eksternal.

18. Browser kembali ke halaman Tambahkan idP .

19. Di bagian Pemeriksaan tambahan, pilih:

    • Izinkan permintaan hanya dari aplikasi ini sendiri untuk persyaratan aplikasi Klien
    • Mengizinkan permintaan dari identitas apa pun untuk persyaratan Identitas
    • Izinkan permintaan hanya dari penyewa penerbit untuk persyaratan Penyewa

20. Di bagian Pengaturan autentikasi App Service, atur:

    • Memerlukan autentikasi untuk Autentikasi
    • Pengalihan HTTP 302 Ditemukan: direkomendasikan untuk situs web untuk permintaan yang tidak diautentikasi
    • Kotak penyimpanan token

21. Di bagian bawah halaman Tambahkan penyedia identitas, pilih Tambahkan untuk mengaktifkan autentikasi untuk aplikasi web Anda.

    

4. Memverifikasi akses terbatas ke aplikasi web

Saat Anda mengaktifkan modul autentikasi/otorisasi App Service di bagian sebelumnya, pendaftaran aplikasi dibuat di tenaga kerja atau penyewa eksternal Anda. Pendaftaran aplikasi memiliki nama tampilan yang Anda buat di langkah sebelumnya.

1. Untuk memeriksa pengaturan, masuk ke pusat admin Microsoft Entra sebagai setidaknya Pengembang Aplikasi. Jika Anda memilih konfigurasi eksternal, gunakan ikon Pengaturan di menu atas untuk beralih ke penyewa eksternal dengan aplikasi web Anda dari menu langganan Direktori + . Ketika Anda berada di penyewa yang benar:

2. Telusuri ke Aplikasi> Identitas>Pendaftaran aplikasi dan pilih Aplikasi> Pendaftaran aplikasi dari menu.

3. Pilih pendaftaran aplikasi yang dibuat.

4. Dalam gambaran umum, verifikasi bahwa Tipe akun yang didukung diatur ke Hanya organisasi saya.

5. Untuk memverifikasi bahwa akses ke aplikasi Anda terbatas pada pengguna di organisasi Anda, buka Gambaran Umum aplikasi web Anda dan pilih tautan Domain default. Atau, mulai browser dalam mode penyamaran atau privat dan buka https://<app-name>.azurewebsites.net (lihat catatan di atas).

   

6. Anda akan diarahkan ke halaman masuk yang aman, memverifikasi bahwa pengguna yang tidak diautentikasi tidak diizinkan mengakses situs.

7. Masuk sebagai pengguna di organisasi Anda untuk mendapatkan akses ke situs. Anda juga dapat memulai browser baru dan mencoba masuk dengan menggunakan akun pribadi untuk memverifikasi bahwa pengguna di luar organisasi tidak memiliki akses.

5. Menghapus 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 ID Microsoft Entra. Jika Anda memilih konfigurasi eksternal, Anda mungkin telah membuat penyewa 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 Azure, pilih Grup sumber daya dari menu portal dan pilih grup sumber daya yang berisi paket App Service dan App Service Anda.

Pilih Hapus grup sumber daya untuk menghapus grup sumber daya dan semua sumber daya.

Perintah ini mungkin memerlukan waktu beberapa menit untuk dijalankan.

Menghapus pendaftaran aplikasi

Di pusat admin Microsoft Entra, pilih Aplikasi> Pendaftaran aplikasi. 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 Gambaran Umum>Identitas>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:

• Mengonfigurasi autentikasi untuk aplikasi web.
• Batasi akses ke aplikasi web untuk pengguna di organisasi Anda.

App Service mengakses penyimpanan