Share via

Felhasználók bejelentkezése egy asztali Electron-mintaalkalmazásba

  • Cikk

Ez az útmutató egy asztali Electron-mintaalkalmazással mutatja be, hogyan adhat hozzá hitelesítést egy asztali alkalmazá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) használatával kezeli a hitelesítést.

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

  • Asztali alkalmazá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 Electron asztali alkalmazást a saját külső bérlői adataival.

  • Futtassa és tesztelje az asztali mintaalkalmazást.

Előfeltételek

Az asztali alkalmazá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 Mobil és asztali alkalmazások lehetőséget.
  3. Az egyéni átirányítási URI-k megadásához http://localhostválassza a Konfigurálás lehetőséget.
  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.

Nem kötelező jogcímek konfigurálása

  1. A Kezelés területen válassza ki a tokenkonfigurációt.

  2. Válassza az Opcionális jogcím hozzáadása lehetőséget.

  3. Válassza ki az opcionális jogcímtípust, majd válassza az Azonosító lehetőséget.

  4. Válassza ki a választható jogcímet login_hint.

  5. A módosítások mentéséhez válassza a Hozzáadás lehetőséget.

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

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.

A projekt függőségeinek 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. Nyissa meg App\authConfig.js a fájlt a kódszerkesztőben.

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

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

Most már tesztelheti az Asztali Electron-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

    Képernyőkép egy elektronalapú asztali alkalmazásba való bejelentkezésről.

  2. A megjelenő asztali ablakban válassza a Bejelentkezés vagy a Regisztráció 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 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.

  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. A lapon jogkivonat-azonosító jogcímek jelennek meg.

    Képernyőkép a jogkivonat-jogcímek megtekintéséről egy elektronalapú asztali alkalmazásban.

Lásd még