Her uygulama veya organizasyon için oturum açma deneyimini nasıl özelleştirebilirim?

Uygulamanız için bir oturum açma akışı ayarlamak oldukça yaygındır, ancak bazen biraz karmaşık bir senaryo ile karşılaşırsınız,

1. Çok uygulamalı bir iş yürütüyorsunuz.
2. Farklı çalışma alanlarını destekleyen çok kiracılı bir uygulamanız var.

En kolay yaklaşım, tüm uygulamalar ve organizasyonlar için evrensel bir oturum açma deneyimi sağlamaktır. Örneğin, HubSpot çok çeşitli ürünler sunar, ancak oturum açma deneyimleri tüm bu ürünler için tutarlıdır. Bu, bireysel ürünlerden ziyade ana marka olan HubSpot'u öne çıkarmaya yardımcı olur.

Uygulama düzeyinde oturum açma#

Bazı işletmeler çok ürünlü bir strateji izler fakat tek bir kullanıcı havuzu oluşturmayı tercih ederler. Örneğin, Jira ve Confluence gibi birden fazla yazılım ürünü sunan tanınmış SaaS şirketi Atlassian'a göz atalım. İşte oturum açma ekranları.

Oturum açma URL'si, Jira ürünü için oturum açma arayüzünü belirtmek için ?bundle=jira-software parametresini içerir.

Oturum açma URL'si, Confluence ürünü için oturum açma arayüzünü belirtmek için ?bundle=confluence parametresini içerir.

Uygulamalar arasındaki oturum açma arayüzü farkları:

1. Belirli ürünü belirtmek için farklı logolar kullanırlar.
2. Farklı yazı tipleri ve buton stilleri gibi kendine özgü bir görünümleri vardır.

Ancak, temel kimlik doğrulama yöntemleri tüm uygulamalar arasında tutarlıdır. Bu, kullanıcıların kimlik bilgileri (e-posta, sosyal hesaplar) ve kimlik doğrulama faktörleri (örn. şifreler) dahil, daha etkili kimlik yönetimi için birleşik bir profil sahibi olmasını sağlar.

Organizasyon düzeyinde oturum açma#

Başka bir örnek, farklı müşterilerin ayrı çalışma alanlarını barındırmasına izin veren çok kiracılı bir uygulama olan Notion'dur. Örneğin, eğer

"Silverhand" çalışma alanı adıdır, Notion organizasyona özel oturum açma arayüzünü gösterir. Tek fark logo; diğer her şey aynıdır.

Her uygulama veya organizasyon için oturum açma deneyimini nasıl özelleştirebiliriz?#

Öncelikle, üzerine inşa edilecek bir kimlik ve kimlik doğrulama çözümüne ihtiyacınız var. Çözümleri göstermek için Logto'yu örnek olarak alalım. Logto, bunu başarmak için çeşitli seçenekler sunar:

Logto Cloud üzerinde doğrudan ayarlayın#

Eğer sadece Logo ve Buton rengini özelleştirmek istiyorsanız, bu hızlı ve en kolay çözümdür.

Uygulama düzeyinde yapılandırma#

"uygulama düzeyinde oturum açma deneyimi"ni açarak her uygulama için belirli markalama ve renkler ayarlayabilirsiniz. Uygulama-düzeyi markalama etkinleştirildiğinde, bir uygulamadan başlatılan bir oturum açma, uygulama-düzeyi markalama ayarlarına göre özelleştirilecektir; aksi takdirde, genel oturum açma deneyimi ayarlarına varsayılan olarak ayarlanacaktır.

Uygulama düzeyi markalama için hem açık hem de koyu mod ayarları mevcuttur. Koyu mod ayarları, yalnızca genel oturum açma deneyimi ayarlarında koyu mod etkinleştirildiğinde etkili olacaktır.

Organizasyon düzeyinde yapılandırma#

Daha sonra, bir oturum açma tetiklerken, Logto'ya hangi organizasyon logosunu göstereceğini belirtmek için organization_id parametresinde organizasyon kimliğini geçebilirsiniz. Örneğin, organizasyon ID 123456 için organizasyon logosunu göstermek istiyorsanız:

• Logto SDK'sını kullanıyorsanız, signIn metodunun extraParams objesinde organization_id parametresini geçebilirsiniz.
• Bir OIDC istemcisi kullanıyorsanız, yetkilendirme uç noktası isteği yaparken organization_id parametresini geçebilirsiniz.

İşte organization_id parametresinin Logto tarayıcı SDK kullanılarak signIn metodunda nasıl geçirilileceğine dair bir örnek:

Daha ayrıntılı özelleştirme ihtiyacınız olduğunda kendi arayüzünüzü getirin#

Logo ve rengi özelleştirmek yetmiyorsa - örneğin, belirli sosyal oturum açma seçeneklerini gizlemek veya görünümü tamamen değiştirmek istiyorsanız - kendi arayüzünüzü Logto Cloud'a yükleyebilirsiniz.

Uygulama veya organizasyon temelinde farklı arayüzler göstermek için arama parametrelerinden organization_id ve app_id kullanın. Ardından, bu parametrelere göre arayüzü kontrol etmek için bir betik yazın. Daha fazla ayrıntı için "Kendi Arayüzünüzü Getirin" kılavuzuna bakın.