Sdílet prostřednictvím

Rychlý start – Přihlášení uživatelů a volání webového rozhraní API v ukázkové webové aplikaci Node.js

Platí pro: Zelený kruh s bílým symbolem zaškrtnutí, který označuje, že následující obsah platí pro externí nájemce. Externí nájemci (další informace)

V tomto rychlém startu se dozvíte, jak přihlásit uživatele a volat API z webové aplikace Node.js ve vaší externí doméně. Ukázková aplikace volá .NET API. Ukázková webová aplikace používá Microsoft Authentication Library (MSAL) pro Node.js k zajištění autentizace.

Požadavky

Konfigurace oborů a rolí rozhraní API

Registrací webového rozhraní API musíte nakonfigurovat obory rozhraní API tak, aby definovaly oprávnění, která klientská aplikace může požádat o přístup k webovému rozhraní API. Kromě toho je potřeba nastavit role aplikace tak, aby určily role, které jsou k dispozici pro uživatele nebo aplikace, a udělte webové aplikaci potřebná oprávnění rozhraní API, aby mohla volat webové rozhraní API.

Konfigurace oborů rozhraní API

Rozhraní API musí publikovat minimálně jeden obor, označovaný také jako delegované oprávnění, aby klientské aplikace úspěšně získaly přístupový token pro uživatele. Pokud chcete rozsah publikovat, postupujte takto:

  1. Na stránce Registrace aplikací vyberte aplikaci API, kterou jste vytvořili (ciam-ToDoList-api), abyste otevřeli její stránku Přehled.

  2. V části Spravovatvyberte Zpřístupnit rozhraní API.

  3. V horní části stránky vedle identifikátoru URI ID aplikace vyberte odkaz Přidat a vygenerujte jedinečný identifikátor URI pro tuto aplikaci.

  4. Přijměte navrhovaný identifikátor URI ID aplikace, například api://{clientId}, a vyberte Uložit. Když vaše webová aplikace požádá o přístupový token pro webové rozhraní API, přidá identifikátor URI jako předponu pro každý obor, který definujete pro rozhraní API.

  5. V části Obory definované tímto rozhraním API vyberte Přidat obor.

  6. Zadejte následující hodnoty, které definují přístup pro čtení k rozhraní API, a pak výběrem možnosti Přidat obor uložte změny:

    Majetek Hodnota
    Název oboru ToDoList.Read
    Kdo může souhlasit pouze správci
    Zobrazovaný název souhlasu správce Čtení seznamu úkolů uživatelů pomocí todoListApi
    Popis souhlasu správce Povolit aplikaci číst uživatelův seznam úkolů pomocíTodoListApi.
    Stát Zpřístupněný

  7. Znovu vyberte Přidat obor a zadejte následující hodnoty, které definují obor přístupu pro čtení a zápis do rozhraní API. Výběrem Přidat obor uložte změny:

    Majetek Hodnota
    Název oboru ToDoList.ReadWrite
    Kdo může souhlasit pouze správci
    Zobrazovaný název souhlasu správce Číst a zapisovat seznam úkolů uživatelů pomocí 'ToDoListApi'
    Popis souhlasu správce Povolit aplikaci číst a zapisovat do seznamu úkolů uživatele pomocí ToDoListApi
    Stát Zpřístupněný

Přečtěte si další informace o principu nejnižšího oprávnění při publikování oprávnění pro webové rozhraní API.

Konfigurace rolí aplikací

