Azure AD B2C kullanarak tek sayfalı bir uygulamada kimlik doğrulama seçeneklerini yapılandırma
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:
Özel bir ilke kullanıyorsanız, doğrudan oturum açmayı ayarlama bölümünde açıklandığı gibi gerekli giriş beyanını ekleyin.
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.com
oturum 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:
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.
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:
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:
ContentDefinitionParameters öğesini yapılandırın.
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:
Özel ilkenizde bir kimlik belirteci ipucu teknik profili tanımlayın.
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:
depolamak
id_token
için genel olarak erişilebilir bir değişken oluşturun.let id_token = "";
MSAL
handleResponse
işlevinde nesnesinin nesnesiniauthenticationResult
değişkenine ayrıştırınid_token
id_token
.function handleResponse(response) { if (response !== null) { setAccount(response.account); id_token = response.idToken; } else { selectAccount(); } }
işlevinde
signOut
parametresiniid_token_hint
logoutRequest 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 allowRedirectInIframe
true
MSAL'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 true
ayarlarallowRedirectInIframe
:
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.