共用方式為


教學課程:在 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. 儲存檔案。

下一步