Tutorial: Menambahkan komponen fungsional masuk dan keluar di aplikasi halaman tunggal React

Komponen fungsi adalah blok penyusun aplikasi React. Tutorial ini menunjukkan bagaimana komponen fungsional dapat digunakan untuk membangun pengalaman masuk dan keluar di aplikasi satu halaman (SPA) React. Hook useMsal digunakan untuk mengambil token akses untuk memungkinkan pengguna masuk.

Dalam tutorial ini:

• Menambahkan komponen ke aplikasi
• Membuat cara menampilkan informasi profil pengguna
• Membuat tata letak yang menampilkan pengalaman masuk dan keluar
• Menambahkan pengalaman masuk dan keluar

Prasyarat

• Penyelesaian prasyarat dan langkah-langkah dalam Tutorial: Menyiapkan aplikasi untuk autentikasi.

Menambahkan komponen tata letak halaman

1. Buka PageLayout.jsx dan tambahkan kode berikut untuk merender tata letak halaman. Hook useIsAuthenticated mengembalikan apakah pengguna saat ini masuk atau tidak.

   /*
    * Copyright (c) Microsoft Corporation. All rights reserved.
    * Licensed under the MIT License.
    */
   
   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 or sign out button depending on whether or not a user is authenticated
    * @param props
    */
   export const PageLayout = (props) => {
     const isAuthenticated = useIsAuthenticated();
   
     return (
       <>
         <Navbar bg="primary" variant="dark" className="navbarStyle">
           <a className="navbar-brand" href="/">
             Microsoft Identity Platform
           </a>
           <div className="collapse navbar-collapse justify-content-end">
             {isAuthenticated ? <SignOutButton /> : <SignInButton />}
           </div>
         </Navbar>
         <br />
         <br />
         <h5>
           <center>
             Welcome to the Microsoft Authentication Library For JavaScript -
             React SPA Tutorial
           </center>
         </h5>
         <br />
         <br />
         {props.children}
       </>
     );
   };
   

2. Simpan file.

Tampilkan informasi profil

1. Buka ProfileData.jsx dan tambahkan kode berikut, yang membuat komponen yang menampilkan informasi profil pengguna:

   import React from "react";
   /**
    * Renders information about the user obtained from MS Graph 
    * @param props
    */
   export const ProfileData = (props) => {
     return (
       <div id="profile-div">
         <p>
           <strong>First Name: </strong> {props.graphData.givenName}
         </p>
         <p>
           <strong>Last Name: </strong> {props.graphData.surname}
         </p>
         <p>
           <strong>Email: </strong> {props.graphData.userPrincipalName}
         </p>
         <p>
           <strong>Id: </strong> {props.graphData.id}
         </p>
       </div>
     );
   };
   

2. Simpan file.

Menambahkan pengalaman masuk

1. Buka SignInButton.jsx dan tambahkan kode berikut, yang membuat tombol yang masuk ke pengguna menggunakan pop-up atau pengalihan.

   import React from "react";
   import { useMsal } from "@azure/msal-react";
   import { loginRequest } from "../authConfig";
   import DropdownButton from "react-bootstrap/DropdownButton";
   import Dropdown from "react-bootstrap/Dropdown";
   
   /**
    * Renders a drop down button with child buttons for logging in with a popup or redirect
    * Note the [useMsal] package 
    */
   
   export const SignInButton = () => {
     const { instance } = useMsal();
   
     const handleLogin = (loginType) => {
       if (loginType === "popup") {
         instance.loginPopup(loginRequest).catch((e) => {
           console.log(e);
         });
       } else if (loginType === "redirect") {
         instance.loginRedirect(loginRequest).catch((e) => {
           console.log(e);
         });
       }
     };
     return (
       <DropdownButton
         variant="secondary"
         className="ml-auto"
         drop="start"
         title="Sign In"
       >
         <Dropdown.Item as="button" onClick={() => handleLogin("popup")}>
           Sign in using Popup
         </Dropdown.Item>
         <Dropdown.Item as="button" onClick={() => handleLogin("redirect")}>
           Sign in using Redirect
         </Dropdown.Item>
       </DropdownButton>
     );
   };
   

2. Simpan file.

Menambahkan pengalaman keluar

1. Buka SignOutButton.jsx dan tambahkan kode berikut, yang membuat tombol yang mengeluarkan pengguna menggunakan pop-up atau pengalihan.

   import React from "react";
   import { useMsal } from "@azure/msal-react";
   import DropdownButton from "react-bootstrap/DropdownButton";
   import Dropdown from "react-bootstrap/Dropdown";
   
   /**
    * Renders a sign out button 
    */
   export const SignOutButton = () => {
     const { instance } = useMsal();
   
     const handleLogout = (logoutType) => {
       if (logoutType === "popup") {
         instance.logoutPopup({
           postLogoutRedirectUri: "/",
           mainWindowRedirectUri: "/",
         });
       } else if (logoutType === "redirect") {
         instance.logoutRedirect({
           postLogoutRedirectUri: "/",
         });
       }
     };
   
     return (
       <DropdownButton
         variant="secondary"
         className="ml-auto"
         drop="start"
         title="Sign Out"
       >
         <Dropdown.Item as="button" onClick={() => handleLogout("popup")}>
           Sign out using Popup
         </Dropdown.Item>
         <Dropdown.Item as="button" onClick={() => handleLogout("redirect")}>
           Sign out using Redirect
         </Dropdown.Item>
       </DropdownButton>
     );
   };
   

2. Simpan file.

Langkah berikutnya

Tutorial: Memanggil API dari aplikasi satu halaman React