Felhasználók bejelentkezése minta Node.js webalkalmazásba

Ez az útmutató egy minta Node.js webalkalmazással mutatja be, hogyan adhat hozzá hitelesítést egy webalkalmazáshoz. A mintaalkalmazás lehetővé teszi, hogy a felhasználók bejelentkezhessenek és kijelentkezhessenek. A minta webalkalmazás a Csomóponthoz készült Microsoft Authentication Library (MSAL-csomópont) használatával kezeli a hitelesítést.

Ebben a cikkben a következő feladatokat hajtja végre:

• Webalkalmazás regisztrálása a Microsoft Entra felügyeleti központban.

• Bejelentkezési és bejelentkezési felhasználói folyamat létrehozása a Microsoft Entra Felügyeleti központban.

• A webalkalmazás társítása a felhasználói folyamattal.

• Frissítsen egy minta Node.js webalkalmazást a saját külső bérlői adataival.

• Futtassa és tesztelje a minta webalkalmazást.

Előfeltételek

• Visual Studio Code vagy más kódszerkesztő.
• Node.js.
• .NET 7.0 vagy újabb.
• Külső bérlő. Ha még nincs ilyenje, regisztráljon egy ingyenes próbaverzióra.

A webalkalmazás regisztrálása

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 a Webes lehetőség lehetőséget.
3. Az átirányítási URI-khoz írja be a következőt http://localhost:3000/auth/redirect:
4. Válassza a Konfigurálás lehetőséget a módosítások mentéséhez.

Alkalmazásügyfél titkos kód hozzáadása

Hozzon létre egy ügyfélkulcsot a regisztrált alkalmazáshoz. Az alkalmazás az ügyfél titkos kódjával igazolja identitását, amikor jogkivonatokat kér.

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 a Tanúsítványok és titkos kódok lehetőséget.
3. Válassza az Új titkos ügyfélkód lehetőséget.
4. A Leírás mezőbe írja be az ügyfél titkos kódjának leírását (például a ciam alkalmazás ügyfélkulcsát).
5. A Lejáratok csoportban válassza ki azt az időtartamot, amelyre érvényes a titkos kód (a szervezet biztonsági szabályai szerint), majd válassza a Hozzáadás lehetőséget.
6. Jegyezze fel a titkos kód értékét. Ezt az értéket egy későbbi lépésben fogja használni a konfigurációhoz. A titkos kulcs értéke nem jelenik meg újra, és semmilyen módon nem lesz lekérthető, miután eltávolodik a tanúsítványoktól és titkos kódoktól. Győződjön meg róla, hogy rögzíti.

API-engedélyek megadása

Mivel ez az alkalmazás bejelentkezik a felhasználókba, adjon hozzá delegált engedélyeket:

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.

A webalkalmazás 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 webalkalmazá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, é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 .zip fájlt , vagy klónozza a minta webalkalmazást a GitHubról az alábbi parancs futtatásával:

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

1. Nyisson meg egy konzolablakot, és váltson a Node.js mintaalkalmazást tartalmazó könyvtárra:

   cd 1-Authentication\5-sign-in-express\App
   

2. Futtassa a következő parancsokat az alkalmazásfüggőségek telepítéséhez:

   npm install
   

A minta webalkalmazás konfigurálása

1. A kódszerkesztőben nyissa meg az App\authConfig.js fájlt.

2. Keresse meg a helyőrzőt:

   • 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.
   • Enter_the_Client_Secret_Here és cserélje le a korábban másolt alkalmazás titkos kódértékére.

Minta webalkalmazás futtatása és tesztelése

Most már tesztelheti a minta Node.js webalkalmazást. El kell indítania a Node.js kiszolgálót, és hozzá kell férnie a böngészőben a következő címen http://localhost:3000: .

1. A terminálban futtassa a következő parancsot:

   npm start 
   

2. Nyissa meg a böngészőt, majd lépjen a következőre http://localhost:3000: A következő képernyőképhez hasonló oldalt kell látnia:

   

3. Miután az oldal betöltése befejeződött, válassza a Bejelentkezési hivatkozás lehetőséget. A rendszer kéri, hogy jelentkezzen be.

4. A bejelentkezési lapon írja be az e-mail-címét, válassza a Tovább lehetőséget, írja be a jelszavát, majd válassza a Bejelentkezés lehetőséget. Ha nincs fiókja, válassza a Nincs fiók lehetőséget ? Hozzon létre egy hivatkozást, amely elindítja a regisztrációs folyamatot.

5. Ha a regisztrációs lehetőséget választja, az e-mail kitöltése, az egyszeri pin-kód, az új jelszó és további fiókadatok kitöltése után befejezi a teljes regisztrációs folyamatot. Az alábbi képernyőképhez hasonló lap jelenik meg. Hasonló lap jelenik meg, ha a bejelentkezési lehetőséget választja.

   

6. A Kijelentkezés lehetőséget választva kijelentkeztetheti a felhasználót a webalkalmazásból, vagy a Microsoft Entra által visszaadott azonosító jogkivonat-jogcímek megtekintéséhez válassza a View ID token claims (Azonosító jogkivonat jogcímeinek megtekintése) lehetőséget.

Hogyan működik?

Amikor a felhasználók kiválasztják a Bejelentkezési hivatkozást, az alkalmazás hitelesítési kérést kezdeményez, és átirányítja a felhasználókat a Microsoft Entra Külső ID. A megjelenő bejelentkezési vagy regisztrációs oldalon, amint egy felhasználó sikeresen bejelentkezik vagy létrehoz egy fiókot, Microsoft Entra Külső ID egy azonosító jogkivonatot ad vissza az alkalmazásnak. Az alkalmazás ellenőrzi az azonosító jogkivonatát, beolvassa a jogcímeket, és egy biztonságos lapot ad vissza a felhasználóknak.

Amikor a felhasználók kiválasztják a Kijelentkezés hivatkozást, az alkalmazás törli a munkamenetet, és átirányítja a felhasználót Microsoft Entra Külső ID kijelentkezés végpontjára, hogy értesítést küldjön arról, hogy a felhasználó kijelentkezett.

Ha a futtatott mintához hasonló alkalmazást szeretne létrehozni, végezze el a bejelentkezési lépéseket a saját Node.js webalkalmazás-cikkben .

Kapcsolódó tartalom

• Új jelszó kérésének engedélyezése
• Az alapértelmezett arculat testreszabása
• Bejelentkezés konfigurálása a Google-ral
• Felhasználók bejelentkezése a Node.js webalkalmazásba