Přihlášení uživatelů v ukázkové desktopové aplikaci Elektron

  • Článek

Tento návod používá ukázkovou desktopovou aplikaci Electron, která ukazuje, 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. Ukázková webová aplikace používá knihovnu MSAL (Microsoft Authentication Library) pro zpracování ověřování pomocí uzlu.

V tomto článku provedete následující úlohy:

  • Zaregistrujte desktopovou aplikaci v Centru pro správu Microsoft Entra.

  • Vytvořte tok uživatele pro přihlášení a odhlášení v Centru pro správu Microsoft Entra.

  • Přidružte webovou aplikaci k toku uživatele.

  • Aktualizujte ukázkovou desktopovou aplikaci Electron pomocí vlastních podrobností o externím tenantovi.

  • Spusťte a otestujte ukázkovou desktopovou aplikaci.

Požadavky

Registrace desktopové aplikace

Pokud chcete aplikaci umožnit přihlášení uživatelů pomocí Microsoft Entra, Microsoft Entra Externí ID musí být informována 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 (klienta), 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 jako alespoň 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 k aplikacím> identit>Registrace aplikací.

  4. Vyberte + Nová registrace.

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

    1. Zadejte smysluplný název aplikace, 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.

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

  1. V části Spravovat vyberte Ověřování.
  2. Na stránce Konfigurace platformy vyberte Přidat platformu a pak vyberte možnost Mobilní a desktopové aplikace.
  3. Pro identifikátory URI pro vlastní přesměrování zadejte http://localhosta pak vyberte Konfigurovat.
  4. Výběrem možnosti Konfigurovat uložte změny.

Udělení oprávnění rozhraní API

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

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

  3. V části Nakonfigurovaná oprávnění vyberte Přidat oprávnění.

  4. Vyberte kartu Rozhraní API Microsoftu.

  5. V části Běžně používané rozhraní MICROSOFT API vyberte Microsoft Graph.

  6. Vyberte možnost Delegovaná oprávnění .

  7. V části Vybrat oprávnění vyhledejte a vyberte openid i offline_access oprávnění.

  8. Vyberte tlačítko Přidat oprávnění.

  9. V tomto okamžiku jste správně přiřadili oprávnění. Vzhledem k tomu, že se jedná o tenanta zákazníka, nemůžou uživatelé uživatele sami vyjádřit souhlas s těmito oprávněními. Jako správce musíte udělit souhlas s těmito oprávněními jménem všech uživatelů v tenantovi:

    1. Vyberte Udělit souhlas správce pro <název> vašeho tenanta a pak vyberte Ano.
    2. Vyberte Aktualizovat a pak ověřte, že se pro <název> vašeho tenanta zobrazuje v části Stav pro oba obory.

Konfigurace volitelných deklarací identity

  1. V části Spravovat vyberte konfiguraci tokenu.

  2. Vyberte Přidat volitelnou deklaraci identity.

  3. Vyberte volitelný typ deklarace identity a pak zvolte ID.

  4. Vyberte volitelný login_hint deklarace identity.

  5. Výběrem možnosti Přidat uložte změny.

Vytvoření toku uživatele

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 jako alespoň tok externího ID uživatele Správa istrator.

  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 k> tokům identity externích>identit uživatelů.

  4. Vyberte + Nový tok uživatele.

  5. Na stránce Vytvořit:

    1. Zadejte název toku 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 například nastavíte federaci s Googlem nebo Facebookem, budete tady moct vybrat další zprostředkovatele identity.

    3. V části E-mailové účty můžete vybrat jednu z těchto 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.
      • Jednorázové heslo e-mailu: 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 jednorázové heslo jako jejich první přihlašovací údaje. Aby byla tato možnost dostupná na úrovni toku uživatele, musí být na úrovni tenanta povolená jednorázová hesla e-mailu všech zprostředkovatelů>identity.

    4. V části Atributy uživatele zvolte atributy, které chcete shromáždit od uživatele při registraci. Výběrem možnosti Zobrazit více můžete zvolit atributy a deklarace identity pro zemi/oblast, zobrazované jméno a PSČ. Vyberte OK. (Uživatelům se při první registraci zobrazí výzva pouze k zadání atributů.)

  6. Vyberte Vytvořit. Nový tok uživatele se zobrazí v seznamu Toky uživatele. 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.

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

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. Tok uživatele umožňuje konfiguraci uživatelského prostředí pro konkrétní aplikace. Můžete například nakonfigurovat tok uživatele, který vyžaduje, aby se uživatelé přihlásili nebo zaregistrovali pomocí e-mailové adresy.

  1. V nabídce bočního panelu vyberte Možnost Identita.

  2. Vyberte externí identity a pak toky uživatelů.

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

  4. V části Použít vyberte Aplikace.

  5. Vyberte Přidat aplikaci.

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

  7. Zvolte Vybrat.

Klonování nebo stažení ukázkové webové aplikace

Pokud chcete získat ukázkový kód desktopové aplikace, stáhněte si 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 soubor stáhnout .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 App\authConfig.js soubor.

  2. Vyhledejte zástupný symbol:

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

    2. Enter_the_Tenant_Subdomain_Here a nahraďte ji subdoménou adresáře (tenanta). Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud nemáte název tenanta, přečtěte si, jak si přečíst podrobnosti o tenantovi.

Spuštění a testová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 k aplikaci elektronové plochy

  2. V zobrazeném okně plochy vyberte tlačítko Přihlásit se nebo Zaregistrovat . 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 svoji e-mailovou adresu, vyberte Další, zadejte heslo a pak vyberte Přihlásit se. Pokud účet nemáte, vyberte Možnost Žá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 deklaracemi tokenů zobrazení v aplikaci elektronové plochy

Viz také