Panduan Cepat: Login pengguna di aplikasi web contoh

Berlaku untuk: Penyewa tenaga kerja Penyewa eksternal (pelajari selengkapnya)

Dalam panduan memulai cepat ini, Anda menggunakan contoh aplikasi web untuk menunjukkan cara mendaftar pengguna dan memanggil Microsoft Graph API di penyewa organisasi Anda. Aplikasi sampel menggunakan Pustaka Autentikasi Microsoft untuk menangani autentikasi.

Sebelum memulai, gunakan pemilih Pilih jenis penyewa di bagian atas halaman ini untuk menentukan jenis penyewa. Microsoft Entra ID menyediakan dua konfigurasi penyewa, tenaga kerja dan eksternal. Konfigurasi penyewa untuk tenaga kerja ditujukan bagi karyawan, aplikasi internal, dan sumber daya organisasi lainnya. Penyewa eksternal adalah untuk aplikasi yang berinteraksi dengan pelanggan Anda.

Prasyarat

• Akun Azure dengan langganan aktif. Jika Anda belum memilikinya, Buat akun secara gratis.
• Akun Azure ini harus memiliki izin untuk mengelola aplikasi. Salah satu peran Microsoft Entra berikut ini menyertakan izin yang diperlukan:
  • Administrator Aplikasi
  • Pengembang Aplikasi
• Penyewa dari kalangan tenaga kerja. Anda dapat menggunakan Direktori Default Anda atau menyiapkan tenant baru.
• Visual Studio Code atau editor kode lainnya.

Simpul

• Daftarkan aplikasi baru di pusat admin Microsoft Entra, dikonfigurasi hanya untuk Akun di direktori organisasi ini. Lihat Mendaftarkan aplikasi untuk detail selengkapnya. Rekam nilai berikut dari halaman Gambaran Umum aplikasi untuk digunakan nanti:
  • ID Aplikasi (klien)
  • ID Direktori (Penyewa)
• Tambahkan URI pengalihan berikut menggunakan konfigurasi platform Web . Lihat Cara menambahkan URI pengalihan di aplikasi Anda untuk detail selengkapnya.
  • URI Pengalihan: http://localhost:3000/auth/redirect
  • URL keluar Front-channel: https://localhost:5001/signout-callback-oidc
• Tambahkan rahasia klien ke pendaftaran aplikasi Anda. Jangan gunakan rahasia klien di aplikasi produksi. Gunakan sertifikat atau kredensial federasi sebagai gantinya. Untuk informasi selengkapnya, lihat menambahkan kredensial ke aplikasi Anda.
• Node.js

ASP.NET Core

• Daftarkan aplikasi baru di pusat admin Microsoft Entra, dikonfigurasi hanya untuk Akun di direktori organisasi ini. Lihat Mendaftarkan aplikasi untuk detail selengkapnya. Rekam nilai berikut dari halaman Gambaran Umum aplikasi untuk digunakan nanti:
  • ID Aplikasi (klien)
  • ID Direktori (Penyewa)
• Tambahkan URI pengalihan berikut menggunakan konfigurasi platform Web . Lihat Cara menambahkan URI pengalihan di aplikasi Anda untuk detail selengkapnya.
  • URI Pengalihan: https://localhost:5001/signin-oidc
  • URL keluar Front-channel: https://localhost:5001/signout-callback-oidc
• Tambahkan sertifikat yang ditandatangani sendiri ke pendaftaran aplikasi Anda. Jangan gunakan sertifikat yang ditandatangani sendiri di aplikasi produksi. Gunakan sertifikat dari otoritas sertifikat tepercaya atau kredensial federasi sebagai gantinya. Untuk informasi selengkapnya, lihat menambahkan kredensial ke aplikasi Anda. Buat sertifikat menggunakan perintah berikut:

  dotnet dev-certs https -ep ./certificate.crt --trust
  

• Persyaratan minimum adalah .NET 8.0 SDK

Python Flask

• Daftarkan aplikasi baru di pusat admin Microsoft Entra, dikonfigurasi hanya untuk Akun di direktori organisasi ini. Lihat Mendaftarkan aplikasi untuk detail selengkapnya. Rekam nilai berikut dari halaman Gambaran Umum aplikasi untuk digunakan nanti:
  • ID Aplikasi (klien)
  • ID Direktori (Penyewa)
• Tambahkan URI pengalihan berikut menggunakan konfigurasi platform Web . Lihat Cara menambahkan URI pengalihan di aplikasi Anda untuk detail selengkapnya.
  • URI Pengalihan: http://localhost:5000/getAToken
