Delen via

Zelfstudie: Functionele onderdelen voor aanmelden en afmelden toevoegen in een React-app met één pagina

  • Artikel

Functionele onderdelen zijn de bouwstenen van React-apps. Deze zelfstudie laat zien hoe functionele onderdelen kunnen worden gebruikt om de aanmeldings- en afmeldervaring te bouwen in een React-app met één pagina (SPA). De useMsal hook wordt gebruikt om een toegangstoken op te halen om gebruikersaanmelding toe te staan.

In deze zelfstudie:

  • Onderdelen toevoegen aan de toepassing
  • Een manier maken om de profielgegevens van de gebruiker weer te geven
  • Een indeling maken waarin de aanmeldings- en afmeldingservaring wordt weergegeven
  • De ervaringen voor aanmelden en afmelden toevoegen

Vereisten

Het onderdeel pagina-indeling toevoegen

  1. Open PageLayout.jsx en voeg de volgende code toe om de pagina-indeling weer te geven. De useIsAuthenticated-hook retourneert of een gebruiker momenteel is aangemeld.

    /*
 * 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. Sla het bestand op.

Profielgegevens weergeven

  1. Open ProfileData.jsx en voeg de volgende code toe, waarmee een onderdeel wordt gemaakt waarin de profielgegevens van de gebruiker worden weergegeven:

    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. Sla het bestand op.

De aanmeldingservaring toevoegen

  1. Open SignInButton.jsx en voeg de volgende code toe, waarmee een knop wordt gemaakt waarmee de gebruiker zich aanmeldt met behulp van een pop-up of omleiding.

    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. Sla het bestand op.

De afmeldingservaring toevoegen

  1. Open SignOutButton.jsx en voeg de volgende code toe, waarmee een knop wordt gemaakt waarmee de gebruiker wordt afgemeld met behulp van een pop-up of omleiding.

    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. Sla het bestand op.

Volgende stappen

Zelfstudie: Een API aanroepen vanuit een React-app met één pagina