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

Rövid útmutató: Felhasználók bejelentkezése asztali mintaalkalmazásban

  • Cikk

Ebben a rövid útmutatóban egy mintaalkalmazás használatával megtudhatja, hogyan adhat hozzá hitelesítést egy asztali alkalmazáshoz. A mintaalkalmazás lehetővé teszi, hogy a felhasználók bejelentkezhessenek és kijelentkezhessenek, és a Microsoft Authentication Library (MSAL) használatával kezelhetik 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ői konfigurációt biztosít: munkaerő és, valamint külső. A munkavállalói bérlő 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ők az ügyfeleknek szánt alkalmazásoknál használatosak.

Előfeltételek

A webalkalmazás regisztrálása

Az alkalmazás regisztrálásához és az alkalmazás regisztrációs adatainak manuális hozzáadásához kövesse az alábbi lépéseket:

  1. Jelentkezzen be a Microsoft Entra felügyeleti központba legalább mint Felhőalkalmazás-rendszergazda.
  2. Ha több bérlőhöz is hozzáfér, a felső menü Beállítások ikon segítségével válthat arra a bérlőre, amelyben regisztrálni szeretné az alkalmazást a Könyvtárak + előfizetések menüből.
  3. Keresse meg az Identitás>Alkalmazások>Alkalmazásregisztrációk elemet, és válassza az Új regisztráció lehetőséget.
  4. Adjon meg egy nevet az alkalmazáshoz, például msal-node-desktop. Előfordulhat, hogy az alkalmazás felhasználói látják ezt a nevet, és később módosíthatja.
  5. Válassza a Regisztrálás lehetőséget az alkalmazás létrehozásához.
  6. A Kezelésterületen válassza a Hitelesítéslehetőséget.
  7. Válassza a lehetőséget, hogy platformot adjon hozzá:>mobil és asztali alkalmazásokkal.
  8. Az Átirányítási URI-k szakaszban adja meg a http://localhost.
  9. Válassza konfigurálása lehetőséget.

A mintaprojekt letöltése

Kódminta letöltése

A projekt konfigurálása

*Bontsa ki a projektet, nyissa meg az ms-identity-JavaScript-nodejs-desktop-main mappát, majd nyissa meg .authConfig.js fájlt. Cserélje le az értéket az alábbiak szerint:

Változó Leírás Példa(ok)
Enter_the_Cloud_Instance_Id_Here Az azure-felhőpéldány, amelyben az alkalmazás regisztrálva van https://login.microsoftonline.com/ (záró ferdevonallal együtt)
Enter_the_Tenant_Id_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_Redirect_Uri_Here A regisztrált alkalmazás átirányítási URI-ja msal00001111-aaaa-2222-bbbb-3333cccc4444://auth
Enter_the_Graph_Endpoint_Here Az alkalmazás által meghívni kívánt Microsoft Graph API felhőpéldány https://graph.microsoft.com/ (a záró perjelet is belefoglalva)

A fájlnak az alábbihoz hasonlóan kell kinéznie:

const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash

const msalConfig = {
    auth: {
        clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
        authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                 console.log(message);
             },
             piiLoggingEnabled: false,
             logLevel: LogLevel.Verbose,
        }
    }
}

const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash

const protectedResources = {
     graphMe: {
         endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
         scopes: ["User.Read"],
     }
};

module.exports = {
     msalConfig: msalConfig,
     protectedResources: protectedResources,
 };

Az alkalmazás futtatása

  1. A minta függőségeit egyszer kell telepítenie:

    cd ms-identity-javascript-nodejs-desktop-main
npm install

  2. Ezután futtassa az alkalmazást parancssorban vagy konzolon:

    npm start

  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ásba.

Következő lépések

Az Electron asztali alkalmazás MSAL Node-tal való fejlesztéséről az oktatóanyagban talál további információt:

Oktatóanyag: Jelentkezzen be felhasználóként, és hívja a Microsoft Graph API-t egy asztali Electron-alkalmazásban

Előfeltételek

Az asztali alkalmazás regisztrálása

Ahhoz, hogy a felhasználók bejelentkezhessenek az alkalmazásába a Microsoft Entra használatával, a Microsoft Entra Külső Azonosító rendszerét ismertetni kell 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 alkalmazás (ügyfél) azonosítónéven, 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 az Microsoft Entra felügyeleti központba, legalább alkalmazásfejlesztői.

  2. Ha több bérlőhöz is hozzáfér, a Beállítások ikonnal a felső menüben a Könyvtárak + előfizetések menüből válthat a külső bérlőre.

  3. Keresse fel a Identitás>alkalmazásokat>alkalmazás-regisztrációk.

  4. Válassza a + Új regisztrációslehetőséget.

  5. A megjelenő Alkalmazás regisztrálása lapon;

    1. Adjon meg egy értelmes alkalmazást az alkalmazás felhasználói számára megjelenített név, például ciam-client-app.
    2. A Támogatott fióktípusokközött válassza a Csak ebben a szervezeti könyvtárban lévő fiókoklehetőséget.

  6. Válassza a Regisztráláslehetőséget.

  7. Sikeres regisztráció esetén megjelenik az alkalmazás Áttekintés panelje. Jegyezze fel az alkalmazás forráskódjában használandó alkalmazás (ügyfél) azonosítóját.

