Oktatóanyag: Bejelentkezés hozzáadása és funkcionális összetevők kijelentkeztetés egy egyoldalas React-alkalmazásban
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
- Az oktatóanyag előfeltételeinek és lépéseinek elvégzése: Alkalmazás előkészítése hitelesítéshez.
A lapelrendezés összetevő hozzáadása
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} </> ); };
Mentse a fájlt.
Profiladatok megjelenítése
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> ); };
Mentse a fájlt.
A bejelentkezési felület hozzáadása
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> ); };
Mentse a fájlt.
A kijelentkezés élményének hozzáadása
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> ); };
Mentse a fájlt.