• Python 3 +
• Tambahkan rahasia klien ke pendaftaran aplikasi Anda. Jangan gunakan rahasia klien di aplikasi produksi. Gunakan sertifikat atau kredensial federasi sebagai gantinya. Untuk informasi selengkapnya, lihat menambahkan kredensial ke aplikasi Anda.

Mengkloning atau mengunduh sampel aplikasi web

Untuk mendapatkan aplikasi sampel, Anda dapat mengkloningnya dari GitHub atau mengunduhnya sebagai file .zip.

Simpul

• Unduh file .zip, lalu ekstrak ke path file dengan panjang nama kurang dari 260 karakter atau kloning repositori:

• Untuk mengkloning sampel, buka prompt perintah dan navigasi ke tempat Anda ingin membuat proyek, dan masukkan perintah berikut:

  git clone https://github.com/Azure-Samples/ms-identity-node.git
  

ASP.NET Core

• Unduh file .zip, lalu ekstrak ke path file dengan panjang nama kurang dari 260 karakter atau kloning repositori:

• Untuk mengkloning sampel, buka prompt perintah dan navigasi ke tempat Anda ingin membuat proyek, dan masukkan perintah berikut:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet.git
  

Python Flask

• Unduh sampel kode Python kemudian ekstrak ke jalur file di mana panjang nama kurang dari 260 karakter atau kloning repositori:

• Untuk mengkloning sampel, buka prompt perintah dan navigasi ke tempat Anda ingin membuat proyek, dan masukkan perintah berikut:

git clone https://github.com/Azure-Samples/ms-identity-docs-code-python/

Mengonfigurasi contoh aplikasi web

Agar Anda dapat membuat pengguna masuk dengan aplikasi sampel, Anda perlu memperbaruinya dengan detail aplikasi dan penyewa Anda.

Simpul

Di folder ms-identity-node, buka file App/.env, lalu ganti placeholder berikutnya:

Variabel	Deskripsi	Contoh
Enter_the_Cloud_Instance_Id_Here	Instans cloud Azure tempat aplikasi Anda terdaftar	https://login.microsoftonline.com/ (sertakan garis miring setelahnya)
Enter_the_Tenant_Info_here	ID Penyewa atau Domain utama	contoso.microsoft.com atau aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here	ID klien aplikasi yang Anda daftarkan	00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here	Rahasia klien aplikasi yang Anda daftarkan	A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here	Instans cloud Microsoft Graph API yang dipanggil aplikasi Anda	https://graph.microsoft.com/ (sertakan garis miring setelahnya)
Enter_the_Express_Session_Secret_Here	String karakter acak yang digunakan untuk menandatangani cookie sesi Ekspres	A1b-C2d_E3f.H4...

Setelah Anda membuat perubahan, file Anda akan terlihat mirip dengan cuplikan berikut:

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

ASP.NET Core

1. Di IDE Anda, buka folder proyek, ms-identity-docs-code-dotnet\web-app-aspnet, yang berisi sampel.

2. Buka appsettings.json dan ganti konten file dengan cuplikan berikut;

   {
   "AzureAd": {
     "Instance": "https://login.microsoftonline.com/",
     "TenantId": "Enter the tenant ID obtained from the Microsoft Entra admin center",
     "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
     "ClientCredentials": [
       {
         "SourceType": "StoreWithThumbprint",
         "CertificateStorePath": "CurrentUser/My",
         "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
       }   
     ],
     "CallbackPath": "/signin-oidc"
   },
     "DownstreamApis": {
       "MicrosoftGraph" :{
         "BaseUrl": "https://graph.microsoft.com/v1.0/",
         "RelativePath": "me",
         "Scopes": [ 
           "user.read" 
         ]
      }
     },
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*"
   }
   

   • TenantId - Pengidentifikasi penyewa tempat aplikasi terdaftar. Ganti teks dalam tanda kutip dengan Directory (tenant) ID yang direkam sebelumnya dari halaman gambaran umum aplikasi terdaftar.
   • ClientId - Pengidentifikasi aplikasi, juga disebut sebagai klien. Ganti teks dalam tanda kutip dengan nilai Application (client) ID yang direkam sebelumnya dari halaman gambaran umum aplikasi terdaftar.
   • ClientCertificates - Sertifikat yang ditandatangani sendiri digunakan untuk autentikasi dalam aplikasi. Gantikan teks CertificateThumbprint dengan thumbprint sertifikat yang sebelumnya direkam.

Python Flask

1. Buka aplikasi yang Anda unduh di IDE dan navigasikan ke folder akar aplikasi sampel.

   cd flask-web-app
   

