Share via

Felhasználók bejelentkezése egy egyoldalas minta vanília JavaScript-alkalmazásba

  • Cikk

Ez az útmutató egy minta vanília JavaScript (JS) egyoldalas alkalmazás (SPA) használatával mutatja be, hogyan adhat hozzá hitelesítést egy SPA-hoz. A SPA lehetővé teszi a felhasználók számára, hogy a külső bérlő használatával jelentkezzenek be és jelentkezzenek ki. A minta a Microsoft Authentication Library for JavaScript (MSAL.js) használatával kezeli a hitelesítést.

Előfeltételek

Az SPA regisztrálása a Microsoft Entra felügyeleti központban

Ahhoz, hogy az alkalmazás bejelentkezhessen a Microsoft Entra szolgáltatással, Microsoft Entra Külső ID tisztában kell lennie a létrehozott alkalmazással. Az alkalmazásregisztráció megbízhatósági kapcsolatot létesít az alkalmazás és a Microsoft Entra között. Amikor regisztrál egy alkalmazást, a külső azonosító létrehoz egy egyedi azonosítót, más néven egy alkalmazás (ügyfél) azonosítót, amely az alkalmazás azonosítására szolgál a hitelesítési kérelmek létrehozásakor.

Az alábbi lépések bemutatják, hogyan regisztrálhatja az alkalmazást a Microsoft Entra Felügyeleti központban:

  1. Jelentkezzen be a Microsoft Entra felügyeleti központba legalább alkalmazásfejlesztőként.

  2. Ha több bérlőhöz is rendelkezik hozzáféréssel, a felső menü Gépház ikonjával válthat a külső bérlőre a Címtárak + előfizetések menüből.

  3. Keresse meg az identitásalkalmazásokat>> Alkalmazásregisztrációk.

  4. Válassza az + Új regisztráció lehetőséget.

  5. A Megjelenő alkalmazás regisztrálása lapon;

    1. Adjon meg egy értelmes alkalmazásnevet, amely az alkalmazás felhasználói számára jelenik meg, például ciam-client-app.
    2. A Támogatott fióktípusok csoportban válassza a Csak ebben a szervezeti címtárban lévő Fiókok lehetőséget.

  6. Válassza ki a pénztárgépet.

  7. Az alkalmazás Áttekintés panelje a sikeres regisztrációkor jelenik meg. Jegyezze fel az alkalmazás forráskódjában használandó alkalmazás-(ügyfél-) azonosítót .

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és területen válassza a Hitelesítés lehetőséget.
  2. A Platformkonfigurációk lapon válassza a Platform hozzáadása, majd az Egyoldalas alkalmazás lehetőséget.
  3. Az átirányítási URI-khoz írja be a következőt http://localhost:3000:
  4. Válassza a Konfigurálás lehetőséget a módosítások mentéséhez.

API-engedélyek megadása

  1. A Alkalmazásregisztrációk lapon válassza ki a létrehozott alkalmazást (például a ciam-client-appot) az Áttekintés lap megnyitásához.

  2. A Kezelés területen válassza ki az API-engedélyeket.

  3. A Konfigurált engedélyek csoportban válassza az Engedély hozzáadása lehetőséget.

  4. Válassza a Microsoft API-k lapot.

  5. A Gyakran használt Microsoft API-k szakaszban válassza a Microsoft Graph lehetőséget.

  6. Válassza a Delegált engedélyek lehetőséget.

  7. Az Engedélyek kiválasztása szakaszban keresse meg és válassza ki az openid és offline_access engedélyeket is.

  8. Válassza az Engedélyek hozzáadása gombot.

  9. Ezen a ponton helyesen rendelte hozzá az engedélyeket. Mivel azonban a bérlő egy ügyfél bérlője, a felhasználói felhasználók maguk nem járulhatnak hozzá ezekhez az engedélyekhez. Önnek, mint rendszergazdának hozzá kell adnia ezeket az engedélyeket a bérlő összes felhasználója nevében:

    1. Válassza a rendszergazdai hozzájárulás megadása a bérlő nevének> megadását<, majd válassza az Igen lehetőséget.
    2. Válassza a Frissítés lehetőséget, majd ellenőrizze, hogy a bérlő nevének> megadása <mindkét hatókör állapotábanjelenik-e meg.

Felhasználói folyamat létrehozása

