チュートリアル: React シングル ページ アプリにサインインおよびサインアウト機能コンポーネントを追加する
機能コンポーネントは、React アプリの構成要素です。 このチュートリアルでは、React のシングルページ アプリ (SPA) でサインインとサインアウトのエクスペリエンスを構築ために、機能コンポーネントをどのように使用できるかを説明します。 useMsal
フックは、ユーザーのサインインを許可するアクセス トークンを取得するために使用します。
このチュートリアルの内容:
- アプリケーションへのコンポーネントの追加
- ユーザーのプロファイル情報を表示する方法を作成する
- サインインとサインアウトのエクスペリエンスを表示するレイアウトを作成する
- サインインとサインアウトのエクスペリエンスを追加する
前提条件
- 「チュートリアル: アプリケーションを認証用に準備する」の前提条件と手順を完了していること。
ページ レイアウト コンポーネントを追加する
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} </> ); };
ファイルを保存します。
プロファイル情報の表示
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> ); };
ファイルを保存します。
サインイン エクスペリエンスを追加する
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> ); };
ファイルを保存します。
サインアウト エクスペリエンスを追加する
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> ); };
ファイルを保存します。