Mulai Cepat: Memasukkan pengguna di aplikasi halaman tunggal (SPA) dengan menggunakan alur kode autentikasi

  • Artikel
  • 12 menit untuk membaca

Dalam mulai cepat ini, Anda mengunduh dan menjalankan sampel kode yang menunjukkan bagaimana aplikasi halaman tunggal (SPA) JavaScript Angular dapat memasukkan pengguna dan memanggil Microsoft Graph menggunakan alur kode otorisasi. Sampel kode juga menunjukkan cara mendapatkan token akses untuk memanggil Microsoft Graph API atau API web apa pun.

Lihat Cara kerja sampel untuk melihat ilustrasi.

Mulai cepat ini menggunakan MSAL Angular v2 dengan alur kode otorisasi.

Prasyarat

Mendaftarkan dan mengunduh aplikasi mulai cepat Anda

Untuk memulai aplikasi mulai cepat Anda, gunakan salah satu opsi berikut.

Opsi 1 (Ekspres): Mendaftarkan dan mengonfigurasi aplikasi secara otomatis lalu mengunduh sampel kode Anda

  1. Buka pengalaman mulai cepat portal Microsoft Azure - Pendaftaran aplikasi.
  2. Masukkan nama untuk aplikasi Anda.
  3. Di bawah Jenis akun yang didukung, pilih Akun di direktori organisasi dan akun Microsoft pribadi apa pun.
  4. Pilih Daftarkan.
  5. Buka panel mulai cepat dan ikuti petunjuk untuk mengunduh dan mengonfigurasi aplikasi baru secara otomatis.

Opsi 2 (Manual): Mendaftarkan dan mengonfigurasi sampel aplikasi dan kode secara manual

Langkah 1: Daftarkan aplikasi

  1. Masuk ke portal Microsoft Azure.
  2. Jika Anda memiliki akses ke beberapa penyewa, gunakan filter Direktori + langganan di menu atas untuk beralih penyewa aplikasinya ingin Anda daftarkan.
  3. Cari dan pilih Microsoft Azure Active Directory.
  4. Di bagian Kelola, pilih Pendaftaran aplikasi>Pendaftaran baru.
  5. Masukkan Nama untuk aplikasi Anda. Pengguna aplikasi mungkin melihat nama ini, dan Anda dapat mengubahnya nanti.
  6. Di bawah Jenis akun yang didukung, pilih Akun di direktori organisasi dan akun Microsoft pribadi apa pun.
  7. Pilih Daftar. Di halaman Gambaran Umum aplikasi, catat nilai ID Aplikasi (klien) untuk digunakan nanti.
  8. Di bagian Kelola, pilih Autentikasi.
  9. Di bagian Konfigurasi platform, pilih Tambahkan platform. Di panel yang terbuka pilih Aplikasi satu halaman.
  10. Atur nilai URI Pengalihan ke http://localhost:4200/. Ini port default yang akan didengarkan NodeJS di komputer lokal. Kami akan mengembalikan respons autentikasi ke URI ini setelah berhasil mengautentikasi pengguna.
  11. Pilih Konfigurasikan untuk menerapkan perubahan.
  12. Di bagian Konfigurasi Platform perluas Aplikasi satu halaman.
  13. Konfirmasikan bahwa di bagian Berikan jenisAlready configured URI Pengalihan Anda telah memenuhi syarat untuk Alur Kode Otorisasi dengan PKCE.

Langkah 2: Unduh proyek

Untuk menjalankan proyek dengan server web menggunakan Node.js, unduh file proyek inti.

Langkah 3: Mengonfigurasi aplikasi JavaScript Anda

Di folder src, buka folder aplikasi lalu buka file app.module.ts dan perbarui nilai clientID, authority, dan redirectUri di objek auth.

// MSAL instance to be passed to msal-angular
export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'Enter_the_Application_Id_Here',
      authority: 'Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here',
      redirectUri: 'Enter_the_Redirect_Uri_Here'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE, // set to true for IE 11     },
  });
}

