Rychlý start – Úprava profilu v ukázkové webové aplikaci Node.js

Platí pro: Externí tenanti (další informace)

V tomto rychlém startu použijete ukázkovou Node.js webovou aplikaci, abyste se dozvěděli, jak do webové aplikace přidat přihlašovací a upravit profil. Ukázková webová aplikace používá Microsoft Authentication Library pro Node.js (MSAL Node) a rozhraní Microsoft Graph API k dokončení přihlášení a úpravě profilu. Operace upravit profil vyžaduje, aby uživatel dokončil vícefaktorové ověřování (MFA).

Požadavky

• Dokončete kroky a požadavky článku : Přihlašování uživatelů do ukázkové webové aplikace v quickstartu. Tento rychlý start vám ukáže, jak přihlásit uživatele prostřednictvím ukázkové webové aplikace Node.js.
• Zaregistrujte novou aplikaci pro webové rozhraní API v Centru pro správu Microsoft Entra s názvem edit-profile-service nakonfigurovanou pouze pro účty v tomto organizačním adresáři. Další podrobnosti najdete v tématu Registrace aplikace . Na stránce Přehled aplikace si poznamenejte následující hodnoty pro pozdější použití:
  • ID aplikace (klienta)
  • ID adresáře (klienta)
• Přidejte do registrace aplikace tajný klíč klienta. Nepoužívejte tajné kódy klienta v produkčních aplikacích. Místo toho použijte certifikáty nebo federované přihlašovací údaje. Další informace najdete v tématu přidání přihlašovacích údajů do aplikace.

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 aplikace EditProfileService

Aplikace EditProfileService musí zveřejnit oprávnění, která klientská aplikace získá k volání webového 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 (například edit-profile-service), a otevřete tak její stránku Přehled.

2. V části Spravovatvyberte Otevřít rozhraní API.

3. V horní části stránky vedle URI ID aplikaceklikněte na odkaz Přidat, abyste vygenerovali jedinečný 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 APIvyberte Přidat obor.

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

   Vlastnost	Hodnota
   Název oboru	EditProfileService.ReadWrite
   Kdo může souhlasit	Pouze správci
   Zobrazovaný název souhlasu správce	Klient upravuje profil prostřednictvím služby pro úpravy profilu
   Popis souhlasu správce	Rozsah, který umožňuje klientské webové aplikaci upravovat profil prostřednictvím služby pro úpravu profilu.
   Stát	Povoleno

Udělení oprávnění User.ReadWrite pro aplikaci EditProfileService

User.ReadWrite je oprávnění rozhraní Microsoft Graph API, které umožňuje uživateli aktualizovat profil. Pokud chcete udělit oprávnění User.ReadWrite aplikaci EditProfileService, postupujte takto:

1. Na stránce Registrace aplikací vyberte aplikaci, kterou jste vytvořili (například edit-profile-service), a otevřete její stránku Přehled.

2. V části Spravovatvyberte oprávnění rozhraní API.

3. Vyberte kartu rozhraní MICROSOFT API a pak v části Běžně používané rozhraní MICROSOFT APIvyberte Microsoft Graph.

4. Vyberte Delegovaná oprávnění, vyhledejte a v seznamu oprávnění vyberte User.ReadWrite.

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

6. Správně jste přiřadili oprávnění User.ReadWrite aplikaci EditProfileService. Vzhledem k tomu, že je tenant externím tenantem, nemůžou uživatelé zákazníka k těmto oprávněním vyjádřit souhlas. Jako správce tenanta musíte udělit souhlas s tímto oprávněním jménem všech uživatelů v tenantovi:

   1. Vyberte Udělit souhlas správce pro <název nájemce>a pak vyberte Ano.
   2. Vyberte Obnovita ověřte, že uděleno pro název vašeho tenantu <> se zobrazuje pod Stav pro obě oblasti.

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

V této části udělíte oprávnění rozhraní API klientské webové aplikaci, kterou jste zaregistrovali dříve (v požadavcích).

Udělte klientské webové aplikaci oprávnění pro EditProfileService.ReadWrite. Toto oprávnění je vystaveno aplikací EditProfileService a chrání operaci profilu aktualizace pomocí MFA. Pokud chcete udělit oprávnění EditProfileService.ReadWrite klientské webové aplikaci, postupujte takto:

1. Na stránce Registrace aplikací vyberte aplikaci API, 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 pro rozhraní API, která moje organizace používá.

5. V seznamu rozhraní API vyberte například API edit-profile-service .

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

7. V seznamu oprávnění vyberte EditProfileService.ReadWrite.

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

9. V seznamu Konfigurovaná oprávnění vyberte oprávnění EditProfileService.ReadWrite a 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}/{EditProfileService.ReadWrite}.

10. Správně jste přiřadili oprávnění *EditProfileService.ReadWrite klientské webové aplikaci. Vzhledem k tomu, že je tenant externím tenantem, nemůžou uživatelé zákazníka k těmto oprávněním vyjádřit souhlas. Jako správce tenanta musíte udělit souhlas s tímto oprávněním jménem všech uživatelů v tenantovi:

    1. Vyberte Udělit souhlas správce pro <název nájemce>a pak vyberte Ano.
    2. Vyberte Obnovita ověřte, že uděleno pro název vašeho tenantu <> se zobrazuje pod Stav pro obě oblasti.

Vytvořit zásady vícefaktorového ověřování podmíněného přístupu

Vaše aplikace EditProfileService, kterou jste zaregistrovali dříve, je prostředek, který chráníte pomocí vícefaktorového ověřování.

Pokud chcete vytvořit zásadu pro podmíněný přístup (CA) vícefaktorového ověřování (MFA), použijte postup v Přidání vícefaktorového ověřování do aplikace. Při vytváření zásad použijte následující nastavení:

• Použijte zásadu vícefaktorového ověřovánípro název.
• U cílových prostředků vyberte aplikaci EditProfileService, kterou jste zaregistrovali dříve, například edit-profile-service .

Klonování nebo stažení ukázkové webové aplikace

Už jste naklonovali ukázkovou aplikaci z požadavků, ale pokud jste to ještě neudělali, můžete ji buď naklonovat z GitHubu, nebo si ji stáhnout jako soubor .zip.

stáhněte soubor .zip nebo naklonujte ukázkovou webovou aplikaci z GitHubu spuštěním následujícího příkazu:

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

Konfigurace ukázkové webové aplikace

Tato ukázka kódu obsahuje dvě aplikace, klientskou webovou aplikaci a aplikaci API (aplikaci EditProfileService). Tyto aplikace je potřeba aktualizovat, aby používaly nastavení externího tenanta. Provedete to pomocí následujících kroků:

1. V editoru kódu otevřete soubor 1-Authentication\7-edit-profile-with-mfa-express\App\authConfig.js a vyhledejte zástupný symbol:

   • Enter_the_Application_Id_Here a nahraďte ho ID aplikace (klienta) klientské webové aplikace, kterou jste zaregistrovali dříve.
   • Nahraďte Enter_the_Tenant_Subdomain_Here 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 jméno nájemce, zjistěte, jak zjistit podrobnosti o nájemci.
   • Enter_the_Client_Secret_Here a nahraďte ji hodnotou tajného kódu aplikace klientské webové aplikace, kterou jste zkopírovali dříve.
   • graph_end_point a nahraďte ho koncovým bodem rozhraní Microsoft Graph API, který je https://graph.microsoft.com/.
   • Add_your_protected_scope_here a nahraďte ji oborem aplikace API (aplikace EditProfileService). Hodnota vypadá podobně jako api://{clientId}/EditProfileService.ReadWrite. {clientId} je hodnota ID aplikace (klienta) služby EditProfileService , kterou jste zaregistrovali dříve.

2. V editoru kódu otevřete soubor 1-Authentication\7-edit-profile-with-mfa-express\Api\authConfig.js a vyhledejte zástupný symbol:

   • Enter_the_Tenant_Subdomain_Here 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 jméno nájemce, zjistěte, jak zjistit podrobnosti o nájemci.
   • Enter_the_Tenant_ID_Here a nahraďte ho ID tenanta. Pokud nemáte ID nájemce, zjistěte, jak si přečíst podrobnosti o nájemci.
   • Enter_the_Edit_Profile_Service_Application_Id_Here a nahraďte ji hodnotou ID aplikace (klienta) aplikace EditProfileService .
   • Enter_the_Client_Secret_Here a nahraďte ji hodnotou tajného klíče klienta vytvořenou v rámci požadavků.
   • graph_end_point a nahraďte ho koncovým bodem rozhraní Microsoft Graph API, který je https://graph.microsoft.com/.

Instalace závislostí projektu a spuštění aplikace

Pokud chcete aplikaci otestovat, nainstalujte závislosti projektu pro klientskou i aplikaci služby nebo rozhraní API a pak je spusťte.

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

   cd 1-Authentication\7-edit-profile-with-mfa-express\App
   npm install
   npm start
   

2. Pokud chcete spustit aplikaci pro úpravy služby nebo rozhraní API, změňte adresář na aplikaci edit service/API, 1-Authentication\7-edit-profile-with-mfa-express\Apia spusťte následující příkazy:

   npm install
   npm start
   

3. Otevřete prohlížeč a přejděte na http://localhost:3000. Pokud dojde k chybám certifikátu SSL, vytvořte soubor .env a přidejte následující konfiguraci:

   # Use this variable only in the development environment. 
   # Remove the variable when you move the app to the production environment.
   NODE_TLS_REJECT_UNAUTHORIZED='0'
   

4. Vyberte tlačítko Přihlásit a pak se přihlaste.

5. Na přihlašovací stránce zadejte e-mailovou adresu, vyberte Další, zadejte Hesloa pak vyberte Přihlásit se. Pokud účet nemáte, vyberte Žádný účet? Vytvořte jeden odkaz, který spustí tok registrace.

6. Chcete-li aktualizovat profil, vyberte odkaz Úpravy profilu. Zobrazí se stránka podobná následujícímu snímku obrazovky:

   

7. Pokud chcete upravit profil, vyberte tlačítko Upravit profil. Pokud jste to ještě neudělali, aplikace vás vyzve k dokončení úkolu vícefaktorového ověřování.

8. Proveďte změny v libovolném z podrobností profilu a pak vyberte tlačítko Uložit.

Související obsah

• Naučte se přidat úpravy profilu do vlastní Node.js webové aplikace.