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

A következőkre vonatkozik: A munkaerő-bérlők 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ő
• 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ő.

csomópont

• Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
  • Alkalmazás (ügyfél) azonosítója
  • Címtár (ügyfél) azonosítója
• Adja hozzá a következő átirányítási URI-kat a webplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
  • Átirányítási URI: http://localhost:3000/auth/redirect
  • előtérbeli kijelentkezés URL-címe: https://localhost:5001/signout-callback-oidc
• Adjon hozzá egy titkos ügyfélkulcsot az alkalmazásregisztrációhoz. Ne használja ügyféltitkokat az éles alkalmazásokban. Használjon inkább tanúsítványokat vagy összevont hitelesítő adatokat. További információ: Hitelesítő adatok hozzáadása az alkalmazáshoz.
• Node.js

ASP.NET Core

• Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
  • Alkalmazás (ügyfél) azonosítója
  • Címtár (ügyfél) azonosítója
• Adja hozzá a következő átirányítási URI-kat a webplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
  • Átirányítási URI: https://localhost:5001/signin-oidc
  • előtérbeli kijelentkezés URL-címe: https://localhost:5001/signout-callback-oidc
• Adjon hozzá egy önaláírt tanúsítványt az alkalmazásregisztrációhoz. Ne használjon önaláírt tanúsítványokat az éles alkalmazásokban. Megbízható hitelesítésszolgáltatótól származó tanúsítványt vagy összevont hitelesítő adatokat használjon helyette. További információ: Hitelesítő adatok hozzáadása az alkalmazáshoz. Hozza létre a tanúsítványt a következő paranccsal:

  dotnet dev-certs https -ep ./certificate.crt --trust
  

• A .NET 8.0 SDK minimális követelménye

Python Flask

• Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
  • Alkalmazás (ügyfél) azonosítója
  • Címtár (ügyfél) azonosítója
• Adja hozzá a következő átirányítási URI-kat a webplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
  • Átirányítási URI: http://localhost:5000/getAToken
• Python 3 +
• Adjon hozzá egy titkos ügyfélkulcsot az alkalmazásregisztrációhoz. Ne használja ügyféltitkokat az éles alkalmazásokban. Használjon inkább tanúsítványokat vagy összevont hitelesítő adatokat. További információ: Hitelesítő adatok hozzáadása az alkalmazáshoz.

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.

csomópont

• 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
  

ASP.NET Core

• 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-docs-code-dotnet.git
  

Python Flask

• Töltse le a Python-kódmintát majd bontsa ki egy fájl elérési útjára, ahol a név hossza kevesebb, mint 260 karakter, 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-docs-code-python/

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.

csomópont

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

ASP.NET Core

1. Nyissa meg az IDE-ben az ms-identity-docs-code-dotnet\web-app-aspnet nevű projektmappát, amely tartalmazza a mintát.

2. Nyissa meg appsettings.json, és cserélje le a fájl tartalmát a következő kódrészletre;

   {
   "AzureAd": {
     "Instance": "https://login.microsoftonline.com/",
     "TenantId": "Enter the tenant ID obtained from the Microsoft Entra admin center",
     "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
     "ClientCredentials": [
       {
         "SourceType": "StoreWithThumbprint",
         "CertificateStorePath": "CurrentUser/My",
         "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
       }   
     ],
     "CallbackPath": "/signin-oidc"
   },
     "DownstreamApis": {
       "MicrosoftGraph" :{
         "BaseUrl": "https://graph.microsoft.com/v1.0/",
         "RelativePath": "me",
         "Scopes": [ 
           "user.read" 
         ]
      }
     },
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*"
   }
   

   • TenantId – Annak a bérlőnek az azonosítója, amelyben az alkalmazás regisztrálva van. Cserélje le az idézőjelek közötti szöveget a regisztrált alkalmazás áttekintő oldaláról korábban feljegyzett Directory (tenant) ID-ra.
   • ClientId – Az alkalmazás azonosítója, más néven az ügyfél. Cserélje le az idézőjelek szövegét a regisztrált alkalmazás áttekintési oldaláról korábban rögzített Application (client) ID értékre.
   • ClientCertificates – Az alkalmazás egy önaláírt tanúsítványt használ a hitelesítéshez. Cserélje le a CertificateThumbprint szövegét a korábban rögzített tanúsítvány ujjlenyomatára.