Ubah nilai di bagian auth seperti yang dijelaskan di sini:

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

    Untuk menemukan nilai ID Aplikasi (klien) , buka halaman Gambaran Umum pendaftaran aplikasi di portal Microsoft Azure.

  • Enter_the_Cloud_Instance_Id_Here adalah instans cloud Azure. Untuk cloud Azure utama atau global, masukkan https://login.microsoftonline.com. Untuk cloud nasional (misalnya, Tiongkok), lihat Cloud nasional.

  • Enter_the_Tenant_info_here diatur ke salah satu dari berikut ini:

    • Jika aplikasi mendukung akun di direktori organisasi ini, ganti nilai ini dengan ID Penyewa atau Nama penyewa. Contohnya:contoso.microsoft.com

    Untuk menemukan nilai ID Direktori (penyewa) , buka halaman Gambaran Umum pendaftaran aplikasi di portal Microsoft Azure.

    • Jika aplikasi Anda mendukung akun di direktori organisasi apa pun, ganti nilai ini dengan organizations.
    • Jika aplikasi Anda mendukung akun di direktori organisasi dan akun Microsoft pribadi apa pun, ganti nilai ini dengan common. Untuk mulai cepat ini, gunakancommon.
    • Untuk membatasi dukungan hanya untuk akun Microsoft pribadi, ganti nilai ini dengan consumers.

    Untuk menemukan nilai Jenis akun yang didukung, buka halaman Gambaran Umum pendaftaran aplikasi di portal Microsoft Azure.

  • Enter_the_Redirect_Uri_Here adalah http://localhost:4200/.

Nilai authority dalam app.module.ts harus mirip dengan yang berikut ini jika Anda menggunakan cloud Azure utama (global):

authority: "https://login.microsoftonline.com/common",

Gulir ke bawah dalam file yang sama dan perbarui graphMeEndpoint.

  • Mengganti string Enter_the_Graph_Endpoint_Herev1.0/me dengan https://graph.microsoft.com/v1.0/me
  • Enter_the_Graph_Endpoint_Herev1.0/me adalah titik akhir yang akan menjadi tujuan panggilan API. Untuk layanan Microsoft Graph API utama (global), masukkan https://graph.microsoft.com/ (sertakan garis miring berikutnya). Untuk informasi selengkapnya, lihat dokumentasi.
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set('Enter_the_Graph_Endpoint_Herev1.0/me', ['user.read']);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

Langkah 4: Jalankan proyek

Menjalankan proyek dengan server web menggunakan Node.js:

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

    npm install
npm start

  2. Telusuri http://localhost:4200/.

  3. Pilih Masuk untuk memulai proses masuk, lalu panggil Microsoft Graph API.

    Pertama kali masuk, Anda diminta memberikan persetujuan guna mengizinkan aplikasi mengakses profil dan memasukkan Anda. Setelah Anda berhasil masuk, klik tombol Profil untuk menampilkan informasi pengguna di halaman.

Informasi selengkapnya

Cara kerja sampel

Diagram showing the authorization code flow for a single-page application.

msal.js

Pustaka MSAL memasukkan pengguna dan meminta token yang digunakan untuk mengakses API yang dilindungi oleh platform identitas Microsoft.

Atau, jika Anda telah menginstal Node.js, Anda dapat mengunduh versi terbaru menggunakan Node.js Package Manager (npm):

npm install @azure/msal-browser @azure/msal-angular@2

Langkah berikutnya

Untuk panduan langkah demi langkah terperinci tentang membangun aplikasi alur kode autentikasi menggunakan Javascript vanili, lihat tutorial berikut:

Tutorial untuk memasukkan pengguna dan memanggil Microsoft Graph

Dalam mulai cepat ini, Anda mengunduh dan menjalankan sampel kode yang menunjukkan bagaimana aplikasi halaman tunggal (SPA) JavaScript dapat memasukkan pengguna dan memanggil Microsoft Graph menggunakan alur kode otorisasi dengan Proof Key for Code Exchange (PKCE). Sampel kode juga menunjukkan cara mendapatkan token akses untuk memanggil Microsoft Graph API atau API web apa pun.

Lihat Cara kerja sampel untuk melihat ilustrasi.

Prasyarat

Mendaftarkan dan mengunduh aplikasi mulai cepat Anda

Untuk memulai aplikasi mulai cepat Anda, gunakan salah satu opsi berikut.

Opsi 1 (Ekspres): Mendaftarkan dan mengonfigurasi aplikasi secara otomatis lalu mengunduh sampel kode

  1. Buka portal Microsoft Azure - Pendaftaran aplikasi.
  2. Masukkan nama aplikasi.
  3. Di bawah Jenis akun yang didukung, pilih Akun di direktori organisasi dan akun Microsoft pribadi apa pun.
  4. Pilih Daftarkan.
  5. Buka panel mulai cepat dan ikuti petunjuk untuk mengunduh dan mengonfigurasi aplikasi baru secara otomatis.

Opsi 2 (Manual): Mendaftarkan dan mengonfigurasi sampel aplikasi dan kode secara manual

