Hitelesítési beállítások konfigurálása egyoldalas alkalmazásban Azure AD B2C használatával

Cikk
01/11/2024

Ez a cikk azt ismerteti, hogyan szabhatja testre és javíthatja az Azure Active Directory B2C (Azure AD B2C) hitelesítési élményét az egyoldalas alkalmazáshoz (SPA).

Mielőtt hozzákezd, ismerkedjen meg a következő cikkel: Hitelesítés konfigurálása minta webalkalmazásban.

Egyéni tartomány használata

Egyéni tartomány használatával teljes mértékben megadhatja a hitelesítési URL-címet. Felhasználói szempontból a felhasználók a hitelesítési folyamat során a tartományon maradnak, ahelyett, hogy átirányítanák a Azure AD B2C b2clogin.com tartománynévre.

Ha az URL-címben el szeretné távolítani a "b2c" kifejezésre mutató összes hivatkozást, a B2C-bérlő nevét (contoso.onmicrosoft.com) is lecserélheti a hitelesítési kérelem URL-címében a bérlőazonosító GUID azonosítójára. Módosíthatja például https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ a következőre: https://account.contosobank.co.uk/<tenant ID GUID>/.

Ha egyéni tartományt és bérlőazonosítót szeretne használni a hitelesítési URL-címben, kövesse az Egyéni tartományok engedélyezése című témakör útmutatását. Keresse meg a Microsoft Authentication Library (MSAL) konfigurációs objektumát, és módosítsa a hatóságokat és az ismert Hitelesítésszolgáltatókat az egyéni tartománynév és a bérlőazonosító használatára.

Az alábbi JavaScript-kód az MSAL konfigurációs objektumot mutatja a módosítás előtt :

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

A következő JavaScript-kód az MSAL konfigurációs objektumot mutatja a módosítás után :

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.domain.com"],
      ...
    },
  ...
}

A bejelentkezési felhasználói folyamat során előfordulhat, hogy az alkalmazás egy adott felhasználót céloz meg. Amikor egy alkalmazás megcélz egy felhasználót, az engedélyezési kérelemben megadhatja a login_hint lekérdezési paramétert a felhasználó bejelentkezési nevével. Azure AD B2C automatikusan kitölti a bejelentkezési nevet, és a felhasználónak csak a jelszót kell megadnia.

A bejelentkezési név előzetes feltöltéséhez tegye a következőket:

Ha egyéni szabályzatot használ, adja hozzá a szükséges bemeneti jogcímet a Közvetlen bejelentkezés beállítása című témakörben leírtak szerint.
Hozzon létre egy objektumot a login_hint tárolásához, és adja át ezt az objektumot az MSAL loginPopup() metódusnak.
```
let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);
```

Identitásszolgáltató előzetes kiválasztása

Ha úgy konfigurálta az alkalmazás bejelentkezési útját, hogy közösségi fiókokat ( például Facebook, LinkedIn vagy Google) tartalmazzon, megadhatja a paramétert domain_hint . Ez a lekérdezési paraméter a B2C Azure AD a bejelentkezéshez használni kívánt közösségi identitásszolgáltatóra vonatkozó tippet. Ha például az alkalmazás megadja domain_hint=facebook.com, a bejelentkezési folyamat közvetlenül a Facebook bejelentkezési oldalára kerül.

A felhasználók külső identitásszolgáltatóhoz való átirányításához tegye a következőket:

Ellenőrizze a külső identitásszolgáltató tartománynevét. További információ: Bejelentkezés átirányítása közösségi szolgáltatóhoz.
Hozzon létre egy objektumot az extraQueryParameters tárolásához, és adja át ezt az objektumot az MSAL loginPopup() metódusnak.
```
let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);
```

A felhasználói felület nyelvének megadása

A Azure AD B2C nyelvi testreszabása lehetővé teszi, hogy a felhasználói folyamat az ügyfelek igényeinek megfelelően különféle nyelveket fogadjon el. További információ: Nyelvi testreszabás.

Az előnyben részesített nyelv beállításához tegye a következőket:

Nyelvi testreszabás konfigurálása.
Hozzon létre egy objektumot az extraQueryParameters tárolásához, és adja át ezt az objektumot az MSAL loginPopup() metódusnak.
```
let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);
```

