자습서: React 단일 페이지 앱에서 로그인 및 로그아웃 기능 구성 요소 추가

기능적 구성 요소는 React 앱의 구성 요소입니다. 이 자습서에서는 기능적 구성 요소를 사용하여 React SPA(단일 페이지 앱)에서 로그인 및 로그아웃 환경을 빌드하는 방법을 보여 줍니다. useMsal 후크는 사용자 로그인을 허용하는 액세스 토큰을 검색하는 데 사용됩니다.

이 자습서에서:

• 애플리케이션에 구성 요소 추가
• 사용자의 프로필 정보를 표시하는 방법 만들기
• 로그인 및 로그아웃 환경을 표시하는 레이아웃 만들기
• 로그인 및 로그아웃 환경 추가

필수 조건

• 자습서: 인증을 위한 애플리케이션 준비의 필수 조건 및 단계를 완료합니다.

페이지 레이아웃 구성 요소 추가

1. PageLayout.jsx를 열고 다음 코드를 추가하여 페이지 레이아웃을 렌더링합니다. useIsAuthenticated 후크는 사용자가 현재 로그인되어 있는지 여부를 반환합니다.

   /*
    * 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. 파일을 저장합니다.

프로필 정보 표시

1. ProfileData.jsx를 열고 사용자 프로필 정보를 표시하는 구성 요소를 만드는 다음 코드를 추가합니다.

   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. 파일을 저장합니다.

로그인 환경 추가

1. SignInButton.jsx를 열고 팝업이나 리디렉션을 사용하여 사용자를 로그인시키는 단추를 만드는 다음 코드를 추가합니다.

   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. 파일을 저장합니다.

로그아웃 환경 추가

1. SignOutButton.jsx를 열고 팝업이나 리디렉션을 사용하여 사용자를 로그아웃시키는 단추를 만드는 다음 코드를 추가합니다.

   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. 파일을 저장합니다.

다음 단계

자습서: React 단일 페이지 앱에서 API 호출