Rövid útmutató: Jelentkezzen be a felhasználókkal, és szerezze be a hozzáférési tokent egy JavaScript SPA-ban a PKCE-t használó hitelesítési kódfolyamattal.

Üdvözöljük! Valószínűleg nem ez az a lap, amire számított. Amíg dolgozunk a javításon, ez a hivatkozás a megfelelő cikkre viszi:

Rövid útmutató: Felhasználók bejelentkeztetése egyoldalas alkalmazásokban (SPA) az engedélyezési kód folyamat segítségével a Proof Key for Code Exchange (PKCE) és JavaScript használatával.

Elnézést kérünk a kellemetlenségért, és köszönjük türelmét, amíg dolgozunk a probléma megoldásán.

Ebben a rövid útmutatóban letölthet és futtathat egy kódmintát, amely bemutatja, hogy egy JavaScript egyoldalas alkalmazás (SPA) hogyan tud bejelentkezni a felhasználókba, és hogyan hívhatja meg a Microsoft Graphot a Proof Key for Code Exchange (PKCE) hitelesítési kódfolyamatával. A kódminta bemutatja, hogyan kérhet le hozzáférési jogkivonatot a Microsoft Graph API vagy bármely webes API meghívásához.

Tekintse meg , hogyan működik a minta egy illusztrációhoz.

Előfeltételek

• Azure-előfizetés – Ingyenes Azure-előfizetés létrehozása
• Node.js
• Visual Studio Code vagy más kódszerkesztő

1. lépés: Az alkalmazás konfigurálása az Azure Portalon

A rövid útmutatóban szereplő kódminta működéséhez adjon hozzá egy átirányítási URI-thttp://localhost:3000/.

Csak csináld meg ezeket a változtatásokat nekem

Az alkalmazás konfigurálva van ezekkel az attribútumokkal.

2. lépés: A projekt letöltése

Futtasd a projektet webkiszolgálóval a Node.js használatával.

A kódminta letöltése

Feljegyzés

Enter_the_Supported_Account_Info_Here

3. lépés: Az alkalmazás konfigurálva van, és készen áll a futtatásra

Konfiguráltuk a projektet az alkalmazás tulajdonságainak értékeivel.

Futtassa a projektet egy webkiszolgálóval a Node.js haszná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. Menjen a http://localhost:3000/.

3. Válassza a Bejelentkezés lehetőséget a bejelentkezési folyamat elindításához, majd hívja meg a Microsoft Graph API-t.

   Az első bejelentkezéskor a rendszer kérni fogja, hogy adja meg hozzájárulását ahhoz, hogy az alkalmazás hozzáférhessen a profiljához, és bejelentkezhessen. Miután sikeresen bejelentkezett, a felhasználói profil adatai megjelennek a lapon.

További információ

A minta működése

MSAL.js

A MSAL.js könyvtár bejelentkezteti a felhasználókat, és kér jogkivonatokat, amelyek a Microsoft > Identitásplatform által védett API-hoz való hozzáféréshez szükségesek. A minta index.html fájlja a tárra mutató hivatkozást tartalmaz:

<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.0.0-beta.0/js/msal-browser.js" integrity=
"sha384-r7Qxfs6PYHyfoBR6zG62DGzptfLBxnREThAlcJyEfzJ4dq5rqExc1Xj3TPFE/9TH" crossorigin="anonymous"></script>

Ha Node.js telepítve van, a legújabb verziót a Node.js Csomagkezelő (npm) használatával töltheti le:

npm install @azure/msal-browser

Következő lépések

Az auth code flow-alkalmazás React használatával történő létrehozásához részletes részletes útmutatót a következő oktatóanyagban talál:

Oktatóanyag: React egyoldalas alkalmazás (SPA) felhasználók bejelentkezése