Aracılığıyla paylaş

Öğretici: React tek sayfalı uygulamada oturum açma ve işlevsel bileşenleri kapatma

  • Makale

İşlevsel bileşenler React uygulamalarının yapı taşlarıdır. Bu öğreticide, react tek sayfalı uygulamada (SPA) oturum açma ve oturumu kapatma deneyimi oluşturmak için işlevsel bileşenlerin nasıl kullanılabileceğini gösterir. Kanca useMsal , kullanıcının oturum açmasına izin vermek üzere bir erişim belirteci almak için kullanılır.

Bu öğreticide:

  • Uygulamaya bileşen ekleme
  • Kullanıcının profil bilgilerini görüntülemenin bir yolunu oluşturma
  • Oturum açma ve oturumu kapatma deneyimini görüntüleyen bir düzen oluşturma
  • Oturum açma ve oturumu kapatma deneyimlerini ekleme

Önkoşullar

Sayfa düzeni bileşenini ekleme

  1. PageLayout.jsx dosyasını açın ve sayfa düzenini işlemek için aşağıdaki kodu ekleyin. useIsAuthenticated kancası, kullanıcının şu anda oturum açıp açmadığını döndürür.

    /*
 * 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. Dosyayı kaydedin.

Profil bilgilerini görüntüleme

  1. ProfileData.jsx dosyasını açın ve kullanıcının profil bilgilerini görüntüleyen bir bileşen oluşturan aşağıdaki kodu ekleyin:

    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. Dosyayı kaydedin.

Oturum açma deneyimini ekleme

  1. SignInButton.jsx dosyasını açın ve açılır pencere veya yeniden yönlendirme kullanarak kullanıcıda oturum açan bir düğme oluşturan aşağıdaki kodu ekleyin.

    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. Dosyayı kaydedin.

Oturumu kapatma deneyimini ekleme

  1. SignOutButton.jsx dosyasını açın ve açılır pencere veya yeniden yönlendirme kullanarak kullanıcının oturumunu kapatan bir düğme oluşturan aşağıdaki kodu ekleyin.

    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. Dosyayı kaydedin.

Sonraki adımlar

Öğretici: React tek sayfalı bir uygulamadan API çağırma