Azure AD B2C kullanarak tek sayfalı bir uygulamada kimlik doğrulama seçeneklerini yapılandırma

  • Makale

Bu makalede, tek sayfalı uygulamanız (SPA) için Azure Active Directory B2C (Azure AD B2C) kimlik doğrulama deneyimini özelleştirme ve geliştirme işlemleri açıklanmaktadır.

Başlamadan önce şu makaleyi inceleyin: Örnek bir web uygulamasında kimlik doğrulamasını yapılandırma.

Özel etki alanı kullanma

Özel bir etki alanı kullanarak kimlik doğrulama URL'sini tamamen markalayabilirsiniz. Kullanıcı açısından bakıldığında, kullanıcılar kimlik doğrulama işlemi sırasında Azure AD B2C b2clogin.com etki alanı adına yönlendirilmek yerine etki alanınızda kalır.

URL'deki "b2c" öğesine yapılan tüm başvuruları kaldırmak için, kimlik doğrulama isteği URL'sindeki B2C kiracı adınızı contoso.onmicrosoft.com kiracı kimliği GUID'nizle de değiştirebilirsiniz. Örneğin, olarak değiştirebilirsiniz https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/https://account.contosobank.co.uk/<tenant ID GUID>/.

Kimlik doğrulama URL'sinde özel bir etki alanı ve kiracı kimliğinizi kullanmak için Özel etki alanlarını etkinleştirme başlığındaki yönergeleri izleyin. Microsoft Authentication Library (MSAL) yapılandırma nesnenizi bulun ve özel etki alanı adınızı ve kiracı kimliğinizi kullanmak için yetkilileri ve bilinenAuthorities'i değiştirin.

Aşağıdaki JavaScript kodu, değişiklik öncesinde MSAL yapılandırma nesnesini gösterir:

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

Aşağıdaki JavaScript kodu, değişiklik sonrasında MSAL yapılandırma nesnesini gösterir :

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

Oturum açma adını önceden doldurma

Oturum açma kullanıcı yolculuğu sırasında uygulamanız belirli bir kullanıcıyı hedef alabilir. Bir uygulama bir kullanıcıyı hedeflediğinde, yetkilendirme isteğinde login_hint kullanıcının oturum açma adıyla sorgu parametresini belirtebilir. Azure AD B2C oturum açma adını otomatik olarak doldurur ve kullanıcının yalnızca parolayı sağlaması gerekir.

Oturum açma adını önceden doldurulmak için aşağıdakileri yapın:

  1. Özel bir ilke kullanıyorsanız, doğrudan oturum açmayı ayarlama bölümünde açıklandığı gibi gerekli giriş beyanını ekleyin.

  2. login_hint depolamak için bir nesne oluşturun ve bu nesneyi MSAL loginPopup() yöntemine geçirin.

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

myMSALObj.loginPopup(loginRequest);

Kimlik sağlayıcısını önceden seçme

Uygulamanızın oturum açma yolculuğunu Facebook, LinkedIn veya Google gibi sosyal hesapları içerecek şekilde yapılandırdıysanız parametresini domain_hint belirtebilirsiniz. Bu sorgu parametresi, oturum açmak için kullanılması gereken sosyal kimlik sağlayıcısı hakkında B2C'yi Azure AD için bir ipucu sağlar. Örneğin, uygulama belirtirse domain_hint=facebook.comoturum açma akışı doğrudan Facebook oturum açma sayfasına gider.

Kullanıcıları dış kimlik sağlayıcısına yönlendirmek için aşağıdakileri yapın:

  1. Dış kimlik sağlayıcınızın etki alanı adını denetleyin. Daha fazla bilgi için bkz. Oturum açmayı sosyal hizmet sağlayıcısına yeniden yönlendirme.

  2. extraQueryParameters depolamak için bir nesne oluşturun ve bu nesneyi MSAL loginPopup() yöntemine geçirin.

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

myMSALObj.loginPopup(loginRequest);

Kullanıcı arabirimi dilini belirtme

Azure AD B2C'de dil özelleştirmesi, kullanıcı akışınızın müşterilerinizin ihtiyaçlarına uygun çeşitli dilleri barındırmasını sağlar. Daha fazla bilgi için bkz . Dil özelleştirme.

Tercih edilen dili ayarlamak için aşağıdakileri yapın:

  1. Dil özelleştirmesini yapılandırma.

  2. extraQueryParameters depolamak için bir nesne oluşturun ve bu nesneyi MSAL loginPopup() yöntemine geçirin.

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

