Sdílet prostřednictvím

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

  • Článek

platí pro: bílý kruh se šedým symbolem X. pracovníci zelený kruh s bílou značkou zaškrtnutí. externí nájemci (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.

Požadavky

Registrace a konfigurace aplikace EditProfileService

V tomto kroku zaregistrujete aplikaci EditProfileService (aplikaci API), která poskytuje mechanismus ochrany operace profilu úprav vyžadováním vícefaktorového ověřování.

Registrace aplikace EditProfileService

  1. Přihlaste se do centra pro správu Microsoft Entra alespoň jako Vývojář aplikací.

  2. Pokud máte přístup k více tenantům, pomocí ikony Nastavení v horní nabídce přepněte do externího tenanta z nabídky Adresáře a předplatná.

  3. Přejděte na Identity>Applications>App registrations.

  4. Vyberte + Nová registrace.

  5. Na stránce Zaregistrovat aplikaci, která se zobrazí, zadejte registrační informace vaší aplikace:

    1. V části Název zadejte smysluplný název aplikace, například edit-profile-service .

    2. V části Podporované typy účtůvyberte Pouze účty v tomto organizačním adresáři.

  6. Vyberte Zaregistrovat a vytvořte aplikaci.

  7. Po dokončení registrace se zobrazí podokno Přehled aplikace . Poznamenejte ID aplikace (klienta) pro použití ve zdrojovém kódu aplikace.

Konfigurace oborů rozhraní API aplikace EditProfileService

Aplikace EditProfileService musí zveřejnit oprávnění, která klient potřebuje získat pro volání 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 obor 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 správci pouze
    Zobrazované jméno 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

  7. V části Spravovatvyberte Manifest, abyste otevřeli editor manifestu rozhraní API.

  8. Nastavte vlastnost accessTokenAcceptedVersion na 2.

  9. Vyberte Uložit.

Přidání tajného klíče klienta aplikace

Vytvořte tajný klíč klienta pro zaregistrovanou aplikaci. Aplikace používá tajný klíč klienta k prokázání své identity při žádosti o tokeny.

  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 Certifikáty & tajných kódů.
  3. Vyberte Nový tajný klíč klienta.
  4. Do pole Popis zadejte popis tajného klíče klienta (například tajný kód klienta edit-profile-service).
  5. V části Konec platnostivyberte dobu, po kterou je tajemství platné (podle pravidel zabezpečení vaší organizace), a poté vyberte Přidat.
  6. Zaznamenejte hodnotu tajemství. Tuto hodnotu použijete pro konfiguraci v pozdějším kroku. Hodnota tajného kódu se znovu nezobrazí a není možné ji žádným způsobem načíst, když přejdete mimo Certifikáty a tajné kódy. Ujistěte se, že jste ho nahráli.

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í.

Správně jste přiřadili oprávnění User.ReadWrite. 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 (z předpokladů).

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}.

Správně jste přiřadili oprávnění *EditProfileService.ReadWrite. 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 vašeho tenanta>a poté vyberte Ano.

  2. Vyberte Aktualizovata ověřte, že uděleno pro <název vašeho tenanta,> se zobrazí v části Stav pro oba obory.

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 podmíněného přístupu vícefaktorového ověřování, 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

Pokud chcete získat ukázkovou aplikaci, 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 aplikaci a aplikaci služby nebo rozhraní API. 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:

    • 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 ho oborem aplikace EditProfileService. Hodnota vypadá podobně jako api://{clientId}/EditProfileService.ReadWrite. {clientId} je hodnota ID aplikace (klienta) 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) EditProfileService, kterou jste zaregistrovali dříve.
    • Enter_the_Client_Secret_Here a nahraďte ho hodnotou tajného klíče aplikace EditProfileService , 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/.

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:

    Snímek obrazovky aktualizace profilu uživatele

  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