Python Flask

1. Nyissa meg az IDE-ben letöltött alkalmazást, és keresse meg a mintaalkalmazás gyökérmappáját.

   cd flask-web-app
   

2. Hozzon létre egy .env fájlt a projekt gyökérmappájában a .env.sample.entra-id fájl útmutatásai alapján.

   # The following variables are required for the app to run.
   CLIENT_ID=<Enter_your_client_id>
   CLIENT_SECRET=<Enter_your_client_secret>
   AUTHORITY=<Enter_your_authority_url>
   

   • Állítsa be a CLIENT_ID értékét a regisztrált alkalmazás áttekintési oldalán elérhető alkalmazás (ügyfél) azonosító értékre.
   • Állítsa a CLIENT_SECRET értékét a Tanúsítványok & Titkos kódok a regisztrált alkalmazáshoz létrehozott ügyféltitkra.
   • Állítsa be a AUTHORITY értékét https://login.microsoftonline.com/<TENANT_GUID>-re. A címtár (bérlő) azonosítója az alkalmazásregisztráció áttekintési oldalán érhető el.

   A környezeti változókra app_config.pyhivatkoznak, és egy külön .env fájlban tartják őket, hogy ne legyenek a forráskontrollban. A megadott .gitignore fájl megakadályozza a .env fájl beadását.

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

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

csomópont

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.

ASP.NET Core

1. A projektkönyvtárban a terminál használatával írja be a következő parancsokat:

   cd ms-identity-docs-code-dotnet/web-app-aspnet
   dotnet run
   

