共用方式為

教學課程：將登入和登出新增至外部租用戶的 React SPA

  • 發行項

本教學課程是一系列的最後一個部分，示範如何使用 Microsoft Entra 系統管理中心來建置 React 單頁應用程式 (SPA)，並準備進行驗證。 在 本系列的第 3 部分 中，您已在 Visual Studio Code 中建立 React SPA，並將其設定以進行驗證。 最後一個步驟說明如何將登入和登出功能新增至應用程式。

在本教學課程中;

  • 建立頁面配置，並新增登入和登出體驗
  • 取代預設函數以轉譯已驗證的資訊
  • 使用使用者流程登入和登出應用程式

必要條件

變更檔名並新增函數以轉譯已驗證的資訊

根據預設，應用程式會透過稱為 App.js 的 JavaScript 檔案執行。 它必須變更為 .jsx，這是一個延伸模組，可讓開發人員在 React 中撰寫 HTML。

  1. 請確定 App.js 已重新命名為 App.jsx。

  2. 以下列程式碼片段取代現有的程式碼：

     import { MsalProvider, AuthenticatedTemplate, useMsal, UnauthenticatedTemplate } from '@azure/msal-react';
 import { Container, Button } from 'react-bootstrap';
 import { PageLayout } from './components/PageLayout';
 import { IdTokenData } from './components/DataDisplay';
 import { loginRequest } from './authConfig';

 import './styles/App.css';

 /**
  * Most applications will need to conditionally render certain components based on whether a user is signed in or not. 
  * msal-react provides 2 easy ways to do this. AuthenticatedTemplate and UnauthenticatedTemplate components will 
  * only render their children if a user is authenticated or unauthenticated, respectively. For more, visit:
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
  */
 const MainContent = () => {
     /**
      * useMsal is hook that returns the PublicClientApplication instance,
      * that tells you what msal is currently doing. For more, visit:
      * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/hooks.md
      */
     const { instance } = useMsal();
     const activeAccount = instance.getActiveAccount();

     const handleRedirect = () => {
         instance
             .loginRedirect({
                 ...loginRequest,
                 prompt: 'create',
             })
             .catch((error) => console.log(error));
     };
     return (
         <div className="App">
             <AuthenticatedTemplate>
                 {activeAccount ? (
                     <Container>
                         <IdTokenData idTokenClaims={activeAccount.idTokenClaims} />
                     </Container>
                 ) : null}
             </AuthenticatedTemplate>
             <UnauthenticatedTemplate>
                 <Button className="signInButton" onClick={handleRedirect} variant="primary">
                     Sign up
                 </Button>
             </UnauthenticatedTemplate>
         </div>
     );
 };


 /**
  * msal-react is built on the React context API and all parts of your app that require authentication must be 
  * wrapped in the MsalProvider component. You will first need to initialize an instance of PublicClientApplication 
  * then pass this to MsalProvider as a prop. All components underneath MsalProvider will have access to the 
  * PublicClientApplication instance via context as well as all hooks and components provided by msal-react. For more, visit:
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
  */
 const App = ({ instance }) => {
     return (
         <MsalProvider instance={instance}>
             <PageLayout>
                 <MainContent />
             </PageLayout>
         </MsalProvider>
     );
 };

 export default App;

執行您的專案並登入

所有必要的程式碼片段均已新增，因此現在可以在網頁瀏覽器中測試應用程式。

  1. 應用程式應該已在終端機中執行。 如果沒有，請執行下列命令來啟動您的應用程式。

    npm start

  2. 如果系統沒有自動將您重新導向，請開啟網頁瀏覽器並瀏覽至 http://localhost:3000/。

  3. 針對本教學課程的目的，請選擇 [使用快顯登入] 選項。

  4. 快顯視窗出現並顯示登入選項之後，請選取要登入的帳戶。

  5. 可能會顯示第二個視窗，指出有一個代碼將傳送到您的電子郵件位址。 如果發生這種情況，請選取 [傳送代碼]。 開啟來自寄件者 Microsoft 帳戶小組的電子郵件，然後輸入七位數的一次性代碼。 輸入之後，選取 [登入]。

  6. 對於 [保持登入]，您可以選取 [否] 或 [是]。

  7. 應用程式會要求登入和存取資料的權限。 選取 [接受] 以繼續操作。

登出應用程式

  1. 若要登出應用程式，請選取導覽列中的 [登出]。
  2. 此時會出現一個視窗，詢問要登出哪個帳戶。
  3. 成功登出時，會出現最後一個視窗，建議您關閉所有瀏覽器視窗。

另請參閱