Megosztás a következőn keresztül:

Rövid útmutató: Jelentkezzen be a felhasználókba egy egyoldalas alkalmazásban (SPA), és hívja meg a Microsoft Graph API-t a React használatával

  • Cikk

Ez a rövid útmutató egy mintaként szolgáló React egyoldalas alkalmazást (SPA) használ, hogy bemutassa, hogyan jelentkezhetnek be a felhasználók a engedélyezési kód folyamattal, a Proof Key for Code Exchange (PKCE) ellenőrzőkulcs segítségével. A minta a Microsoft Authentication Library for JavaScript használatával kezeli a hitelesítést.

Előfeltételek

Az alkalmazás és a rekordazonosítók regisztrálása

A regisztráció befejezéséhez adja meg az alkalmazás nevét, adja meg a támogatott fióktípusokat, és adjon hozzá egy átirányítási URI-t. A regisztrációt követően az alkalmazás Áttekintés panel megjeleníti az alkalmazás forráskódjában szükséges azonosítókat.

  1. Jelentkezzen be a Microsoft Entra felügyeleti központba.

  2. Ha több bérlőhöz is hozzáfér, a felső menü Beállítások ikon segítségével válthat arra a bérlőre, amelyben regisztrálni szeretné az alkalmazást a Könyvtárak + előfizetések menüből.

  3. Keresse meg Identitás>Alkalmazások>Alkalmazásregisztrációk, válassza a Új regisztrációlehetőséget.

  4. Adjon meg egy név az alkalmazáshoz, például identity-client-spa.

  5. A Támogatott fióktípusokesetén válassza Csak a szervezeti címtárban lévő fiókoklehetőséget. A különböző fióktípusokkal kapcsolatos információkért válassza a Súgó lehetőséget.

  6. Válassza a Regisztráláslehetőséget.

    Képernyőkép, amely bemutatja, hogyan adhat meg nevet, és hogyan választhatja ki a fióktípust a Microsoft Entra Felügyeleti központban.

  7. A regisztráció befejezésekor megjelenik az alkalmazás Áttekintés panelje. Jegyezze fel a könyvtár (bérlő) azonosítóját és a alkalmazás (ügyfél) azonosítóját az alkalmazás forráskódjában.

    Képernyőkép, amely a Microsoft Entra Felügyeleti központ áttekintési lapján jeleníti meg az azonosító értékeket.

    Jegyzet

    A támogatott fióktípusok megváltoztathatók az útmutató alapján: Az alkalmazás által támogatott fiókok módosítása.

Platformátirányítási URI hozzáadása

Ha meg szeretné adni az alkalmazás típusát az alkalmazásregisztrációhoz, kövesse az alábbi lépéseket:

  1. A kezelése területen válassza a Hitelesítésilehetőséget.
  2. A platformkonfigurációk lapon válassza a Platform hozzáadásalehetőséget, majd válassza SPA lehetőséget.
  3. Az Átirányítási URI-khoz adja meg a következőt: http://localhost:3000.
  4. A módosítások mentéséhez válassza a Konfigurálás opciót.

A mintaalkalmazás klónozása vagy letöltése

A mintaalkalmazás beszerzéséhez klónozhatja a GitHubról, vagy letöltheti .zip fájlként.

  • A minta klónozásához nyisson meg egy parancssort, navigáljon arra a helyre, ahol létre szeretné hozni a projektet, és írja be a következő parancsot:

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

  • Töltse le a .zip fájlt. Csomagolja ki egy fájl elérési útvonalára, ahol a név hossza kevesebb, mint 260 karakter.

A projekt konfigurálása

  1. Az IDE-ben nyissa meg a mintát tartalmazó projektmappát, ms-identity-docs-code-javascript/react-spa.

  2. Nyissa meg src/authConfig.js, és frissítse a következő értékeket a felügyeleti központban korábban rögzített információkkal.

    /*
 * 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 – Az alkalmazás azonosítója, más néven az ügyfél. Cserélje ki az idézőjelben lévő szöveget a korábban rögzített alkalmazás (ügyfél) azonosító értékével.
    • authority – A hatóság egy URL-cím, amely egy könyvtárra utal, ahonnan az MSAL jogkivonatokat kérhet. Cserélje le a Enter_the_Tenant_Info_Here szöveget a korábban rögzített könyvtár (bérlő) azonosító értékre.
    • redirectUri – Az alkalmazás átirányítási URI-ja: . Szükség esetén cserélje le az idézőjelek szövegét a korábban rögzített átirányítási URI-ra.

Az alkalmazás futtatása és bejelentkezés

Futtassa a projektet webszerverrel a Node.jshasználatával.

  1. A kiszolgáló elindításához futtassa a következő parancsokat a projektkönyvtárból:

    npm install
npm start

  2. Másolja ki a terminálban megjelenő https URL-címet( például https://localhost:3000), és illessze be egy böngészőbe. Javasoljuk, hogy privát vagy inkognitó böngésző munkamenetet használjon.

  3. Kövesse a lépéseket, és adja meg a microsoftos fiókjával való bejelentkezéshez szükséges adatokat. A rendszer egy e-mail-címet kér, így egyszeri pin-kód küldhető Önnek. Amikor a rendszer kéri, adja meg a kódot.

  4. Az alkalmazás engedélyt kér, hogy fenntartsa a hozzáférést azokhoz az adatokhoz, amelyekhez hozzáférést adott, valamint hogy bejelentkezhessen, és elolvassa a profilját. Válassza Elfogadáslehetőséget. Megjelenik a következő képernyőkép, amely azt jelzi, hogy bejelentkezett az alkalmazásba, és a Microsoft Graph API-ból fért hozzá a profiladataihoz.

    Képernyőkép a JavaScript-alkalmazásról, amely az API-hívás eredményeit ábrázolja.

Kijelentkezés az alkalmazásból

  1. Keresse meg a Kijelentkezés gombot a lap jobb felső sarkában, és jelölje ki.
  2. A rendszer kéri, hogy válasszon ki egy fiókot, amelyből ki szeretne jelentkezni. Válassza ki a bejelentkezéshez használt fiókot.

Megjelenik egy üzenet, amely jelzi, hogy kijelentkezett. Most már bezárhatja a böngészőablakot.

Kapcsolódó tartalom