Katıştırılmış kaydolma veya oturum açma deneyimi

  • Makale

Başlamadan önce, ayarladığınız ilke türünü seçmek için İlke türü seçin seçicisini kullanın. Azure Active Directory B2C, kullanıcıların uygulamalarınızla nasıl etkileşim kurduğunu tanımlamak için iki yöntem sunar: önceden tanımlanmış kullanıcı akışları veya tam olarak yapılandırılabilir özel ilkeler aracılığıyla. Bu makalede gerekli adımlar her yöntem için farklıdır.

Bu özellik yalnızca özel ilkeler için kullanılabilir. Kurulum adımları için, önceki seçicide Özel ilke'yi seçin.

Daha basit bir kaydolma veya oturum açma deneyimi için, kullanıcıları ayrı bir kaydolma veya oturum açma sayfasına yönlendirmekten veya bir açılır pencere oluşturmaktan kaçınabilirsiniz. Satır içi çerçeve <iframe> HTML öğesini kullanarak Azure AD B2C oturum açma kullanıcı arabirimini doğrudan web uygulamanıza ekleyebilirsiniz.

Bahşiş

Kaydolma veya <oturum açma, profili düzenleme veya parola özel ilkelerini web veya tek sayfalı uygulamanıza eklemek için iframe> HTML öğesini kullanın.

Dekont

Bu özellik genel önizleme aşamasındadır.

Web uygulaması eklenmiş oturum açma

Satır içi çerçeve öğesi <iframe> , html5 web sayfasına belge eklemek için kullanılır. Aşağıdaki örnekte gösterildiği gibi Azure AD B2C oturum açma kullanıcı arabirimini doğrudan web uygulamanıza eklemek için iframe öğesini kullanabilirsiniz:

Login with hovering DIV experience

iframe kullanırken aşağıdakileri göz önünde bulundurun:

  • Katıştırılmış kaydolma veya oturum açma yalnızca yerel hesapları destekler. Sosyal kimlik sağlayıcılarının çoğu (örneğin, Google ve Facebook), oturum açma sayfalarının satır içi çerçevelerde işlenmesini engeller.
  • Gizli modda Safari veya Chrome gibi bazı tarayıcılar, iframe içindeki Azure AD B2C oturum tanımlama bilgilerini üçüncü taraf tanımlama bilgileri olarak görüntüler. Bu tarayıcılar bu tanımlama bilgilerini engelleyebilir veya temizleyebilir ve bu da en uygun kullanıcı deneyiminden daha azı olabilir. Bu sorunu önlemek için uygulama etki alanı adınızın ve Azure AD B2C etki alanınızın kaynağı aynı olduğundan emin olun. Aynı kaynağı kullanmak için Azure AD B2C kiracısı için özel etki alanlarını etkinleştirin ve ardından web uygulamanızı aynı kaynakla yapılandırın. Örneğin, 'https://app.contoso.com' üzerinde barındırılan bir uygulamanın kaynağı 'https://login.contoso.com' üzerinde çalışan Azure AD B2C ile aynı kaynaktadır.

Önkoşullar

İlkenizi yapılandırma

Azure AD B2C kullanıcı arabiriminizin bir iframe'e eklenmesine izin vermek için, Azure AD B2C HTTP yanıt üst bilgilerine bir içerik güvenlik ilkesi Content-Security-Policy ve çerçeve seçenekleri X-Frame-Options eklenmelidir. Bu üst bilgiler, Azure AD B2C kullanıcı arabiriminin uygulama etki alanı adı altında çalışmasını sağlar.

RelyingParty öğesinin içine bir JourneyFraming öğesi ekleyin. UserJourneyBehaviors öğesi DefaultUserJourney'i izlemelidir. UserJourneyBehaviors öğeniz şu örnekteki gibi görünmelidir:

<!--
<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" /> -->
  <UserJourneyBehaviors> 
    <JourneyFraming Enabled="true" Sources="https://somesite.com https://anothersite.com" /> 
  </UserJourneyBehaviors>
<!--
</RelyingParty> -->

Sources özniteliği web uygulamanızın URI'sini içerir. URI'ler arasına boşluk ekleyin. Her URI aşağıdaki gereksinimleri karşılamalıdır:

  • Uygulamanızın URI'ye güvenmesi ve sahip olması gerekir.
  • URI,https düzenini kullanmalıdır.
  • Web uygulamasının tam URI'sinin belirtilmesi gerekir. Joker karakterler desteklenmez.
  • JourneyFraming öğesi yalnızca iki-yedi karakterlik Üst düzey etki alanına (TLD) sahip site URL'lerinin yaygın olarak tanınan TLD'lerle uyumlu olmasına izin verir.

Ayrıca, uygulama sayfalarınızda sırasıyla ve X-Frame-Options üst bilgilerini ayarlayarak kendi etki alanı adınızın bir iframe'e eklenmesini Content-Security-Policy engellemenizi öneririz. Bu teknik, iframe'lerin iç içe yerleştirilmiş şekilde eklenmesiyle ilgili eski tarayıcılarla ilgili güvenlik endişelerini azaltır.

İlke kullanıcı arabirimini ayarlama

