Přihlášení uživatelů v ukázkové jednostránkové aplikaci Vanilla JavaScript

Tento návod používá ukázkovou jednostránkovou jednostránkovou aplikaci (SPA) ve službě Vanilla JavaScript, která ukazuje, jak přidat ověřování do spa. Spa umožňuje uživatelům přihlásit se a odhlásit se pomocí vlastního id Microsoft Entra pro tenanta zákazníka. Ukázka používá ke zpracování ověřování knihovnu Microsoft Authentication Library for JavaScript (MSAL.js).

Požadavky

• I když je možné použít jakékoli integrované vývojové prostředí, které podporuje aplikace vanilla JS, pro tuto příručku se doporučuje Visual Studio Code . Můžete si ho stáhnout ze stránky Stažené soubory .
• Node.js.
• Microsoft Entra ID tenanta zákazníka. Pokud ještě nemáte, zaregistrujte si bezplatnou zkušební verzi.

Registrace SPA v Centru pro správu Microsoft Entra

Pokud chcete aplikaci povolit přihlašování uživatelů pomocí Microsoft Entra, musí být Microsoft Entra ID pro zákazníky informováno 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, která se používá k identifikaci vaší 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 k Centru pro správu Microsoft Entra alespoň jako 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 SPA .
3. Jako identifikátory URI pro přesměrování zadejte http://localhost:3000/redirect
4. Vyberte Konfigurovat a uložte změny.
5. Zpět na stránce Konfigurace platformy v nové jednostránkové aplikaci , která se zobrazila, vyberte Přidat identifikátor URI a pak zadejte http://localhost:3000/
6. Vyberte Uložit , uložte změny a ujistěte se, že jsou uvedené oba identifikátory URI.

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 tak 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í MICROSOFT API .

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 oprávnění openid i offline_access .

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

9. V tuto chvíli jste oprávnění přiřadili správně. Vzhledem k tomu, že tenant je tenant zákazníka, nemůžou s těmito oprávněními souhlasit samotní uživatelé příjemce. 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 v části Stav pro <oba obory zobrazuje v části Stav udělené pro váš název> tenanta.

Vytvoření toku uživatele

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

1. Přihlaste se k Centru pro správu Microsoft Entra alespoň jako 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ůidentit>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é identit vyberte účty Email. Tento zprostředkovatel identity umožňuje uživatelům přihlásit se nebo se zaregistrovat pomocí jejich e-mailové adresy.

      Poznámka

      Další zprostředkovatelé identit budou tady uvedeni až po nastavení federace s nimi. Pokud například nastavíte federaci pomocí Googlu nebo Facebooku, budete moct vybrat tyto další zprostředkovatele identity tady.

   3. V části Email účty můžete vybrat jednu ze dvou možností. V tomto 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ů prvního faktoru.

      • 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 jednorázového e-mailového hesla jako jejich prvního faktoru 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í spa 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 se 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ázky SPA

Pokud chcete získat ukázkové spa, můžete zvolit jednu z následujících možností:

• Naklonujte úložiště pomocí Gitu:

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

• Stažení ukázky

Pokud se rozhodnete stáhnout .zip soubor, 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 terminálu v kořenovém adresáři ukázkového projektu a zadáním následujícího fragmentu kódu přejděte do složky projektu:

       cd 1-Authentication\0-sign-in-vanillajs\App
   

2. Nainstalujte závislosti projektu:

       npm install
   

Konfigurace ukázkového SPA

1. Otevřete authConfig.js.
2. Vyhledejte Enter_the_Tenant_Name_Here ho a nahraďte názvem vašeho tenanta.
3. V části Autorita vyhledejte Enter_the_Tenant_Subdomain_Here a nahraďte ji subdoménou vašeho tenanta. Pokud je caseyjensen@onmicrosoft.comnapříklad primární doména vašeho tenanta , měli byste zadat hodnotu casyjensen.
4. Soubor uložte.

Spuštění projektu a přihlášení

1. Otevřete nový terminál a spuštěním následujícího příkazu spusťte webový server Express.

   npm start
   

2. Otevřete webový prohlížeč a přejděte na adresu http://localhost:3000/.

3. Přihlaste se pomocí účtu zaregistrovaného v tenantovi zákazníka.

4. Po přihlášení se zobrazí zobrazované jméno vedle tlačítka Odhlásit se , jak je znázorněno na následujícím snímku obrazovky.

5. Spa teď zobrazí tlačítko Vyžádat informace o profilu. Vyberte ho, aby se zobrazila data profilu.

   

Odhlášení z aplikace

1. Pokud se chcete z aplikace odhlásit, vyberte na navigačním panelu Odhlásit se .
2. Zobrazí se okno s dotazem, ze kterého účtu se odhlásit.
3. Po úspěšném odhlášení se zobrazí poslední okno s doporučením zavřít všechna okna prohlížeče.

Další kroky

Povolení samoobslužného resetování hesel