Rozhraní API musí publikovat pro aplikace minimálně jednu roli aplikace, označovanou také jako oprávnění aplikace, aby klientské aplikace mohly získat přístupový token jako takové. Oprávnění aplikace jsou typem oprávnění, která by rozhraní API měla publikovat, když chtějí umožnit klientským aplikacím úspěšně se autentizovat samy za sebe a nemusí přihlašovat uživatele. Pokud chcete publikovat oprávnění aplikace, postupujte takto:

  1. Na stránce Registrace aplikací vyberte aplikaci, kterou jste vytvořili (například ciam-ToDoList-api), abyste otevřeli její stránku Přehled.

  2. V části Spravovat vyberte Role aplikace.

  3. Vyberte Vytvořit roli aplikace, zadejte následující hodnoty, a pak vyberte Použít, aby uložil vaše změny.

    Majetek Hodnota
    Zobrazovaný název SeznamÚkolů.Číst.Vše
    Povolené typy členů Aplikace
    Hodnota SeznamÚkolů.Číst.Vše
    Popis Povolit aplikaci číst seznam úkolů každého uživatele pomocí todoListApi
    Chcete tuto roli aplikace povolit? Ponechat zaškrtnuté

  4. Znovu vyberte Vytvořit roli aplikace a pak zadejte následující hodnoty pro druhou roli aplikace a pak vyberte Použít pro uložení změn:

    Majetek Hodnota
    Zobrazovaný název ToDoList.ReadWrite.All
    Povolené typy členů Aplikace
    Hodnota ToDoList.ReadWrite.All
    Popis Povolit aplikaci čtení a zápisu seznamů úkolů všech uživatelů pomocí 'ToDoListApi'
    Chcete tuto roli aplikace povolit? Ponechat zaškrtnuté

Konfigurace volitelných nároků

Můžete přidat volitelnou deklaraci idtyp, která webovému rozhraní API pomůže určit, jestli se jedná o token aplikace nebo token aplikace + uživatel. I když můžete použít kombinaci scp a rolí deklarací identity pro stejný účel, použití idtypu deklarace identity je nejjednodušší způsob, jak odlišit token aplikace od tokenu aplikace + uživatele. Například hodnota této deklarace identity je aplikace , když je token pouze pro aplikaci.

Pomocí kroků v článku Konfigurace volitelných deklarací identity přidejte deklaraci identity idtypu do přístupového tokenu:

  • Pro typ tokenu vyberte Přístup.
  • Ze seznamu volitelných nároků vyberte idtyp.

Udělení oprávnění rozhraní API webové aplikaci

Pokud chcete udělit oprávnění rozhraní API klientské aplikace (ciam-client-app), postupujte takto:

  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 Spravovatvyberte oprávnění rozhraní API.

  3. V části Nakonfigurovaná oprávnění vyberte Přidat oprávnění.

  4. Vyberte kartu rozhraní API, která moje organizace používá.

  5. V seznamu rozhraní API vyberte rozhraní API, jako je ciam-ToDoList-api.

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

  7. V seznamu oprávnění vyberte ToDoList.Read, ToDoList.ReadWrite (v případě potřeby použijte vyhledávací pole).

  8. Vyberte tlačítko Přidat oprávnění . V tomto okamžiku jste správně přiřadili oprávnění. Vzhledem k tomu, že se jedná o tenanta zákazníka, nemohou koncoví uživatelé sami udělit souhlas s těmito oprávněními. Pokud chcete tento problém vyřešit, musíte jako správce 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 ověřte, že uděleno pro <název vašeho tenanta> se zobrazí v části Stav pro oba rozsahy.

  9. V seznamu Konfigurovaná oprávnění vyberte oprávnění ToDoList.Read a ToDoList.ReadWrite , a pak zkopírujte úplný identifikátor URI oprávnění pro pozdější použití. Úplný identifikátor URI oprávnění vypadá podobně jako api://{clientId}/{ToDoList.Read} nebo api://{clientId}/{ToDoList.ReadWrite}.

Klonování nebo stažení ukázkové webové aplikace a webového rozhraní API

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-javascript-tutorial.git

  • Stáhněte soubor .zip. Extrahujte ho do cesty k souboru, kde délka názvu je menší než 260 znaků.

Nainstalujte závislosti projektu

  1. Otevřete okno konzoly a přejděte do adresáře, který obsahuje ukázkovou aplikaci Node.js/Express:

    cd 2-Authorization\4-call-api-express\App

  2. Spuštěním následujících příkazů nainstalujte závislosti webové aplikace:

    npm install && npm update

