Sdílet prostřednictvím

Rychlý start: Přihlášení uživatelů do jednostránkové aplikace pomocí nativní sady SDK pro autentizaci v JavaScriptu

Platí pro: Zelený kruh se symbolem bílé značky zaškrtnutí, který označuje následující obsah platí pro externí tenanty. Externí tenanti (další informace)

V tomto rychlém startu pomocí jednostránkové aplikace (SPA) předvedete, jak ověřovat uživatele pomocí nativní sady SDK pro ověřování. Ukázková aplikace demonstruje registraci, přihlášení a odhlášení uživatelů pro autentizaci pomocí e-mailu a hesla a pomocí jednorázového kódu zaslaného e-mailem.

Požadavky

Povolení autentizačních toků pro veřejného klienta a nativní aplikace

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 Spravovat vyberte Ověřování.
  3. V části Pokročilé nastavenípovolte toky veřejných klientů:
    1. Pro Povolit následující mobilní a desktopové procesy vyberte Ano.
    2. V části Povolit nativní ověř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

  • Stáhnout ukázkovou verzi. Extrahujte ho do souborové cesty, u které je délka názvu menší 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 typescript/native-auth/react-nextjs-sample

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

    npm install

Konfigurace ukázkové aplikace React

  1. Otevřete soubor src/config/auth-config.ts a nahraďte následující zástupné symboly hodnotami získanými z Centra pro správu Microsoft Entra:

    • Vyhledejte zástupný symbol Enter_the_Application_Id_Here a nahraďte ho ID aplikace (klienta) aplikace, kterou jste zaregistrovali dříve.
    • Vyhledejte zástupný symbol Enter_the_Tenant_Subdomain_Here a pak ho nahraďte subdoménou tenanta v Centru pro správu Microsoft Entra. Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud neznáte název svého tenanta, zjistěte, jak získat podrobnosti o tenantovi.

  2. Uložte změny.

Konfigurace proxy serveru CORS

Nativní rozhraní API pro ověřování nepodporuje sdílení prostředků mezi zdroji (CORS), takže musíte nastavit proxy server mezi vaší aplikací SPA a rozhraními 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:

  • Nahraďte tenantSubdomain adresářovou (tenantovou) subdoménou. 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, zjistěte, jak získat 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 typescript/native-auth/react-nextjs-sample/
npm run cors

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

    cd typescript/native-auth/react-nextjs-sample/
npm run dev

  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 obnovu hesla výběrem tlačítek Přihlásit se a Obnovit 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

  • Last updated on