Kövesse az alábbi lépéseket egy olyan felhasználói folyamat létrehozásához, amellyel az ügyfél bejelentkezhet vagy regisztrálhat egy alkalmazásra.

  1. Jelentkezzen be a Microsoft Entra felügyeleti központba legalább külső azonosítójú felhasználói folyamatként Rendszergazda istratorként.

  2. Ha több bérlőhöz is rendelkezik hozzáféréssel, a felső menü Gépház ikonjával válthat a külső bérlőre a Címtárak + előfizetések menüből.

  3. Tallózással keresse meg az Identitás>külső identitásai>felhasználói folyamatokat.

  4. Válassza az + Új felhasználói folyamat lehetőséget.

  5. A Létrehozás lapon:

    1. Adja meg a felhasználói folyamat nevét, például a SignInSignUpSample nevet.

    2. Az Identitásszolgáltatók listában válassza az E-mail-fiókok lehetőséget. Ez az identitásszolgáltató lehetővé teszi, hogy a felhasználók az e-mail-címükkel jelentkezzenek be vagy jelentkezzenek be.

      Feljegyzés

      A további identitásszolgáltatók csak az összevonás beállítása után lesznek itt felsorolva. Ha például összevonást állít be a Google vagy a Facebook használatával, itt kiválaszthatja ezeket a további identitásszolgáltatókat.

    3. Az E-mail fiókok csoportban a két lehetőség közül választhat. Ebben az oktatóanyagban válassza a Jelszóval ellátott e-mail lehetőséget.

      • Jelszóval ellátott e-mail: Lehetővé teszi az új felhasználók számára, hogy bejelentkezési névként e-mail-címmel és jelszóval jelentkezzenek be az első tényező hitelesítő adataiként.
      • Egyszeri pin-kód küldése: Lehetővé teszi az új felhasználók számára, hogy bejelentkezési névként egy e-mail-címmel regisztráljanak és jelentkezzenek be, és az egyszeri pin-kód elküldése az első tényező hitelesítő adataiként. Ahhoz, hogy ez a beállítás elérhető legyen a felhasználói folyamat szintjén, engedélyezni kell az egyszeri pin-kód megadását a bérlői szinten (minden identitásszolgáltatónak>egyszeri pin-kód küldése).

    4. A Felhasználói attribútumok csoportban válassza ki azokat az attribútumokat, amelyeket a felhasználótól a regisztrációkor szeretne gyűjteni. A Továbbiak megjelenítése lehetőséget választva kiválaszthatja az ország/régió, a megjelenítendő név és az irányítószám attribútumait és jogcímeit. Kattintson az OK gombra. (A rendszer csak akkor kéri az attribútumok megadását, ha első alkalommal regisztrál.)

  6. Válassza a Létrehozás lehetőséget. Az új felhasználói folyamat megjelenik a Felhasználói folyamatok listában. Szükség esetén frissítse a lapot.

Az önkiszolgáló jelszó-visszaállítás engedélyezéséhez kövesse az Önkiszolgáló jelszó-visszaállítás engedélyezése című cikk lépéseit.

Az SPA társítása a felhasználói folyamattal

Bár számos alkalmazás társítható a felhasználói folyamathoz, egyetlen alkalmazás csak egy felhasználói folyamathoz társítható. A felhasználói folyamat lehetővé teszi a felhasználói élmény konfigurálását adott alkalmazásokhoz. Konfigurálhat például egy olyan felhasználói folyamatot, amely megköveteli, hogy a felhasználók jelentkezzenek be vagy regisztráljanak e-mail-címmel.

  1. Az oldalsáv menüjében válassza az Identitás lehetőséget.

  2. Válassza a Külső identitások, majd a Felhasználói folyamatok lehetőséget.

  3. A Felhasználói folyamatok lapon válassza ki a korábban létrehozott felhasználói folyamat nevét, például SignInSignUpSample.

  4. A Használat területen válassza az Alkalmazások lehetőséget.

  5. Válassza az Alkalmazás hozzáadása lehetőséget.

  6. Válassza ki az alkalmazást a listából( például ciam-client-app ), vagy használja a keresőmezőt az alkalmazás megkereséséhez, majd jelölje ki.

  7. Válassza a Kiválasztás lehetőséget

Minta SPA 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, és keresse meg a projektet, és írja be a következő parancsot:

    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • Töltse le a mintát. Bontsa ki egy fájl elérési útjára, ahol a név hossza kevesebb, mint 260 karakter.

A projekt függőségeinek telepítése

  1. Nyisson meg egy terminálablakot a mintaprojekt gyökérkönyvtárában, és írja be a következő kódrészletet a projektmappához való navigáláshoz:

    cd 1-Authentication\0-sign-in-vanillajs\App

  2. Telepítse a projektfüggőségeket:

    npm install

A minta SPA konfigurálása

  1. Nyissa meg App/public/authConfig.js és cserélje le a következőt a Microsoft Entra felügyeleti központból beszerzett értékekre:

    • Enter_the_Application_Id_Here és cserélje le a korábban regisztrált alkalmazás (ügyfél) azonosítójára.
    • Enter_the_Tenant_Subdomain_Here és cserélje le a Címtár (bérlő) altartományra. Ha például a bérlő elsődleges tartománya, contoso.onmicrosoft.comhasználja a következőt contoso: Ha nem rendelkezik a bérlő nevével, olvassa el a bérlő adatait.

  2. Mentse a fájlt.

A projekt futtatása és bejelentkezés

  1. Nyisson meg egy új terminált, és futtassa a következő parancsot az expressz webkiszolgáló elindításához.

    npm start

  2. Nyisson meg egy webböngészőt, majd navigáljon a következő helyre: http://localhost:3000/.

  3. Bejelentkezés a külső bérlőn regisztrált fiókkal.

  4. Miután bejelentkezett a megjelenítendő névre, megjelenik a Kijelentkezés gomb mellett, ahogyan az alábbi képernyőképen látható.

  5. A SPA ekkor megjelenik egy gomb, amely a Profiladatok kérése gombra mutat. Válassza ki a profiladatok megjelenítéséhez.

    Képernyőkép egy vanília JS SPA-ba való bejelentkezésről.

Kijelentkezés az alkalmazásból

  1. Ha ki szeretne jelentkezni az alkalmazásból, válassza a Kijelentkezés lehetőséget a navigációs sávon.
  2. Megjelenik egy ablak, amely megkérdezi, hogy melyik fiókból szeretne kijelentkezni.
  3. A sikeres kijelentkezés után megjelenik egy utolsó ablak, amely azt tanácsolja, hogy zárja be az összes böngészőablakot.

Kapcsolódó tartalom