Rychlý start: Přihlášení uživatelů do jednostránkové aplikace React pomocí použití nativního ověřování

Platí pro: Externí nájemci (další informace)

V tomto rychlém startu pomocí jednostránkové aplikace React (SPA) předvedete, jak ověřovat uživatele pomocí nativního ověřovacího rozhraní API. Ukázková aplikace ukazuje registraci uživatele, přihlášení, odhlášení a resetování hesla pomocí e-mailu a hesla.

Požadavky

• Účet Azure s aktivním předplatným. Pokud ho ještě nemáte, Vytvořte účet zdarma.
• Tento účet Azure musí mít oprávnění ke správě aplikací. Kterákoli z následujících rolí Microsoft Entra zahrnuje potřebná oprávnění:
  • Správce aplikace
  • Vývojář aplikací
• Externí nájemce. Pokud ho nemáte, vytvořte nový externí tenant v Centru pro správu Microsoft Entra.
• Tok uživatele. Další informace najdete v tématu vytváření toků uživatelů samoobslužné registrace pro aplikace v externích tenantech. Ujistěte se, že tok uživatele obsahuje následující atributy uživatele:
  • Křestní jméno
  • Příjmení
• Pokud jste to ještě neudělali, zaregistrujte aplikaci v Centru pro správu Microsoft Entra. Nezapomeňte:
  • Poznamenejte si ID aplikace (klienta) a ID adresáře (tenanta) pro pozdější použití.
  • Udělte správci souhlas s registrací aplikace.
• Přidružení registrace aplikace k toku uživatele
• Node.js.
• Visual Studio Code nebo jiného editoru kódu.

Povolte toky veřejného klienta a nativního ověřování

Pokud chcete určit, že tato aplikace je veřejným klientem a může používat nativní ověřování, povolte toky veřejného klienta a nativního ověřování:

1. Na stránce registrace aplikací vyberte registraci aplikace, pro kterou chcete povolit veřejného klienta a nativní způsoby ověřování.
2. V části Spravovatvyberte Ověřování.
3. V části Pokročilé nastavenípovolte toky veřejných klientů:
   1. Pro Zapnout následující mobilní a desktopové toky vyberte Ano.
   2. V Povolení nativníhoověřování vyberte Ano.
4. Vyberte tlačítko Uložit.

Klonujte nebo stáhněte ukázkovou SPA

Pokud chcete získat ukázkovou aplikaci, můžete ji buď naklonovat z GitHubu, nebo si ji stáhnout jako soubor .zip.

Pokud chcete ukázku naklonovat, otevřete příkazový řádek a přejděte do umístění, kam chcete projekt vytvořit, a zadejte následující příkaz:

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

Případně můžete stáhnout ukázkový soubora pak ho extrahovat do umístění souboru s názvem kratším než 260 znaků.

Nainstalujte závislosti projektu

1. Otevřete okno terminálu a přejděte do adresáře, který obsahuje ukázkovou aplikaci React:

   cd API\React\ReactAuthSimple
   

2. Spuštěním následujícího příkazu nainstalujte závislosti aplikací:

   npm install
   

Konfigurace ukázkové aplikace React

1. V editoru kódu otevřete soubor src\config.ts.

2. Vyhledejte zástupný symbol Enter_the_Application_Id_Here a nahraďte ho ID aplikace (klienta) aplikace, kterou jste zaregistrovali dříve.

3. Uložte změny.

Konfigurace proxy serveru CORS

Nativní ověřovací API nepodporují sdílení prostředků mezi zdroji (CORS), takže je třeba nastavit proxy server mezi aplikací SPA a API.

Tento ukázkový kód obsahuje proxy server CORS, který předává požadavky na koncové body adresy URL nativního rozhraní API pro ověřování. Proxy server CORS je Node.js server, který naslouchá na portu 3001.

Pokud chcete nakonfigurovat proxy server, otevřete proxy.config.js soubor a vyhledejte zástupný symbol:

• tenantSubdomain 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 subdoménu tenanta, přečtěte si, jak přečíst podrobnosti o tenantovi.
• tenantId a nahraďte ho ID adresáře (tenanta). Pokud nemáte ID tenanta, přečtěte si, jak přečíst podrobnosti o tenantovi.

Spuštění a otestování aplikace

Právě jste nakonfigurovali ukázkovou aplikaci a je připravená ke spuštění.

1. V okně terminálu spusťte následující příkazy a spusťte proxy server CORS:

   cd API\React\ReactAuthSimple
   npm run cors
   

2. Pokud chcete spustit aplikaci React, otevřete další okno terminálu a spusťte následující příkazy:

   cd API\React\ReactAuthSimple
   npm start
   

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

4. Pokud se chcete zaregistrovat k účtu, vyberte Zaregistrovat sea pak postupujte podle pokynů.

5. Po registraci otestujte přihlášení a reset hesla tak, že vyberete Přihlásit se a Resetovat heslo.

Povolení přihlášení pomocí aliasu nebo uživatelského jména

Uživatelům, kteří se přihlašují pomocí e-mailové adresy a hesla, můžete také povolit přihlášení pomocí uživatelského jména a hesla. Uživatelské jméno označované také jako alternativní přihlašovací identifikátor může být ID zákazníka, číslo účtu nebo jiný identifikátor, který se rozhodnete použít jako uživatelské jméno.

Uživatelské jména můžete k uživatelskému účtu přiřadit ručně prostřednictvím Centra pro správu Microsoft Entra nebo ho v aplikaci automatizovat prostřednictvím rozhraní Microsoft Graph API.

Pomocí postupu přihlášení pomocí aliasu nebo článku o uživatelském jménu můžete uživatelům povolit přihlášení pomocí uživatelského jména ve vaší aplikaci:

1. Povolte přihlášení pomocí uživatelského jména.
2. Vytvořte uživatele s uživatelským jménem v Centru pro správu nebo aktualizujte stávající uživatele přidáním uživatelského jména. Alternativně můžete také automatizovat vytváření a aktualizace uživatelů ve vaší aplikaci pomocí rozhraní Microsoft Graph API.

Související obsah

• Nastavení reverzního proxy serveru pro jednostránkovou aplikaci, která používá nativní autentizační rozhraní API pomocí Azure Function App.
• Použít Azure Front Door jako reverzní proxy v produkčním prostředí pro jednostrákovou aplikaci, která používá nativní ověřování.
• Vytvořit jednostrákovou aplikaci React, která používá nativní ověřovací rozhraní API od začátku.