Langkah 1: Daftarkan aplikasi

  1. Masuk ke portal Microsoft Azure.
  2. Jika Anda memiliki akses ke beberapa penyewa, gunakan filter Direktori + langganan di menu atas untuk beralih penyewa aplikasinya ingin Anda daftarkan.
  3. Cari dan pilih Microsoft Azure Active Directory.
  4. Di bagian Kelola, pilih Pendaftaran aplikasi>Pendaftaran baru.
  5. Masukkan Nama untuk aplikasi Anda. Pengguna aplikasi mungkin melihat nama ini, dan Anda dapat mengubahnya nanti.
  6. Di bawah Jenis akun yang didukung, pilih Akun di direktori organisasi dan akun Microsoft pribadi apa pun.
  7. Pilih Daftar. Di halaman Gambaran Umum aplikasi, catat nilai ID Aplikasi (klien) untuk digunakan nanti.
  8. Di bagian Kelola, pilih Autentikasi.
  9. Di bagian Konfigurasi platform, pilih Tambahkan platform. Di panel yang terbuka pilih Aplikasi satu halaman.
  10. Atur nilai URI Pengalihan ke http://localhost:3000/.
  11. Pilih Konfigurasikan.

Langkah 2: Unduh proyek

Untuk menjalankan proyek dengan server web menggunakan Node.js, unduh file proyek inti.

Langkah 3: Mengonfigurasi aplikasi JavaScript Anda

Di folder aplikasi, buka file authConfig.js, lalu perbarui nilai clientID, authority, dan redirectUri di objek msalConfig.

// Config object to be passed to MSAL on creation
const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
    authority: "Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here",
    redirectUri: "Enter_the_Redirect_Uri_Here",
  },
  cache: {
    cacheLocation: "sessionStorage", // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
  }
};

Mengubah nilai di bagian msalConfig:

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

    Untuk menemukan nilai ID Aplikasi (klien) , buka halaman Gambaran Umum pendaftaran aplikasi di portal Microsoft Azure.

  • Enter_the_Cloud_Instance_Id_Here adalah instans cloud Azure. Untuk cloud Azure utama atau global, masukkan https://login.microsoftonline.com. Untuk cloud nasional (misalnya, Tiongkok), lihat Cloud nasional.

  • Enter_the_Tenant_info_here salah satu hal berikut:

    • Jika aplikasi mendukung akun di direktori organisasi ini, ganti nilai ini dengan ID Penyewa atau Nama penyewa. Contohnya:contoso.microsoft.com

    Untuk menemukan nilai ID Direktori (penyewa) , buka halaman Gambaran Umum pendaftaran aplikasi di portal Microsoft Azure.

    • Jika aplikasi Anda mendukung akun di direktori organisasi apa pun, ganti nilai ini dengan organizations.
    • Jika aplikasi Anda mendukung akun di direktori organisasi dan akun Microsoft pribadi apa pun, ganti nilai ini dengan common. Untuk mulai cepat ini, gunakancommon.
    • Untuk membatasi dukungan hanya untuk akun Microsoft pribadi, ganti nilai ini dengan consumers.

    Untuk menemukan nilai Jenis akun yang didukung, buka halaman Gambaran Umum pendaftaran aplikasi di portal Microsoft Azure.

  • Enter_the_Redirect_Uri_Here adalah http://localhost:3000/.

Nilai authority dalam authConfig.js harus mirip dengan yang berikut ini jika Anda menggunakan cloud Azure utama (global):

authority: "https://login.microsoftonline.com/common",

Selanjutnya, buka file graphConfig.js untuk memperbarui nilai graphMeEndpoint dan graphMailEndpoint dalam objek apiConfig.

  // Add here the endpoints for MS Graph API services you would like to use.
  const graphConfig = {
    graphMeEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me",
    graphMailEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me/messages"
  };

  // Add here scopes for access token to be used at MS Graph API endpoints.
  const tokenRequest = {
      scopes: ["Mail.Read"]
  };

Enter_the_Graph_Endpoint_Here adalah titik akhir yang akan menjadi tujuan panggilan API. Untuk layanan Microsoft Graph API utama (global), masukkan https://graph.microsoft.com/ (sertakan garis miring berikutnya). Untuk informasi selengkapnya tentang Microsoft Graph di cloud nasional, lihat Penyebaran cloud nasional.

Jika Anda menggunakan layanan Microsoft Graph API utama (global), nilai graphMeEndpoint dan graphMailEndpoint di file graphConfig.js harus mirip dengan yang berikut ini:

graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
graphMailEndpoint: "https://graph.microsoft.com/v1.0/me/messages"

