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

Rövid útmutató: Jelentkezzen be a felhasználókba, és szerezze be a hozzáférési jogkivonatot egy JavaScript SPA-ban a PKCE hitelesítési kódfolyamatával

  • Cikk

Ü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 bejelentkezése egyoldalas alkalmazásokba (SPA) az engedélyezési kód folyamatán keresztül a Code Exchange-hez készült Proof Key (PKCE) használatával 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

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 adja hozzá a következő átirányítási URI-thttp://localhost:3000/: .

Végezze el ezeket a módosításokat nekem

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

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

A projekt futtatása webkiszolgálóval a Node.js

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. Odamegy 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

Diagram showing the authorization code flow for a single-page application.

MSAL.js

A MSAL.js kódtár bejelentkezik a felhasználókba, és kéri a Microsoft > Identitásplatform által védett API eléréséhez használt jogkivonatokat. 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 ebben a rövid útmutatóban használt alkalmazás felépítésével kapcsolatos részletes útmutatóért tekintse meg az alábbi oktatóanyagot:

Oktatóanyag az MS Graph bejelentkezéséhez és meghívásához