Sdílet prostřednictvím

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

  • Článek

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

Registrace webové aplikace

Pokud chcete aplikaci zaregistrovat a přidat informace o registraci aplikace do řešení ručně, postupujte takto:

  1. Přihlaste se do centra pro správu Microsoft Entra alespoň jako Správce cloudových aplikací.
  2. Pokud máte přístup k více tenantům, pomocí ikony Nastavení v horní nabídce přepněte do tenanta, ve kterém chcete aplikaci zaregistrovat z nabídky Adresáře a předplatná.
  3. Přejděte na Identity>Aplikace>Registrace aplikací a vyberte možnost Nová registrace.
  4. Zadejte název pro svou aplikaci, například msal-node-desktop. Uživatelé vaší aplikace můžou vidět tento název a později ho můžete změnit.
  5. Vyberte Zaregistrovat a vytvořte aplikaci.
  6. V části Spravovatvyberte Ověřování.
  7. Vyberte Přidat platformu>Mobilní a desktopové aplikace.
  8. V části Identifikátory URI přesměrování zadejte http://localhost.
  9. Vyberte Konfigurujte.

Stažení ukázkového projektu

Stažení ukázkového kódu

Konfigurace projektu

Extrahujte projekt, otevřete složku ms-identity-JavaScript-nodejs-desktop-main a poté otevřete soubor .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_Id_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_Redirect_Uri_Here URI přesměrování aplikace, kterou jste zaregistrovali msal00001111-aaaa-2222-bbbb-3333cccc4444://auth
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ší kroky

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

Registrace desktopové aplikace

Aby vaše aplikace mohla přihlašovat uživatele pomocí Microsoft Entra, musí mít Microsoft Entra External ID informace o aplikaci, kterou vytvoříte. Registrace aplikace vytvoří vztah důvěryhodnosti mezi aplikací a Microsoft Entra. Když zaregistrujete aplikaci, externí ID vygeneruje jedinečný identifikátor označovaný jako ID aplikace (klient), což je hodnota použitá k identifikaci aplikace při vytváření žádostí o ověření.

Následující kroky ukazují, jak zaregistrovat aplikaci v Centru pro správu Microsoft Entra:

  1. Přihlaste se do centra pro správu Microsoft Entra alespoň jako Vývojář aplikací.

  2. Pokud máte přístup k více tenantům, pomocí ikony Nastavení v horní nabídce přepněte do externího tenanta z nabídky Adresáře a předplatná.

  3. Přejděte na Identity>Aplikace>Registrace aplikací.

  4. Vyberte + Nová registrace.

  5. Na Zaregistrovat aplikaci stránku, která se zobrazí;

    1. Zadejte smysluplnou aplikaci Název, která se zobrazí uživatelům aplikace, například ciam-client-app .
    2. V části Podporované typy účtůvyberte Pouze účty v tomto organizačním adresáři.

  6. Vyberte Zaregistrovat.

  7. Po úspěšné registraci se zobrazí podokno Přehled aplikace. Poznamenejte si ID aplikace (klienta), které se má použít ve zdrojovém kódu aplikace.

Určení aplikační platformy

Pokud chcete zadat typ aplikace pro registraci aplikace, postupujte takto:

  1. V části Spravovatvyberte Ověřování.
  2. Na stránce Konfigurace platformy vyberte možnost Přidat platformua pak vyberte možnost Mobilní a desktopové aplikace.
  3. U identifikátorů URI pro vlastní přesměrování zadejte http://localhosta pak vyberte Konfigurovat.
  4. Vyberte Konfigurovat pro uložení změn.

Po registraci aplikace se přiřadí oprávnění User.Read. Vzhledem k tomu, že je tenant externím tenantem, nemohou vlastní uživatelé zákazníka s tímto oprávněním souhlasit. Jako správce tenanta musíte souhlasit s tímto oprávněním jménem všech uživatelů v tenantovi:

  1. Na stránce Registrace aplikací vyberte aplikaci, kterou jste vytvořili (například ciam-client-app), a otevřete tak její stránku Přehled.

  2. V části Spravovatvyberte oprávnění rozhraní API.

    1. Vyberte Udělit souhlas správce pro <název vašeho tenanta>, poté vyberte Ano.
    2. Vyberte Obnovita ověřte, že uděleno pro <název vašeho tenanta> se zobrazuje pod Stav u oprávnění.

Vytvořit uživatelský tok

Pokud chcete vytvořit tok uživatele, který může zákazník použít k přihlášení nebo registraci aplikace, postupujte podle těchto kroků.

  1. Přihlaste se do centra pro správu Microsoft Entra alespoň jako administrátor uživatelského toku externího ID.

  2. Pokud máte přístup k více tenantům, pomocí ikony Nastavení v horní nabídce přepněte na externího tenanta z nabídky Adresáře a předplatná.

  3. Přejděte na Identity>externí identity>toky uživatelů.

  4. Vyberte + Nový uživatelský tok.

  5. Na stránce Vytvořit:

    1. Zadejte název pro tok uživatele, například SignInSignUpSample.

    2. V seznamu zprostředkovatelů identity vyberte E-mailové Účty. Tento zprostředkovatel identity umožňuje uživatelům přihlásit se nebo zaregistrovat pomocí jejich e-mailové adresy.

      Poznámka

      Další zprostředkovatelé identity se tady zobrazí až po nastavení federace s nimi. Pokud jste například nastavili federaci s Google, Facebook, Apple nebo OIDC identity provider, budete moci vybrat tyto další zprostředkovatele identity.

    3. V části E-mailové účtymůžete vybrat jednu ze dvou možností. Pro účely tohoto kurzu vyberte E-mail s heslem.

      • e-mail s heslem: Umožňuje novým uživatelům zaregistrovat se a přihlásit se pomocí e-mailové adresy jako přihlašovací jméno a heslo jako jejich první přihlašovací údaje.
      • Email jednorázové heslo: Umožňuje novým uživatelům zaregistrovat se a přihlásit se pomocí e-mailové adresy jako přihlašovacího jména a e-mailového jednorázového hesla jako jejich prvního ověřovacího údaje. Jednorázové heslo e-mailu musí být povolené na úrovni tenanta (Všichni zprostředkovatelé identity>jednorázové heslo e-mailu), aby tato možnost byla dostupná na úrovni toku uživatele.

    4. V části Atributy uživatelezvolte atributy, které chcete shromažďovat od uživatele při registraci. Výběrem možnosti Zobrazit dalšímůžete zvolit atributy a nároky pro zemi/oblast, zobrazované jménoa PSČ. Vyberte OK. (Uživatelům se při první registraci zobrazí výzva pouze k zadání atributů.)

  6. Vyberte Vytvořit. Nový uživatelský tok se zobrazí v seznamu Toky uživatelů. V případě potřeby aktualizujte stránku.

Pokud chcete povolit samoobslužné resetování hesla, postupujte podle pokynů v článku Povolení samoobslužného resetování hesla článku.

Přidružení desktopové aplikace k toku uživatele

Aby zákazníci viděli proces registrace nebo přihlašování, když používají vaši aplikaci, musíte aplikaci přidružit k uživatelskému toku. I když k toku uživatele může být přidruženo mnoho aplikací, jedna aplikace může být přidružena pouze k jednomu toku uživatele.

  1. V nabídce postranního panelu vyberte Identity.

  2. Vyberte Externí identity, pak Toky uživatelů.

  3. Na stránce Toky uživatelů vyberte název toku uživatele, který jste vytvořili dříve, například SignInSignUpSample.

  4. V části Využitívyberte Aplikace.

  5. Vyberte Přidataplikace .

  6. Vyberte aplikaci ze seznamu, například ciam-client-app nebo pomocí vyhledávacího pole vyhledejte aplikaci a pak ji vyberte.

  7. Zvolte Vybrat.

Jakmile aplikaci přidružíte k toku uživatele, můžete tok uživatele otestovat simulací registrace nebo přihlašování uživatele k aplikaci z Centra pro správu Microsoft Entra. K tomu použijte postup v kroku , testování toku registrace a přihlášení.

Stažení ukázkového 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ů.

Instalace závislostí 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 aplikace (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í deklarace identity ID tokenu.

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

Související obsah