Langkah 4: Jalankan proyek

Menjalankan proyek dengan server web menggunakan Node.js.

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

    npm install
npm start

  2. Buka http://localhost:3000/.

  3. Pilih Masuk untuk memulai proses masuk, lalu panggil Microsoft Graph API.

    Pertama kali masuk, Anda diminta memberikan persetujuan guna mengizinkan aplikasi mengakses profil dan memasukkan Anda. Setelah Anda berhasil masuk, informasi profil pengguna Anda akan ditampilkan di halaman.

Informasi selengkapnya

Cara kerja sampel

Diagram showing the authorization code flow for a single-page application.

MSAL.js

Pustaka MSAL memasukkan pengguna dan meminta token yang digunakan untuk mengakses API yang dilindungi oleh platform identitas Microsoft. File index.html berisi referensi ke pustaka:

<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.0.0-beta.0/js/msal-browser.js" integrity=
"sha384-r7Qxfs6PYHyfoBR6zG62DGzptfLBxnREThAlcJyEfzJ4dq5rqExc1Xj3TPFE/9TH" crossorigin="anonymous"></script>

Atau, jika Anda telah menginstal Node.js, Anda dapat mengunduh versi terbaru menggunakan Node.js Package Manager (npm):

npm install @azure/msal-browser

Langkah berikutnya

Untuk panduan langkah demi langkah yang lebih mendetail tentang membangun aplikasi yang digunakan dalam mulai cepat ini, lihat tutorial berikut ini:

Tutorial untuk memasukkan pengguna dan memanggil Microsoft Graph

Dalam mulai cepat ini, Anda mengunduh dan menjalankan sampel kode yang menunjukkan bagaimana aplikasi halaman tunggal (SPA) JavaScript React dapat memasukkan pengguna dan memanggil Microsoft Graph menggunakan alur kode otorisasi. Sampel kode juga menunjukkan cara mendapatkan token akses untuk memanggil Microsoft Graph API atau API web apa pun.

Lihat Cara kerja sampel untuk melihat ilustrasi.

Prasyarat

Mendaftarkan dan mengunduh aplikasi mulai cepat Anda

Untuk memulai aplikasi mulai cepat Anda, gunakan salah satu opsi berikut.

Opsi 1 (Ekspres): Mendaftarkan dan mengonfigurasi aplikasi secara otomatis lalu mengunduh sampel kode Anda

  1. Buka pengalaman mulai cepat portal Microsoft Azure - Pendaftaran aplikasi.
  2. Masukkan nama untuk aplikasi Anda.
  3. Di bawah Jenis akun yang didukung, pilih Akun di direktori organisasi dan akun Microsoft pribadi apa pun.
  4. Pilih Daftarkan.
  5. Buka panel mulai cepat dan ikuti petunjuk untuk mengunduh dan mengonfigurasi aplikasi baru secara otomatis.

Opsi 2 (Manual): Mendaftarkan dan mengonfigurasi sampel aplikasi dan kode secara manual

Langkah 1: Daftarkan aplikasi

  1. Masuk ke portal Microsoft Azure.
  2. Jika Anda memiliki akses ke beberapa penyewa, gunakan filter Direktori + langganan di menu atas untuk beralih penyewa aplikasinya ingin Anda daftarkan.
  3. Cari dan pilih Microsoft Azure Active Directory. Di bagian Kelola, pilih Pendaftaran aplikasi>Pendaftaran baru.
  4. Saat halaman Daftarkan aplikasi muncul, masukkan nama aplikasi.
  5. Di bagian Jenis akun yang didukung, pilih Akun di direktori organisasi dan akun Microsoft pribadi apa pun.
  6. Pilih Daftar. Di halaman Gambaran Umum aplikasi, catat nilai ID Aplikasi (klien) untuk digunakan nanti.
  7. Di bagian Kelola, pilih Autentikasi.
  8. Di bagian Konfigurasi platform, pilih Tambahkan platform. Di panel yang terbuka pilih Aplikasi satu halaman.
  9. Atur nilai URI Pengalihan ke http://localhost:3000/. Ini port default yang akan didengarkan NodeJS di komputer lokal. Kami akan mengembalikan respons autentikasi ke URI ini setelah berhasil mengautentikasi pengguna.
  10. Pilih Konfigurasikan untuk menerapkan perubahan.
  11. Di bagian Konfigurasi Platform perluas Aplikasi satu halaman.
  12. Konfirmasikan bahwa di bagian Berikan jenisAlready configured URI Pengalihan Anda telah memenuhi syarat untuk Alur Kode Otorisasi dengan PKCE.

