Cara menggunakan REACT.STRICTMODE pada JavaScript

Lompati ke konten utama

Browser ini sudah tidak didukung.

Mutakhirkan ke Microsoft Edge untuk memanfaatkan fitur, pembaruan keamanan, dan dukungan teknis terkini.

Tutorial: Memasukkan pengguna dan memanggil Microsoft Graph API dari aplikasi satu halaman [single-page app atau SPA] React menggunakan alur kode autentikasi

Artikel
09/20/2022
13 menit untuk membaca

Dalam artikel ini

Dalam tutorial ini, Anda membuat aplikasi satu halaman [SPA] React yang memasukkan pengguna dan memanggil Microsoft Graph menggunakan alur kode otorisasi dengan PKCE. SPA yang Anda buat menggunakan Pustaka Autentikasi Microsoft [MSAL] untuk React.

Dalam tutorial ini:

Buat proyek React dengan npm
Mendaftarkan aplikasi di portal Microsoft Azure
Menambahkan kode untuk mendukung upaya masuk dan keluar pengguna
Menambahkan kode untuk memanggil Microsoft Graph API
Menguji aplikasi

MSAL React mendukung alur kode otorisasi di browser alih-alih alur pemberian implisit. MSALReact TIDAK mendukung alur implisit.

Prasyarat

Node.js untuk menjalankan server web lokal
Visual Studio Code atau editor kode lainnya

Cara kerja aplikasi tutorial

MSAL React Tutorial { isAuthenticated ? Signed In : } Welcome to the Microsoft Authentication Library For React Tutorial

{props.children} ]; };

Sekarang buka src/App.js dan tambahkan ganti konten yang sudah ada dengan kode berikut:

import React from "react";
import { PageLayout } from "./components/PageLayout";

function App[] {
  return [
      
          This is the main app content!
      
  ];
}

export default App;

Aplikasi Anda sekarang memiliki tombol masuk yang hanya ditampilkan untuk pengguna yang tidak diautentikasi!

Saat pengguna memilih tombol Masuk menggunakan Popup atau Masuk menggunakan tombol Alihkan untuk pertama kalinya, onClick penangan memanggil loginPopup [atau loginRedirect] untuk memasukkan pengguna. Metode loginPopup membuka jendela pop-up dengan titik akhir platform identitas Microsoft untuk meminta dan memvalidasi info masuk pengguna. Setelah berhasil masuk, msal.js memulai alur kode otorisasi.

Pada titik ini, kode otorisasi yang dilindungi PKCE dikirim ke titik akhir token yang dilindungi CORS dan ditukar dengan token. Token ID, token akses, dan token refresh diterima oleh aplikasi Anda dan diproses oleh msal.js, dan informasi yang terkandung dalam token disimpan di-cache.

Mengeluarkan pengguna

Dalam src/components buat file bernama SignOutButton.jsx. Tambahkan kode dari bagian berikut untuk memanggil info keluar menggunakan jendela popup atau pengalihan bingkai penuh:

Keluar menggunakan popup

Tambahkan kode berikut ke src/components/SignOutButton.jsx untuk membuat komponen tombol yang akan memanggil keluar popup saat dipilih:

import React from "react";
import { useMsal } from "@azure/msal-react";
import Button from "react-bootstrap/Button";

function handleLogout[instance] {
    instance.logoutPopup[].catch[e => {
        console.error[e];
    }];
}

/**
 * Renders a button which, when selected, will open a popup for logout
 */
export const SignOutButton = [] => {
    const { instance } = useMsal[];

    return [
         handleLogout[instance]}>Sign out using Popup
    ];
}

Keluar menggunakan pengalihan

Tambahkan kode berikut ke src/components/SignInButton.jsx untuk membuat komponen tombol yang akan memanggil login popup saat dipilih:

import React from "react";
import { useMsal } from "@azure/msal-react";
import Button from "react-bootstrap/Button";

function handleLogout[instance] {
    instance.logoutRedirect[].catch[e => {
        console.error[e];
    }];
}

/**
 * Renders a button which, when selected, will redirect the page to the logout prompt
 */
export const SignOutButton = [] => {
    const { instance } = useMsal[];

    return [
         handleLogout[instance]}>Sign out using Redirect
    ];
}

Menambahkan tombol keluar

Perbarui komponen PageLayout Anda dalam src/components/PageLayout.jsx untuk merender SignOutButtonkomponen baru bagi pengguna terautentikasi. Kode Anda akan terlihat seperti ini:

import React from "react";
import Navbar from "react-bootstrap/Navbar";
import { useIsAuthenticated } from "@azure/msal-react";
import { SignInButton } from "./SignInButton";
import { SignOutButton } from "./SignOutButton";

