Přihlášení uživatelů v ukázkové React jednostránkové aplikaci (SPA)

Tato příručka používá ukázkovou React jednostránkovou aplikaci (SPA), která ukazuje, jak přidat ověřování do spa. Toto spa umožňuje uživatelům přihlásit se a odhlásit se pomocí vašeho Microsoft Entra ID 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 React aplikace, pro tuto příručku se používá 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/auth/redirect
4. Vyberte Konfigurovat a uložte změny.
5. 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\1-sign-in-react\SPA
   

2. Nainstalujte závislosti projektu:

   npm install
   

Konfigurace ukázkového SPA

1. Otevřete SPA\src\authConfig.js a nahraďte následující hodnotami získanými z Centra pro správu Microsoft Entra.
   • clientId – Identifikátor aplikace, označovaný také jako klient. Nahraďte Enter_the_Application_Id_Here hodnotou ID aplikace (klienta), která byla zaznamenána dříve na stránce přehledu registrované aplikace.
   • authority – Instance zprostředkovatele identity a cílová skupina přihlašování pro aplikaci. Nahraďte Enter_the_Tenant_Name_Here názvem vašeho Microsoft Entra ID tenanta zákazníka.
   • ID tenanta je identifikátor tenanta, ve kterém je aplikace zaregistrovaná. _Enter_the_Tenant_Info_Here Nahraďte hodnotou ID adresáře (tenanta), která byla zaznamenána dříve na stránce přehledu registrované aplikace.
2. Soubor uložte.

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

Byly přidány všechny požadované fragmenty kódu, takže aplikaci teď můžete volat a testovat ve webovém prohlížeči.

1. Otevřete nový terminál tak, že vyberete Terminál>Nový terminál.

2. Spuštěním následujícího příkazu spusťte webový server.

   cd 1-Authentication\1-sign-in-react\SPA
   npm start
   

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

4. Přihlaste se pomocí účtu zaregistrovaného v tenantovi Microsoft Entra pro zákazníky.

5. Po přihlášení se zobrazí zobrazované jméno vedle tlačítka Odhlásit se .

Další kroky

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