Hitelesítés konfigurálása egy egyoldalas mintaalkalmazásban az Azure AD B2C használatával

  • Cikk

Ez a cikk egy javaScript-minta egyoldalas alkalmazást (SPA) használ az Azure Active Directory B2C (Azure AD B2C) hitelesítés hozzáadásához az SLA-khoz.

Áttekintés

Az OpenID Csatlakozás (OIDC) egy olyan hitelesítési protokoll, amely az OAuth 2.0-ra épül. Ezzel biztonságosan bejelentkeztethet egy felhasználót egy alkalmazásba. Ez a SPA-minta az MSAL.js-t és az OIDC PKCE-folyamatot használja. Az MSAL.js egy Microsoft által biztosított kódtár, amely leegyszerűsíti a hitelesítés és az engedélyezési támogatás hozzáadását az SLA-khoz.

Bejelentkezési folyamat

A bejelentkezési folyamat a következő lépéseket foglalja magában:

  1. A felhasználók megnyitják a webalkalmazást, és kiválasztják a Bejelentkezés lehetőséget.
  2. Az alkalmazás hitelesítési kérelmet kezdeményez, és átirányítja a felhasználókat az Azure AD B2C-be.
  3. A felhasználók regisztrálnak vagy bejelentkeznek , és visszaállítják a jelszót. Másik lehetőségként egy közösségi fiókkal is bejelentkezhetnek.
  4. Miután a felhasználók bejelentkeznek, az Azure AD B2C egy engedélyezési kódot ad vissza az alkalmazásnak.
  5. Az egyoldalas alkalmazás ellenőrzi az azonosító jogkivonatát, beolvassa a jogcímeket, és lehetővé teszi a felhasználók számára a védett erőforrások és API-k meghívását.

Alkalmazásregisztráció áttekintése

Ahhoz, hogy az alkalmazás bejelentkezhessen az Azure AD B2C-vel, és meghívjon egy webes API-t, regisztráljon két alkalmazást az Azure AD B2C címtárban.

  • A webalkalmazás-regisztrációval az alkalmazás bejelentkezhet az Azure AD B2C-vel. A regisztráció során meg kell adnia az átirányítási URI-t. Az átirányítási URI az a végpont, amelyre az Azure AD B2C átirányítja a felhasználókat az Azure AD B2C-vel való hitelesítés befejezése után. Az alkalmazásregisztrációs folyamat létrehoz egy alkalmazásazonosítót, más néven ügyfél-azonosítót, amely egyedileg azonosítja az alkalmazást.

  • A webes API-regisztráció lehetővé teszi, hogy az alkalmazás biztonságos webes API-t hívjon meg. A regisztráció tartalmazza a webes API-hatóköröket. A hatókörök lehetővé teszik a védett erőforrások, például a webes API engedélyeinek kezelését. A webalkalmazásnak engedélyt kell adnia a webes API-hatókörökhöz. Hozzáférési jogkivonat kérése esetén az alkalmazás megadja a kívánt engedélyeket a kérelem hatókörparaméterében.

Az alkalmazásarchitektúra és a regisztrációk az alábbi ábrán láthatóak:

Diagram of a web app with web API call registrations and tokens.

Webes API meghívása

A hitelesítés befejezése után a felhasználók kapcsolatba lépnek az alkalmazással, amely egy védett webes API-t hív meg. A webes API tulajdonosi jogkivonat-hitelesítést használ. A tulajdonosi jogkivonat az az alkalmazás által az Azure AD B2C-ből beszerzett hozzáférési jogkivonat. Az alkalmazás átadja a jogkivonatot a HTTPS-kérés engedélyezési fejlécében.

Authorization: Bearer <access token>

Ha a hozzáférési jogkivonat hatóköre nem egyezik a webes API hatóköreivel, a hitelesítési kódtár egy új hozzáférési jogkivonatot szerez be a megfelelő hatókörökkel.

Kijelentkezés folyamata

A kijelentkezés folyamata a következő lépésekből áll:

  1. Az alkalmazásból a felhasználók kijelentkeznek.
  2. Az alkalmazás törli a munkamenet-objektumokat, a hitelesítési tár pedig törli a jogkivonat-gyorsítótárát.
  3. Az alkalmazás az Azure AD B2C bejelentkezési végpontra viszi a felhasználókat az Azure AD B2C-munkamenet leállításához.
  4. A rendszer visszairányítja a felhasználókat az alkalmazásba.

