Sdílet prostřednictvím

Rychlý start: Přihlášení uživatelů v ukázkové desktopové aplikaci

Platí pro: Zelený kruh se symbolem bílé značky zaškrtnutí, který označuje následující obsah platí pro tenanty pracovních sil. Tenanti pracovních sil zelený kruh se symbolem bílé značky zaškrtnutí, který označuje následující obsah platí pro externí tenanty. Externí tenanti (další informace)

V tomto rychlém startu se pomocí ukázkové aplikace dozvíte, jak přidat ověřování do desktopové aplikace. Ukázková aplikace umožňuje uživatelům přihlásit se a odhlásit se a používat knihovnu MICROSOFT Authentication Library (MSAL) ke zpracování ověřování.

Než začnete, pomocí selektoru Zvolte typ nájemce v horní části této stránky vyberte typ nájemce. Microsoft Entra ID poskytuje dvě konfigurace tenantů, pracovní síly a externí . Konfigurace tenanta pracovních sil je určená pro zaměstnance, interní aplikace a další organizační prostředky. Externí tenant je určený pro vaše aplikace určené pro zákazníky.

Požadavky

  • Účet Azure s aktivním předplatným. Pokud ho ještě nemáte, Vytvořte účet zdarma.
  • Tento účet Azure musí mít oprávnění ke správě aplikací. Kterákoli z následujících rolí Microsoft Entra zahrnuje potřebná oprávnění:
    • Správce aplikace
    • Vývojář aplikací
  • Tenant pracovní síly. Můžete použít výchozí adresář nebo nastavit nového nájemníka.
  • Zaregistrujte novou aplikaci v Centru pro správu Microsoft Entra, která je nakonfigurovaná jenom pro účty v tomto organizačním adresáři. Další podrobnosti najdete v tématu Registrace aplikace . Na stránce Přehled aplikace si poznamenejte následující hodnoty pro pozdější použití:
    • ID aplikace (klienta)
    • ID adresáře (klienta)

Stažení ukázkového projektu

Poznámka:

Elektronový vzorek poskytnutý v tomto kurzu je speciálně navržený tak, aby fungoval s MSAL-node. MsAL-browser není podporován v aplikacích Electron. Ujistěte se, že jste dokončili následující kroky pro správné nastavení projektu.

  • Pokud chcete ukázku naklonovat, otevřete příkazový řádek a přejděte do umístění, kam chcete projekt vytvořit, a zadejte následující příkaz:

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

  • Stáhnout soubor .zip. Extrahujte ho do souborové cesty, u které je délka názvu menší než 260 znaků.

Konfigurace projektu

V editoru kódu otevřete soubor ms-identity-javascript-nodejs-desktop-main/App/authConfig.js. Nahraďte hodnotu následujícím způsobem:

Proměnná Popis Příklady
Enter_the_Cloud_Instance_Id_Here Cloudová instance Azure, ve které je vaše aplikace zaregistrovaná https://login.microsoftonline.com/ (včetně koncového lomítka)
Enter_the_Tenant_Info_Here ID tenanta nebo primární doména contoso.microsoft.com nebo aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here ID klienta aplikace, kterou jste zaregistrovali 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Graph_Endpoint_Here Cloudová instance rozhraní Microsoft Graph API, kterou bude vaše aplikace volat https://graph.microsoft.com/ (včetně koncového lomítka)

Soubor by měl vypadat nějak takto:

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,
 };

Spuštění aplikace

  1. Závislosti této ukázky budete muset nainstalovat jednou:

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

  2. Pak aplikaci spusťte přes příkazový řádek nebo konzolu:

    npm start

  3. Vyberte Přihlášení a spusťte proces přihlášení.

    Při prvním přihlášení se zobrazí výzva k zadání souhlasu, abyste aplikaci povolili přihlášení a přístup k vašemu profilu. Po úspěšném přihlášení budete přesměrováni zpět do aplikace.

Další krok

Další informace o vývoji desktopových aplikací Elektron pomocí MSAL Node najdete v tomto kurzu:

Kurz : Přihlášení uživatelů a volání Microsoft Graph API v desktopové aplikaci Electron

Požadavky

Stažení ukázkového projektu

Poznámka:

Elektronový vzorek poskytnutý v tomto kurzu je speciálně navržený tak, aby fungoval s MSAL-node. MsAL-browser není podporován v aplikacích Electron. Ujistěte se, že jste dokončili následující kroky pro správné nastavení projektu.

Pokud chcete získat ukázkový kód desktopové aplikace, stáhněte soubor .zip nebo naklonujte ukázkovou webovou aplikaci z GitHubu spuštěním následujícího příkazu:

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

Pokud se rozhodnete stáhnout soubor .zip, extrahujte ukázkový soubor aplikace do složky, kde celková délka cesty je 260 nebo méně znaků.

Nainstalujte závislosti projektu

  1. Otevřete okno konzoly a přejděte do adresáře, který obsahuje ukázkovou aplikaci Elektron:

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

  2. Spuštěním následujících příkazů nainstalujte závislosti aplikací:

    npm install && npm update

Konfigurace ukázkové webové aplikace

  1. V editoru kódu otevřete soubor App\authConfig.js.

  2. Vyhledejte zástupný symbol:

    1. Enter_the_Application_Id_Here a nahraďte ho ID klienta aplikace, kterou jste zaregistrovali dříve.

    2. Enter_the_Tenant_Subdomain_Here a nahraďte ji subdoménou adresáře. Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud neznáte název svého nájemníka, zjistěte, jak získat podrobnosti o nájemníkovi.

Spuštění a otestování ukázkové webové aplikace

Teď můžete otestovat ukázkovou desktopovou aplikaci Elektron. Po spuštění aplikace se automaticky zobrazí okno desktopové aplikace:

  1. V terminálu spusťte následující příkaz:

    npm start

    snímek obrazovky s přihlášením do desktopové aplikace Electron.

  2. V zobrazeném okně plochy vyberte tlačítko Přihlásit se nebo Zaregistrovat se. Otevře se okno prohlížeče a zobrazí se výzva k přihlášení.

  3. Na přihlašovací stránce prohlížeče zadejte e-mailovou adresu, vyberte Další, zadejte Hesloa pak vyberte Přihlásit se. Pokud účet nemáte, vyberte Žádný účet? Vytvořte jeden odkaz, který spustí tok registrace.

  4. Pokud zvolíte možnost registrace po vyplnění e-mailu, jednorázového hesla, nového hesla a dalších podrobností účtu, dokončíte celý tok registrace. Zobrazí se stránka podobná následujícímu snímku obrazovky. Pokud zvolíte možnost přihlášení, zobrazí se podobná stránka. Na stránce se zobrazují nároky na ID tokenu.

    snímek obrazovky s nároky na tokeny v aplikaci Electron pro stolní počítače.

Související obsah

  • Last updated on