Udostępnij za pośrednictwem

Samouczek: dodawanie logowania i wylogowywanie się do aplikacji React SPA dla dzierżawy zewnętrznej

  • Artykuł

Ten samouczek jest ostatnią częścią serii, która demonstruje tworzenie jednostronicowej aplikacji React (SPA) i przygotowanie jej do uwierzytelniania przy użyciu centrum administracyjnego firmy Microsoft Entra. W części 3 tej serii utworzono aplikację React SPA w programie Visual Studio Code i skonfigurowano ją do uwierzytelniania. W tym ostatnim kroku pokazano, jak dodać funkcje logowania i wylogowania do aplikacji.

W tym samouczku;

  • Tworzenie układu strony i dodawanie środowiska logowania i wylogowywanie
  • Zastąp funkcję domyślną, aby renderować uwierzytelnione informacje
  • Zaloguj się i wyloguj się z aplikacji przy użyciu przepływu użytkownika

Wymagania wstępne

Zmienianie nazwy pliku i dodawanie funkcji w celu renderowania uwierzytelnionych informacji

Domyślnie aplikacja jest uruchamiana za pośrednictwem pliku JavaScript o nazwie App.js. Należy go zmienić na .jsx, czyli rozszerzenie, które umożliwia deweloperowi pisanie kodu HTML w rozwiązaniu React.

  1. Upewnij się , że nazwa App.js została zmieniona na App.jsx.

  2. Zastąp istniejący kod następującym fragmentem kodu:

     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;

Uruchamianie projektu i logowanie

Dodano wszystkie wymagane fragmenty kodu, dzięki czemu aplikacja może być teraz testowana w przeglądarce internetowej.

  1. Aplikacja powinna już działać w terminalu. Jeśli nie, uruchom następujące polecenie, aby uruchomić aplikację.

    npm start

  2. Otwórz przeglądarkę internetową i przejdź do http://localhost:3000/ adresu , jeśli nie nastąpi automatyczne przekierowanie.

  3. Na potrzeby tego samouczka wybierz opcję Zaloguj się przy użyciu okna podręcznego .

  4. Po pojawieniu się okna podręcznego z opcjami logowania wybierz konto, za pomocą którego chcesz się zalogować.

  5. Może pojawić się drugie okno wskazujące, że kod zostanie wysłany na Twój adres e-mail. W takim przypadku wybierz pozycję Wyślij kod. Otwórz wiadomość e-mail od zespołu ds. konta Microsoft nadawcy i wprowadź siedmiocyfrowy kod z jednym użyciem. Po wprowadzeniu wybierz pozycję Zaloguj.

  6. W obszarze Nie wylogowuj się możesz wybrać opcję Nie lub Tak.

  7. Aplikacja prosi o uprawnienie do logowania się i uzyskiwania dostępu do danych. Wybierz pozycję Akceptuj , aby kontynuować.

Wyloguj się z aplikacji

  1. Aby wylogować się z aplikacji, wybierz pozycję Wyloguj się na pasku nawigacyjnym.
  2. Zostanie wyświetlone okno z prośbą o wylogowanie się z konta.
  3. Po pomyślnym wylogowaniu zostanie wyświetlone końcowe okno z poradą, aby zamknąć wszystkie okna przeglądarki.

Zobacz też