Előfeltételek

Futó számítógép:

1. lépés: A felhasználói folyamat konfigurálása

Amikor a felhasználók megpróbálnak bejelentkezni az alkalmazásba, az alkalmazás elindít egy hitelesítési kérést az engedélyezési végponthoz egy felhasználói folyamaton keresztül. A felhasználói folyamat határozza meg és szabályozza a felhasználói élményt. Miután a felhasználók befejezték a felhasználói folyamatot, az Azure AD B2C létrehoz egy jogkivonatot, majd visszairányítja a felhasználókat az alkalmazásba.

Ha még nem tette meg, hozzon létre egy felhasználói folyamatot vagy egy egyéni szabályzatot. Ismételje meg a lépéseket három különálló felhasználói folyamat létrehozásához az alábbiak szerint:

  • Kombinált bejelentkezés és felhasználói folyamat regisztrálása , például susi. Ez a felhasználói folyamat az Elfelejtett jelszó funkciót is támogatja.
  • Profilszerkesztési felhasználói folyamat, például edit_profile.
  • Új jelszó kérése felhasználói folyamat, például reset_password.

Az Azure AD B2C előre fel van függve B2C_1_ a felhasználói folyamat nevére. Például a susi következő lesz B2C_1_susi: .

2. lépés: Az SPA és az API regisztrálása

Ebben a lépésben létrehozza az SPA- és a webes API-alkalmazásregisztrációkat, és megadja a webes API hatóköreit.

2.1. lépés: A webes API-alkalmazás regisztrálása

A webes API-alkalmazásregisztráció létrehozásához (alkalmazásazonosító: 2) kövesse az alábbi lépéseket:

  1. Jelentkezzen be az Azure Portalra.

  2. Győződjön meg arról, hogy az Azure AD B2C-bérlőt tartalmazó könyvtárat használja. Válassza a Címtárak + előfizetések ikont a portál eszköztárán.

  3. A Portál beállításai | Címtárak + előfizetések lap, keresse meg az Azure AD B2C-címtárat a címtárnévlistában, majd válassza a Váltás lehetőséget.

  4. Az Azure Portalon keresse meg és válassza ki az Azure AD B2C-t.

  5. Válassza a Alkalmazásregisztrációk, majd az Új regisztráció lehetőséget.

  6. A Név mezőbe írja be az alkalmazás nevét (például my-api1). Hagyja meg az átirányítási URI és a támogatott fióktípusok alapértelmezett értékeit.

  7. Válassza a Regisztrálás lehetőséget.

  8. Az alkalmazásregisztráció befejezése után válassza az Áttekintés lehetőséget.

  9. Jegyezze fel az alkalmazás (ügyfél) azonosítóját a webalkalmazás konfigurálásakor későbbi használatra.

    Screenshot that demonstrates how to get a web A P I application I D.

2.2. lépés: Hatókörök konfigurálása

  1. Válassza ki a létrehozott my-api1 alkalmazást (alkalmazásazonosító: 2) az Áttekintés lap megnyitásához.

  2. A Kezelés területen válassza az API-k felfedése lehetőséget.

  3. Az alkalmazásazonosító URI-ja mellett válassza a Hivatkozás beállítása lehetőséget. Cserélje le az alapértelmezett értéket (GUID) egy egyedi névre (például tasks-api), majd válassza a Mentés lehetőséget.

    Amikor a webalkalmazás hozzáférési jogkivonatot kér a webes API-hoz, ezt az URI-t kell hozzáadnia az API-hoz definiált hatókörök előtagjaként.

  4. Az API által definiált hatókörök alatt válassza a Hatókör hozzáadása lehetőséget.

  5. Az API olvasási hozzáférését meghatározó hatókör létrehozása:

    1. A hatókör neveként adja meg a tasks.read nevet.
    2. Ha Rendszergazda hozzájárulás megjelenítendő nevét, írja be a Feladatok API olvasási hozzáférését.
    3. A Rendszergazda hozzájárulás leírásához írja be A feladatok API olvasási hozzáférésének engedélyezése című cikket.

  6. Válassza a Hatókör hozzáadása lehetőséget.

  7. Válassza a Hatókör hozzáadása lehetőséget, majd adjon hozzá egy, az API írási hozzáférését meghatározó hatókört:

    1. A Hatókör neve mezőbe írja be a tasks.write nevet.
    2. Ha Rendszergazda hozzájárulás megjelenítendő nevét szeretné megadni, írja be a Feladatok API írási hozzáférését.
    3. A Rendszergazda hozzájárulás leírásához írja be a Tevékenység API írási hozzáférését.

  8. Válassza a Hatókör hozzáadása lehetőséget.

