Sdílet prostřednictvím

Kurz: Vytvoření jednostrákové aplikace React a jeho příprava na ověřování

  • Článek

Po dokončení registrace je možné vytvořit projekt React pomocí integrovaného vývojového prostředí (IDE). Tento kurz ukazuje, jak vytvořit jednostrákovou aplikaci React pomocí npm a vytvořit soubory potřebné k ověřování a autorizaci.

V tomto kurzu:

  • Vytvoření nového projektu React
  • Konfigurace nastavení pro aplikaci
  • Instalace balíčků identity a bootstrap
  • Přidání ověřovacího kódu do aplikace

Požadavky

  • Dokončení požadavků a kroků v kurzu: Registrace aplikace
  • I když je možné použít jakékoli integrované vývojové prostředí ( IDE), které podporují aplikace React, se pro účely tohoto kurzu používají následující integrované vývojové prostředí (IDE) sady Visual Studio. Dají se stáhnout ze stránky Stažené soubory . Pro uživatele macOS se doporučuje použít Visual Studio Code.
    • Visual Studio 2022
    • Visual Studio Code
  • Node.js.

Vytvoření nového projektu React

Pomocí následujících karet vytvořte projekt React v integrovaném vývojovém prostředí (IDE).

  1. Otevřete Visual Studio a pak vyberte Vytvořit nový projekt.

  2. Vyhledejte a zvolte samostatnou šablonu projektu React javascriptu a pak vyberte Další.

  3. Zadejte název projektu, například reactspalocal.

  4. Zvolte umístění projektu nebo přijměte výchozí možnost a pak vyberte Další.

  5. V části Další informace vyberte Vytvořit.

  6. Na panelu nástrojů vyberte Spustit bez ladění a spusťte aplikaci. Ve výchozím nastavení se otevře webový prohlížeč s adresou http://localhost:3000/ . Prohlížeč zůstane otevřený a znovu se vykreslí pro každou uloženou změnu.

  7. Vytvořte další složky a soubory, abyste dosáhli následující struktury složek:

    ├─── public
│   └─── index.html
└───src
    ├─── components
    │   └─── PageLayout.jsx
    │   └─── ProfileData.jsx
    │   └─── SignInButton.jsx
    │   └─── SignOutButton.jsx
    └── App.css
    └── App.jsx
    └── authConfig.js
    └── graph.js
    └── index.css
    └── index.js

Instalace balíčků identity a bootstrap

Aby bylo možné povolit ověřování uživatelů, musí být v projektu nainstalovány balíčky npm související s identitou. Pro stylování projektu se použije bootstrap .

  1. V Průzkumník řešení klikněte pravým tlačítkem na možnost npm a vyberte Nainstalovat nové balíčky npm.
  2. Vyhledejte @azure/MSAL-browser a pak vyberte Nainstalovat balíček. Opakujte pro @azure/MSAL-react.
  3. Vyhledejte a nainstalujte react-bootstrap.
  4. Vyberte Zavřít.

Další informace o těchto balíčcích najdete v dokumentaci v msal-browser a msal-react.

Vytvoření konfiguračního souboru ověřování

  1. Ve složce src otevřete authConfig.js a přidejte následující fragment kódu:

    /*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from "@azure/msal-browser";

/**
 * Configuration object to be passed to MSAL instance on creation. 
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */

export const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
        redirectUri: "http://localhost:3000",
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {	
        loggerOptions: {	
            loggerCallback: (level, message, containsPii) => {	
                if (containsPii) {		
                    return;		
                }		
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                    default:
                        return;
                }	
            }	
        }	
    }
};

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit: 
 * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
};

  2. Nahraďte následující hodnoty hodnotami z Centra pro správu Microsoft Entra.

    • clientId – Identifikátor aplikace, označovaný také jako klient. Nahraďte Enter_the_Application_Id_Here hodnotou ID aplikace (klienta), která byla zaznamenána dříve ze stránky přehledu registrované aplikace.
    • authority - Skládá se ze dvou částí:
      • Instance je koncový bod poskytovatele cloudu. Zkontrolujte různé dostupné koncové body v národních cloudech.
      • ID tenanta je identifikátor tenanta, ve kterém je aplikace zaregistrovaná. Nahraďte Enter_the_Tenant_Info_Herehodnotou ID adresáře (tenanta), která byla zaznamenána dříve ze stránky přehledu registrované aplikace.

  3. Uložte soubor.

Úprava index.js tak, aby zahrnovala zprostředkovatele ověřování

Všechny části aplikace, které vyžadují ověření, musí být zabalené do MsalProvider komponenty. Vytvoříte instanci PublicClientApplication a pak ji předáte .MsalProvider

  1. Ve složce src otevřete index.js a nahraďte obsah souboru následujícím fragmentem kódu, který použije msal balíčky a styl bootstrap:

    import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { msalConfig } from './authConfig';

// Bootstrap components
import 'bootstrap/dist/css/bootstrap.min.css';

const msalInstance = new PublicClientApplication(msalConfig);

const root = ReactDOM.createRoot(document.getElementById('root'));

/**
 * We recommend wrapping most or all of your components in the MsalProvider component. It's best to render the MsalProvider as close to the root as possible.
 */
 root.render(
  <React.StrictMode>
      <MsalProvider instance={msalInstance}>
          <App />
      </MsalProvider>
  </React.StrictMode>
);

  2. Uložte soubor.

Další kroky

Kurz: Vytvoření komponent pro přihlášení a odhlášení v jednostráňové aplikaci React