2. Buat file .env di folder akar proyek menggunakan .env.sample.entra-id sebagai panduan.

   # The following variables are required for the app to run.
   CLIENT_ID=<Enter_your_client_id>
   CLIENT_SECRET=<Enter_your_client_secret>
   AUTHORITY=<Enter_your_authority_url>
   

   • Atur nilai CLIENT_ID ke ID Aplikasi (klien) untuk aplikasi terdaftar, tersedia di halaman gambaran umum.
   • Atur nilai CLIENT_SECRET ke rahasia klien yang Anda buat di Sertifikat & Rahasia untuk aplikasi terdaftar.
   • Atur nilai AUTHORITY ke https://login.microsoftonline.com/<TENANT_GUID>. ID Directory (penyewa) tersedia di halaman gambaran umum pendaftaran aplikasi.

   Variabel lingkungan dirujuk dalam app_config.py, dan disimpan dalam file .env terpisah untuk menjaganya tetap berada di luar kontrol sumber. File .gitignore yang disediakan mencegah file .env dieksekusi masuk.

Menjalankan dan menguji sampel aplikasi web

Anda telah mengonfigurasi aplikasi sampel Anda. Anda dapat melanjutkan untuk menjalankan dan mengujinya.

Simpul

1. Untuk memulai server, jalankan perintah berikut dari dalam direktori proyek:

   cd App
   npm install
   npm start
   

2. Pergi ke http://localhost:3000/.

3. Pilih Masuk untuk memulai proses masuk.

Saat pertama kali masuk, Anda diminta untuk memberikan persetujuan untuk mengizinkan aplikasi masuk dan mengakses profil Anda. Setelah berhasil masuk, Anda akan diarahkan kembali ke beranda aplikasi.

Cara kerja aplikasi

Sampel menghosting server web di localhost, port 3000. Saat browser web mengakses alamat ini, aplikasi akan merender halaman beranda. Setelah pengguna memilih Masuk, aplikasi akan mengalihkan browser ke layar masuk Microsoft Entra, menggunakan URL yang dibuat oleh pustaka MSAL Node. Setelah persetujuan pengguna, browser mengalihkan pengguna kembali ke beranda aplikasi, bersama dengan ID dan token akses.

ASP.NET Core

1. Di direktori proyek Anda, gunakan terminal untuk memasukkan perintah berikut:

   cd ms-identity-docs-code-dotnet/web-app-aspnet
   dotnet run
   

2. Salin URL https yang muncul di terminal, misalnya, https://localhost:5001, dan tempelkan ke browser. Kami menyarankan menggunakan sesi browser privat atau mode penyamaran.

3. Ikuti langkah-langkah dan masukkan detail yang diperlukan untuk masuk dengan akun Microsoft Anda. Anda diminta untuk memberikan alamat email sehingga kode akses satu kali dapat dikirimkan kepada Anda. Masukkan kode saat diminta.

4. Aplikasi meminta izin untuk mempertahankan akses ke data yang telah Anda berikan akses padanya, serta untuk mendaftarkan Anda masuk dan membaca profil Anda. Pilih Terima. Cuplikan layar berikut muncul. Ini menunjukkan bahwa Anda masuk ke aplikasi dan melihat detail profil Anda dari Microsoft Graph API.

   

Keluar dari aplikasi

1. Temukan tautan Keluar di sudut kanan atas halaman, dan pilih tautan tersebut.
2. Anda diminta untuk memilih akun dari mana Anda ingin keluar. Pilih akun yang Anda gunakan untuk masuk.
3. Pesan muncul yang menunjukkan bahwa Anda keluar. Anda sekarang dapat menutup jendela browser.

Python Flask

1. Buat lingkungan virtual untuk aplikasi:

   • Untuk Windows, jalankan perintah berikut:

   py -m venv .venv
   .venv\scripts\activate
   

   • Untuk macOS/Linux, jalankan perintah berikut:

   python3 -m venv .venv
   source .venv/bin/activate
   

2. Instal persyaratan menggunakan pip:

   pip install -r requirements.txt
   

3. Jalankan aplikasi dari baris perintah. Pastikan aplikasi Anda berjalan pada port yang sama dengan URI pengalihan yang Anda konfigurasi sebelumnya.

   flask run --debug --host=localhost --port=5000
   

4. Salin URL https yang muncul di terminal, misalnya, https://localhost:5000, dan tempelkan ke browser. Kami menyarankan menggunakan sesi browser privat atau mode penyamaran.

5. Ikuti langkah-langkah dan masukkan detail yang diperlukan untuk masuk dengan akun Microsoft Anda. Anda diminta untuk memberikan alamat email dan kata sandi untuk masuk.