2. Másolja ki a terminálban megjelenő https URL-címet( például https://localhost:5001), és illessze be egy böngészőbe. Javasoljuk, hogy privát vagy inkognitó böngésző munkamenetet használjon.

3. Kövesse a lépéseket, és adja meg a microsoftos fiókjával való bejelentkezéshez szükséges adatokat. A rendszer kéri, hogy adjon meg egy e-mail-címet, hogy egyszeri pin-kód legyen elküldve Önnek. Amikor a rendszer kéri, adja meg a kódot.

4. Az alkalmazás engedélyt kér, hogy fenntartsa a hozzáférést azokhoz az adatokhoz, amelyekhez hozzáférést adott, valamint hogy bejelentkezhessen, és elolvassa a profilját. Válassza Elfogadáslehetőséget. Ekkor megjelenik a következő képernyőkép. Ez azt jelzi, hogy bejelentkezett az alkalmazásba, és a Profil adatait a Microsoft Graph API-ból tekinti meg.

   

Kijelentkezés az alkalmazásból

1. Keresse meg a Kijelentkezés hivatkozást a lap jobb felső sarkában, és jelölje ki.
2. A rendszer kéri, hogy válasszon ki egy fiókot, amelyből ki szeretne jelentkezni. Válassza ki a bejelentkezéshez használt fiókot.
3. Megjelenik egy üzenet, amely jelzi, hogy kijelentkezett. Most már bezárhatja a böngészőablakot.

Python Flask

1. Hozzon létre egy virtuális környezetet az alkalmazáshoz:

   • Windows esetén futtassa a következő parancsokat:

   py -m venv .venv
   .venv\scripts\activate
   

   • MacOS/Linux esetén futtassa a következő parancsokat:

   python3 -m venv .venv
   source .venv/bin/activate
   

2. Telepítse a szükséges elemeket a pipsegítségével:

   pip install -r requirements.txt
   

3. Futtassa az alkalmazást a parancssorból. Győződjön meg arról, hogy az alkalmazás ugyanazon a porton fut, mint a korábban konfigurált átirányítási URI.

   flask run --debug --host=localhost --port=5000
   

4. Másolja ki a terminálban megjelenő HTTPS URL-címet, például https://localhost:5000, és illessze be egy böngészőbe. Javasoljuk, hogy privát vagy inkognitó böngésző munkamenetet használjon.

5. Kövesse a lépéseket, és adja meg a microsoftos fiókjával való bejelentkezéshez szükséges adatokat. A rendszer kéri, hogy adjon meg egy e-mail-címet és jelszót a bejelentkezéshez.

6. Az alkalmazás engedélyt kér az ön által engedélyezett adatokhoz való hozzáférés fenntartására, valamint a bejelentkezésre, majd a profil olvasására a képernyőképen látható módon. Válassza Elfogadáslehetőséget.

   

7. Megjelenik a következő képernyőkép, amely azt jelzi, hogy sikeresen bejelentkezett az alkalmazásba.

Az alkalmazás működése

Az alábbi ábra a mintaalkalmazás működését mutatja be:

1. Az alkalmazás a identity csomag-t használja, hogy hozzáférési tokent szerezzen a Microsoft identitásplatformjáról. Ez a csomag a Pythonhoz készült Microsoft Authentication Libraryre (MSAL) épül, hogy egyszerűbbé tegye a hitelesítést és az engedélyezést a webalkalmazásokban.

2. Az előző lépésben beszerzett hozzáférési jogkivonatot tulajdonosi jogkivonatként használjuk a felhasználó hitelesítésére a Microsoft Graph API meghívásakor.

Kapcsolódó tartalom

csomópont

• Megtudhatja, hogyan hozhat létre Node.js webalkalmazást, amely bejelentkezik a felhasználókba, és meghívja a Microsoft Graph API-t a oktatóanyagban: Bejelentkezés a felhasználókba és jogkivonat beszerzése a Microsoft Graphhoz egy Node.js & Express-webalkalmazásban.

ASP.NET Core

• Tanuljon meg egy ASP.NET webalkalmazás fejlesztésével a sorozat oktatóanyag alapján: Alkalmazás regisztrálása a Microsoft identitásplatformon.
• Gyors útmutató: ASP.NET Core webes API védelme a Microsoft identitásplatformjával.
• Gyors útmutató: ASP.NET-webalkalmazás üzembe helyezése az Azure App Service

Python Flask

• Megtudhatja, hogyan hozhat létre olyan Python-webalkalmazást, amely bejelentkezteti a felhasználókat, és hív meg egy védett webes API-t. Oktatóanyag: A felhasználókat bejelentkeztető webalkalmazás.

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

• 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ő
• Külső bérlő. A létrehozáshoz válasszon az alábbi módszerek közül:
  • A Microsoft Entra Külső azonosító bővítmény használatával állítson be egy külső bérlőt közvetlenül a Visual Studio Code-ban. (ajánlott)
  • Hozzon létre egy új külső bérlőt a Microsoft Entra Felügyeleti Központban.
• Felhasználói folyamat. További információ: önkiszolgáló regisztrációs felhasználói folyamatok létrehozása külső bérlőkben lévő alkalmazásokhoz. Ez a felhasználói folyamat több alkalmazáshoz is használható.
• Visual Studio Code vagy más kódszerkesztő.

csomópont

• Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
  • Alkalmazás (ügyfél) azonosítója
  • Címtár (ügyfél) azonosítója
• Adja hozzá a következő átirányítási URI-kat a webplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
  • Átirányítási URI: http://localhost:3000/auth/redirect
  • előtérbeli kijelentkezés URL-címe: https://localhost:5001/signout-callback-oidc
• Adjon hozzá egy titkos ügyfélkulcsot az alkalmazásregisztrációhoz. Ne használja ügyféltitkokat az éles alkalmazásokban. Használjon inkább tanúsítványokat vagy összevont hitelesítő adatokat. További információ: Hitelesítő adatok hozzáadása az alkalmazáshoz.
• Alkalmazás hozzáadása a felhasználói folyamathoz
• Node.js

ASP.NET Core

• Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
  • Alkalmazás (ügyfél) azonosítója
  • Címtár (ügyfél) azonosítója
• Adja hozzá a következő átirányítási URI-kat a webplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
  • Átirányítási URI: https://localhost:5001/signin-oidc
  • előtérbeli kijelentkezés URL-címe: https://localhost:5001/signout-callback-oidc
• Adjon hozzá egy titkos ügyfélkulcsot az alkalmazásregisztrációhoz. Ne használja ügyféltitkokat az éles alkalmazásokban. Használjon inkább tanúsítványokat vagy összevont hitelesítő adatokat. További információ: Hitelesítő adatok hozzáadása az alkalmazáshoz.
• Alkalmazás hozzáadása a felhasználói folyamathoz
• A .NET 8.0 SDK minimális verziója.

Python Django

• Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
  • Alkalmazás (ügyfél) azonosítója
  • Címtár (ügyfél) azonosítója
• Adja hozzá a következő átirányítási URI-kat a webplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
  • Átirányítási URI: http://localhost:5000/getAToken
• Alkalmazás hozzáadása a felhasználói folyamathoz
• Python 3 +
• Adjon hozzá egy titkos ügyfélkulcsot az alkalmazásregisztrációhoz. Ne használja ügyféltitkokat az éles alkalmazásokban. Használjon inkább tanúsítványokat vagy összevont hitelesítő adatokat. További információ: Hitelesítő adatok hozzáadása az alkalmazáshoz.

Python Flask

• Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
  • Alkalmazás (ügyfél) azonosítója
  • Címtár (ügyfél) azonosítója
• Adja hozzá a következő átirányítási URI-kat a webplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
  • Átirányítási URI: http://localhost:5000/getAToken
• Alkalmazás hozzáadása a felhasználói folyamathoz
• Python 3 +
• Adjon hozzá egy titkos ügyfélkulcsot az alkalmazásregisztrációhoz. Ne használja ügyféltitkokat az éles alkalmazásokban. Használjon inkább tanúsítványokat vagy összevont hitelesítő adatokat. További információ: Hitelesítő adatok hozzáadása az alkalmazáshoz.

Minta webalkalmazás klónozása vagy letöltése

csomópont

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
   

ASP.NET Core

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-dotnet-tutorial.git
  

• Töltse le a .zip fájlt. Csomagolja ki egy fájl elérési útvonalára, ahol a név hossza kevesebb, mint 260 karakter.

Python Django

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-docs-code-python.git
  

• Töltse le a .zip fájlt. Csomagolja ki egy fájl elérési útvonalára, ahol a név hossza kevesebb, mint 260 karakter.

Projektfüggőségek telepítése

1. Nyisson meg egy konzolablakot, és váltson a Flask-minta webalkalmazást tartalmazó könyvtárra:

   cd django-web-app
   

2. Virtuális környezet beállítása:

   • Windows esetén futtassa a következő parancsokat:

   py -m venv .venv
   .venv\scripts\activate
   

   • MacOS/Linux esetén futtassa a következő parancsokat:

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Alkalmazásfüggőségek telepítéséhez futtassa a következő parancsokat:

   python3 -m pip install -r requirements.txt
   

Python Flask

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-docs-code-python.git
  

• Töltse le a .zip fájlt. Csomagolja ki egy fájl elérési útvonalára, ahol a név hossza kevesebb, mint 260 karakter.

Projektfüggőségek telepítése

1. Nyisson meg egy konzolablakot, és váltson a Flask-minta webalkalmazást tartalmazó könyvtárra:

   cd flask-web-app
   

2. Virtuális környezet beállítása:

   • Windows esetén futtassa a következő parancsokat:

   py -m venv .venv
   .venv\scripts\activate
   

   • MacOS/Linux esetén futtassa a következő parancsokat:

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Alkalmazásfüggőségek telepítéséhez futtassa a következő parancsokat:

   python3 -m pip install -r requirements.txt
   

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.

csomópont

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.

ASP.NET Core

1. Lépjen a ASP.NET Core-mintaalkalmazást tartalmazó gyökérkönyvtárra:

   cd 1-Authentication\1-sign-in-aspnet-core-mvc
   

2. Nyissa meg a appsettings.json fájlt.

3. A Authoritykeresse meg a Enter_the_Tenant_Subdomain_Here elemet, és cserélje ki a bérlő saját altartományára. Például, ha a bérlő elsődleges tartománya caseyjensen@onmicrosoft.com, akkor a beírandó érték casyjensen.

4. Keresse meg a Enter_the_Application_Id_Here értéket, és cserélje le a Microsoft Entra Felügyeleti központban regisztrált alkalmazás alkalmazásazonosítójára (clientId).

5. Cserélje le Enter_the_Client_Secret_Here a beállított ügyfél titkos kódértékére.

Python Django

1. Nyissa meg a projektfájlokat a Visual Studio Code-on vagy a használt szerkesztőben.

2. Hozzon létre egy .env fájlt a projekt gyökérmappájában a .env.sample.external-id fájl használatával útmutatóként.

3. Az .env fájlban adja meg a következő környezeti változókat:

   1. CLIENT_ID, amely a korábban regisztrált alkalmazás (ügyfél) azonosítója.
   2. CLIENT_SECRET, amely az alkalmazás titkos kódjának korábban másolt értéke.
   3. AUTHORITY, amely egy token hatóságot azonosító URL-cím. A következő formátumú legyen: https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com. Cserélje le a aldomén-t a Címtár (bérlő) aldoménra. Ha például a bérlő elsődleges tartománya contoso.onmicrosoft.com, használja helyette a contoso. Ha nincs bérlői altartománya, megtudhatja, hogyan elolvasni a bérlő adatait.
   4. REDIRECT_URI, amelynek hasonlónak kell lennie a korábban regisztrált átirányítási URI-hoz, meg kell egyeznie a konfigurációval.

Python Flask

1. Nyissa meg a projektfájlokat a Visual Studio Code-on vagy a használt szerkesztőben.

2. Hozzon létre egy .env fájlt a projekt gyökérmappájában a .env.sample.external-id fájl használatával útmutatóként.

3. Az .env fájlban adja meg a következő környezeti változókat:

   • CLIENT_ID, amely a korábban regisztrált alkalmazás (ügyfél) azonosítója.
   • CLIENT_SECRET, amely az alkalmazás titkos kódjának korábban másolt értéke.
   • AUTHORITY, amely egy token hatóságot azonosító URL-cím. A következő formátumú legyen: https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com. Cserélje le a aldomén-t a Címtár (bérlő) aldoménra. Ha például a bérlő elsődleges tartománya contoso.onmicrosoft.com, használja helyette a contoso. Ha nincs bérlői altartománya, megtudhatja, hogyan elolvasni a bérlő adatait.

4. Ellenőrizze, hogy az átirányítási URI megfelelően van-e konfigurálva. A korábban regisztrált átirányítási URI-nak meg kell egyeznie a konfigurációval. Ez a minta alapértelmezés szerint az átirányítási URI elérési útját /getAToken-ra állítja be. Ez a konfiguráció a app_config.py fájlban található, mint: REDIRECT_PATH.

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

csomópont

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:

   

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.

   

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.

ASP.NET Core

1. A rendszerhéjból vagy a parancssorból hajtsa végre a következő parancsokat:

   dotnet run
   

2. Nyissa meg a webböngészőt, majd lépjen a https://localhost:7274oldalra.

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

4. Miután bejelentkezett, a megjelenített név az alábbi képernyőképen látható módon a Kijelentkezés gomb mellett jelenik meg.

   

5. Ha ki szeretne jelentkezni az alkalmazásból, válassza a Kijelentkezés gombot.

Python Django

Futtassa az alkalmazást, hogy megnézhesse, hogyan zajlik a bejelentkezési élmény működés közben.

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

   python manage.py runserver localhost:5000                                             
   

   A választott portszámot használhatja.

2. Nyissa meg a böngészőt, majd lépjen a(z) http://localhost:5000oldalra. Az alábbi képernyőképhez hasonló lapnak kell megjelennie:

   

3. A lap betöltése után válassza Bejelentkezés hivatkozást. A rendszer kéri, hogy jelentkezzen be.

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, végighalad a regisztrációs folyamaton. Töltse ki az e-mail-címét, az egyszeri pin-kódját, az új jelszót és további fiókadatokat a teljes regisztrációs folyamat befejezéséhez.

6. A bejelentkezés vagy a regisztráció után a rendszer visszairányítja a webalkalmazásba. A következő képernyőképhez hasonló lap jelenik meg:

   

7. Válassza a Kijelentkezés lehetőséget, hogy kijelentkeztesse a felhasználót a webalkalmazásból, vagy válassza a Lefelé lévő API meghívása lehetőséget a Microsoft Graph-végpont eléréséhez.

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 felhasználó ezután bejelentkezik vagy feliratkozik a megjelenő oldalon. A szükséges hitelesítő adatok megadása és a szükséges hatókörökhöz való hozzájárulás után a Microsoft Entra külső azonosítója egy engedélyezési kóddal visszairányítja a felhasználót a webalkalmazásba. A webalkalmazás ezt az engedélyezési kódot használja a Microsoft Entra külső azonosítójától származó jogkivonat beszerzéséhez.

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 a Microsoft Entra külső azonosító bejelentkezési végpontjára, és értesíti arról, hogy a felhasználó kijelentkezett. A rendszer ezután visszairányítja a felhasználót a webalkalmazásba.

Python Flask

Futtassa az alkalmazást, hogy megnézhesse, hogyan zajlik a bejelentkezési élmény működés közben.

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

   python3 -m flask run --debug --host=localhost --port=3000
   

   Használhatja a választott portot. Ennek hasonlónak kell lennie a korábban regisztrált átirányítási URI portjához.

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:

   

3. A lap betöltése után válassza Bejelentkezés hivatkozást. A rendszer kéri, hogy jelentkezzen be.

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, végighalad a bejelentkezési folyamaton. Töltse ki az e-mail-címét, az egyszeri pin-kódját, az új jelszót és további fiókadatokat a teljes regisztrációs folyamat befejezéséhez.

6. A bejelentkezés vagy a regisztráció után a rendszer visszairányítja a webalkalmazásba. A következő képernyőképhez hasonló lap jelenik meg:

   

7. Válassza a Kijelentkezés lehetőséget, hogy kijelentkeztesse a felhasználót a webalkalmazásból, vagy válassza a Lefelé lévő API meghívása lehetőséget a Microsoft Graph-végpont eléréséhez.

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 felhasználó ezután bejelentkezik vagy feliratkozik a megjelenő oldalon. A szükséges hitelesítő adatok megadása és a szükséges hatókörökhöz való hozzájárulás után a Microsoft Entra külső azonosítója egy engedélyezési kóddal visszairányítja a felhasználót a webalkalmazásba. A webalkalmazás ezt az engedélyezési kódot használja a Microsoft Entra külső azonosítójától származó jogkivonat beszerzéséhez.

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 a Microsoft Entra külső azonosító bejelentkezési végpontjára, és értesíti arról, hogy a felhasználó kijelentkezett. A rendszer ezután visszairányítja a felhasználót a webalkalmazásba.

Kapcsolódó tartalom

csomópont

• Felhasználók bejelentkezése a Node.js-webalkalmazásba
• Rövid útmutató – Felhasználók bejelentkeztetése és webes API meghívása a Node.js mintául szolgáló webalkalmazásban
• Gyorsútmutató – Profil szerkesztése egy minta Node.js webalkalmazásban

ASP.NET Core

• A többrészes oktatóanyag-sorozatunkkal teljesen új ASP.NET webalkalmazást hozhat létre
• Jelszó-visszaállítás engedélyezése
• Az alapértelmezett arculati testreszabása

Python Django

• Felhasználók bejelentkeztetése Flask-minta webalkalmazással
• Jelszó-visszaállítás engedélyezése
• Az alapértelmezett arculati testreszabása

Python Flask

• Jelszó-visszaállítás engedélyezése
• Az alapértelmezett arculati testreszabása