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

A következőkre vonatkozik: Zöld kör fehér pipa szimbólummal, amely a következő tartalmat jelzi a munkaerő-bérlőkre. A munkaerő-bérlők zöld körrel, fehér pipa jellel, amely a következő tartalmat jelzi a külső bérlőkre. Külső bérlők (további információ)

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

  • Egy Azure-fiók, aktív előfizetéssel. 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.
  • 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

A mintaprojekt letöltése

Megjegyzés:

Az oktatóanyagban szereplő elektronminta kifejezetten az MSAL-csomóponttal való együttműködésre lett kialakítva. Az MSAL-böngésző nem támogatott az Electron-alkalmazásokban. Győződjön meg arról, hogy a projekt helyes beállításához hajtsa végre az alábbi lépéseket.

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

    git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git

  • Töltse le a .zip fájlt. Bontsa ki olyan fájl elérési útvonalra, ahol a név hossza kevesebb mint 260 karakter.

A projekt konfigurálása

A kódszerkesztőben nyissa meg az ms-identity-javascript-nodejs-desktop-main/App/authConfig.js fájlt. Cserélje le az értéket az alábbiak szerint:

Változó Leírás Példa(ák)
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_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_Graph_Endpoint_Here Az alkalmazás által meghívni kívánt Microsoft Graph API felhőpéldány https://graph.microsoft.com/ (záró ferdevonallal együtt)

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és

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

A mintaprojekt letöltése

Megjegyzés:

Az oktatóanyagban szereplő elektronminta kifejezetten az MSAL-csomóponttal való együttműködésre lett kialakítva. Az MSAL-böngésző nem támogatott az Electron-alkalmazásokban. Győződjön meg arról, hogy a projekt helyes beállításához hajtsa végre az alábbi lépéseket.

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. Keresd meg a helykitöltő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

  • Last updated on