Konfigurace možností ověřování v jednostránkové aplikaci pomocí Azure AD B2C

  • Článek

Tento článek popisuje, jak přizpůsobit a vylepšit prostředí ověřování Azure Active Directory B2C (Azure AD B2C) pro jednostránkovou aplikaci (SPA).

Než začnete, seznamte se s následujícím článkem: Konfigurace ověřování v ukázkové webové aplikaci.

Použití vlastní domény

Pomocí vlastní domény můžete adresu URL ověřování plně o značit. Z pohledu uživatele zůstanou uživatelé během procesu ověřování ve vaší doméně, místo aby byli přesměrováni na Azure AD B2C b2clogin.com název domény.

Pokud chcete v adrese URL odebrat všechny odkazy na b2c, můžete v adrese URL žádosti o ověření nahradit název tenanta B2C contoso.onmicrosoft.com identifikátorem GUID vašeho tenanta. Můžete například změnit https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ na https://account.contosobank.co.uk/<tenant ID GUID>/.

Pokud chcete v ověřovací adrese URL použít vlastní doménu a ID tenanta, postupujte podle pokynů v tématu Povolení vlastních domén. Vyhledejte objekt konfigurace knihovny Microsoft Authentication Library (MSAL) a změňte autority a známéauthority tak, aby používaly vlastní název domény a ID tenanta.

Následující kód JavaScriptu ukazuje objekt konfigurace MSAL před změnou:

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

Následující kód JavaScriptu ukazuje objekt konfigurace KNIHOVNY MSAL po změně:

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

Předem vyplní přihlašovací jméno.

Během přihlašovací cesty uživatele může vaše aplikace cílit na konkrétního uživatele. Když aplikace cílí na uživatele, může v žádosti o login_hint autorizaci zadat parametr dotazu s přihlašovacím jménem uživatele. Azure AD B2C automaticky vyplní přihlašovací jméno a uživatel musí zadat jenom heslo.

Pokud chcete přihlašovací jméno předem naplnit, postupujte takto:

  1. Pokud používáte vlastní zásadu, přidejte požadovanou vstupní deklaraci identity, jak je popsáno v tématu Nastavení přímého přihlášení.

  2. Vytvořte objekt pro uložení login_hint a předejte ho do metody MSAL loginPopup().

    let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);

Předběžný výběr zprostředkovatele identity

Pokud jste nakonfigurovali přihlašovací cestu pro vaši aplikaci tak, aby zahrnovala účty sociálních sítí, jako je Facebook, LinkedIn nebo Google, můžete zadat domain_hint parametr . Tento parametr dotazu poskytuje nápovědu k Azure AD B2C o zprostředkovateli sociální identity, který by se měl použít pro přihlášení. Pokud například aplikace zadá domain_hint=facebook.com, tok přihlášení přejde přímo na přihlašovací stránku Facebooku.

Pokud chcete uživatele přesměrovat na externího zprostředkovatele identity, postupujte takto:

  1. Zkontrolujte název domény externího zprostředkovatele identity. Další informace najdete v tématu Přesměrování přihlášení k poskytovateli sociálních sítí.

  2. Vytvořte objekt pro uložení extraQueryParameters a předejte tento objekt do metody MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);

Určení jazyka uživatelského rozhraní

Přizpůsobení jazyka v Azure AD B2C umožňuje toku uživatelů pojmout různé jazyky tak, aby vyhovovaly potřebám vašich zákazníků. Další informace najdete v tématu Přizpůsobení jazyka.

Upřednostňovaný jazyk nastavíte takto:

  1. Nakonfigurujte přizpůsobení jazyka.

  2. Vytvořte objekt pro uložení extraQueryParameters a předejte tento objekt do metody MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);

Předání vlastního parametru řetězce dotazu

S vlastními zásadami můžete předat vlastní parametr řetězce dotazu. Dobrým příkladem použití je, když chcete dynamicky měnit obsah stránky.

Pokud chcete předat vlastní parametr řetězce dotazu, postupujte takto:

  1. Nakonfigurujte element ContentDefinitionParameters .

  2. Vytvořte objekt pro uložení extraQueryParameters a předejte tento objekt do metody MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);

Nápověda k předání tokenu ID

Aplikace předávající strany může v rámci žádosti o autorizaci OAuth2 odeslat příchozí webový token JSON (JWT). Příchozí token je nápověda týkající se uživatele nebo žádosti o autorizaci. Azure AD B2C token ověří a pak deklaraci identity extrahuje.

Pokud chcete do žádosti o ověření zahrnout nápovědu tokenu ID, postupujte takto:

  1. Ve vlastních zásadách definujte technický profil nápovědy tokenu ID.

  2. Vytvořte objekt pro uložení extraQueryParameters a předejte tento objekt do metody MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);

Zabezpečení přesměrování odhlášení

Po odhlášení je uživatel přesměrován na identifikátor URI zadaný v parametru post_logout_redirect_uri bez ohledu na adresy URL odpovědí, které byly pro aplikaci zadány. Pokud je však předána platná id_token_hint hodnota a je zapnuta možnost Vyžadovat token ID v požadavcích na odhlášení, Azure AD B2C před provedením přesměrování ověří, že hodnota post_logout_redirect_uri odpovídá některému z nakonfigurovaných identifikátorů URI přesměrování aplikace. Pokud pro aplikaci nebyla nakonfigurována žádná odpovídající adresa URL odpovědi, zobrazí se chybová zpráva a uživatel nebude přesměrován.

Pokud chcete podporovat zabezpečený identifikátor URI přesměrování odhlášení, postupujte následovně:

  1. Vytvořte globálně dostupnou proměnnou pro uložení .id_token

    let id_token = "";

  2. Ve funkci MSAL handleResponse parsujte id_token objekt z objektu authenticationResult do id_token proměnné .

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

  3. signOut Ve funkci přidejte id_token_hint parametr do objektu logoutRequest.

    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);
}

Ve výše uvedeném příkladu bude post_logout_redirect_uri předaný do požadavku na odhlášení ve formátu . https://your-app.com/ Tato adresa URL musí být přidána do adres URL odpovědí pro registraci aplikace.

Povolení jednorázového odhlášení

Jedno odhlášení v Azure AD B2C používá front-channel odhlášení OpenId Connect k provedení požadavků na odhlášení ze všech aplikací, ke které se uživatel přihlásil prostřednictvím Azure AD B2C.

Tyto žádosti o odhlášení se provádějí ze stránky odhlášení Azure AD B2C ve skrytém prvku IFrame. Rámce IFrame můžou provádět požadavky HTTP na všechny koncové body odhlášení front-channel zaregistrované pro aplikace, které Azure AD B2C zaznamenaly jako přihlášené.

Koncový bod odhlášení pro každou aplikaci musí volat metodu MSAL logout(). V tomto scénáři musíte také explicitně nakonfigurovat MSAL tak, aby běžela v rámci Iframe, a to nastavením allowRedirectInIframe na true.

Následující ukázka kódu nastaví allowRedirectInIframe na true:

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

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

Další kroky

Přečtěte si další informace o možnostech konfiguraceMSAL.js.