Cara menggunakan REACT.STRICTMODE pada JavaScript

Question

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

Aplikasi yang Anda buat dalam tutorial ini memungkinkan SPA React untuk membuat kueri Microsoft Graph API dengan memperoleh token keamanan dari platform identitas Microsoft. Ini menggunakan MSAL untuk React, wrapper pustaka MSAL.js v2. MSAL React memungkinkan aplikasi React 16+ mengautentikasi pengguna perusahaan dengan menggunakan Azure Active Directory (Azure AD), dan juga pengguna yang memiliki akun Microsoft dan identitas sosial seperti Facebook, Google, dan LinkedIn. Pustaka juga memungkinkan aplikasi mendapatkan akses ke layanan awan Microsoft dan Microsoft Graph.

Dalam skenario ini, setelah pengguna masuk, token akses diminta dan ditambahkan ke permintaan HTTP di header otorisasi. Akuisisi dan pembaruan token dihandel oleh MSAL untuk React (MSAL React).

Pustaka

Tutorial ini menggunakan pustaka berikut:

Pustaka	Deskripsi
MSAL React	Pustaka Autentikasi Microsoft untuk JavaScript React Wrapper
Browser MSAL	Pustaka Autentikasi Microsoft untuk paket browser JavaScript v2

Dapatkan sampel kode yang telah selesai

Lebih suka mengunduh proyek sampel tutorial yang sudah selesai ini? Untuk menjalankan proyek dengan menggunakan server web lokal, seperti Node.js, buat klon ms-identity-javascript-react-spa:

git clone https://github.com/Azure-Samples/ms-identity-javascript-react-spa

Kemudian, untuk mengonfigurasi sampel kode sebelum Anda menjalankannya, lewati ke langkah konfigurasi.

Untuk melanjutkan tutorial dan membuat aplikasi sendiri, lanjutkan ke bagian berikutnya, yaitu Membuat proyek Anda.

Membuat proyek

Setelah Anda memasang Node.js, buka jendela terminal kemudian jalankan perintah berikut:

npx create-react-app msal-react-tutorial # Create a new React app
cd msal-react-tutorial # Change to the app directory
npm install @azure/msal-browser @azure/msal-react # Install the MSAL packages
npm install react-bootstrap bootstrap # Install Bootstrap for styling

Anda sekarang telah melakukan bootstrap proyek React kecil menggunakan Buat React App. Ini akan menjadi titik awal yang akan dibangun sisa tutorial ini. Jika Anda ingin melihat perubahan pada aplikasi saat Anda bekerja melalui tutorial ini, Anda dapat menjalankan perintah berikut:

npm start

Jendela browser harus dibuka ke aplikasi Anda secara otomatis. Jika tidak, buka browser Anda dan navigasi ke http://localhost:3000. Setiap kali Anda menyimpan file dengan kode yang diperbarui, halaman akan dimuat ulang untuk mencerminkan perubahan.

Mendaftarkan aplikasi Anda

Ikuti langkah-langkah dalam Aplikasi satu halaman: Pendaftaran aplikasi untuk membuat pendaftaran aplikasi untuk SPA Anda menggunakan portal Microsoft Azure.

Di langkah Alihkan URI: MSAL.js 2.0 dengan alur kode otorisasi, masuk ke http://localhost:3000, lokasi default tempat creat-react-app akan melayani aplikasi ini.

Mengonfigurasi JavaScript SPA

Buat file bernama authConfig.js dalam folder src guna memuat parameter konfigurasi untuk autentikasi, lalu tambahkan kode berikut:

export const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
    authority: "Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here", // This is a URL (e.g. https://login.microsoftonline.com/{your tenant ID})
    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
  }
};

// Add scopes here for ID token to be used at Microsoft identity platform endpoints.
export const loginRequest = {
 scopes: ["User.Read"]
};

// Add the endpoints here for Microsoft Graph API services you'd like to use.
export const graphConfig = {
    graphMeEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me"
};