2.3. lépés: Az SPA regisztrálása

Az SPA-regisztráció létrehozásához kövesse az alábbi lépéseket:

  1. Jelentkezzen be az Azure Portalra.
  2. Ha több bérlőhöz is hozzáfér, a felső menüben válassza a Gépház ikont az Azure AD B2C-bérlőre való váltáshoz a Címtárak + előfizetések menüből.
  3. Keresse meg és válassza ki az Azure AD B2C-t.
  4. Válassza a Alkalmazásregisztrációk, majd az Új regisztráció lehetőséget.
  5. Adja meg az alkalmazás nevét (például MyApp).
  6. A Támogatott fióktípusok területen válassza a Fiókok lehetőséget bármely identitásszolgáltatóban vagy szervezeti címtárban (a felhasználók felhasználói folyamatokkal való hitelesítéséhez).
  7. Az Átirányítási URI területen válassza az Egyoldalas alkalmazás (SPA) lehetőséget, majd írja be http://localhost:6420az URL-címet az URL-mezőbe.
  8. Az Engedélyek csoportban jelölje be a Rendszergazdai hozzájárulás megadása az openid és offline hozzáférési engedélyekhez jelölőnégyzetet.
  9. Válassza a Regisztrálás lehetőséget.

Jegyezze fel az alkalmazás (ügyfél) azonosítóját , amelyet később használjon a webalkalmazás konfigurálásakor.

Screenshot of the web app Overview page for recording your web application ID.

2.4. lépés: Az implicit engedélyezési folyamat engedélyezése

Ha az SPA-alkalmazás az MSAL.js 1.3-as vagy korábbi verzióit és az implicit engedélyezési folyamatot használja, vagy felhasználói folyamat vagy egyéni szabályzat teszteléséhez konfigurálja https://jwt.ms/ az alkalmazást, engedélyeznie kell az implicit engedélyezési folyamatot az alkalmazásregisztrációban:

  1. A bal oldali menü Kezelés területén válassza a Hitelesítés lehetőséget.

  2. Az Implicit engedélyezési és hibrid folyamatok területen jelölje be az Access-jogkivonatokat (implicit folyamatokhoz) és az azonosító jogkivonatokat (implicit és hibrid folyamatokhoz).

  3. Válassza a Mentés parancsot.

Ha az alkalmazás MSAL.js 2.0 vagy újabb verziót használ, ne engedélyezze az implicit folyamat-engedélyezést, mivel az MSAL.js 2.0+ támogatja az engedélyezési kódfolyamatot a PKCE-vel. A cikkben szereplő SPA-alkalmazás PKCE-folyamatot használ, ezért nem kell engedélyeznie az implicit engedélyezési folyamatot.

2.5. lépés: Engedélyek megadása

Az alkalmazás (alkalmazásazonosító: 1) engedélyének megadásához kövesse az alábbi lépéseket:

  1. Válassza Alkalmazásregisztrációk, majd válassza ki a létrehozott alkalmazást (alkalmazásazonosító: 1).

  2. A Kezelés területen válassza ki az API-engedélyeket.

  3. A Konfigurált engedélyek csoportban válassza az Engedély hozzáadása lehetőséget.

  4. Válassza a Saját API-k lapot.

  5. Válassza ki azt az API-t (alkalmazásazonosító: 2), amelyhez a webalkalmazásnak hozzáférést kell biztosítani. Írja be például a my-api1 nevet.

  6. Az Engedély területen bontsa ki a tevékenységeket, majd válassza ki a korábban definiált hatóköröket (például tasks.read és tasks.write).

  7. Jelölje be az Engedélyek hozzáadása lehetőséget.

  8. Válassza a bérlő nevének> rendszergazdai <hozzájárulásának megadása lehetőséget.

  9. Válassza az Igen lehetőséget.

  10. Válassza a Frissítés lehetőséget, majd ellenőrizze, hogy a megadott for ... jelenik-e meg mindkét hatókör állapotában .

  11. A Konfigurált engedélyek listájában válassza ki a hatókört, majd másolja a teljes nevet a hatókörbe.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

