Mulai cepat: Memasukkan pengguna dalam contoh aplikasi Desktop

• Node.js
• Visual Studio Code atau editor kode lain

• Visual Studio dengan beban kerja pengembangan Universal Windows Platform terinstal

1. Masuk ke pusat admin Microsoft Entra setidaknya sebagai Administrator Aplikasi Cloud.
2. Jika Anda memiliki akses ke beberapa penyewa, gunakan ikon Pengaturan di menu atas untuk beralih ke penyewa tempat Anda ingin mendaftarkan aplikasi dari menu Direktori + Langganan.
3. Telusuri ke Identitas>Aplikasi>Pendaftaran aplikasi dan pilih Registrasi baru.
4. Masukkan Nama untuk aplikasi Anda, misalnya msal-node-desktop. Pengguna aplikasi Anda mungkin melihat nama ini, dan Anda dapat mengubahnya nanti.
5. Pilih Daftarkan untuk membuat aplikasi.
6. Di bawah Kelola, pilih Autentikasi .
7. Pilih Tambahkan platform>Aplikasi seluler dan desktop.
8. Di bagian URI Pengalihan , masukkan http://localhost.
9. Pilih Konfigurasikan.

1. Masuk ke pusat admin Microsoft Entra .
2. Jika Anda memiliki akses ke beberapa tenant, gunakan ikon Pengaturan di menu atas untuk beralih ke tenant tempat Anda ingin mendaftarkan aplikasi dari menu Direktori + langganan.
3. Telusuri Identitas>Aplikasi>Registrasi aplikasi, pilih Pendaftaran baru.
4. Masukkan Nama untuk aplikasi Anda, misalnya Win-App-calling-MsGraph. Pengguna aplikasi Anda mungkin melihat nama ini, dan Anda dapat mengubahnya nanti.
5. Di bagian Jenis akun yang didukung, pilih Akun di direktori organisasi dan akun Microsoft pribadi apa pun (misalnya, Skype, Xbox, Outlook.com).
6. Pilih Daftarkan untuk membuat aplikasi.
7. Di bawah Kelola, pilih Autentikasi .
8. Pilih Tambahkan platform>Aplikasi seluler dan desktop.
9. Di bagian URI Pengalihan, pilih https://login.microsoftonline.com/common/oauth2/nativeclient dan di URI pengalihan kustom menambahkan ms-appx-web://microsoft.aad.brokerplugin/{client_id} di mana {client_id} adalah ID aplikasi (klien) aplikasi Anda (GUID yang sama yang muncul di kotak centang msal{client_id}://auth).
10. Pilih Konfigurasikan.

Unduh sampel kode

Unduh aplikasi sampel WPF

Ekstrak proyek, buka folder ms-identity-JavaScript-nodejs-desktop-main , lalu buka file .authConfig.js. Ganti nilai sebagai berikut:

File Anda akan terlihat mirip dengan di bawah ini:

const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash

const msalConfig = {
    auth: {
        clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
        authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                 console.log(message);
             },
             piiLoggingEnabled: false,
             logLevel: LogLevel.Verbose,
        }
    }
}

const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash

const protectedResources = {
     graphMe: {
         endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
         scopes: ["User.Read"],
     }
};

module.exports = {
     msalConfig: msalConfig,
     protectedResources: protectedResources,
 };

1. Ekstrak file zip ke folder lokal yang dekat dengan akar disk, misalnya, C:\Azure-Samples.

2. Buka proyek di Visual Studio.

3. Edit App.Xaml.cs dan ganti nilai bidang ClientId dan Tenant dengan kode berikut:

   private static string ClientId = "Enter_the_Application_Id_here";
   private static string Tenant = "Enter_the_Tenant_Info_Here";
   

Di mana:

• Enter_the_Application_Id_here - adalah ID Aplikasi (klien) untuk aplikasi yang Anda daftarkan.

  Untuk menemukan nilai ID Aplikasi (klien) , buka halaman Gambaran Umum aplikasi di pusat admin Microsoft Entra.

• Enter_the_Tenant_Info_Here - diatur ke salah satu opsi berikut:

  • Jika aplikasi Anda mendukung Akun di direktori organisasi ini, ganti nilai ini dengan Id Penyewa atau nama Penyewa (misalnya, contoso.microsoft.com)

  • Jika aplikasi Anda mendukung Akun di direktori organisasi mana pun, ganti nilai ini dengan organizations

  • Jika aplikasi Anda mendukung Akun di direktori organisasi dan akun Microsoft pribadi, ganti nilai ini dengan common.

    Untuk menemukan nilai-nilai dari ID Direktori (penyewa) dan Jenis akun yang didukung , buka halaman Gambaran Umum aplikasi di pusat admin Microsoft Entra.

1. Anda harus menginstal dependensi sampel ini sekali:

   cd ms-identity-javascript-nodejs-desktop-main
   npm install
   