/**
 * Renders the navbar component with a sign-in button if a user is not authenticated
 */
export const PageLayout = [props] => {
    const isAuthenticated = useIsAuthenticated[];

    return [
        
            
                MSAL React Tutorial
                { isAuthenticated ?  :  }
            
            Welcome to the Microsoft Authentication Library For React Tutorial
            

            

            {props.children}
        
    ];
};

Komponen render bersyarat

Untuk merender komponen tertentu hanya untuk pengguna yang diautentikasi atau tidak diautentikasi gunakan AuthenticateTemplate dan/atau UnauthenticatedTemplate seperti yang ditunjukkan di bawah ini.

Tambahkan impor berikut ke src/App.js:

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

Untuk merender komponen tertentu hanya untuk pengguna terautentikasi perbarui fungsi App Anda di src/App.js dengan kode berikut:

function App[] {
    return [
        
            
                You are signed in!
            
        
    ];
}

Untuk merender komponen tertentu hanya untuk pengguna yang tidak terautentikasi, seperti saran untuk masuk, perbarui fungsi App Anda di src/App.js dengan kode berikut:

function App[] {
    return [
        
            
                You are signed in!
            
            
                You are not signed in! Please sign in.
            
        
    ];
}

Memperoleh token

Sebelum memanggil API, seperti Microsoft Graph, Anda harus memperoleh token akses. Tambahkan komponen baru ke src/App.js yang dipanggil ProfileContent dengan kode berikut:

function ProfileContent[] {
    const { instance, accounts, inProgress } = useMsal[];
    const [accessToken, setAccessToken] = useState[null];

    const name = accounts[0] && accounts[0].name;

    function RequestAccessToken[] {
        const request = {
            ...loginRequest,
            account: accounts[0]
        };

        // Silently acquires an access token which is then attached to a request for Microsoft Graph data
        instance.acquireTokenSilent[request].then[[response] => {
            setAccessToken[response.accessToken];
        }].catch[[e] => {
            instance.acquireTokenPopup[request].then[[response] => {
                setAccessToken[response.accessToken];
            }];
        }];
    }

    return [
        
            Welcome {name}
            {accessToken ? 
                Access Token Acquired!
                :
                Request Access Token
            }
        
    ];
};

Perbarui impor Anda di src/App.js untuk mencocokkan dengan cuplikan berikut:

import React, { useState } from "react";
import { PageLayout } from "./components/PageLayout";
import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from "@azure/msal-react";
import { loginRequest } from "./authConfig";
import Button from "react-bootstrap/Button";

Terakhir, tambahkan komponen ProfileContent baru Anda sebagai anak dari AuthenticatedTemplate komponen App Anda pada src / App.js. Komponen App Anda akan terlihat seperti ini:

function App[] {
  return [
      
          
              
          
          
              You are not signed in! Please sign in.

          
      
  ];
}

Kode di atas akan merender tombol untuk pengguna yang masuk, memungkinkan mereka meminta token akses untuk Microsoft Graph ketika tombol dipilih.

Setelah pengguna masuk, aplikasi Anda tidak akan meminta pengguna untuk mengautentikasi ulang setiap kali mereka perlu mengakses sumber daya yang dilindungi [yakni, meminta token]. Untuk mencegah permintaan reautentikasi tersebut, panggilan acquireTokenSilent yang pertama-tama akan mencari token akses yang di-cache dan tidak kedaluwarsa kemudian, jika diperlukan, gunakan token refresh untuk mendapatkan token akses baru. Namun, ada beberapa situasi di mana Anda mungkin harus memaksa pengguna untuk berinteraksi dengan platform identitas Microsoft. Contohnya:

Pengguna perlu memasukkan kembali info masuk mereka karena kata sandi telah kedaluwarsa.
Token refresh telah kedaluwarsa...
Aplikasi meminta akses ke sumber daya dan Anda memerlukan persetujuan pengguna.
Autentikasi dua faktor diperlukan.

Panggilan acquireTokenPopup membuka jendela pop-up [atau acquireTokenRedirect mengalihkan pengguna ke platform identitas Microsoft]. Di jendela tersebut, pengguna perlu berinteraksi dengan mengonfirmasi info masuk mereka, memberikan persetujuan ke sumber daya yang diperlukan, atau menyelesaikan autentikasi dua faktor.

Jika Anda menggunakan Internet Explorer, kami menyarankan agar Anda menggunakan metode loginRedirect dan acquireTokenRedirect karena masalah yang diketahui dengan jendela Internet Explorer dan jendela pop-up.

Menghubungi Microsoft Graph API

