Mulai cepat: Memasukkan pengguna dalam contoh aplikasi Desktop

Berlaku untuk: Penyewa tenaga kerja Penyewa eksternal (Lingkaran hijau dengan simbol tanda centang putih yang menunjukkan konten berikut berlaku untuk penyewa eksternal.) (Green circle with a white check mark symbol that indicates the following content applies to external tenants.pelajari selengkapnya)

Dalam mulai cepat ini, Anda akan menggunakan aplikasi sampel untuk mempelajari cara menambahkan autentikasi ke aplikasi desktop. Aplikasi sampel memungkinkan pengguna untuk masuk dan keluar dan menggunakan Microsoft Authentication Library (MSAL) untuk menangani autentikasi.

Sebelum memulai, gunakan pilihan Pilih jenis penyewa di bagian atas halaman ini untuk memilih jenisnya. Microsoft Entra ID menyediakan dua konfigurasi penyewa, tenaga kerja dan eksternal. Konfigurasi tenant untuk tenaga kerja adalah untuk karyawan, aplikasi internal, dan sumber daya organisasi lainnya. Penyewa eksternal adalah untuk aplikasi yang digunakan oleh 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.
  • 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)
  • ElektronNode.js
  • Windows Presentation Foundation (WPF)

Mengunduh proyek sampel

  • ElektronNode.js
  • Windows Presentation Foundation (WPF)

Nota

Sampel Electron yang disediakan dalam tutorial ini dirancang khusus untuk bekerja dengan MSAL-node. Browser MSAL tidak didukung dalam aplikasi Electron. Pastikan Anda menyelesaikan langkah-langkah berikut untuk menyiapkan proyek Anda dengan benar.

  • 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-javascript-nodejs-desktop.git

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

Konfigurasi proyek

  • ElektronNode.js
  • Windows Presentation Foundation (WPF)

Di editor kode Anda, buka file ms-identity-javascript-nodejs-desktop-main/App/authConfig.js . Ganti nilai sebagai berikut:

Variabel Deskripsi Contoh
Enter_the_Cloud_Instance_Id_Here Instans cloud Azure tempat aplikasi Anda terdaftar https://login.microsoftonline.com/ (sertakan garis miring)
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_Graph_Endpoint_Here Instans cloud Microsoft Graph API yang akan dipanggil aplikasi Anda https://graph.microsoft.com/ (sertakan garis miring)

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

Jalankan aplikasi

  • ElektronNode.js
  • Windows Presentation Foundation (WPF)

  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.

Langkah berikutnya

  • ElektronNode.js
  • Windows Presentation Foundation (WPF)

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

Tutorial : Memasukkan pengguna dan memanggil Microsoft Graph API di aplikasi desktop Electron

Prasyarat

Mengunduh proyek sampel

Nota

Sampel Electron yang disediakan dalam tutorial ini dirancang khusus untuk bekerja dengan MSAL-node. Browser MSAL tidak didukung dalam aplikasi Electron. Pastikan Anda menyelesaikan langkah-langkah berikut untuk menyiapkan proyek Anda dengan benar.

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

Mengonfigurasi contoh aplikasi web

  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.

Menjalankan dan menguji sampel aplikasi web

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

    Cuplikan layar masuk ke aplikasi desktop elektron.

  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. Klaim ID token ditampilkan pada halaman ini.

    Cuplikan layar tampilan klaim token di aplikasi desktop elektron.

Konten terkait

  • Last updated on