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

Rövid útmutató: Felhasználók bejelentkezése minta webalkalmazásban

  • Cikk

Alkalmazandó: fehér pipával jelölt zöld kör. Munkaerő bérlők fehér pipával jelölt zöld kör. Külső bérlők (további információ)

Ebben a rövid útmutatóban egy minta webalkalmazás használatával mutatjuk be, hogyan jelentkezzen be a felhasználókkal, és hogyan hívhatja meg a Microsoft Graph API-t a vállalati bérlőjében. A mintaalkalmazás a Microsoft Authentication Library használatával kezeli a hitelesítést.

Mielőtt hozzákezdene, használja a Bérlőtípus kiválasztása a lap tetején található választógombot a bérlőtípus kiválasztásához. A Microsoft Entra ID két bérlőkonfigurációt biztosít, szervezeti és külsős. A munkaerő bérlői konfiguráció az alkalmazottak, a belső alkalmazások és más szervezeti erőforrások számára készült. A külső bérlő az ügyféloldali alkalmazásokhoz van tervezve.

Előfeltételek

  • Aktív előfizetéssel rendelkező Azure-fiók. Ha még nem rendelkezik ilyen fiókkal, hozzon létre egy fiókot ingyenes.
  • Ennek az Azure-fióknak rendelkeznie kell az alkalmazások kezeléséhez szükséges engedélyekkel. Az alábbi Microsoft Entra-szerepkörök bármelyike tartalmazza a szükséges engedélyeket:
    • Alkalmazásadminisztrátor
    • Alkalmazásfejlesztő
    • Felhőalkalmazás-rendszergazda
  • Munkaerőt igénybe vevő. Használhatja az alapértelmezett címtárat, vagy beállíthat egy új bérlőt.
  • Visual Studio Code vagy más kódszerkesztő.
  • Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban az alábbi konfigurációval. További információért lásd: Alkalmazás regisztrálása.
    • Név: identity-client-web-app
    • támogatott fióktípusok: csak ebben a szervezeti címtárban lévő fiókok (egybérlős)
    • Platformkonfiguráció: Web
    • Átirányítási URI: http://localhost:3000/auth/redirect
    • előtérbeli kijelentkezés URL-címe: https://localhost:5001/signout-callback-oidc
  • Node.js

Alkalmazás-ügyfél titkos kulcsának vagy tanúsítványának hozzáadása

Hozzon létre egy ügyfélkulcsot a regisztrált alkalmazáshoz. Az alkalmazás az ügyféltitokkal igazolja identitását, amikor tokeneket kér.

  1. Az Alkalmazásregisztrációk lapon válassza ki a létrehozott alkalmazást (például webalkalmazás ügyfélkódját) a Áttekintés lap megnyitásához.
  2. A kezelése területen válassza a Tanúsítványok & titkos kulcsok>Az ügyfél titkos kulcsainak>Új titkos ügyfélkódlehetőséget.
  3. A Leírás mezőben adja meg az ügyfélkulcs leírását (például webalkalmazás ügyfélkulcs).
  4. A Lejáratiterületen válassza ki a titkos kód érvényességének időtartamát (a szervezet biztonsági szabályai szerint), majd válassza a hozzáadása lehetőséget.
  5. A titkos kód értékénekrögzítése. Ezt az értéket egy későbbi lépésben konfigurálhatja. A titkos érték nem fog ismét megjelenni, és semmilyen módon nem lesz visszaszerezhető, miután eltávolodsz a Tanúsítványok és titkok menüpontból. Győződjön meg róla, hogy rögzíti.

Amikor hitelesítő adatokat hoz létre egy bizalmas ügyfélalkalmazáshoz:

  • A Microsoft azt javasolja, hogy az alkalmazás éles környezetbe való áthelyezése előtt használjon tanúsítványt az ügyfélkód helyett. További információért a tanúsítványok használatáról tekintse meg az utasításokat a következőben: Microsoft identitásplatform alkalmazás-hitelesítési tanúsítvány hitelesítő adatok.

  • Tesztelési célokra létrehozhat egy önaláírt tanúsítványt, és konfigurálhatja az alkalmazásokat a hitelesítésre. Az éles esetén Önnek kell vásárolnia egy hitelesítésszolgáltató által aláírt tanúsítványt, majd az Azure Key Vault használatával kezelheti a tanúsítvány hozzáférését és élettartamát.

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.

  • Töltse le a .zip fájlt, majd bontsa ki olyan elérési útra, ahol a név hossza 260 karakternél rövidebb, vagy klónozza az adattárat.

  • A minta klónozásához nyisson meg egy parancssort, navigáljon arra a helyre, ahol létre kívánja hozni a projektet, és írja be a következő parancsot:

    git clone https://github.com/Azure-Samples/ms-identity-node.git