Az alkalmazásplatform megadása

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ése alatt válassza a Hitelesítéslehetőséget.
  2. A Platformkonfigurációk lapon válassza a Platformhozzáadása lehetőséget, majd válassza Mobil- és asztali alkalmazások lehetőséget.
  3. A Egyéni átirányítási URI-k alatt adja meg a(z) http://localhostURI-t, majd válassza a Konfiguráláslehetőséget.
  4. A módosítások mentéséhez válassza konfigurálása lehetőséget.

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 Rendszergazdai hozzájárulás megadása a bérlő neve><, majd válassza Igenlehetőséget.
    2. Válassza a Frissítéslehetőséget, majd ellenőrizze, hogy az <bérlőnevére vonatkozó Engedélyezés> szerepel-e az Állapot alatt.

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 folyamat rendszergazdájaként.

  2. Ha több bérlői fiókkal rendelkezik, használja a felső menüben található Beállítások ikont , hogy a Könyvtárak + előfizetések menüből átváltson a külső bérlői fiókra.

  3. Böngésszen az Identitás>Külső identitások>Felhasználói folyamatokmenühöz.

  4. Válassza a + Új felhasználói áramláslehetőséget.

  5. A Létrehozás lapon:

    1. Adjon meg egy nevet a felhasználói folyamathoz, például SignInSignUpSample.

    2. Az Identitásszolgáltatók listában válassza e-mail fiókoklehető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.

      Jegyzet

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

    3. A E-mail fiókokterületen a két lehetőség közül választhat. Ebben az oktatóanyagban válassza E-mail jelszóvallehetőséget.

      • e-mail jelszóval: 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.
      • E-mail egyszeri jelszó: Lehetővé teszi, hogy az új felhasználók regisztráljanak és bejelentkezzenek egy e-mail-cím használatával, és az egyszeri jelszó legyen az elsődleges hitelesítő adatuk. Az egyszeri e-mailes jelszót engedélyezni kell a bérlő szintjén (Minden identitásszolgáltató>Egyszeri e-mailes jelszó) ahhoz, hogy ez a lehetőség elérhető legyen a felhasználói folyamat szintjén.

    4. A Felhasználói attribútumokterületen válassza ki a felhasználótól a regisztrációkor gyűjtendő attribútumokat. Ha a Továbbimegjelenítése lehetőséget választja, kiválaszthatja Ország/régió, Megjelenítendő névés Irányítószámattribútumait és jogcímeit. Válassza OKlehetőséget. (A rendszer csak akkor kéri az attribútumok megadását, ha első alkalommal regisztrál.)

  6. Válassza ki a elemet, és hozza létre a-et. 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 Az önkiszolgáló jelszó-visszaállítás engedélyezése cikk lépéseit.

Az asztali alkalmazás társítása a felhasználói folyamattal

Ahhoz, hogy az ügyfélfelhasználók lássák az alkalmazás használatakor a regisztrációt vagy a bejelentkezést, társítania kell az alkalmazást egy 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ó.

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

  2. Válassza a külső identitásoklehetőséget, majd a felhasználói folyamatoklehető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álata csoportban válassza az Alkalmazásoklehetőséget.

  5. Válassza Alkalmazás hozzáadásaopciót.

  6. Válassza ki az alkalmazást a listából, például ciam-client-app vagy a keresőmezővel keresse meg az alkalmazást, majd jelölje ki.

  7. Válassza kijelölése lehetőséget.

Miután hozzárendelte az alkalmazást egy felhasználói folyamathoz, tesztelheti a felhasználói folyamatot úgy, hogy szimulálja egy felhasználó regisztrációs vagy bejelentkezési élményét az alkalmazással a Microsoft Entra felügyeleti központban. Ehhez használja a Regisztrációs és bejelentkezési felhasználói folyamat tesztelésecímű témakörben leírt lépéseket.

A mintaprojekt letöltése

Az asztali alkalmazás mintakódjának lekéréséhez töltse le a .zip fájlt vagy klónozza a minta webalkalmazást a GitHubról az alábbi parancs futtatásával:

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

Ha úgy dönt, hogy letölti a .zip fájlt, bontsa ki a mintaalkalmazás-fájlt egy olyan mappába, ahol az elérési út teljes hossza 260 vagy kevesebb karakter.

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

  1. Nyisson meg egy konzolablakot, és váltson az Electron-mintaalkalmazást tartalmazó könyvtárra:

    cd 1-Authentication\3-sign-in-electron\App

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

    npm install && npm update

A minta webalkalmazás konfigurálása

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

  2. Keresse meg a helyőrzőt:

    1. Enter_the_Application_Id_Here és cserélje le a korábban regisztrált alkalmazás (ügyfél) azonosítójára.

    2. Enter_the_Tenant_Subdomain_Here és cserélje ki a Címtár (bérlő) altartományra. Ha például a bérlő fő tartománya contoso.onmicrosoft.com, használja a contoso. Ha nem rendelkezik a bérlő nevével, megtudhatja, hogyan olvasni a bérlő adatait.

A minta webalkalmazás futtatása és tesztelése

Most már tesztelheti az Electron asztali mintaalkalmazást. Az alkalmazás futtatása után az asztali alkalmazás ablaka automatikusan megjelenik:

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

    npm start

    Az elektronalapú asztali alkalmazásba való bejelentkezés képernyőképe.

  2. A megjelenő asztali ablakban válassza a Bejelentkezés vagy Regisztrálás gombot. Megnyílik egy böngészőablak, és a rendszer kérni fogja a bejelentkezést.

  3. A böngésző bejelentkezési lapján írja be a e-mail-címét, válassza a Következőlehetőséget, írja be a jelszót, 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.

  4. 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. Az oldalon tokenazonosító igények jelennek meg.

    Képernyőkép token jogcímek megtekintéséről egy Electron-alapú asztali alkalmazásban.

Kapcsolódó tartalom