6. Aplikasi meminta izin untuk menjaga akses ke data yang Anda izinkan, serta untuk masuk ke akun Anda dan membaca profil Anda, seperti yang ditunjukkan pada cuplikan layar. Pilih Terima.

   

7. Cuplikan layar berikut muncul, yang menunjukkan bahwa Anda telah berhasil masuk ke aplikasi.

Cara kerja aplikasi

Diagram berikut menunjukkan cara kerja aplikasi sampel:

1. Aplikasi ini menggunakan paket identity untuk mendapatkan token akses dari platform identitas Microsoft. Paket ini dibangun di atas Microsoft Authentication Library (MSAL) untuk Python untuk menyederhanakan autentikasi dan otorisasi di aplikasi web.

2. Token akses yang Anda peroleh di langkah sebelumnya digunakan sebagai token pembawa untuk mengautentikasi pengguna saat memanggil Microsoft Graph API.

Konten terkait

Simpul

• Pelajari cara membuat aplikasi web Node.js yang memasukkan pengguna dan memanggil Microsoft Graph API di Tutorial : Memasukkan pengguna dan memperoleh token untuk Microsoft Graph di aplikasi web Node.js & Express.

ASP.NET Core

• Pelajari dengan membangun aplikasi web ASP.NET ini dengan seri Tutorial: Mendaftarkan aplikasi dengan platform identitas Microsoft.
• Panduan Cepat: Melindungi API web ASP.NET Core dengan platform identitas Microsoft.
• Mulai Cepat: Menyebarkan Aplikasi Web ASP.NET ke Azure App Service

Python Flask

• Pelajari cara membuat aplikasi web Python yang memasukkan pengguna dan memanggil API web yang dilindungi di tutorial : Aplikasi web yang memasukkan pengguna.

Dalam panduan cepat ini, Anda menggunakan contoh aplikasi web untuk menunjukkan cara masuk pengguna di penyewa Anda yang eksternal. Aplikasi sampel menggunakan Pustaka Autentikasi Microsoft untuk menangani autentikasi.

Sebelum memulai, gunakan pemilih Pilih jenis penyewa di bagian atas halaman ini untuk menentukan jenis penyewa. Microsoft Entra ID menyediakan dua konfigurasi penyewa, tenaga kerja dan eksternal. Konfigurasi penyewa untuk tenaga kerja ditujukan bagi karyawan, aplikasi internal, dan sumber daya organisasi lainnya. Penyewa eksternal adalah untuk aplikasi yang berinteraksi dengan pelanggan Anda.

Prasyarat

• Akun Azure dengan langganan aktif. Jika Anda belum memilikinya, Buat akun secara gratis.
• Akun Azure ini harus memiliki izin untuk mengelola aplikasi. Salah satu peran Microsoft Entra berikut ini menyertakan izin yang diperlukan:
  • Administrator Aplikasi
  • Pengembang Aplikasi
• Penyewa eksternal. Untuk membuatnya, pilih dari metode berikut:
  • Gunakan ekstensi Microsoft Entra External ID untuk mengatur tenant eksternal langsung di Visual Studio Code. (Disarankan)
  • Buat penyewa eksternal baru di pusat admin Microsoft Entra.
• Sebuah alur pengguna. Untuk informasi selengkapnya, lihat membuat alur pendaftaran mandiri pengguna untuk aplikasi di penyewa eksternal. Alur pengguna ini dapat digunakan untuk beberapa aplikasi.
• Visual Studio Code atau editor kode lainnya.

Simpul

• Daftarkan aplikasi baru di pusat admin Microsoft Entra, dikonfigurasi hanya untuk Akun di direktori organisasi ini. Lihat Mendaftarkan aplikasi untuk detail selengkapnya. Rekam nilai berikut dari halaman Gambaran Umum aplikasi untuk digunakan nanti:
  • ID Aplikasi (klien)
  • ID Direktori (Penyewa)
• Tambahkan URI pengalihan berikut menggunakan konfigurasi platform Web . Lihat Cara menambahkan URI pengalihan di aplikasi Anda untuk detail selengkapnya.
  • URI Pengalihan: http://localhost:3000/auth/redirect
  • URL keluar Front-channel: https://localhost:5001/signout-callback-oidc
• Tambahkan rahasia klien ke pendaftaran aplikasi Anda. Jangan gunakan rahasia klien di aplikasi produksi. Gunakan sertifikat atau kredensial federasi sebagai gantinya. Untuk informasi selengkapnya, lihat menambahkan kredensial ke aplikasi Anda.
• Menambahkan aplikasi Anda ke alur pengguna
• Node.js

ASP.NET Core