2. Kemudian, jalankan aplikasi melalui prompt perintah atau konsol:

   npm start
   

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 aplikasi.

Untuk membuat dan menjalankan aplikasi sampel di Visual Studio, ikuti langkah-langkah berikut:

1. Pilih menu Debug>Mulai Debugging, atau tekan F5. MainWindow aplikasi Anda ditampilkan.
2. Pilih tombol Panggil Microsoft Graph API.
3. Masuk menggunakan kredensial akun Microsoft Entra (akun kerja atau sekolah) atau akun Microsoft (live.com, outlook.com).
4. Jika Anda menjalankan aplikasi untuk pertama kalinya, Anda akan diminta untuk memberikan persetujuan untuk mengizinkan aplikasi mengakses profil pengguna Anda dan memasukkan Anda. Setelah menyetujui izin yang diminta, aplikasi menampilkan bahwa Anda berhasil masuk.

Anda akan melihat beberapa informasi token dasar dan data pengguna yang diperoleh dari panggilan ke Microsoft Graph API.

Untuk mempelajari selengkapnya tentang pengembangan aplikasi desktop Electron dengan MSAL Node, lihat tutorial:

Cobalah tutorial desktop Windows untuk panduan langkah demi langkah lengkap tentang membangun aplikasi dan fitur baru, termasuk penjelasan lengkap tentang mulai cepat ini.

• Node.js
• Visual Studio Code atau editor kode lain
• Penyewa eksternal. Untuk membuatnya, pilih dari metode berikut:
  • (Disarankan) Gunakan ekstensi Microsoft Entra External ID untuk menyiapkan penyewa eksternal langsung di Visual Studio Code
  • Buat penyewa eksternal baru di pusat admin Microsoft Entra

• .NET 7.0 SDK
• Visual Studio 2022 dengan beban kerja MAUI terinstal:
  • Instruksi untuk Windows
  • Instruksi untuk macOS
• Penyewa eksternal. Jika Anda belum memilikinya, mendaftar untuk uji coba gratis

• Visual Studio Code atau editor kode lain
• .NET 7.0 atau yang lebih baru

• Penyewa eksternal. Untuk membuatnya, pilih dari metode berikut:
  • (Disarankan) Gunakan ekstensi Microsoft Entra External ID untuk menyiapkan penyewa eksternal langsung di Visual Studio Code
  • Membuat penyewa eksternal baru di pusat admin Microsoft Entra

Untuk menentukan jenis aplikasi ke pendaftaran aplikasi Anda, ikuti langkah-langkah berikut:

1. Di bawah Kelola, pilih Autentikasi .
2. Pada halaman konfigurasi Platform, pilih Tambahkan platform, lalu pilih opsi aplikasi seluler dan desktop.
3. Untuk URI pengalihan kustom masukkan http://localhost, lalu pilih Konfigurasikan.
4. Pilih Konfigurasikan untuk menyimpan perubahan Anda.

Untuk menentukan jenis aplikasi ke pendaftaran aplikasi Anda, ikuti langkah-langkah berikut:

1. Di bawah Kelola, pilih Autentikasi .
2. Pada halaman konfigurasi Platform, pilih Tambahkan platform, lalu pilih opsi aplikasi Seluler dan Desktop.
3. Untuk URI Pengalihan , masukkan msalEnter_the_Application_Id_Here://auth, ganti Enter_the_Application_Id_Here dengan ID Aplikasi (klien) yang Anda salin sebelumnya, lalu pilih Konfigurasi .
4. Pilih Simpan untuk menyimpan perubahan.

Untuk menentukan jenis aplikasi ke pendaftaran aplikasi Anda, ikuti langkah-langkah berikut:

1. Di bawah Kelola, pilih Autentikasi .
2. Pada halaman konfigurasi Platform, pilih Tambahkan platform, lalu pilih opsi aplikasi seluler dan desktop.
3. Di bidang input di bawah URI pengalihan kustom, masukkan https://login.microsoftonline.com/common/oauth2/nativeclientsecara manual, lalu pilih Konfigurasikan. Jika Anda memilih URI ini pada kotak pilih, Anda mungkin mendapatkan kesalahan URI pengalihan.

Untuk mendapatkan kode sampel aplikasi desktop, mengunduh file .zip atau mengkloning aplikasi web sampel dari GitHub dengan menjalankan perintah berikut:

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

Jika Anda memilih untuk mengunduh file .zip, ekstrak file aplikasi sampel ke folder di mana panjang total jalur adalah 260 karakter atau lebih sedikit.

Menginstal dependensi proyek

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

   cd 1-Authentication\3-sign-in-electron\App
   

2. Jalankan perintah berikut untuk menginstal dependensi aplikasi:

   npm install && npm update
   