Konfigurace ukázkové webové aplikace a rozhraní API

K použití registrace vaší aplikace v ukázce klientské webové aplikace:

  1. V editoru kódu otevřete soubor App\authConfig.js.

  2. Vyhledejte zástupný symbol:

    • Enter_the_Application_Id_Here a nahraďte ho ID aplikace (klienta), kterou jste zaregistrovali dříve. Klientská aplikace je ta, kterou jste zaregistrovali v požadavcích.
    • Enter_the_Tenant_Subdomain_Here a nahraďte ji subdoménou adresáře (nájemce). Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud nemáte název tenanta, zjistěte, jak získat podrobnosti o tenantovi.
    • Enter_the_Client_Secret_Here a nahraďte ji hodnotou tajného kódu aplikace, kterou jste zkopírovali dříve.
    • Enter_the_Web_Api_Application_Id_Here a nahraďte ho ID aplikace (klienta) webového rozhraní API, které jste zkopírovali dříve v rámci požadavků.

Chcete-li použít registraci aplikace v ukázce webového rozhraní API:

  1. V editoru kódu otevřete soubor API\ToDoListAPI\appsettings.json.

  2. Vyhledejte zástupný symbol:

    • Enter_the_Application_Id_Here a nahraďte ho ID aplikace (klienta) webového rozhraní API, které jste zkopírovali. Aplikace webového rozhraní API je ta, kterou jste zaregistrovali dříve jako součást předpokladů.
    • Enter_the_Tenant_Id_Here a nahraďte ho ID adresáře (tenanta), které jste zkopírovali dříve.
    • Enter_the_Tenant_Subdomain_Here a nahraďte ji subdoménou adresáře (nájemce). Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud nemáte název tenanta, zjistěte, jak získat podrobnosti o tenantovi.

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

  1. Otevřete okno konzoly a pak spusťte webové rozhraní API pomocí následujících příkazů:

    cd 2-Authorization\4-call-api-express\API\ToDoListAPI
dotnet run

  2. Spusťte klienta webové aplikace pomocí následujících příkazů:

    cd 2-Authorization\4-call-api-express\App
npm install
npm start

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

  4. Vyberte tlačítko Přihlásit se . Zobrazí se výzva k přihlášení.

    snímek obrazovky přihlášení do node webové aplikace

  5. Na přihlašovací stránce zadejte svoji e-mailovou adresu, vyberte Další, zadejte heslo a pak vyberte Přihlásit se. Pokud účet nemáte, klikněte na odkaz Žádný účet? Vytvořit účet, který spustí proceduru registrace.

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

    Snímek obrazovky s přihlášením k webové aplikaci uzlu a voláním rozhraní API

Rozhraní API pro volání

  1. Chcete-li zavolat rozhraní API, vyberte odkaz Zobrazit váš seznam úkolů. Zobrazí se stránka podobná následujícímu snímku obrazovky.

    snímek obrazovky rozhraní API pro manipulaci se seznamem úkolů

  2. Manipulujte se seznamem to-do vytvořením a odebráním položek.

Jak to funguje

Každé zobrazení, přidání nebo odebrání úlohy aktivujete volání rozhraní API. Pokaždé, když aktivujete volání rozhraní API, klientská webová aplikace získá přístupový token s požadovanými oprávněními (obory) pro volání koncového bodu rozhraní API. Například ke čtení úlohy musí klientská webová aplikace získat přístupový token s oprávněním nebo oborem ToDoList.Read.

Koncový bod webového rozhraní API musí zkontrolovat, jestli jsou oprávnění nebo obory v přístupovém tokenu poskytované klientskou aplikací platné. Pokud je přístupový token platný, koncový bod odpoví na požadavek HTTP, jinak odpoví 401 Unauthorized chybou HTTP.

Související obsah

  • Last updated on