• Daftarkan aplikasi baru di pusat admin Microsoft Entra, dikonfigurasi hanya untuk Akun di direktori organisasi ini. Lihat Mendaftarkan aplikasi untuk detail selengkapnya. Rekam nilai berikut dari halaman Gambaran Umum aplikasi untuk digunakan nanti:
  • ID Aplikasi (klien)
  • ID Direktori (Penyewa)
• Tambahkan URI pengalihan berikut menggunakan konfigurasi platform Web . Lihat Cara menambahkan URI pengalihan di aplikasi Anda untuk detail selengkapnya.
  • URI Pengalihan: https://localhost:5001/signin-oidc
  • URL keluar Front-channel: https://localhost:5001/signout-callback-oidc
• Tambahkan rahasia klien ke pendaftaran aplikasi Anda. Jangan gunakan rahasia klien di aplikasi produksi. Gunakan sertifikat atau kredensial federasi sebagai gantinya. Untuk informasi selengkapnya, lihat menambahkan kredensial ke aplikasi Anda.
• Menambahkan aplikasi Anda ke alur pengguna
• Versi minimal dari .NET 8.0 SDK.

• Daftarkan aplikasi baru di pusat admin Microsoft Entra, dikonfigurasi hanya untuk Akun di direktori organisasi ini. Lihat Mendaftarkan aplikasi untuk detail selengkapnya. Rekam nilai berikut dari halaman Gambaran Umum aplikasi untuk digunakan nanti:
  • ID Aplikasi (klien)
  • ID Direktori (Penyewa)
• Tambahkan URI pengalihan berikut menggunakan konfigurasi platform Web . Lihat Cara menambahkan URI pengalihan di aplikasi Anda untuk detail selengkapnya.
  • URI Pengalihan: http://localhost:5000/getAToken
• Menambahkan aplikasi Anda ke alur pengguna
• Python 3 +
• Tambahkan rahasia klien ke pendaftaran aplikasi Anda. Jangan gunakan rahasia klien di aplikasi produksi. Gunakan sertifikat atau kredensial federasi sebagai gantinya. Untuk informasi selengkapnya, lihat menambahkan kredensial ke aplikasi Anda.

Python Flask

• Daftarkan aplikasi baru di pusat admin Microsoft Entra, dikonfigurasi hanya untuk Akun di direktori organisasi ini. Lihat Mendaftarkan aplikasi untuk detail selengkapnya. Rekam nilai berikut dari halaman Gambaran Umum aplikasi untuk digunakan nanti:
  • ID Aplikasi (klien)
  • ID Direktori (Penyewa)
• Tambahkan URI pengalihan berikut menggunakan konfigurasi platform Web . Lihat Cara menambahkan URI pengalihan di aplikasi Anda untuk detail selengkapnya.
  • URI Pengalihan: http://localhost:5000/getAToken
• Menambahkan aplikasi Anda ke alur pengguna
• Python 3 +
• Tambahkan rahasia klien ke pendaftaran aplikasi Anda. Jangan gunakan rahasia klien di aplikasi produksi. Gunakan sertifikat atau kredensial federasi sebagai gantinya. Untuk informasi selengkapnya, lihat menambahkan kredensial ke aplikasi Anda.

Mengkloning atau mengunduh sampel aplikasi web

Simpul

Untuk mendapatkan aplikasi sampel, Anda dapat mengkloningnya dari GitHub atau mengunduhnya sebagai file .zip:

• Untuk mengkloning sampel, buka prompt perintah dan navigasi ke tempat Anda ingin membuat proyek, dan masukkan perintah berikut:

  git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
  

• Atau, mengunduh sampel .zip file, lalu mengekstraknya ke jalur file di mana panjang nama kurang dari 260 karakter.

Menginstal dependensi proyek

1. Buka jendela konsol, dan ubah ke direktori yang berisi aplikasi sampel Node.js:

   cd 1-Authentication\5-sign-in-express\App
   

2. Jalankan perintah berikut untuk menginstal dependensi aplikasi:

   npm install
   

ASP.NET Core

Untuk mendapatkan aplikasi sampel, Anda dapat mengkloningnya dari GitHub atau mengunduhnya sebagai file .zip.

• Untuk mengkloning sampel, buka prompt perintah dan navigasi ke tempat Anda ingin membuat proyek, dan masukkan perintah berikut:

  git clone https://github.com/Azure-Samples/ms-identity-ciam-dotnet-tutorial.git
  

• Unduh file .zip. Ekstrak ke jalur file di mana panjang nama kurang dari 260 karakter.

Untuk mendapatkan aplikasi sampel, Anda dapat mengkloningnya dari GitHub atau mengunduhnya sebagai file .zip.

• Untuk mengkloning sampel, buka prompt perintah dan navigasi ke tempat Anda ingin membuat proyek, dan masukkan perintah berikut:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
  

