Forgatókönyv: egyoldalas alkalmazásScenario: Single-page application

Ismerje meg az egyoldalas alkalmazások (SPA) létrehozásához szükséges tudnivalókat.Learn all you need to build a single-page application (SPA).

Első lépésekGetting started

Ha még nem tette meg, hozza létre első alkalmazását a JavaScript SPA gyors útmutatójának kitöltésével:If you haven't already, create your first app by completing the JavaScript SPA quickstart:

Rövid útmutató: egyoldalas alkalmazásQuickstart: Single-page application

ÁttekintésOverview

Számos modern webalkalmazás úgy van kialakítva, mint az ügyféloldali egyoldalas alkalmazások.Many modern web applications are built as client-side single-page applications. A fejlesztők a JavaScript vagy a SPA-keretrendszer, például a szögletes, a Vue és a reakciók használatával írhatják őket.Developers write them by using JavaScript or a SPA framework such as Angular, Vue, and React. Ezek az alkalmazások egy webböngészőben futnak, és különböző hitelesítési jellemzőkkel rendelkeznek, mint a hagyományos kiszolgálóoldali webes alkalmazások.These applications run on a web browser and have different authentication characteristics than traditional server-side web applications.

A Microsoft Identity platform két lehetőséget kínál, amelyek lehetővé teszik egyoldalas alkalmazások bejelentkezését a felhasználókba, és jogkivonatok beszerzését a háttérbeli szolgáltatások vagy webes API-k eléréséhez:The Microsoft identity platform provides two options to enable single-page applications to sign in users and get tokens to access back-end services or web APIs:

  • OAuth 2,0 engedélyezési kód folyamata (PKCE).OAuth 2.0 Authorization code flow (with PKCE). Az engedélyezési kód folyamatábrája lehetővé teszi, hogy az alkalmazás hitelesítő kódot cseréljen az azonosító jogkivonatok számára a védett API-k meghívásához szükséges hitelesített felhasználói és hozzáférési jogkivonatok megjelenítéséhez.The authorization code flow allows the application to exchange an authorization code for ID tokens to represent the authenticated user and Access tokens needed to call protected APIs. Emellett visszaadja azokat a frissítési jogkivonatokat, amelyek hosszú távú hozzáférést biztosítanak az erőforrásokhoz a felhasználók nevében anélkül, hogy ezekkel a felhasználókkal való interakcióra lenne szükség.In addition, it returns Refresh tokens that provide long-term access to resources on behalf of users without requiring interaction with those users. Ez az ajánlott módszer.This is the recommended approach.

Egyoldalas alkalmazások – hitelesítés

  • OAuth 2,0 implicit folyamat.OAuth 2.0 implicit flow. Az implicit engedélyezési folyamat lehetővé teszi, hogy az alkalmazás azonosítót és hozzáférési jogkivonatokat kapjon.The implicit grant flow allows the application to get ID and Access tokens. Az engedélyezési kód folyamatával ellentétben az implicit engedélyezési folyamat nem ad vissza frissítési jogkivonatot .Unlike the authorization code flow, implicit grant flow does not return a Refresh token .

Egyoldalas alkalmazások – implicit

Ez a hitelesítési folyamat nem tartalmaz olyan alkalmazási helyzeteket, amelyek platformfüggetlen JavaScript-keretrendszereket használnak, például az Electron-et és a reakciós Natívt.This authentication flow does not include application scenarios that use cross-platform JavaScript frameworks such as Electron and React-Native. További képességeket igényelnek a natív platformokkal való interakcióhoz.They require further capabilities for interaction with the native platforms.

SajátosságaiSpecifics

Ha ezt a forgatókönyvet szeretné engedélyezni az alkalmazásához, a következőkre lesz szüksége:To enable this scenario for your application, you need:

  • Az alkalmazás regisztrálása Azure Active Directory (Azure AD) szolgáltatással.Application registration with Azure Active Directory (Azure AD). A regisztrációs lépések eltérnek az implicit engedélyezési folyamat és az engedélyezési kód folyamata között.The registration steps differ between the implicit grant flow and authorization code flow.
  • Alkalmazás konfigurációja a regisztrált alkalmazás tulajdonságaival, például az alkalmazás azonosítójával.Application configuration with the registered application properties, such as the application ID.
  • A Microsoft Authentication Library for JavaScript (MSAL.js) használata a hitelesítési folyamat a bejelentkezéshez és a jogkivonatok beszerzéséhez.Using Microsoft Authentication Library for JavaScript (MSAL.js) to do the authentication flow to sign in and acquire tokens.

Ha még nem ismeri a OAuth 2,0 és az OpenID Connect szolgáltatást, vagy akár csak most ismerkedik a Microsoft Identity platformon, az alábbi cikkeknek magasnak kell lenniük az olvasási listán.If you're new to identity and access management (IAM) with OAuth 2.0 and OpenID Connect, or even just new to IAM on the Microsoft identity platform, the following set of articles should be high on your reading list.

Bár az első gyors útmutató vagy oktatóanyag elvégzése előtt nem szükséges az olvasás, a platform szerves részét képező témaköröket fedi le, és a velük való ismeretek segítenek az Ön útvonalán az összetettebb forgatókönyvek kialakítása során.Although not required reading before completing your first quickstart or tutorial, they cover topics integral to the platform, and familiarity with them will help you on your path as you build more complex scenarios.

Következő lépésekNext steps