Buat file bernama graph.js di folder src dan tambahkan kode berikut untuk melakukan panggilan REST ke Microsoft Graph API:

import { graphConfig } from "./authConfig";

/**
 * Attaches a given access token to a Microsoft Graph API call. Returns information about the user
 */
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]];
}

Selanjutnya buat file bernama ProfileData.jsx di src/components dan tambahkan kode berikut:

import React from "react";

/**
 * Renders information about the user obtained from Microsoft Graph
 */
export const ProfileData = [props] => {
    return [
        
            First Name:  {props.graphData.givenName}
            Last Name:  {props.graphData.surname}
            Email:  {props.graphData.userPrincipalName}
            Id:  {props.graphData.id}
        
    ];
};

Selanjutnya, buka src/App.js dan tambahkan ke impor berikut:

import { ProfileData } from "./components/ProfileData";
import { callMsGraph } from "./graph";

Terakhir, perbarui komponen ProfileContent Anda di src/App.js untuk memanggil Microsoft Graph dan menampilkan data profil setelah memperoleh token. Komponen ProfileContent Anda akan terlihat seperti ini:

function ProfileContent[] {
    const { instance, accounts } = useMsal[];
    const [graphData, setGraphData] = useState[null];

    const name = accounts[0] && accounts[0].name;

    function RequestProfileData[] {
        const request = {
            ...loginRequest,
            account: accounts[0]
        };

        // Silently acquires an access token which is then attached to a request for Microsoft Graph data
        instance.acquireTokenSilent[request].then[[response] => {
            callMsGraph[response.accessToken].then[response => setGraphData[response]];
        }].catch[[e] => {
            instance.acquireTokenPopup[request].then[[response] => {
                callMsGraph[response.accessToken].then[response => setGraphData[response]];
            }];
        }];
    }

    return [
        
            Welcome {name}
            {graphData ? 
                
                :
                Request Profile Information
            }
        
    ];
};

Pada perubahan yang dibuat di atas, metode callMSGraph[] digunakan untuk membuat permintaan GET HTTP terhadap sumber daya yang dilindungi yang memerlukan token akses. Kemudian, permintaan mengembalikan konten ke penelepon. Metode ini akan menambahkan token yang diperoleh di header Otorisasi HTTP. Dalam aplikasi contoh yang dibuat dalam tutorial ini, sumber daya yang dilindungi adalah titik akhir me Microsoft Graph API, yang menampilkan informasi profil pengguna masuk.

Menguji aplikasi Anda

Anda telah menyelesaikan pembuatan aplikasi dan sekarang siap meluncurkan web server dan menguji fungsi aplikasi.

Mulai aplikasi dengan menjalankan perintah berikut dari dalam akar folder proyek Anda:
```
npm start
```
Jendela browser harus dibuka ke aplikasi Anda secara otomatis. Jika tidak, buka browser Anda dan navigasi ke //localhost:3000. Anda akan melihat halaman yang tampak seperti berikut ini.
Pilih tombol masuk untuk masuk.

Memberikan persetujuan untuk akses aplikasi

Saat pertama kali masuk ke aplikasi, Anda diminta untuk memberikannya akses ke profil Anda dan membiarkan Anda masuk:

Jika Anda menyetujui izin yang diminta, aplikasi web akan menampilkan nama pengguna Anda, yang menandakan bahwa proses masuk berhasil:

Memanggil Graph API

Setelah masuk, pilih Lihat Profil untuk melihat informasi profil pengguna yang ditampilkan dalam respons dari panggilan ke Microsoft Graph API:

Informasi selengkapnya tentang cakupan dan izin yang didelegasikan

Microsoft Graph API memerlukan cakupan user.read untuk membaca profil pengguna. Secara default, cakupan ini otomatis ditambahkan di setiap aplikasi yang terdaftar di portal Microsoft Azure. API lain untuk Microsoft Graph, serta API kustom untuk server ujung belakang, mungkin mewajibkan cakupan tambahan. Misalnya, Microsoft Graph API memerlukan cakupan Mail.Read untuk mencantumkan email pengguna.

Saat Anda menambahkan cakupan, pengguna Anda mungkin diminta untuk memberikan persetujuan tambahan untuk cakupan yang ditambahkan.

Bantuan dan dukungan

Jika Anda memerlukan bantuan, ingin melaporkan masalah, atau ingin mempelajari opsi dukungan, lihat Bantuan dan dukungan bagi pengembang.

Langkah berikutnya

Jika Anda ingin mendalami pengembangan aplikasi satu halaman JavaScript di platform identitas Microsoft, lihat rangkaian skenario beberapa bagian kami: