Megosztás a következőn keresztül:

Oktatóanyag: Bejelentkezés hozzáadása és funkcionális összetevők kijelentkeztetés egy egyoldalas React-alkalmazásban

  • Cikk

A funkcionális összetevők a React-alkalmazások építőelemei. Ez az oktatóanyag bemutatja, hogyan használhatók funkcionális összetevők a bejelentkezés és a kijelentkezés élményének létrehozására egy React egyoldalas alkalmazásban (SPA). A useMsal horog egy hozzáférési jogkivonat lekérésére szolgál a felhasználói bejelentkezés engedélyezéséhez.

Ebben az oktatóanyagban:

  • Összetevők hozzáadása az alkalmazáshoz
  • A felhasználói profiladatok megjelenítésének módja
  • Olyan elrendezés létrehozása, amely megjeleníti a bejelentkezést és a kijelentkezés élményét
  • A bejelentkezés és a kijelentkezés élményének hozzáadása

Előfeltételek

A lapelrendezés összetevő hozzáadása

  1. Nyissa meg a PageLayout.jsx lapot, és adja hozzá a következő kódot a lapelrendezés megjelenítéséhez. A useIsAuthenticated horog azt adja vissza, hogy egy felhasználó jelenleg bejelentkezett-e.

    /*
 * 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. Mentse a fájlt.

Profiladatok megjelenítése

  1. Nyissa meg a ProfileData.jsx fájlt, és adja hozzá a következő kódot, amely létrehoz egy összetevőt, amely megjeleníti a felhasználó profiladatait:

    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. Mentse a fájlt.

A bejelentkezési felület hozzáadása

  1. Nyissa meg a SignInButton.jsx-et , és adja hozzá a következő kódot, amely létrehoz egy gombot, amely előugró vagy átirányítás használatával jelentkezik be a felhasználóba.

    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. Mentse a fájlt.

A kijelentkezés élményének hozzáadása

  1. Nyissa meg a SignOutButton.jsx-et , és adja hozzá a következő kódot, amely létrehoz egy gombot, amely előugró vagy átirányítás használatával kijelentkezteti a felhasználót.

    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. Mentse a fájlt.

Következő lépések

Oktatóanyag: API meghívása egy egyoldalas React-alkalmazásból