myMSALObj.loginPopup(loginRequest);

Özel sorgu dizesi parametresi geçirme

Özel ilkelerle, özel bir sorgu dizesi parametresi geçirebilirsiniz. İyi bir kullanım örneği, sayfa içeriğini dinamik olarak değiştirmek istemenizdir.

Özel bir sorgu dizesi parametresi geçirmek için aşağıdakileri yapın:

  1. ContentDefinitionParameters öğesini yapılandırın.

  2. extraQueryParameters depolamak için bir nesne oluşturun ve bu nesneyi MSAL loginPopup() yöntemine geçirin.

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

myMSALObj.loginPopup(loginRequest);

Kimlik belirteci ipucu geçirme

Bağlı olan taraf uygulaması, OAuth2 yetkilendirme isteğinin bir parçası olarak bir gelen JSON Web Belirteci (JWT) gönderebilir. Gelen belirteç, kullanıcı veya yetkilendirme isteği hakkında bir ipucudur. Azure AD B2C belirteci doğrular ve ardından talebi ayıklar.

Kimlik doğrulama isteğine kimlik belirteci ipucu eklemek için aşağıdakileri yapın:

  1. Özel ilkenizde bir kimlik belirteci ipucu teknik profili tanımlayın.

  2. extraQueryParameters depolamak için bir nesne oluşturun ve bu nesneyi MSAL loginPopup() yöntemine geçirin.

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

myMSALObj.loginPopup(loginRequest);

Oturumu kapatma yeniden yönlendirmenizin güvenliğini sağlama

Oturumu kapatıldıktan sonra kullanıcı, uygulama için belirtilen yanıt URL'lerinden bağımsız olarak parametresinde post_logout_redirect_uri belirtilen URI'ye yönlendirilir. Ancak geçerli id_token_hint bir geçiş yapılırsa ve oturum kapatma isteklerinde Kimlik Belirteci Gerektir açıksa Azure AD B2C, yeniden yönlendirmeyi gerçekleştirmeden önce değerinin post_logout_redirect_uri uygulamanın yapılandırılmış yeniden yönlendirme URI'lerinden biriyle eşleşip eşleşmediğini doğrular. Uygulama için eşleşen yanıt URL'si yapılandırılmadıysa, bir hata iletisi görüntülenir ve kullanıcı yeniden yönlendirılmaz.

Güvenli bir oturumu kapatma yeniden yönlendirme URI'sini desteklemek için aşağıdaki adımları izleyin:

  1. depolamak id_tokeniçin genel olarak erişilebilir bir değişken oluşturun.

    let id_token = "";

  2. MSAL handleResponse işlevinde nesnesinin nesnesini authenticationResult değişkenine ayrıştırın id_tokenid_token.

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

  3. işlevinde signOut parametresini id_token_hintlogoutRequest nesnesine ekleyin.

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

Yukarıdaki örnekte, oturumu kapatma isteğine geçirilen post_logout_redirect_uri şu biçimde olacaktır: https://your-app.com/. Bu URL, Uygulama Kaydı'nın yanıt URL'lerine eklenmelidir.

Tek oturumu kapatmayı etkinleştirme

Azure AD B2C'de tekli oturum kapatma, kullanıcının Azure AD B2C aracılığıyla oturum açtığı tüm uygulamalara oturum açma isteklerinde bulunmak için OpenId Connect ön kanal oturumu kapatmayı kullanır.

Bu oturum kapatma istekleri, gizli bir Iframe'de Azure AD B2C oturumu kapatma sayfasından yapılır. Iframe'ler, B2C Azure AD nin oturum açmış olarak kaydettiği uygulamalar için kayıtlı tüm ön kanal oturumu kapatma uç noktalarına HTTP istekleri gönderir.

Her uygulama için oturum kapatma uç noktanız MSAL logout() yöntemini çağırmalıdır. Ayrıca ayarı olarak ayarlayarak allowRedirectInIframetrueMSAL'yi bu senaryoda bir Iframe içinde çalışacak şekilde açıkça yapılandırmanız gerekir.

Aşağıdaki kod örneği olarak trueayarlarallowRedirectInIframe:

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

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

Sonraki adımlar

MSAL.js yapılandırma seçenekleri hakkında daha fazla bilgi edinin.