3. lépés: Az SPA-mintakód lekérése

Ez a minta bemutatja, hogy egy egyoldalas alkalmazás hogyan használhatja az Azure AD B2C-t a felhasználói regisztrációhoz és a bejelentkezéshez. Ezután az alkalmazás beszerez egy hozzáférési jogkivonatot, és meghív egy védett webes API-t.

A SPA-mintakód lekéréséhez tegye az alábbiak egyikét:

  • Zip-fájl letöltése.

  • Klónozza a mintát a GitHubról a következő parancs futtatásával:

    git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git

3.1. lépés: A SPA-minta frissítése

Most, hogy beszerezte az SPA-mintát, frissítse a kódot az Azure AD B2C-vel és a webes API-értékekkel. A mintamappában, a App mappa alatt nyissa meg az alábbi táblázatban felsorolt JavaScript-fájlokat, majd frissítse őket a hozzájuk tartozó értékekkel.

Fájl Key Érték
authConfig.js clientId A SPA azonosítója a 2.3. lépésből.
policies.js Nevek Az 1. lépésben létrehozott felhasználói folyamatok vagy egyéni szabályzat.
policies.js Hatóságok Az Azure AD B2C felhasználói folyamatai vagy egyéni szabályzatok hatóságai, például https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>. Csere your-sign-in-sign-up-policy az 1. lépésben létrehozott felhasználói folyamatra vagy egyéni szabályzatra
policies.js authorityDomain Az Azure AD B2C-szolgáltató tartománya, például <your-tenant-name>.b2clogin.com.
apiConfig.js b2cScopes A 2.2. lépésben létrehozott webes API-hatókörök (példáulb2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"]).
apiConfig.js webApi A webes API URL-címe. http://localhost:5000/hello

Az eredményként kapott kódnak a következő mintához hasonlóan kell kinéznie:

authConfig.js:

const msalConfig = {
    auth: {
      clientId: "<your-MyApp-application-ID>", // This is the ONLY mandatory field; everything else is optional.
      authority: b2cPolicies.authorities.signUpSignIn.authority, // Choose sign-up/sign-in user-flow as your default.
      knownAuthorities: [b2cPolicies.authorityDomain], // You must identify your tenant's domain as a known authority.
      redirectUri: "http://localhost:6420", // You must register this URI on Azure Portal/App Registration. Defaults to "window.location.href".
    },
    cache: {
      cacheLocation: "sessionStorage",  
      storeAuthStateInCookie: false, 
    },
    system: {
      loggerOptions: {
        loggerCallback: (level, message, containsPii) => {
          if (containsPii) {
            return;
          }
          switch (level) {
            case msal.LogLevel.Error:
              console.error(message);
              return;
            case msal.LogLevel.Info:
              console.info(message);
              return;
            case msal.LogLevel.Verbose:
              console.debug(message);
              return;
            case msal.LogLevel.Warning:
              console.warn(message);
              return;
          }
        }
      }
    }
  };
};

const loginRequest = {
  scopes: ["openid", ...apiConfig.b2cScopes],
};

const tokenRequest = {
  scopes: [...apiConfig.b2cScopes],  // e.g. ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"]
  forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
};

policies.js:

const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        forgotPassword: "b2c_1_reset",
        editProfile: "b2c_1_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi",
        },
        forgotPassword: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_reset",
        },
        editProfile: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile"
        }
    },
    authorityDomain: "your-tenant-name.b2clogin.com"
}

apiConfig.js:

const apiConfig = {
  b2cScopes: ["https://your-tenant-name.onmicrosoft.com/tasks-api/tasks.read"],
  webApi: "http://localhost:5000/hello"
};