Langkah 2: Unduh proyek

Untuk menjalankan proyek dengan server web menggunakan Node.js, unduh file proyek inti.

Langkah 3: Mengonfigurasi aplikasi JavaScript Anda

Di folder src, buka file authConfig.js, dan perbarui nilai clientID, authority, dan redirectUri di objek msalConfig.

/**
* Configuration object to be passed to MSAL instance on creation.
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md
*/
export const msalConfig = {
   auth: {
       clientId: "Enter_the_Application_Id_Here",
       authority: "Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here",
       redirectUri: "Enter_the_Redirect_Uri_Here"
   },
   cache: {
       cacheLocation: "sessionStorage", // This configures where your cache will be stored
       storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
   },

Ubah nilai di bagian msalConfig seperti yang dijelaskan di sini:

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

    Untuk menemukan nilai ID Aplikasi (klien) , buka halaman Gambaran Umum pendaftaran aplikasi di portal Microsoft Azure.

  • Enter_the_Cloud_Instance_Id_Here adalah instans cloud Azure. Untuk cloud Azure utama atau global, masukkan https://login.microsoftonline.com. Untuk cloud nasional (misalnya, Tiongkok), lihat Cloud nasional.

  • Enter_the_Tenant_info_here diatur ke salah satu dari berikut ini:

    • Jika aplikasi mendukung akun di direktori organisasi ini, ganti nilai ini dengan ID Penyewa atau Nama penyewa. Contohnya:contoso.microsoft.com

    Untuk menemukan nilai ID Direktori (penyewa) , buka halaman Gambaran Umum pendaftaran aplikasi di portal Microsoft Azure.

    • Jika aplikasi Anda mendukung akun di direktori organisasi apa pun, ganti nilai ini dengan organizations.
    • Jika aplikasi Anda mendukung akun di direktori organisasi dan akun Microsoft pribadi apa pun, ganti nilai ini dengan common. Untuk mulai cepat ini, gunakancommon.
    • Untuk membatasi dukungan hanya untuk akun Microsoft pribadi, ganti nilai ini dengan consumers.

    Untuk menemukan nilai Jenis akun yang didukung, buka halaman Gambaran Umum pendaftaran aplikasi di portal Microsoft Azure.

  • Enter_the_Redirect_Uri_Here adalah http://localhost:3000/.

Nilai authority dalam authConfig.js harus mirip dengan yang berikut ini jika Anda menggunakan cloud Azure utama (global):

authority: "https://login.microsoftonline.com/common",

Gulir ke bawah dalam file yang sama dan perbarui graphMeEndpoint.

  • Mengganti string Enter_the_Graph_Endpoint_Herev1.0/me dengan https://graph.microsoft.com/v1.0/me
  • Enter_the_Graph_Endpoint_Herev1.0/me adalah titik akhir yang akan menjadi tujuan panggilan API. Untuk layanan Microsoft Graph API utama (global), masukkan https://graph.microsoft.com/ (sertakan garis miring berikutnya). Untuk informasi selengkapnya, lihat dokumentasi.
  // Add here the endpoints for MS Graph API services you would like to use.
   export const graphConfig = {
       graphMeEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me"
   };

Langkah 4: Jalankan proyek

Menjalankan proyek dengan server web menggunakan Node.js:

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

    npm install
npm start

  2. Telusuri http://localhost:3000/.

  3. Pilih Masuk untuk memulai proses masuk, lalu panggil Microsoft Graph API.

    Pertama kali masuk, Anda diminta memberikan persetujuan guna mengizinkan aplikasi mengakses profil dan memasukkan Anda. Setelah berhasil masuk, klik Minta Informasi Profil untuk menampilkan informasi profil Anda di halaman.

Informasi selengkapnya

Cara kerja sampel

Diagram showing the authorization code flow for a single-page application.

msal.js

Pustaka MSAL memasukkan pengguna dan meminta token yang digunakan untuk mengakses API yang dilindungi oleh platform identitas Microsoft.

Atau, jika Anda telah menginstal Node.js, Anda dapat mengunduh versi terbaru menggunakan Node.js Package Manager (npm):

npm install @azure/msal-browser @azure/msal-react

Langkah berikutnya

Selanjutnya, coba tutorial langkah demi langkah untuk mempelajari cara membangun React SPA dari awal yang memasukkan pengguna dan memanggil API Microsoft Graph untuk mendapatkan data profil pengguna:

Tutorial: Masukkan pengguna dan hubungi Microsoft Graph