Ubah nilai di bagian msalConfig seperti yang dijelaskan di sini:

Nama nilai	Tentang
`Enter_the_Application_Id_Here`	ID Aplikasi (klien) dari aplikasi yang Anda daftarkan.
`Enter_the_Cloud_Instance_Id_Here`	Instans cloud Azure tempat aplikasi Anda terdaftar. Untuk cloud Azure utama (atau global),masukkan `https://login.microsoftonline.com`. Untuk cloud nasional (misalnya, Cina), Anda dapat menemukan nilai yang sesuai di Cloud nasional.
`Enter_the_Tenant_Info_Here`	Atur ke salah satu opsi berikut: Jika aplikasi Anda mendukung akun di direktori organisasi ini, ganti nilai ini dengan ID direktori (penyewa) atau nama penyewa (misalnya, contoso.microsoft.com). Jika aplikasi Anda mendukung akun di direktori organisasi apa pun, ganti nilai ini dengan organisasi. Jika aplikasi Anda mendukung akun di direktori organisasi dan akun Microsoft pribadi apa pun, ganti nilai ini dengan umum. Untuk membatasi dukungan pada akun Microsoft pribadi saja, ganti nilai ini dengan konsumen.
`Enter_the_Redirect_Uri_Here`	Ganti dengan http://localhost:3000.
`Enter_the_Graph_Endpoint_Here`	Instans Microsoft Graph API yang harus berkomunikasi dengan aplikasi. Untuk titik akhir Microsoft Graph API global, ganti kedua instans string ini dengan `https://graph.microsoft.com`. Untuk titik akhir dalam penyebaran cloud nasional, lihat Penyebaran cloud nasional dalam dokumentasi Microsoft Graph.

Untuk mengetahui informasi selengkapnya tentang opsi yang dapat dikonfigurasi yang tersedia, lihat Menginisialisasi aplikasi klien.

Buka berkas src/index.js dan tambahkan impor berikut:

import "bootstrap/dist/css/bootstrap.min.css";
import { PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";
import { msalConfig } from "./authConfig";

Di bawah impor dalam src/index.js buat PublicClientApplication instans menggunakan konfigurasi dari langkah 1.
```
const msalInstance = new PublicClientApplication(msalConfig);
```

Temukan komponen dalam src/index.js dan bungkus dengan komponenMsalProvider. Fungsi render Anda akan terlihat seperti ini:

ReactDOM.render(
    
        
            
        
    ,
    document.getElementById("root")
);

Memasukkan pengguna

Buat folder di src yang disebut komponen dan buat file di dalam folder ini yang bernama SignInButton.jsx. Tambahkan kode dari bagian berikut untuk memanggil info masuk menggunakan jendela popup atau dari pengalihan bingkai penuh:

Masuk menggunakan pop-up

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

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

function handleLogin(instance) {
    instance.loginPopup(loginRequest).catch(e => {
        console.error(e);
    });
}

/**
 * Renders a button which, when selected, will open a popup for login
 */
export const SignInButton = () => {
    const { instance } = useMsal();

    return (
        
    );
}

Masuk menggunakan pengalihan

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

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

function handleLogin(instance) {
    instance.loginRedirect(loginRequest).catch(e => {
        console.error(e);
    });
}

/**
 * Renders a button which, when selected, will redirect the page to the login prompt
 */
export const SignInButton = () => {
    const { instance } = useMsal();

    return (
        
    );
}

Menambahkan tombol masuk

Buat file lain di folder komponen bernama PageLayout.jsx dan tambahkan kode berikut untuk membuat komponen navbar yang akan berisi tombol masuk yang baru saja Anda buat:

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

/**
 * 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 ? 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:

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 (
        
    );
}

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 (
        
    );
}

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!
                :
                
            }
        
    );
};

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 ? 
                
                :
                
            }
        
    );
};

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 http://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:

Cara menggunakan REACT.STRICTMODE pada JavaScript

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:

kode javascript React JS React router-dom React-dom React render HTML React app React project