4. lépés: A webes API mintakódjának lekérése

Most, hogy a webes API regisztrálva lett, és ön definiálta a hatóköreit, konfigurálja a webes API-kódot az Azure AD B2C-bérlővel való együttműködéshez.

A webes API mintakódjának lekéréséhez tegye az alábbiak egyikét:

4.1. lépés: A webes API frissítése

  1. Nyissa meg a config.json fájlt a kódszerkesztőben.

  2. Módosítsa a változóértékeket a korábban létrehozott alkalmazásregisztrációval. És frissítse a policyName felhasználói folyamatot, amelyet az előfeltételek részeként hozott létre (például b2c_1_susi).

    "credentials": {
    "tenantName": "<your-tenant-name>",
    "clientID": "<your-webapi-application-ID>"
},
"policies": {
    "policyName": "b2c_1_susi"
},
"resource": {
    "scope": ["tasks.read"] 
},

4.2. lépés: A CORS engedélyezése

Ahhoz, hogy az egyoldalas alkalmazás meghívhassa a Node.js webes API-t, engedélyeznie kell a forrásközi erőforrás-megosztást (CORS) a webes API-ban. Éles alkalmazásban ügyeljen arra, hogy melyik tartomány küldi el a kérést. Ebben a példában bármely tartományból engedélyezheti a kérelmeket.

A CORS engedélyezéséhez használja a következő köztes szoftvereket. A letöltött Node.js webes API-kódmintában már hozzá lett adva az index.js fájlhoz.

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
    next();
});

5. lépés: Az SPA és a webes API futtatása

Most már tesztelheti az egyoldalas alkalmazás hatókörön belüli hozzáférését az API-hoz. Futtassa a Node.js webes API-t és a minta JavaScript egyoldalas alkalmazást a helyi gépen. Ezután jelentkezzen be az egyoldalas alkalmazásba, és válassza a Call API gombot a védett API-ra irányuló kérés indításához.

A Node.js webes API futtatása

  1. Nyisson meg egy konzolablakot, és váltson a Node.js webes API-mintát tartalmazó könyvtárra. Például:

    cd active-directory-b2c-javascript-nodejs-webapi

  2. Run the following commands:

    npm install && npm update
node index.js

    A konzolablakban megjelenik az alkalmazás helyének portszáma.

    Listening on port 5000...

Az egyoldalas alkalmazás futtatása

  1. Nyisson meg egy másik konzolablakot, és váltson a JavaScript SPA-mintát tartalmazó könyvtárra. Például:

    cd ms-identity-b2c-javascript-spa

  2. Run the following commands:

    npm install && npm update
npm start

    A konzolablak megjeleníti az alkalmazás helyének portszámát.

    Listening on port 6420...

  3. Az alkalmazás megtekintéséhez nyissa meg http://localhost:6420 a böngészőben.

    Screenshot of the SPA sample app displayed in the browser window.

  4. Fejezze be a regisztrációt vagy a bejelentkezési folyamatot. Miután sikeresen bejelentkezett, látnia kell a "Felhasználó <a bejelentkezett felhasználónév> " üzenetet.

  5. Válassza a Hívás API gombot. Az SPA egy kérésben elküldi a hozzáférési jogkivonatot a védett webes API-nak, amely visszaadja a bejelentkezett felhasználó megjelenítendő nevét:

    Screenshot of the SPA in a browser window, showing the username JSON result that's returned by the API.

Az alkalmazás üzembe helyezése

Egy éles alkalmazásban az alkalmazásregisztrációs átirányítási URI általában egy nyilvánosan elérhető végpont, ahol az alkalmazás fut, például https://contoso.com/signin-oidc.

A regisztrált alkalmazásokban bármikor hozzáadhat és módosíthat átirányítási URI-kat. Az átirányítási URI-kra a következő korlátozások vonatkoznak:

  • A válasz URL-címnek a sémával httpskell kezdődnie.
  • A válasz URL-címe megkülönbözteti a kis- és nagybetűkre vonatkozó adatokat. Az esetnek meg kell egyeznie a futó alkalmazás URL-elérési útjának esetével.

Következő lépések

A cikkben tárgyalt fogalmakkal kapcsolatos további információk: