Çeşitli bağlayıcıları destekleme şeklimiz

Giriş#

Bağlayıcılar, Logto'da kritik bir rol oynar. Onların yardımıyla, Logto son kullanıcıların sosyal hesaplarla giriş yapabilme yeteneği ve şifresiz kayıt veya giriş yapmalarını sağlar. Logto, kullanıcıların kendi bağlayıcılarını kurmalarına veya oluşturmalarına izin verir ve hali hazırda 20'den fazla resmi bağlayıcı bulunmaktadır. Bağlayıcılarımız yüksek derecede esnek olacak şekilde tasarlanmıştır ve kullanıcıların kendi bağlayıcılarını kurmalarına veya oluşturmalarına izin verir. Aynı zamanda, yeni bir bağlayıcı geliştirmek kolaydır. Bunu başarmak için, Konfigürasyon Odaklı Geliştirme (CDD) esinlenilerek tasarlanmış ve uygulanmış bir çözüm olan “Dinamik Form” adlı bir çözüm tasarladık.

Arka Plan#

Logto'nun bağlayıcısı için yapılandırma, esnek olmasına rağmen düzenlenmesi ve doğrulanması zor olabilen bir JSON'dur. Başlangıçta, bu büyük bir sorun değildi, çünkü o zaman çoğu JSON yapılandırması şu şekildeydi:

Ancak daha fazla sağlayıcı ve protokolü destekledikçe, işler değişmeye başladı. "SAML bağlayıcısını" örnek olarak alalım, JSON yapılandırmasında 10'dan fazla anahtar var ve değer türü karmaşıktır, içinde stringler, sayılar, JSON'lar, seçim değerleri ve sertifikalar için çok satırlı stringler bulunur.

Bu nedenle, JSON düzenleyiciyi değiştirmek için iyi tasarlanmış bir form getirmenin zamanı geldiğini düşünüyoruz. Logto Bağlayıcısı, üçüncü taraf bir uygulama olarak çalışacak şekilde tasarlanmıştır, dolayısıyla formların kodlanmış sabit halleri uygulanabilir bir çözüm değildir. Sonuç, yönetimi kolay ve aynı zamanda iyi bir kullanıcı deneyimine sahip dinamik formlar için güçlü bir ihtiyaçtır. Yukarıda bahsettiğimiz SAML bağlayıcısının formu şu şekildedir:

Yapılandırma Odaklı Geliştirme (CDD) Nedir#

CDD veya Bileşen Odaklı Geliştirme, uygulama inşa etmenin alternatif bir yaklaşımını sunar. Geleneksel yöntemde, lider mimarlar iş ihtiyaçlarına göre tasarımlar oluşturur, ardından uygulama geliştirilir ve dağıtılır ve herhangi bir değişiklik ya ek elemanlarla ya da zor bir yeniden düzenlemeyle yürütülür.

Buna karşılık, CDD, uygulamaların inşasına baştan itibaren en temel seviyede bağımsız bileşenler oluşturmaya odaklanır. Tipik olarak JSON olan bir arayüz, daha üst düzey kullanıcı arayüzünü bir araya getirmek için kurulmuştur. Yeniden kullanılabilir bileşenlerin ve bir JSON planının kombinasyonunu içeren bu yöntem, geliştiricilerin uygulamaları daha esnek ve ölçeklenebilir bir şekilde oluşturmasına olanak tanır.

CDD'nin özü, modülerliği kullanarak gevşek bağlanmış bir bileşen seti tasarlamak ve ardından bunları standartlaştırılmış bir arayüz kullanarak bir araya getirmektir.

Dinamik Form Nedir?#

Konfigürasyon Odaklı Geliştirme (CDD) yaklaşımını benimsemek, dinamik web formları oluşturmamıza olanak tanır. Bunlar, statik, değişmeyen alanlara sahip sıradan formlar değil; aksine, JSON dosyasına dayanarak üretilen alanlara sahip dinamik varlıklardır. Bu dinamik web formlarının güzelliği, esnekliklerinde yatar - form alanlarında bir değişiklik gerekirse, tek yapılması gereken JSON yapılandırmasını güncellemektir. Bu düzeyde uyum sağlama kabiliyeti, farklı form yapılandırmalarına ihtiyaç duyan ve Logto tarafından bilinmeyen Logto Bağlayıcıları için dinamik web formlarını ideal bir çözüm haline getirir.

Şema Tasarlama#

Şemayı, her bir öğenin adı, etiketi, yer tutucusu ve en önemlisi, türü olabilecek bir form öğeleri dizisi olacak şekilde tasarladık. 6 form öğesi türümüz var ve bir enum olarak tanımladık:

Ve form öğesi için tür tanımı şu şekildedir:

Daha sonra tam şema:

Ancak küçük bir sorun var, "select" form türü bir seçenek listesi gerektiriyor, bu yüzden bu alanı FormItem'a ekleyin:

React-Hook-Form ile formu oluşturma#

Şimdi şema belirlendiğine göre, şemaya dayalı olarak arka uçta formu oluşturabiliriz. Bunu başarmak için React Hook Form kullanacağız.

React-Hook-Form, React'te verimli, kullanımı kolay formlar oluşturmak için güçlü bir araçtır.

İlk iş bir form başlatmak, JSON yapılandırmanın alınan ve formItems olarak adlandırıldığını ve formdaki verilerin formData olduğunu varsayalım:

Daha sonra, form kontrol elemanını türüne göre uygulayın, işte basit bir gösterim:

Sonuç#

Yapılandırma Odaklı Geliştirme (CDD)'nin esnekliği, özellikle Logto'nun bağlayıcıları durumunda dinamik form oluşturma uygulandığında öne çıkıyor. Avantajları iki yönlüdür:

1. Geliştiriciler için, etkileşimli ve kullanıcı dostu formlar oluşturma sürecini basitleştirir. Karmaşık kodlama zorluklarıyla uğraşmak yerine, geliştiricilerin yalnızca daha iyi tasarlanmış, Logto ekibi tarafından tasarlanan sezgisel kullanıcı arayüzleri elde etmek için bir JSON dosyasını tanımlamaları yeterlidir.
2. Kullanıcılar için, bu yaklaşım bir bağlayıcı kurma sürecini büyük ölçüde basitleştirir. Entegrasyonun karmaşıklığını ortadan kaldırarak kullanıcıların Logto'yu sosyal giriş özellikleri ile birlikte e-posta veya SMS hizmetleri ile entegre etmelerini kolaylaştırır.

Son zamanlarda, internet üzerinde Düşük Kod'u tanıtan makaleler yaygındır. Bu çözüm, gerçek kullanıcı ihtiyaçları açısından geliştirildi ve Düşük Kod'un harika bir temsilcisi olduğuna inanıyoruz.

Denemek ister misiniz? Logto Cloud'a gidin ve bir bağlayıcı seçin.