• Unduh file .zip. Ekstrak ke jalur file di mana panjang nama kurang dari 260 karakter.

Menginstal dependensi proyek

1. Buka jendela konsol, dan ubah ke direktori yang berisi aplikasi web sampel Flask:

   cd django-web-app
   

2. Siapkan lingkungan virtual:

   • Untuk Windows, jalankan perintah berikut:

   py -m venv .venv
   .venv\scripts\activate
   

   • Untuk macOS/Linux, jalankan perintah berikut:

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Untuk menginstal dependensi aplikasi, jalankan perintah berikut:

   python3 -m pip install -r requirements.txt
   

Python Flask

Untuk mendapatkan aplikasi sampel, Anda dapat mengkloningnya dari GitHub atau mengunduhnya sebagai file .zip.

• Untuk mengkloning sampel, buka prompt perintah dan navigasi ke tempat Anda ingin membuat proyek, dan masukkan perintah berikut:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
  

• Unduh file .zip. Ekstrak ke jalur file di mana panjang nama kurang dari 260 karakter.

Menginstal dependensi proyek

1. Buka jendela konsol, dan ubah ke direktori yang berisi aplikasi web sampel Flask:

   cd flask-web-app
   

2. Siapkan lingkungan virtual:

   • Untuk Windows, jalankan perintah berikut:

   py -m venv .venv
   .venv\scripts\activate
   

   • Untuk macOS/Linux, jalankan perintah berikut:

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Untuk menginstal dependensi aplikasi, jalankan perintah berikut:

   python3 -m pip install -r requirements.txt
   

Mengonfigurasi contoh aplikasi web

Agar Anda dapat membuat pengguna masuk dengan aplikasi sampel, Anda perlu memperbaruinya dengan detail aplikasi dan penyewa Anda.

Simpul

1. Di editor kode Anda, buka file Aplikasi \authConfig.js.

2. Temukan tanda pengganti

   • Enter_the_Application_Id_Here dan ganti dengan ID Aplikasi (klien) aplikasi yang Anda daftarkan sebelumnya.
   • Enter_the_Tenant_Subdomain_Here dan ganti dengan subdomain Direktori (penyewa). Misalnya, jika domain utama penyewa Anda contoso.onmicrosoft.com, gunakan contoso. Jika Anda tidak memiliki nama penyewa, pelajari cara membaca detail penyewa Anda.
   • Enter_the_Client_Secret_Here dan gantilah dengan kunci rahasia aplikasi yang anda salin sebelumnya.

ASP.NET Core

1. Navigasikan ke direktori akar yang berisi aplikasi sampel ASP.NET Core:

   cd 1-Authentication\1-sign-in-aspnet-core-mvc
   

2. Buka file appsettings.json.

3. Di Authority, temukan Enter_the_Tenant_Subdomain_Here dan ganti dengan subdomain penyewa Anda. Misalnya, jika domain utama penyewa Anda adalah caseyjensen@onmicrosoft.com, nilai yang harus Anda masukkan adalah casyjensen.

4. Temukan nilai Enter_the_Application_Id_Here dan ganti dengan ID aplikasi (clientId) aplikasi yang Anda daftarkan di pusat admin Microsoft Entra.

5. Ganti Enter_the_Client_Secret_Here dengan nilai rahasia klien yang Anda siapkan.

1. Buka file proyek Anda di Visual Studio Code atau editor yang Anda gunakan.

2. Buat file .env di folder akar proyek menggunakan file .env.sample.external-id sebagai panduan.

3. Dalam file .env Anda, berikan variabel lingkungan berikut:

   1. CLIENT_ID yang merupakan ID Aplikasi (klien) aplikasi yang Anda daftarkan sebelumnya.
   2. CLIENT_SECRET yang merupakan nilai rahasia aplikasi yang telah Anda salin sebelumnya.
   3. AUTHORITY yang adalah URL yang mengidentifikasi otoritas token. Ini harus dalam format https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com. Ganti subdomain dengan subdomain Direktori (tenant). Misalnya, jika domain utama penyewa Anda contoso.onmicrosoft.com, gunakan contoso. Jika Anda belum memiliki subdomain penyewa, pelajari cara membaca detail penyewa Anda.
   4. REDIRECT_URI yang harus mirip dengan URI pengalihan yang Anda daftarkan sebelumnya harus sesuai dengan konfigurasi Anda.

Python Flask

1. Buka file proyek Anda di Visual Studio Code atau editor yang Anda gunakan.

2. Buat file .env di folder akar proyek menggunakan file .env.sample.external-id sebagai panduan.