Azure AD B2C kullanıcı arabirimi özelleştirmesiyle, kullanıcılarınıza sunduğunuz HTML ve CSS içeriği üzerinde neredeyse tam denetime sahipsiniz. İçerik tanımlarını kullanarak HTML sayfasını özelleştirme adımlarını izleyin. Azure AD B2C kullanıcı arabirimini iframe boyutuna sığdırmak için arka plan ve ek boşluklar olmadan temiz HTML sayfası sağlayın.

Aşağıdaki CSS kodu Azure AD B2C HTML öğelerini gizler ve panelin boyutunu iframe'i dolduracak şekilde ayarlar.

div.social, div.divider {
    display: none;
}

div.api_container{
    padding-top:0;
}

.panel {
    width: 100%!important
}

Bazı durumlarda, şu anda sunulan Azure AD B2C sayfası hakkında uygulamanızı bilgilendirmek isteyebilirsiniz. Örneğin, bir kullanıcı kaydolma seçeneğini seçtiğinde, uygulamanın sosyal bir hesapla oturum açmak için bağlantıları gizleyerek veya iframe boyutunu ayarlayarak yanıt vermesini isteyebilirsiniz.

Uygulamanızı geçerli Azure AD B2C sayfası hakkında bilgilendirmek için JavaScript ilkenizi etkinleştirin ve sonra iletileri göndermek için HTML5'i kullanın. Aşağıdaki JavaScript kodu ile signUpuygulamaya bir posta iletisi gönderir:

window.parent.postMessage("signUp", '*');

Web uygulaması yapılandırma

Bir kullanıcı oturum açma düğmesini seçtiğinde, web uygulaması kullanıcıyı Azure AD B2C oturum açma deneyimine götüren bir yetkilendirme isteği oluşturur. Oturum açma işlemi tamamlandıktan sonra Azure AD B2C, uygulamanızdaki yapılandırılmış yeniden yönlendirme URI'sine bir kimlik belirteci veya yetkilendirme kodu döndürür.

Ekli oturum açmayı desteklemek için iframe src özniteliği, yetkilendirme isteğini oluşturan ve kullanıcıyı Azure AD B2C ilkesine yönlendiren gibi /account/SignUpSignInoturum açma denetleyicisine işaret eder.

<iframe id="loginframe" frameborder="0" src="/account/SignUpSignIn"></iframe>

Uygulama kimlik belirtecini alıp doğruladıktan sonra yetkilendirme akışını tamamlar ve kullanıcıyı tanır ve güvenir. Yetkilendirme akışı iframe içinde gerçekleştiğinden ana sayfayı yeniden yüklemeniz gerekir. Sayfa yeniden yüklendikten sonra oturum açma düğmesi "oturumu kapat" olarak değişir ve kullanıcı adı kullanıcı arabiriminde gösterilir.

Aşağıdaki örnekte oturum açma yeniden yönlendirme URI'sinin ana sayfayı nasıl yenileyebileceği gösterilmektedir:

window.top.location.reload();

Web uygulamasına sosyal hesaplarla oturum açma ekleme

Sosyal kimlik sağlayıcıları, oturum açma sayfalarının satır içi çerçevelerde işlenmesini engeller. Sosyal hesaplar için ayrı bir ilke kullanabilir veya hem oturum açma hem de yerel ve sosyal hesaplarla kaydolma için tek bir ilke kullanabilirsiniz. Ardından sorgu dizesi parametresini domain_hint kullanabilirsiniz. Etki alanı ipucu parametresi, kullanıcıyı doğrudan sosyal kimlik sağlayıcısının oturum açma sayfasına götürür.

Uygulamanızda sosyal hesap düğmeleriyle oturum açma bilgilerini ekleyin. Kullanıcı sosyal hesap düğmelerinden birine tıkladığında denetimin ilke adını değiştirmesi veya etki alanı ipucu parametresini ayarlaması gerekir.

Yeniden yönlendirme URI'si, iframe tarafından kullanılan yeniden yönlendirme URI'sinin aynısı olabilir. Sayfanın yeniden yüklenmesini atlayabilirsiniz.

Tek sayfalı uygulama yapılandırma

Tek sayfalı bir uygulama için, iframe'e yüklenen ikinci bir "oturum açma" HTML sayfasına da ihtiyacınız vardır. Bu oturum açma sayfası, yetkilendirme kodunu oluşturan ve belirteci döndüren kimlik doğrulama kitaplığı kodunu barındırıyor.

Tek sayfalı uygulama erişim belirtecine ihtiyaç duyduğunda, iframe'den ve onu içeren nesneden erişim belirtecini almak için JavaScript kodunu kullanın.

Dekont

Bir iframe'de MSAL 2.0'ın çalıştırılması şu anda desteklenmiyor.

Aşağıdaki kod, ana sayfada çalışan ve iframe'in JavaScript kodunu çağıran bir örnektir:

function getToken()
{
  var token = document.getElementById("loginframe").contentWindow.getToken("adB2CSignInSignUp");

  if (token === "LoginIsRequired")
    document.getElementById("tokenTextarea").value = "Please login!!!"
  else
    document.getElementById("tokenTextarea").value = token.access_token;
}

function logOut()
{
  document.getElementById("loginframe").contentWindow.policyLogout("adB2CSignInSignUp", "B2C_1A_SignUpOrSignIn");
}

Sonraki adımlar

Aşağıdaki ilgili makalelere bakın: