Rövid útmutató: Ismerkedés a Visual Studio Code Microsoft Entra Külső ID bővítményével (előzetes verzió)

A következőkre vonatkozik:Munkaerő-bérlők Külső bérlők (további információ)

Az erőforrások és az ügyféladatok védelméhez elengedhetetlen a hitelesítés integrálása a fogyasztói és üzleti ügyfélalkalmazásokba. A Visual Studio Code Microsoft Entra Külső ID bővítményével gyorsan hozzáadhat hitelesítést az ügyfelek identitás- és hozzáférés-kezelési (CIAM) forgatókönyveihez. A megadott alkalmazásminták használatával megtekintheti, hogyan állíthat be testreszabott, márkás bejelentkezési felületet az alkalmazás külső felhasználói számára anélkül, hogy elhagyná a fejlesztői környezetet.

Ez a bővítmény egy alapszintű beállítást biztosít, amely automatikusan létrehoz egy bérlőt az alkalmazásokhoz, és előkészíti a felhasználók számára. Emellett leegyszerűsíti a munkafolyamatot azáltal, hogy automatikusan feltölti az olyan értékeket, mint az alkalmazásazonosítók a konfigurációs fájlba a zökkenőmentesebb beállítási folyamat érdekében.

A külső azonosító egy azure-előfizetéshez hozzáadható szolgáltatás. Ha már rendelkezik ilyen azonosítóval, egyszerűen felvehet külső azonosítót. Ellenkező esetben állítsa be a Microsoft Entra Külső ID ingyenes próbaverzióját a Visual Studio Code-on belül, és kezdje egy mintaalkalmazás konfigurálásával.

A bővítmény telepítése

A Microsoft Entra Külső ID bővítmény a Visual Studio Code Marketplace-en érhető el.

1. Ha még nincs telepítve a Visual Studio Code, töltse le a Visual Studio Code-ot, és végezze el a telepítési lépéseket.
2. Telepítse a Microsoft Entra Külső ID Visual Studio Code bővítményt a aka.ms/ciam/vscode/marketplace.

A bővítmény telepítése után a tevékenységsávon lévő ikonnal érheti el.

A bővítményt a Visual Studio Code üdvözlőoldalán is megnyithatja: Válassza a Súgó>üdvözli, majd az Útmutatók területen válassza az Első lépések Microsoft Entra Külső ID lehetőséget. Előfordulhat, hogy a bővítmények listájának kibontásához az Egyebek lehetőséget kell választania.

Ismerkedés a külső azonosító beállításával

A Microsoft Entra Külső ID bővítmény létrehoz egy bérlőt egy külső konfigurációban, amely tartalmazza az alkalmazást és a külső felhasználók könyvtárát. Ezt az új bérlőt hozzáadhatja meglévő Azure-előfizetéséhez. Vagy ha nem rendelkezik Azure-előfizetéssel, hozzon létre egy próbaverziós bérlőt, amely nem igényel egyet (további információ).

• Az első lépések Microsoft Entra Külső ID kezdőlapon válasszon egy lehetőséget:

  • Ha még nem rendelkezik Azure-fiókkal, válassza az Ingyenes próbaverzió beállítása lehetőséget.
  • Ha már rendelkezik Azure-fiókkal, válassza az Azure-előfizetés használata lehetőséget.

Ingyenes próbaverzió beállítása

1. Válassza az Ingyenes próbaverzió beállítása lehetőséget.

2. A bejelentkezési megerősítést kérő üzenetben válassza az Engedélyezés lehetőséget.

3. Megnyílik egy új böngészőablak. Jelentkezzen be személyes fiókjával, Microsoft-fiókjával (MSA) vagy GitHub-fiókjával. Miután bejelentkezett, zárja be a böngészőablakot.

4. Térjen vissza a Visual Studio Code-hoz. A Hol található a bérlő? menüben válassza ki a bérlői adatok helyét. Ez a kijelölés később nem módosítható.

5. Adja meg a bérlő nevét.

   

6. A bővítmény létrehozza a próbaverziós bérlőt. A folyamat előrehaladását a Kimenet megtekintése>ablak megnyitásával tekintheti meg. Amikor a folyamat befejeződött, megjelenik a bérlő.

Az előfizetés használata

1. Válassza az Előfizetés használata lehetőséget.

2. Ha több bérlő van társítva a fiókjához, megjelenik a Címtár kiválasztása menü. Válassza ki a használni kívánt előfizetéshez társított címtárat (bérlőt).

   

   Feljegyzés

   Ha az üzenetben nem jelennek meg előfizetések, beállíthat helyette egy ingyenes próbaverziót.

3. Megnyílik egy böngészőlap, ahol bejelentkezhet a fiókjába. Bejelentkezés után térjen vissza a Visual Studio Code-hoz.

4. Az Előfizetés hozzáadása menüben válassza ki az előfizetést.

5. Az Erőforráscsoport kiválasztása menüben válasszon egy erőforráscsoportot.

6. A Hol található a bérlő? menüben válassza ki a bérlői adatok helyét. Ez a kijelölés később nem módosítható.

7. Adja meg a bérlő nevét, majd kattintson az Enter gombra a bérlő létrehozásához.

   

   Feljegyzés

   A bérlőlétrehozás folyamata akár 30 percet is igénybe vehet. A bérlő létrehozása után a Microsoft Entra felügyeleti központban és az Azure Portalon is elérheti.

Bejelentkezés beállítása a felhasználók számára

Az alkalmazást úgy konfigurálhatja, hogy a felhasználók e-mail címükkel, jelszavukkal vagy egyszeri pin-kódjukkal jelentkezzenek be. A felhasználói felület megjelenését úgy is megtervezheti, hogy hozzáadja a cég emblémáját, módosítja a háttérszínt, vagy módosítja a bejelentkezési elrendezést. Ezek a módosítások az új bérlő összes alkalmazásának megjelenésére és megjelenésére vonatkoznak.