3. Dalam file .env Anda, berikan variabel lingkungan berikut:

   • CLIENT_ID yang merupakan ID Aplikasi (klien) aplikasi yang Anda daftarkan sebelumnya.
   • CLIENT_SECRET yang merupakan nilai rahasia aplikasi yang telah Anda salin sebelumnya.
   • AUTHORITY yang adalah URL yang mengidentifikasi otoritas token. Ini harus dalam format https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com. Ganti subdomain dengan subdomain Direktori (tenant). Misalnya, jika domain utama penyewa Anda contoso.onmicrosoft.com, gunakan contoso. Jika Anda belum memiliki subdomain penyewa, pelajari cara membaca detail penyewa Anda.

4. Konfirmasikan bahwa URI pengalihan dikonfigurasi dengan baik. URI pengalihan yang Anda daftarkan sebelumnya harus sesuai dengan konfigurasi Anda. Sampel ini secara default mengatur jalur URI pengalihan ke /getAToken. Konfigurasi ini berada dalam file app_config.py sebagai REDIRECT_PATH.

Menjalankan dan menguji sampel aplikasi web

Simpul

Sekarang Anda dapat menguji sampel aplikasi web Node.js. Anda perlu memulai server Node.js dan mengaksesnya melalui browser Anda di http://localhost:3000.

1. Di terminal Anda, jalankan perintah berikut:

   npm start 
   

2. Buka browser Anda, lalu buka http://localhost:3000. Anda akan melihat halaman yang mirip dengan cuplikan layar berikut:

   

3. Setelah halaman selesai dimuat, pilih Masuk saat diminta.

4. Pada halaman masuk, ketik alamat email Anda, pilih Berikutnya, ketik Kata SandiAnda, lalu pilih Masuk. Jika Anda tidak memiliki akun, pilih Tidak ada akun? Buat satu tautan, yang memulai alur pendaftaran.

5. Jika Anda memilih opsi pendaftaran, setelah mengisi email, kode sandi satu kali, kata sandi baru, dan detail akun lainnya, Anda menyelesaikan seluruh alur pendaftaran. Anda melihat halaman yang mirip dengan cuplikan layar berikut. Anda akan melihat halaman serupa jika Anda memilih opsi masuk.

   

6. Pilih Keluar untuk mengeluarkan pengguna dari aplikasi web atau pilih Lihat klaim token ID untuk melihat klaim token ID yang dikembalikan oleh Microsoft Entra.

Cara kerjanya

Saat pengguna memilih tautan Masuk, aplikasi memulai permintaan autentikasi dan mengalihkan pengguna ke ID Eksternal Microsoft Entra. Pada halaman masuk atau pendaftaran yang muncul, setelah pengguna berhasil masuk, atau membuat akun, MICROSOFT Entra External ID mengembalikan token ID ke aplikasi. Aplikasi memvalidasi token ID, membaca klaim, dan mengembalikan halaman aman kepada pengguna.

Saat pengguna memilih tautan Keluar, aplikasi menghapus sesi pengguna dan kemudian mengalihkan pengguna ke titik akhir keluar ID Eksternal Microsoft Entra untuk memberitahukannya bahwa pengguna telah keluar.

Jika Anda ingin membuat aplikasi yang mirip dengan sampel yang telah Anda jalankan, selesaikan langkah-langkah dalam artikel Masuk pengguna ke dalam aplikasi web Anda sendiri Node.js.

ASP.NET Core

1. Dari shell atau baris perintah Anda, jalankan perintah berikut:

   dotnet run
   

2. Buka browser web Anda dan navigasi ke https://localhost:7274.

3. Masuk dengan akun yang terdaftar pada penyewa eksternal.

4. Setelah masuk, nama tampilan ditampilkan di samping tombol Keluar seperti yang ditunjukkan pada cuplikan layar berikut.

   

5. Untuk keluar dari aplikasi, pilih tombol Keluar.

Jalankan aplikasi untuk melihat pengalaman masuk saat bermain.

1. Di terminal Anda, jalankan perintah berikut:

   python manage.py runserver localhost:5000                                             
   

   Anda dapat menggunakan nomor port pilihan Anda.

2. Buka browser Anda, lalu buka http://localhost:5000. Anda akan melihat halaman yang mirip dengan cuplikan layar berikut:

   

3. Setelah halaman selesai dimuat, pilih tautan Masuk. Anda diminta untuk masuk.

4. Pada halaman masuk, ketik alamat email Anda, pilih Berikutnya, ketik Kata SandiAnda, lalu pilih Masuk. Jika Anda tidak memiliki akun, pilih Tidak ada akun? Buat satu tautan, yang memulai alur pendaftaran.

