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
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
- Aktív előfizetéssel rendelkező Azure-fiók. Ha még nem rendelkezik ilyen fiókkal, hozzon létre egy fiókot ingyenes.
- Node.js
- Visual Studio 2022 vagy Visual Studio Code
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.
Jelentkezzen be a Microsoft Entra felügyeleti központba.
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.
Keresse meg Identitás>Alkalmazások>Alkalmazásregisztrációk, válassza a Új regisztrációlehetőséget.
Adjon meg egy név az alkalmazáshoz, például identity-client-spa.
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.
Válassza a Regisztráláslehetőséget.
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.
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:
- A kezelése területen válassza a Hitelesítésilehetőséget.
- A platformkonfigurációk lapon válassza a Platform hozzáadásalehetőséget, majd válassza SPA lehetőséget.
- Az Átirányítási URI-khoz adja meg a következőt:
http://localhost:3000
. - 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
Az IDE-ben nyissa meg a mintát tartalmazó projektmappát, ms-identity-docs-code-javascript/react-spa.
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.
A kiszolgáló elindításához futtassa a következő parancsokat a projektkönyvtárból:
npm install npm start
Másolja ki a terminálban megjelenő
https
URL-címet( példáulhttps://localhost:3000
), és illessze be egy böngészőbe. Javasoljuk, hogy privát vagy inkognitó böngésző munkamenetet használjon.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.
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.
Kijelentkezés az alkalmazásból
- Keresse meg a Kijelentkezés gombot a lap jobb felső sarkában, és jelölje ki.
- 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
rövid útmutató: ASP.NET Core webes API védelme a Microsoft identitásplatformjával
Ismerje meg többet a React SPA alapoktól történő létrehozásával a következő sorozat segítségével – Oktatóanyag: Felhasználók bejelentkeztetése és a Microsoft Graph hívása