Untuk mendapatkan kode sampel aplikasi desktop .NET MAUI, mengunduh file .zip atau mengkloning sampel aplikasi desktop .NET MAUI dari GitHub dengan menjalankan perintah berikut:

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

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.

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

2. Cari pengisi tempat.

   1. Enter_the_Application_Id_Here dan ganti dengan ID Aplikasi (klien) aplikasi yang Anda daftarkan sebelumnya.

   2. Enter_the_Tenant_Subdomain_Here dan menggantinya dengan subdomain Direktori (tenant). Misalnya, jika domain utama penyewa Anda contoso.onmicrosoft.com, gunakan contoso. Jika Anda tidak memiliki nama penyewa, pelajari cara membaca detail penyewa Anda.

1. Di Visual Studio, buka file ms-identity-ciam-dotnet-tutorial-main/1-Authentication/2-sign-in-maui/appsettings.json.
2. Temukan placeholder.
   1. 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.
   2. Enter_the_Application_Id_Here dan ganti dengan ID Aplikasi (klien) aplikasi yang Anda daftarkan sebelumnya.

1. Buka proyek di IDE Anda (seperti Visual Studio atau Visual Studio Code) untuk mengonfigurasi kode.

2. Di editor kode Anda, buka file appsettings.json di folder ms-identity-ciam-dotnet-tutorial>1-Authentication>5-sign-in-dotnet-wpf.

3. Ganti Enter_the_Application_Id_Here dengan ID Aplikasi (klien) aplikasi yang Anda daftarkan sebelumnya.

4. Ganti Enter_the_Tenant_Subdomain_Here dengan subdomain Direktori (penyewa). Misalnya, jika domain utama Anda contoso.onmicrosoft.com, ganti Enter_the_Tenant_Subdomain_Here dengan contoso. Jika Anda tidak memiliki domain utama, pelajari cara membaca detail penyewa.

Anda sekarang dapat menguji sampel aplikasi desktop Electron. Setelah Anda menjalankan aplikasi, jendela aplikasi desktop muncul secara otomatis:

1. Di terminal Anda, jalankan perintah berikut:

   npm start
   

   

2. Pada jendela desktop yang muncul, pilih tombol Masuk atau Daftar. Jendela browser terbuka, dan Anda diminta untuk masuk.

3. Pada halaman masuk browser, 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.

4. 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. Halaman menampilkan klaim ID token.

   

Aplikasi MAUI .NET dirancang untuk berjalan pada beberapa sistem operasi dan perangkat. Anda harus memilih target mana yang ingin Anda uji dan debug aplikasi Anda.

Atur Target Debug di toolbar Visual Studio ke perangkat yang ingin Anda debug dan uji. Langkah-langkah berikut menunjukkan pengaturan Debug Target ke Windows:

1. Pilih menu drop-down Debug Target.
2. Pilih kerangka kerja
3. Pilih net7.0-windows...

Jalankan aplikasi dengan menekan F5 atau pilih tombol putar di bagian atas Visual Studio.

1. Anda sekarang dapat menguji sampel aplikasi desktop .NET MAUI. Setelah Anda menjalankan aplikasi, jendela aplikasi desktop muncul secara otomatis:

   

2. Pada jendela desktop yang muncul, pilih tombol Masuk. Jendela browser terbuka, dan Anda diminta untuk masuk.

   

   Selama proses masuk, Anda diminta untuk memberikan berbagai izin (untuk memungkinkan aplikasi mengakses data Anda). Setelah berhasil masuk dan menyetujui, layar aplikasi menampilkan halaman utama.

   

1. Buka jendela konsol, dan ubah ke direktori yang berisi aplikasi sampel desktop WPF:

   cd 1-Authentication\5-sign-in-dotnet-wpf
   

2. Di terminal Anda, jalankan aplikasi dengan menjalankan perintah berikut:

   dotnet run
   

3. Setelah Anda meluncurkan sampel, Anda akan melihat jendela dengan tombol Masuk. Pilih tombol Masuk.

   

4. Pada halaman masuk, masukkan alamat email akun Anda. Jika Anda tidak memiliki akun, pilih Tidak ada akun? Buat satu, yang memulai alur pendaftaran. Ikuti alur ini untuk membuat akun baru dan masuk.

5. Setelah masuk, Anda akan melihat layar yang menampilkan keberhasilan masuk dan informasi dasar tentang akun pengguna Anda yang disimpan dalam token yang diambil. Informasi dasar ditampilkan di bagian Info Token layar login

• Aktifkan reset kata sandi.
• Sesuaikan penjenamaan bawaan.
• Jelajahi kode sampel aplikasi desktop Electron.

• Tutorial: Membuat aplikasi .NET MAUI.
• Aktifkan reset kata sandi.
• Sesuaikan pengaturan merek default.

• Tutorial : Mengautentikasi pengguna ke aplikasi desktop WPF Anda
• Aktifkan reset kata sandi.
• Sesuaikanmerek bawaan .