Egyéni lekérdezési sztring paraméterének átadása

Egyéni szabályzatokkal egyéni lekérdezési sztringparamétert adhat át. Jó példa erre, ha dinamikusan szeretné módosítani a lap tartalmát.

Egyéni lekérdezési sztringparaméter átadásához tegye a következőket:

Konfigurálja a ContentDefinitionParameters elemet.
Hozzon létre egy objektumot az extraQueryParameters tárolásához, és adja át ezt az objektumot az MSAL loginPopup() metódusnak.
```
let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);
```

Azonosító jogkivonat-emlékeztető átadása

A függő entitásalkalmazások az OAuth2 engedélyezési kérésének részeként küldhetnek bejövő JSON-webjogkivonatot (JWT). A bejövő jogkivonat a felhasználóra vagy az engedélyezési kérelemre vonatkozó tipp. Azure AD B2C ellenőrzi a jogkivonatot, majd kinyeri a jogcímet.

Ha azonosítótoken-emlékeztetőt szeretne hozzáadni a hitelesítési kérelemhez, tegye a következőket:

Az egyéni szabályzatban definiáljon egy azonosítótoken-tipp technikai profilját.
Hozzon létre egy objektumot az extraQueryParameters tárolásához, és adja át ezt az objektumot az MSAL loginPopup() metódusnak.
```
let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);
```

A kijelentkezés átirányításának védelme

A kijelentkezés után a rendszer átirányítja a felhasználót a paraméterben post_logout_redirect_uri megadott URI-ra, függetlenül az alkalmazáshoz megadott válasz URL-címektől. Ha azonban érvényes id_token_hint értéket ad meg, és be van kapcsolva az Azonosító jogkivonat megkövetelése a kijelentkezési kérelmekben, Azure AD A B2C ellenőrzi, hogy az érték post_logout_redirect_uri megegyezik-e az alkalmazás egyik konfigurált átirányítási URI-jával az átirányítás végrehajtása előtt. Ha nem lett konfigurálva egyező válasz URL-cím az alkalmazáshoz, hibaüzenet jelenik meg, és a felhasználó nem lesz átirányítva.

A biztonságos kijelentkezési átirányítási URI támogatásához kövesse az alábbi lépéseket:

Hozzon létre egy globálisan elérhető változót a id_tokentárolásához.
```
let id_token = "";
```

Az MSAL handleResponse függvényben elemezni kell az id_token objektumból a authenticationResultid_token változót.

function handleResponse(response) {
    if (response !== null) {
        setAccount(response.account);
        id_token = response.idToken;
    } else {
        selectAccount();
    }
}

A függvényben signOut adja hozzá a id_token_hint paramétert a logoutRequest objektumhoz.

function signOut() {
    const logoutRequest = {
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        //set id_token_hint to the id_token value
        idTokenHint : id_token,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };
    myMSALObj.logoutPopup(logoutRequest);
}

A fenti példában a kijelentkezéskérésbe átadott post_logout_redirect_uri formátuma a következő lesz: https://your-app.com/. Ezt az URL-címet hozzá kell adni az alkalmazásregisztráció válasz URL-címéhez.

Egyszeri kijelentkezés engedélyezése

A Azure AD B2C-ben az egyszeri kijelentkezés az OpenId Connect előtérbeli csatornás kijelentkeztetéssel küld kijelentkezési kéréseket minden olyan alkalmazásnak, amelybe a felhasználó bejelentkezett Azure AD B2C-vel.

Ezek a kijelentkezési kérések a Azure AD B2C kijelentkezési oldaláról, egy rejtett Iframe-ből származnak. Az Iframe-ek HTTP-kéréseket intéznek a B2C-Azure AD által bejelentkezett alkalmazásokhoz regisztrált összes előtérbeli kijelentkezési végpontra.

Az egyes alkalmazásokhoz tartozó kijelentkezési végpontnak meg kell hívnia az MSAL logout() metódust . Ebben a forgatókönyvben explicit módon konfigurálnia kell az MSAL-t úgy, hogy az Iframe-ben fusson a következő beállítással allowRedirectInIframe : true.

A következő kódminta a következőre van halmaza allowRedirectInIframetrue:

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

Következő lépések

További információ MSAL.js konfigurációs lehetőségekről.