Přihlášení uživatelů v ukázkové webové aplikaci Node.js

Tento návod používá ukázkovou Node.js webové aplikace k tomu, aby vám ukázal, jak do webové aplikace přidat ověřování. Ukázková aplikace umožňuje uživatelům přihlásit se a odhlásit se. Ukázková webová aplikace používá knihovnu Microsoft Authentication Library for Node (uzel MSAL) pro node ke zpracování ověřování.

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

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

• V centru pro správu Microsoft Entra vytvořte tok přihlášení a odhlášení uživatele.

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

• Aktualizujte ukázkovou Node.js webové aplikace s použitím vlastního ID Microsoft Entra pro podrobnosti tenanta zákazníka.

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

Požadavky

• Node.js.

• Visual Studio Code nebo jiný editor kódu.

• Microsoft Entra ID tenanta zákazníka. Pokud ho ještě nemáte, zaregistrujte si bezplatnou zkušební verzi.

Registrace webové aplikace

Pokud chcete aplikaci umožnit přihlašování uživatelů pomocí Microsoft Entra, musí Microsoft Entra ID pro zákazníky vědět 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žívaná k identifikaci vaší aplikace při vytváření žádostí o ověření.

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

1. Přihlaste se k centru pro správu Microsoft Entra jako aspoň vývojář aplikací.

2. Pokud máte přístup k více tenantům, přepněte na tenanta zákazníka pomocí filtru Adresáře a předplatná v horní nabídce.

3. Přejděte naAplikace>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 Účty pouze 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 Web .
3. Jako identifikátory URI pro přesměrování zadejte . http://localhost:3000/auth/redirect
4. Vyberte Konfigurovat a uložte změny.
5. Na stránce Konfigurace platformy v části Web vyberte Přidat identifikátor URI a pak zadejte http://localhost:3000/
6. Vyberte Uložit , aby se změny uložily, a ujistěte se, že jsou uvedené oba identifikátory URI.

Přidání tajného klíče klienta aplikace

Vytvořte tajný klíč klienta pro zaregistrovanou aplikaci. Aplikace používá tajný klíč klienta k prokázání své identity při žádosti o tokeny.

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 Tajné kódy certifikátů&.
3. Vyberte Nový tajný klíč klienta.
4. Do pole Popis zadejte popis tajného klíče klienta (například ciam app secret).
5. V části Konec platnosti vyberte dobu platnosti tajného kódu (podle pravidel zabezpečení vaší organizace) a pak vyberte Přidat.
6. Poznamenejte si hodnotu tajného kódu. Tuto hodnotu použijete ke konfiguraci v pozdějším kroku.

Poznámka

Hodnota tajného kódu se po přechodu ze stránky Certifikáty a tajné kódy znovu nezobrazí a není možné ji žádným způsobem načíst, proto ji nezapomeňte zaznamenat.
Kvůli rozšířenému zabezpečení zvažte použití certifikátů místo tajných klíčů klientů.

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

Vzhledem k tomu, že tato aplikace přihlašuje uživatele, přidejte delegovaná oprávnění:

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í API Microsoftu vyberte Microsoft Graph.

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

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

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

9. V tomto okamžiku jste oprávnění přiřadili správně. Vzhledem k tomu, že tenant je tenantem zákazníka, nemůžou s těmito oprávněními souhlasit samotní uživatelé tohoto uživatele. 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> tenanta a pak vyberte Ano.
   2. Vyberte Aktualizovat a pak ověřte, že se pro <název> vašeho tenanta v části Stav pro oba obory zobrazuje Hodnota Uděleno.

Vytvoření toku uživatele

Postupujte podle těchto kroků a vytvořte tok uživatelů, pomocí které se zákazník může přihlásit nebo zaregistrovat k aplikaci.

1. Přihlaste se k centru pro správu Microsoft Entra jako alespoň správce toku uživatelů s externím ID.

2. Pokud máte přístup k více tenantům, přepněte na tenanta zákazníka pomocí filtru Adresáře a předplatná v horní nabídce.

3. Přejděte naToky uživatelůIdentita>externích identit>.

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 Email Účty. Tento zprostředkovatel identity umožňuje uživatelům přihlášení nebo registraci pomocí jejich e-mailové adresy.

      Poznámka

      Další zprostředkovatelé identity tady budou uvedeni až poté, co s nimi nastavíte federaci. Pokud například nastavíte federaci s Googlem nebo Facebookem, budete tady moct vybrat tyto další zprostředkovatele identity.

   3. V části Email účty můžete vybrat jednu ze dvou možností. Pro účely tohoto kurzu vyberte Email s heslem.

      • Email s heslem: 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 hesla jako přihlašovacích údajů.

      • 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 přihlašovacích údajů.

        Poznámka

        Email jednorázové heslo musí být povolené na úrovni tenanta (Všichni zprostředkovatelé> identity Email jednorázové heslo), aby tato možnost byla dostupná na úrovni toku uživatele.

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

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

Pokud chcete povolit samoobslužné resetování hesla, použijte postup 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í telefonního čísla nebo e-mailové adresy.

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

2. Vyberte Externí identity a 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 Použít vyberte Aplikace.

5. Vyberte Přidat aplikaci.

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

7. Zvolte Vybrat.

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

Pokud chcete získat ukázkový kód webové aplikace, můžete provést některou z následujících úloh:

• Spuštěním následujícího příkazu stáhněte soubor .zip nebo naklonujte ukázkovou webovou aplikaci z GitHubu:

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

Pokud se rozhodnete stáhnout soubor.zip , extrahujte soubor ukázkové aplikace do složky, kde je celková délka cesty 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 Node.js:

       cd 1-Authentication\5-sign-in-express\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 souborApp\authConfig.js .

2. Najděte 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 (tenanta). Pokud je contoso.onmicrosoft.comnapříklad primární doménou vašeho tenanta , použijte contoso. Pokud nemáte název tenanta, přečtěte si, jak si přečíst podrobnosti o tenantovi.

   3. Enter_the_Client_Secret_Here a nahraďte ji hodnotou tajného kódu aplikace, kterou jste zkopírovali dříve.

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

Teď můžete ukázkovou Node.js webovou aplikaci otestovat. Musíte spustit server Node.js a přistupovat k němu prostřednictvím prohlížeče na adrese http://localhost:3000.

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

       npm start 
   

2. Otevřete prohlížeč a pak přejděte na http://localhost:3000. Měla by se zobrazit stránka podobná následujícímu snímku obrazovky:

   

3. Po dokončení načítání stránky vyberte Odkaz Přihlásit se . Zobrazí se výzva k přihlášení.

4. Na přihlašovací stránce zadejte svoji Email adresu, vyberte Další, zadejte heslo a pak vyberte Přihlásit se. Pokud účet nemáte, vyberte Žádný účet? Vytvořte jeden odkaz, který spustí tok registrace.

5. Pokud zvolíte možnost registrace, po vyplnění e-mailu, jednorázového hesla, nového hesla a dalších podrobností o úč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.

   

6. Vyberte Odhlásit se a odhlaste uživatele z webové aplikace nebo vyberte Zobrazit deklarace identity tokenu ID a zobrazte deklarace identity tokenů ID vrácených Microsoft Entra.

Jak to funguje

Když uživatelé vyberou odkaz Přihlásit se, aplikace zahájí žádost o ověření a přesměruje uživatele na Microsoft Entra ID pro zákazníky. Na přihlašovací nebo registrační stránce, která se zobrazí, vrátí Microsoft Entra ID pro zákazníky do aplikace, jakmile se uživatel úspěšně přihlásí nebo vytvoří účet. Aplikace ověří token ID, přečte deklarace identity a vrátí uživatelům zabezpečenou stránku.

Když uživatelé vyberou odkaz Odhlásit se, aplikace vymaže svoji relaci a přesměruje ho na Microsoft Entra ID koncového bodu pro odhlášení zákazníků a upozorní ho, že se uživatel odhlásil.

Pokud chcete vytvořit aplikaci podobnou ukázce, kterou jste spustili, proveďte kroky uvedené v článku Přihlášení uživatelů ve vlastní Node.js webové aplikaci .

Další kroky

Možná budete chtít:

• Povolení resetování hesla

• Přizpůsobení výchozího brandingu

• Konfigurace přihlašování pomocí Googlu

• Přihlášení uživatelů ve webové aplikaci Node.js