Rychlý start: Přihlášení uživatelů do jednostránkové aplikace (SPA) a volání rozhraní Microsoft Graph API pomocí Reactu

  • Článek

V tomto rychlém startu se pomocí ukázkové jednostránkové aplikace React (SPA) dozvíte, jak se přihlásit uživatele pomocí toku autorizačního kódu s ověřovacím klíčem pro výměnu kódu (PKCE). Ukázka používá knihovnu Microsoft Authentication Library pro JavaScript ke zpracování ověřování.

Požadavky

Registrace identifikátorů aplikace a záznamů

K dokončení registrace zadejte název aplikace, zadejte podporované typy účtů a přidejte identifikátor URI přesměrování. Po registraci se v podokně Přehled aplikace zobrazí identifikátory potřebné ve zdrojovém kódu aplikace.

  1. Přihlaste se do Centra pro správu Microsoft Entra.

  2. Pokud máte přístup k více tenantům, pomocí ikony Nastavení v horní nabídce přepněte na tenanta, ve kterém chcete aplikaci zaregistrovat z nabídky Adresáře a předplatná.

  3. Přejděte na Aplikace> identit>Registrace aplikací vyberte Nová registrace.

  4. Zadejte název aplikace, například identity-client-spa.

  5. U podporovaných typů účtů vyberte Pouze účty v tomto organizačním adresáři. Pokud chcete získat informace o různých typech účtů, vyberte možnost Nápověda pro výběr .

  6. Vyberte Zaregistrovat.

    Snímek obrazovky, který ukazuje, jak zadat jméno a vybrat typ účtu v Centru pro správu Microsoft Entra

  7. Po dokončení registrace se zobrazí podokno Přehled aplikace. Poznamenejte si ID adresáře (tenanta) a ID aplikace (klienta), které se má použít ve zdrojovém kódu aplikace.

    Snímek obrazovky znázorňující hodnoty identifikátoru na stránce přehledu v Centru pro správu Microsoft Entra

    Poznámka:

    Podporované typy účtů je možné změnit odkazem na úpravu účtů podporovaných aplikací.

Přidání identifikátoru URI přesměrování platformy

Pokud chcete zadat typ aplikace pro registraci aplikace, postupujte takto:

  1. V části Spravovat vyberte Ověřování.
  2. Na stránce Konfigurace platformy vyberte Přidat platformu a pak vyberte možnost SPA.
  3. Pro identifikátory URI přesměrování zadejte http://localhost:3000.
  4. Výběrem možnosti Konfigurovat uložte změny.

Klonování nebo stažení ukázkové aplikace

Pokud chcete získat ukázkovou aplikaci, můžete ji buď naklonovat z GitHubu, nebo si ji stáhnout jako soubor .zip .

  • Pokud chcete ukázku naklonovat, otevřete příkazový řádek a přejděte do umístění, kam chcete projekt vytvořit, a zadejte následující příkaz:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git

  • Stáhněte soubor .zip. Extrahujte ho do cesty k souboru, kde délka názvu je menší než 260 znaků.

Konfigurace projektu

  1. V integrovaném vývojovém prostředí otevřete složku projektu ms-identity-docs-code-javascript/react-spa obsahující ukázku.

  2. Otevřete soubor src/authConfig.js a aktualizujte následující hodnoty s informacemi zaznamenanými dříve v Centru pro správu.

    /*
 * 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",
};
    • clientId – Identifikátor aplikace, označovaný také jako klient. Nahraďte text v uvozovkách hodnotou ID aplikace (klienta), která byla zaznamenána dříve.
    • authority – Autorita je adresa URL, která označuje adresář, ze kterého může knihovna MSAL požadovat tokeny. Nahraďte Enter_the_Tenant_Info_Herehodnotou ID adresáře (tenanta), která byla zaznamenána dříve.
    • redirectUri – Identifikátor URI přesměrování aplikace. V případě potřeby nahraďte text v uvozovkách identifikátorem URI přesměrování, který byl zaznamenán dříve.

Spuštění aplikace a přihlášení

Spusťte projekt s webovým serverem pomocí Node.js:

  1. Pokud chcete spustit server, spusťte v adresáři projektu následující příkazy:

    npm install
npm start

  2. https Zkopírujte adresu URL, která se zobrazí v terminálu, https://localhost:3000například a vložte ji do prohlížeče. Doporučujeme použít soukromou nebo anonymní relaci prohlížeče.

  3. Postupujte podle pokynů a zadejte potřebné podrobnosti pro přihlášení pomocí účtu Microsoft. Budete požádáni o e-mailovou adresu, aby vám bylo možné poslat jednorázové heslo. Po zobrazení výzvy zadejte kód.

  4. Aplikace požádá o oprávnění k údržbě přístupu k datům, ke kterým jste jim udělili přístup, a k přihlášení a čtení vašeho profilu. Zvolte Přijmout. Zobrazí se následující snímek obrazovky, který označuje, že jste se přihlásili k aplikaci a že jste z rozhraní Microsoft Graph API přistupovali k podrobnostem profilu.

    Snímek obrazovky javascriptové aplikace znázorňující výsledky volání rozhraní API

Odhlásit se z aplikace

  1. Najděte tlačítko Odhlásit se v pravém horním rohu stránky a vyberte ho.
  2. Zobrazí se výzva k výběru účtu, ze který se chcete odhlásit. Vyberte účet, který jste použili k přihlášení.

Zobrazí se zpráva s oznámením, že jste se odhlásili. Teď můžete okno prohlížeče zavřít.

Související obsah