Tutorial: Memanggil Microsoft Graph API dari aplikasi satu halaman React

Artikel
10/24/2023

Sebelum dapat berinteraksi dengan aplikasi satu halaman (SPA), kita perlu memulai panggilan API ke Microsoft Graph dan membuat antarmuka pengguna (UI) untuk aplikasi. Setelah ini ditambahkan, kita dapat masuk ke aplikasi dan mendapatkan informasi data profil dari Microsoft Graph API.

Dalam tutorial ini:

Membuat panggilan API ke Microsoft Graph
Membuat UI untuk aplikasi
Mengimpor dan menggunakan komponen dalam aplikasi
Membuat komponen yang merender informasi profil pengguna
Memanggil API dari aplikasi

Prasyarat

Penyelesaian prasyarat dan langkah-langkah dalam Tutorial: Membuat komponen untuk masuk dan keluar di aplikasi satu halaman React.

Membuat panggilan API ke Microsoft Graph

Untuk mengizinkan SPA meminta akses ke Microsoft Graph, referensi ke graphConfig objek perlu ditambahkan. Ini berisi titik akhir Graph REST API yang ditentukan dalam file authConfig.js .

Di folder src, buka graph.js dan ganti konten file dengan cuplikan kode berikut untuk meminta akses ke Microsoft Graph.

import { graphConfig } from "./authConfig";

/**
 * Attaches a given access token to a MS Graph API call. Returns information about the user
 * @param accessToken 
 */
export async function callMsGraph(accessToken) {
    const headers = new Headers();
    const bearer = `Bearer ${accessToken}`;

    headers.append("Authorization", bearer);

    const options = {
        method: "GET",
        headers: headers
    };

    return fetch(graphConfig.graphMeEndpoint, options)
        .then(response => response.json())
        .catch(error => console.log(error));
}

Memperbarui impor untuk menggunakan komponen dalam aplikasi

Cuplikan kode berikut mengimpor komponen UI yang dibuat sebelumnya ke aplikasi. Ini juga mengimpor komponen yang diperlukan dari @azure/msal-react paket. Komponen-komponen ini akan digunakan untuk merender antarmuka pengguna dan memanggil API.

Di folder src, buka App.jsx dan ganti konten file dengan cuplikan kode berikut untuk meminta akses.

  import React, { useState } from 'react';

  import { PageLayout } from './components/PageLayout';
  import { loginRequest } from './authConfig';
  import { callMsGraph } from './graph';
  import { ProfileData } from './components/ProfileData';

  import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from '@azure/msal-react';

  import './App.css';

  import Button from 'react-bootstrap/Button';

`ProfileContent` Menambahkan fungsi

Fungsi ProfileContent ini digunakan untuk merender informasi profil pengguna setelah pengguna masuk. Fungsi ini akan dipanggil ketika pengguna memilih tombol Minta Informasi Profil.

Dalam file App.jsx, tambahkan kode berikut di bawah impor Anda:

/**
* Renders information about the signed-in user or a button to retrieve data about the user
*/
const ProfileContent = () => {
    const { instance, accounts } = useMsal();
    const [graphData, setGraphData] = useState(null);

    function RequestProfileData() {
        // Silently acquires an access token which is then attached to a request for MS Graph data
        instance
            .acquireTokenSilent({
                ...loginRequest,
                account: accounts[0],
            })
            .then((response) => {
                callMsGraph(response.accessToken).then((response) => setGraphData(response));
            });
    }

    return (
        <>
            <h5 className="card-title">Welcome {accounts[0].name}</h5>
            <br/>
            {graphData ? (
                <ProfileData graphData={graphData} />
            ) : (
                <Button variant="secondary" onClick={RequestProfileData}>
                    Request Profile Information
                </Button>
            )}
        </>
    );
};

`MainContent` Menambahkan fungsi

Fungsi MainContent ini digunakan untuk merender informasi profil pengguna setelah pengguna masuk. Fungsi ini akan dipanggil ketika pengguna memilih tombol Minta Informasi Profil.

Dalam file App.jsx, ganti App() fungsi dengan kode berikut:

/**
* If a user is authenticated the ProfileContent component above is rendered. Otherwise a message indicating a user is not authenticated is rendered.
*/
const MainContent = () => {
    return (
        <div className="App">
            <AuthenticatedTemplate>
                <ProfileContent />
            </AuthenticatedTemplate>

            <UnauthenticatedTemplate>
                <h5>
                    <center>
                        Please sign-in to see your profile information.
                    </center>
                </h5>
            </UnauthenticatedTemplate>
        </div>
    );
};

export default function App() {
    return (
        <PageLayout>
            <center>
                <MainContent />
            </center>
        </PageLayout>
    );
}

Memanggil Microsoft Graph API dari aplikasi

Semua cuplikan kode yang diperlukan telah ditambahkan, sehingga aplikasi sekarang dapat dipanggil dan diuji di browser web.

Navigasi ke browser yang sebelumnya dibuka di Tutorial: Menyiapkan aplikasi untuk autentikasi. Jika browser Anda ditutup, buka jendela baru dengan alamat http://localhost:3000/.
Pilih tombol Masuk . Untuk tujuan tutorial ini, pilih opsi Masuk menggunakan Popup .
Setelah jendela popup muncul dengan opsi masuk, pilih akun yang akan masuk.
Jendela kedua mungkin muncul yang menunjukkan bahwa kode akan dikirim ke alamat email Anda. Jika ini terjadi, pilih Kirim kode. Buka email dari tim akun Microsoft pengirim, dan masukkan kode penggunaan tunggal 7 digit. Setelah dimasukkan, pilih Masuk.
Untuk Tetap masuk, Anda dapat memilih Tidak atau Ya.
Aplikasi sekarang akan meminta izin untuk masuk dan mengakses data. Pilih Terima untuk melanjutkan.
SPA sekarang akan menampilkan tombol yang mengatakan Minta Informasi Profil. Pilih untuk menampilkan data profil Microsoft Graph yang diperoleh dari Microsoft Graph API.