A minta webalkalmazás konfigurálása

Ha a mintaalkalmazást szeretné használni a felhasználókkal való bejelentkezéshez, frissítse azt az önök alkalmazásának és bérlőjének adataival.

Az ms-identity-node mappában nyissa meg a App/.env fájlt, majd cserélje le a következő helyőrzőket:

Változó Leírás Példa vagy példák?
Enter_the_Cloud_Instance_Id_Here Az azure-felhőpéldány, amelyben az alkalmazás regisztrálva van https://login.microsoftonline.com/ (a záró perjelet is belefoglalva)
Enter_the_Tenant_Info_here Bérlőazonosító vagy elsődleges tartomány contoso.microsoft.com vagy aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here A regisztrált alkalmazás ügyfél-azonosítója 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here A regisztrált alkalmazás titkos ügyfélkódja A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here Az alkalmazás által hívott Microsoft Graph API felhőpéldány https://graph.microsoft.com/ (a záró perjelet is belefoglalva)
Enter_the_Express_Session_Secret_Here Az Express session cookie aláírásához használt véletlenszerű karakterlánc A1b-C2d_E3f.H4...

A módosítások elvégzése után a fájlnak az alábbi kódrészlethez hasonlóan kell kinéznie:

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

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

Konfigurálta a mintaalkalmazást. Folytathatja a futtatást és a tesztelést.

  1. A kiszolgáló elindításához futtassa a következő parancsokat a projektkönyvtárból:

    cd App
npm install
npm start

  2. Menjen a http://localhost:3000/.

  3. Válassza Bejelentkezés lehetőséget a bejelentkezési folyamat elindításához.

Az első bejelentkezéskor a rendszer kérni fogja, hogy adja meg hozzájárulását ahhoz, hogy az alkalmazás bejelentkezhessen, és hozzáférhessen a profiljához. Miután sikeresen bejelentkezett, a rendszer visszairányítja az alkalmazás kezdőlapjára.

Az alkalmazás működése

A minta egy webkiszolgálót üzemeltet a localhost 3000-s portján. Amikor egy webböngésző hozzáfér ehhez a címhez, az alkalmazás megjeleníti a kezdőlapot. Miután a felhasználó kiválasztotta Bejelentkezés, az alkalmazás átirányítja a böngészőt a Microsoft Entra bejelentkezési képernyőjére az MSAL Node-kódtár által létrehozott URL-címen keresztül. A felhasználó beleegyezése után a böngésző visszairányítja a felhasználót az alkalmazás kezdőlapjára, valamint egy azonosítót és hozzáférési jogkivonatot.

Kapcsolódó tartalom

Ebben a gyors útmutatóban egy minta webalkalmazás segítségével megmutatjuk, hogyan lehet bejelentkeztetni a felhasználókat a külső bérlőjében. A mintaalkalmazás a Microsoft Authentication Library használatával kezeli a hitelesítést.

Mielőtt hozzákezdene, használja a Bérlőtípus kiválasztása a lap tetején található választógombot a bérlőtípus kiválasztásához. A Microsoft Entra ID két bérlőkonfigurációt biztosít, szervezeti és külsős. A munkaerő bérlői konfiguráció az alkalmazottak, a belső alkalmazások és más szervezeti erőforrások számára készült. A külső bérlő az ügyféloldali alkalmazásokhoz van tervezve.

Előfeltételek

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éltitokkal igazolja identitását, amikor tokeneket kér.

  1. Az Alkalmazásregisztrációk lapon válassza ki a létrehozott alkalmazást (például webalkalmazás ügyfélkódját) a Áttekintés lap megnyitásához.
  2. A kezelése területen válassza a Tanúsítványok & titkos kulcsok>Az ügyfél titkos kulcsainak>Új titkos ügyfélkódlehetőséget.
  3. A Leírás mezőben adja meg az ügyfélkulcs leírását (például webalkalmazás ügyfélkulcs).
  4. A Lejáratiterületen válassza ki a titkos kód érvényességének időtartamát (a szervezet biztonsági szabályai szerint), majd válassza a hozzáadása lehetőséget.
  5. A titkos kód értékénekrögzítése. Ezt az értéket egy későbbi lépésben konfigurálhatja. A titkos érték nem fog ismét megjelenni, és semmilyen módon nem lesz visszaszerezhető, miután eltávolodsz a Tanúsítványok és titkok menüpontból. Győződjön meg róla, hogy rögzíti.

