Dela via

Självstudie: Lägga till inloggning och utloggning till ett React SPA för en extern klientorganisation

  • Artikel

Den här självstudien är den sista delen i en serie som visar hur du skapar ett React-program på en sida (SPA) och förbereder det för autentisering med hjälp av administrationscentret för Microsoft Entra. I del 3 av den här serien skapade du ett React SPA i Visual Studio Code och konfigurerade det för autentisering. Det här sista steget visar hur du lägger till inloggnings- och utloggningsfunktioner i appen.

I den här självstudien;

  • Skapa en sidlayout och lägg till inloggnings- och utloggningsupplevelsen
  • Ersätt standardfunktionen för att återge autentiserad information
  • Logga in och logga ut från programmet med hjälp av användarflödet

Förutsättningar

Ändra filnamn och lägg till funktion för att återge autentiserad information

Som standard körs programmet via en JavaScript-fil med namnet App.js. Det måste ändras till .jsx, vilket är ett tillägg som gör att en utvecklare kan skriva HTML i React.

  1. Kontrollera att App.js har bytt namn till App.jsx.

  2. Ersätt den befintliga koden med följande kodfragment:

     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;

Kör projektet och logga in

Alla nödvändiga kodfragment har lagts till, så programmet kan nu testas i en webbläsare.

  1. Programmet bör redan köras i terminalen. Annars kör du följande kommando för att starta appen.

    npm start

  2. Öppna en webbläsare och navigera till http://localhost:3000/ om du inte omdirigeras automatiskt.

  3. I den här självstudien väljer du alternativet Logga in med popup-fönster .

  4. När popup-fönstret visas med inloggningsalternativen väljer du det konto som du vill logga in med.

  5. Ett andra fönster kan visas som anger att en kod skickas till din e-postadress. Om detta händer väljer du Skicka kod. Öppna e-postmeddelandet från microsoft-kontoteamet för avsändaren och ange den sjusiffriga engångskoden. När du har angett väljer du Logga in.

  6. För Håll dig inloggad kan du välja Antingen Nej eller Ja.

  7. Appen ber om behörighet att logga in och komma åt data. Välj Acceptera för att fortsätta.

Logga ut från programmet

  1. Om du vill logga ut från programmet väljer du Logga ut i navigeringsfältet.
  2. Ett fönster visas där du frågar vilket konto du ska logga ut från.
  3. Vid lyckad utloggning visas ett sista fönster som uppmanar dig att stänga alla webbläsarfönster.

Se även