1. A felhasználókhoz való bejelentkezés beállítása csoportban válassza a Bejelentkezés és védjegyzés beállítása lehetőséget.

   

2. A rendszer kéri, hogy jelentkezzen be az új bérlőbe. Válassza az Engedélyezés lehetőséget, majd a megnyíló böngészőablakban válassza ki az éppen használt fiókot, és jelentkezzen be. Térjen vissza a Visual Studio Code-hoz.

3. A Hogyan szeretné, ha a felhasználók bejelentkeznének? menü tetején válassza ki a felhasználók számára elérhetővé tenni kívánt bejelentkezési módszert: e-mail- és jelszó- vagy e-mail- és egyszeri pin-kód.

   

4. Kattintson az OK gombra.

5. Adja meg, hogy a bejelentkezési oldal hol jelenjen meg a böngészőablakban középre igazított vagy jobbra igazított módon.

   

6. Válassza ki a regisztrációs oldal háttérszínét.

   

7. Ezután megnyílik egy Fájlkezelő ablak, amelyben hozzáadhatja a cég emblémáját. Keresse meg a cég emblémáját, majd válassza a Feltöltés lehetőséget.

   Feljegyzés

   A képkövetelmények a következők:

   • Képméret 245 x 36 px
   • Maximális fájlméret 50 KB
   • Fájltípus: Átlátszó PNG vagy JPEG

8. Megjelenik a bejelentkezési folyamat konfigurálása üzenet. Az előrehaladást a Kimenet ablakban tekintheti meg. Ha a konfiguráció befejeződött, megjelenik a felhasználói folyamat beállítása.

Mintaalkalmazás beállítása és futtatása

A bővítmény több kódmintát tartalmaz, amelyek bemutatják, hogyan implementálható a hitelesítés a különböző alkalmazástípusokban és fejlesztési nyelvekben. A minták egyoldalas alkalmazásokhoz (JavaScript, React, Angular) és webalkalmazásokhoz (Node.js Express, ASP.NET Core, Python Django, Python Flask) tartoznak. Válasszon egy mintát a bővítményből, és a bővítmény automatikusan konfigurálja az alkalmazást a bejelentkezési felülettel.

1. A Mintaalkalmazás beállítása és futtatása lehetőséget választva válassza a Mintaalkalmazás beállítása gombot.

   

2. A menüben válassza ki a letölteni kívánt alkalmazás típusát. Ha a rendszer kéri, hogy válassza ki ismét a fiókját, válassza ki ugyanazt a fiókot, amelyet használt.

   

3. Megnyílik egy Fájlkezelő ablak, ahol kiválaszthatja, hogy hová szeretné menteni a mintaadattárat. Jelöljön ki egy mappát, majd kattintson ide az Adattár letöltése elemre.

4. A letöltés befejezése után megnyílik egy új Visual Studio Code-projekt-munkaterület, amelyen megjelenik a letöltött alkalmazásmappa az Explorerben.

5. Nyisson meg egy új terminált a Visual Studio Code ablakban.

6. A felső menüben válassza a Futtatás>hibakeresés nélkül lehetőséget. A hibakeresési konzol megjeleníti az indítási szkript előrehaladását. A projekt beállítása és a buildszkript futtatása rövid ideig tart.

Amikor a bővítmény letölti az alkalmazást, automatikusan frissíti a Microsoft Authentication Library (MSAL) konfigurációját az új bérlőhöz való csatlakozáshoz és a beállított felület használatához. Nincs szükség további konfigurációra; a projekt létrehozása után azonnal futtathatja az alkalmazást. Az authConfig fájlban például az ügyfélazonosító az alkalmazásazonosítóra van állítva, a szolgáltató pedig az új bérlő altartományára van állítva.

A felhasználói felület futtatása

A telepítés befejezése után próbálja ki a bejelentkezési élményt az alkalmazás helyi gazdagép-átirányítási URI-jának megadásával egy böngészőben. Az átirányítási URL-cím az alkalmazás README.md fájljában érhető el.

Az Explorer nézet használata

Az Explorer nézet megjeleníti a bérlő regisztrált alkalmazásait és hitelesítési felhasználói folyamatait. Megtekintheti a konfigurációs információkat, vagy közvetlenül a Microsoft Entra felügyeleti központba navigálhat az erőforrás további konfigurálásához vagy kezeléséhez. Az Explorer nézet eléréséhez nyissa meg a Microsoft Entra Külső ID bővítményt a tevékenységsáv ikonjának kiválasztásával.

Erőforrások kezelése

A projekterőforrások megtekintéséhez bontsa ki a csomópontokat a bal oldali panelEn az Erőforrások kezelése csoportban.

Explorer nézetben kiválaszthat egy erőforrást, és közvetlenül a Microsoft Entra felügyeleti központba léphet annak kezeléséhez vagy konfigurálásához. Kattintson például a jobb gombbal egy alkalmazásra, és válassza a Megnyitás a Felügyeleti központban lehetőséget. A rendszer kérni fogja a bejelentkezést, majd a Microsoft Entra felügyeleti központ közvetlenül megnyílik az alkalmazás alkalmazásregisztrációs oldalára.

Első lépések

Az Első lépések szakaszban hozzáférhet az ingyenes próbaverzió dokumentációjához, vagy közvetlenül a bejelentkezési felület konfigurációjához vagy a mintaalkalmazás letöltési lapjaihoz a bővítmény útmutatójának megnyitása nélkül.

Következő lépések

További információ az ingyenes külső azonosítójú próbaverziós bérlőkről.