Amikor hitelesítő adatokat hoz létre egy bizalmas ügyfélalkalmazáshoz:

  • A Microsoft azt javasolja, hogy az alkalmazás éles környezetbe való áthelyezése előtt használjon tanúsítványt az ügyfélkód helyett. További információért a tanúsítványok használatáról tekintse meg az utasításokat a következőben: Microsoft identitásplatform alkalmazás-hitelesítési tanúsítvány hitelesítő adatok.

  • Tesztelési célokra létrehozhat egy önaláírt tanúsítványt, és konfigurálhatja az alkalmazásokat a hitelesítésre. Az éles esetén Önnek kell vásárolnia egy hitelesítésszolgáltató által aláírt tanúsítványt, majd az Azure Key Vault használatával kezelheti a tanúsítvány hozzáférését és élettartamát.

Miután regisztrálta az alkalmazást, hozzá lesz rendelve a User.Read engedély. Mivel azonban a bérlő egy külső bérlő, maguk az ügyfélfelhasználók nem járulhatnak hozzá ehhez az engedélyhez. Önnek, mint bérlői rendszergazdának hozzá kell adnia ezt az engedélyt a bérlő összes felhasználója nevében:

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

  2. A Kezelésterületen válassza API-engedélyeket.

    1. Válassza a(z) Rendszergazdai hozzájárulás megadása a(z) <bérlő számára>lehetőséget, majd válassza az Igenlehetőséget.
    2. Válassza a Frissítéslehetőséget, majd ellenőrizze, hogy a bérlőnév <számára megadott > megjelenik-e az engedély állapotként alatt.

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, navigáljon arra a helyre, ahol létre kívánja hozni a projektet, és írja be a következő parancsot:

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

  • Másik lehetőségként töltse le a mintafájlt .zip, majd bontsa ki egy fájl elérési útra, amelynek a neve rövidebb, mint 260 karakter.

Projektfüggőségek 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

Ha a mintaalkalmazást szeretné használni a felhasználókkal való bejelentkezéshez, frissítse azt az önök alkalmazásának és bérlőjének adataival.

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

  2. Keresse meg a helykitöltő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-t cserélje le a Címtár (bérlő) aldomainra. Ha például a bérlő elsődleges tartománya contoso.onmicrosoft.com, használja helyette a contoso. Ha nem rendelkezik a bérlő nevével, megtudhatja, hogyan olvasni 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(z) http://localhost:3000helyen a böngészőben.

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

    npm start

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

    Képernyőkép egy csomópont-webalkalmazásba való bejelentkezésről.

  3. A lap betöltése után válassza Bejelentkezés, amikor a rendszer kéri.

  4. A bejelentkezési lapon írja be a e-mail-címét, válassza a Következőlehetőséget, írja be a jelszó, majd válassza Bejelentkezéslehető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 a teljes regisztrációs folyamatot végrehajtja. Az alábbi képernyőképhez hasonló lap jelenik meg. Hasonló lap jelenik meg, ha a bejelentkezési lehetőséget választja.

    Képernyőkép a nézetazonosító token jogcímeiről.

  6. Válassza a Kijelentkezés lehetőséget, hogy kijelentkezzen a webalkalmazásból, vagy válassza a Microsoft Entra által visszaadott azonosítójogkivonat-jogcímek megtekintése lehetőséget.

Hogyan működik?

Amikor a felhasználók kiválasztják a Bejelentkezés hivatkozást, az alkalmazás hitelesítési kérelmet kezdeményez, és átirányítja a felhasználókat a Microsoft Entra külső azonosítójához. A megjelenő bejelentkezési vagy regisztrációs oldalon, amint egy felhasználó sikeresen bejelentkezik vagy létrehoz egy fiókot, a Microsoft Entra külső azonosítója egy azonosító jogkivonatot ad vissza az alkalmazásnak. Az alkalmazás ellenőrzi az azonosító tokent, kiolvassa az igényeket, és egy biztonságos oldalt biztosít a felhasználóknak.

Amikor a felhasználók kiválasztják a Kijelentkezés hivatkozást, az alkalmazás törli a munkamenetet, majd átirányítja a felhasználót a Microsoft Entra külső azonosító bejelentkezési 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 lépéseket Felhasználók bejelentkezése a saját Node.js webalkalmazásban cikkben.

Kapcsolódó tartalom