5. Jika Anda memilih opsi pendaftaran, Anda akan melalui alur pendaftaran. Isi email Anda, kode akses satu kali, kata sandi baru, dan detail akun lainnya untuk menyelesaikan seluruh alur pendaftaran.

6. Setelah masuk atau mendaftar, Anda dialihkan kembali ke aplikasi web. Anda melihat halaman yang terlihat mirip dengan cuplikan layar berikut:

   

7. Pilih Keluar untuk mengeluarkan pengguna dari aplikasi web atau pilih Panggil API hilir untuk melakukan panggilan ke titik akhir Microsoft Graph.

Cara kerjanya

Saat pengguna memilih tautan Masuk, aplikasi memulai permintaan autentikasi dan mengalihkan pengguna ke ID Eksternal Microsoft Entra. Pengguna kemudian masuk atau mendaftar di halaman yang muncul. Setelah memberikan kredensial yang diperlukan dan menyetujui cakupan yang diperlukan, ID Eksternal Microsoft Entra mengalihkan pengguna kembali ke aplikasi web dengan kode otorisasi. Aplikasi web kemudian menggunakan kode otorisasi ini untuk memperoleh token dari ID Eksternal Microsoft Entra.

Saat pengguna memilih tautan Keluar, aplikasi menghapus sesinya, kemudian mengalihkan pengguna ke titik akhir keluar Microsoft Entra External ID untuk memberi tahu bahwa pengguna telah keluar. Pengguna kemudian dialihkan kembali ke aplikasi web.

Python Flask

Jalankan aplikasi untuk melihat pengalaman masuk saat bermain.

1. Di terminal Anda, jalankan perintah berikut:

   python3 -m flask run --debug --host=localhost --port=3000
   

   Anda dapat menggunakan port pilihan Anda. Ini harus mirip dengan port URI pengalihan yang Anda daftarkan sebelumnya.

2. Buka browser Anda, lalu buka http://localhost:3000. Anda akan melihat halaman yang mirip dengan cuplikan layar berikut:

   

3. Setelah halaman selesai dimuat, pilih tautan Masuk. Anda diminta untuk masuk.

4. Pada halaman masuk, ketik alamat email Anda, pilih Berikutnya, ketik Kata SandiAnda, lalu pilih Masuk. Jika Anda tidak memiliki akun, pilih Tidak ada akun? Buat satu tautan, yang memulai alur pendaftaran.

5. Jika Anda memilih opsi pendaftaran, Anda akan melalui alur pendaftaran. Isi email Anda, kode akses satu kali, kata sandi baru, dan detail akun lainnya untuk menyelesaikan seluruh alur pendaftaran.

6. Setelah masuk atau mendaftar, Anda dialihkan kembali ke aplikasi web. Anda akan melihat halaman yang terlihat mirip dengan cuplikan layar berikut:

   

7. Pilih Keluar untuk mengeluarkan pengguna dari aplikasi web atau pilih Panggil API hilir untuk melakukan panggilan ke titik akhir Microsoft Graph.

Cara kerjanya

Saat pengguna memilih tautan Masuk, aplikasi memulai permintaan autentikasi dan mengalihkan pengguna ke ID Eksternal Microsoft Entra. Pengguna kemudian masuk atau mendaftar di halaman yang muncul. Setelah memberikan kredensial yang diperlukan dan menyetujui cakupan yang diperlukan, ID Eksternal Microsoft Entra mengalihkan pengguna kembali ke aplikasi web dengan kode otorisasi. Aplikasi web kemudian menggunakan kode otorisasi ini untuk memperoleh token dari ID Eksternal Microsoft Entra.

Saat pengguna memilih tautan Keluar, aplikasi menghapus sesinya, kemudian mengalihkan pengguna ke titik akhir keluar Microsoft Entra External ID untuk memberi tahu bahwa pengguna telah keluar. Pengguna kemudian dialihkan kembali ke aplikasi web.

Konten terkait

Simpul

• Masuk pengguna ke dalam Node.js aplikasi web Anda
• Mulai Cepat - Memasukkan pengguna dan memanggil API web dalam sampel Node.js aplikasi web
• Panduan Cepat - Edit profil pada aplikasi web contoh Node.js

ASP.NET Core

• Gunakan seri tutorial multi-bagian kami untuk membangun aplikasi web ASP.NET ini dari awal
• Mengizinkan reset kata sandi
• Sesuaikan merek bawaan

• Memasukkan pengguna menggunakan contoh aplikasi web Flask
• Mengizinkan reset kata sandi
• Sesuaikan merek bawaan

Python Flask

• Mengizinkan reset kata sandi
• Sesuaikan merek bawaan