Data Organisasi: Membuat Pendaftaran Aplikasi ID Microsoft Entra

Tingkatkan produktivitas pengguna dengan mengintegrasikan data organisasi (email, file, obrolan, dan acara kalender) langsung ke aplikasi kustom Anda. Dengan menggunakan API Microsoft Graph dan ID Microsoft Entra, Anda dapat mengambil dan menampilkan data yang relevan dengan lancar dalam aplikasi Anda, mengurangi kebutuhan pengguna untuk beralih konteks. Baik itu merujuk email yang dikirim ke pelanggan, meninjau pesan Teams, atau mengakses file, pengguna dapat dengan cepat menemukan informasi yang mereka butuhkan tanpa meninggalkan aplikasi Anda, menyederhanakan proses pengambilan keputusan mereka.

Dalam latihan ini, Anda akan:

• Buat pendaftaran aplikasi ID Microsoft Entra sehingga Microsoft Graph dapat mengakses data organisasi dan membawanya ke dalam aplikasi.
• Temukan team dan channel Id dari Microsoft Teams yang diperlukan untuk mengirim pesan obrolan ke saluran tertentu.
• Perbarui file .env proyek dengan nilai dari pendaftaran aplikasi ID Microsoft Entra Anda.

Membuat Pendaftaran Aplikasi ID Microsoft Entra

1. Buka portal Microsoft Azure dan pilih ID Microsoft Entra.

2. Pilih Kelola -->Pendaftaran aplikasi diikuti oleh + Pendaftaran baru.

3. Isi detail formulir pendaftaran aplikasi baru seperti yang ditunjukkan di bawah ini dan pilih Daftar:

   • Nama: microsoft-graph-app
   • Jenis akun yang didukung: Akun di direktori organisasi apa pun (Penyewa ID Microsoft Entra apa pun - Multipenyewa)
   • URI Pengalihan:
     • Pilih Aplikasi halaman tunggal (SPA) dan masukkan http://localhost:4200 di bidang URI Pengalihan .
   • Pilih Daftar untuk membuat pendaftaran aplikasi.

   

1. Pilih Gambaran Umum di menu sumber daya dan salin nilai ke Application (client) ID clipboard Anda.

   

Memperbarui File .env Proyek

1. Buka file .env di editor Anda dan tetapkan nilainya Application (client) ID ke ENTRAID_CLIENT_ID.

   ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
   

2. Jika Anda ingin mengaktifkan kemampuan untuk mengirim pesan dari aplikasi ke Saluran Teams, masuk ke Microsoft Teams menggunakan akun penyewa Microsoft 365 dev Anda (ini disebutkan dalam pra-reqs untuk tutorial).

3. Setelah masuk, perluas tim, dan temukan saluran yang ingin Anda kirimi pesan dari aplikasi. Misalnya, Anda dapat memilih tim Perusahaan dan saluran Umum (atau tim/saluran apa pun yang ingin Anda gunakan).

   

4. Di header tim, klik tiga titik (...) dan pilih Dapatkan tautan ke tim.

5. Di tautan yang muncul di jendela popup, ID tim adalah string huruf dan angka setelah team/. Misalnya, dalam tautan "https://teams.microsoft.com/l/team/19%3ae9b9.../", ID tim adalah 19%3ae9b9... hingga karakter berikut / .

6. Salin ID tim dan tetapkan ke TEAM_ID dalam file .env .

7. Di header saluran, klik tiga titik (...) dan pilih Dapatkan tautan ke saluran.

8. Di tautan yang muncul di jendela popup, ID saluran adalah string huruf dan angka setelah channel/. Misalnya, di tautan "https://teams.microsoft.com/l/channel/19%3aQK02.../", ID saluran adalah 19%3aQK02... hingga karakter berikut / .

9. Salin ID saluran dan tetapkan ke CHANNEL_ID dalam file .env .

10. Simpan file env sebelum melanjutkan.

Memulai/Menghidupkan ulang Aplikasi dan Api Server

Lakukan salah satu langkah berikut berdasarkan latihan yang Anda selesaikan hingga saat ini:

• Jika Anda memulai database, server API, dan server web dalam latihan sebelumnya, Anda perlu menghentikan server API dan server web dan memulai ulang untuk mengambil perubahan file .env . Anda dapat membiarkan database berjalan.

  Temukan jendela terminal yang menjalankan server API dan server web dan tekan CTRL + C untuk menghentikannya. Mulai lagi dengan mengetik npm start di setiap jendela terminal dan menekan Enter. Lanjutkan ke latihan berikutnya.

• Jika Anda belum memulai database, server API, dan server web, selesaikan langkah-langkah berikut:

  1. Dalam langkah-langkah berikut, Anda akan membuat tiga jendela terminal di Visual Studio Code.

     

  2. Klik kanan pada file .env di daftar file Visual Studio Code dan pilih Buka di Terminal Terintegrasi. Pastikan terminal Anda berada di akar proyek - openai-acs-msgraph - sebelum melanjutkan.

  3. Pilih dari salah satu opsi berikut untuk memulai database PostgreSQL:

     • Jika Anda telah menginstal dan menjalankan Docker Desktop , jalankan docker-compose up di jendela terminal dan tekan Enter.

     • Jika Anda memiliki Podman dengan podman-compose yang terinstal dan berjalan, jalankan podman-compose up di jendela terminal dan tekan Enter.

     • Untuk menjalankan kontainer PostgreSQL secara langsung menggunakan Docker Desktop, Podman, nerdctl, atau runtime kontainer lain yang telah Anda instal, jalankan perintah berikut di jendela terminal:

       • Mac, Linux, atau Subsistem Windows untuk Linux (WSL):

         [docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres
         

       • Windows dengan PowerShell:

         [docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
         

  4. Setelah kontainer database dimulai, tekan + ikon di toolbar Terminal Visual Studio Code untuk membuat jendela terminal kedua.

     

  5. cd ke folder server/typescript dan jalankan perintah berikut untuk menginstal dependensi dan memulai api server.

     • npm install
     • npm start

  6. + Tekan ikon lagi di toolbar Terminal Visual Studio Code untuk membuat jendela terminal ketiga.

  7. cd ke folder klien dan jalankan perintah berikut untuk menginstal dependensi dan memulai server web.

     • npm install
     • npm start

  8. Browser akan diluncurkan dan Anda akan dibawa ke http://localhost:4200.

     

Langkah Berikutnya