Kendi oturum açma arayüzünüzü Logto Cloud'a getirin

Arka Plan#

Logto, oturum açma, kayıt, şifre kurtarma, tek oturum açma (SSO) ve daha fazlasını içeren tüm Logto özelliklerini kapsayan kutudan çıktığı gibi bir oturum açma deneyimi arayüzü sunar. Kullanıcılar ayrıca "Özel CSS" özelliğimizi kullanarak oturum açma deneyimi arayüzünün görünümünü ve hissini özelleştirebilirler.

Ancak, bazı kullanıcılar, markalarını ve belirli iş gereksinimlerini karşılamak için oturum açma deneyimlerini (hem arayüz hem de kimlik doğrulama akışlarını) derinlemesine özelleştirmek istiyor. Sizi duyduk! Ve "Kendi Arayüzünüzü Getirin" özelliğinin artık Logto Cloud'da mevcut olduğunu duyurmaktan heyecan duyuyoruz.

Bu eğitimde, kendi özel oturum açma arayüzünüzü Logto Cloud'a oluşturma ve dağıtma adımlarını size göstereceğiz.

Önkoşullar#

Başlamadan önce, aşağıdaki gereksinimlere sahip olduğunuzdan emin olun:

• Bir Logto Cloud abonelik planına sahip hesap
• Logto ile entegre edilmiş bir uygulama (Hızlı Başlangıç)
• Logto tünel CLI'yi yüklemiş olun
• HTML, CSS ve JavaScript temel bilgisi

Basitlik açısından, sonraki adımlarda klasik "kullanıcı adı & şifre" oturum açma yöntemini kullanacağız. Logto Konsolundaki oturum açma yöntemini değiştirmeyi unutmayın.

Özel oturum açma arayüzünüzü oluşturun#

Oturum açma arayüzü için minimum gereksinim, en azından bir kullanıcı adı girişi, bir şifre girişi ve bir gönderim düğmesi içeren bir oturum açma formuna sahip bir index.html dosyasına sahip olmaktır. ChatGPT'yi kullanarak örnek bir HTML oluşturdum ve işte bu pembe tatlı oturum açma sayfası ortaya çıktı.

Sadelik için CSS stillerini atladım ve işte HTML'in ne kadar basit göründüğü:

Ayrıca, en sevdiğiniz ön uç çerçevesinden bir başlama şablonuyla başlayabilirsiniz, örneğin Create React App, Next.js veya Vue CLI.

Logto açık kaynaklı olduğundan, diğer bir önerim, Logto Experience projesini klonlamak ve ihtiyacınıza göre kodu değiştirmektir. Bu, React ve TypeScript ile yazılmış, tüm özelliklere sahip Logto dahili oturum açma deneyim arayüzüdür.

Logto tünel CLI'nizi kurun#

Logto tünel CLI, HTML sayfalarınızı sunmanın yanı sıra, yerel geliştirme ortamındaki HTML sayfalarınızdan Logto'nun Deneyim API'si ile etkileşimde bulunmanızı sağlayan bir araçtır.

index.html sayfasının /path/to/your/custom-ui konumunda olduğunu ve Logto kiracınızın ID'sinin foobar olduğunu varsayarak, bu komutu şu şekilde çalıştırabilirsiniz:

Veya, yerleşik bir geliştirme sunucusuna sahip bir kullanıcı arayüzü çerçevesi kullanıyorsanız ve sayfanız http://localhost:4000 adresinde sunuluyorsa, komutu şu şekilde çalıştırabilirsiniz:

Komutu çalıştırdıktan sonra, tünel hizmeti yerel makinenizde http://localhost:9000/ adresinde başlatılacaktır.

Uygulamanızdan oturum açma işlemini tetikleyin#

Daha önce oluşturduğunuz uygulamaya gidin ve Logto SDK yapılandırmasındaki Logto bitiş noktasını https://foobar.logto.app/ adresinden http://localhost:9000/ adresine değiştirin.

React örnek projemizi ele alalım:

Uygulamanızdaki "Oturum Aç" düğmesine tıklayın. Dahili Logto oturum açma arayüzünü görmek yerine, artık özel oturum açma sayfanıza yönlendirilmelisiniz.

Logto Deneyim API'si ile etkileşime geçin#

Bu adımda, özel arayüzünüzden Logto Deneyim API'si ile etkileşim kuracağız. İlk olarak, bir script.js dosyası oluşturalım ve index.html dosyanıza referansını ekleyelim.

Aşağıdaki kodu script.js dosyasına ekleyin.

Bu betik, bu API'ler yardımıyla kullanıcı adı ve şifre oturum açma akışını tamamlar:

• PUT /api/experience - Oturum açma etkileşimini başlat
• POST /api/experience/verification/password - Kullanıcı adı ve şifreyi doğrula
• POST /api/experience/identification - Mevcut etkileşim için kullanıcıyı tanımlayın
• POST /api/experience/submit - Oturum açma etkileşimini gönderin

Daha fazla ayrıntı için Logto Deneyim API belgelerine bakın.

Özel oturum açma sayfanızı test edin#

1. Uygulamanıza gidin ve "Oturum Aç" düğmesine tıklayın.
2. http://localhost:9000/ adresindeki özel oturum açma sayfanıza yönlendirilmelisiniz.
3. Kullanıcı adı ve şifreyi girin ve "Gönder" düğmesine tıklayın.
4. Her şey doğru yapılandırılmışsa, kimliği doğrulanmış kullanıcı bilgileriyle uygulamanıza geri yönlendirilmelisiniz.

Özel oturum açma arayüzünüzü Logto Cloud'a yükleyin#

Özel oturum açma arayüzünüzü yerel olarak geliştirme ve test etme işlemini tamamladıktan sonra, Logto Cloud'a dağıtabilirsiniz. Basitçe, özel arayüz klasörünüzün zip dosyasını oluşturun ve Logto Konsolundaki "Özel Arayüz" bölümüne yükleyin.

Yüklemeyi tamamladıktan sonra, değişiklikleri kaydedin ve özel oturum açma arayüzünüz, yerleşik Logto oturum açma deneyiminin yerine geçerek Logto Cloud kiracınızda canlı hale gelecektir.

Son olarak, uygulamanıza geri gidin ve bitiş noktası URI'sini tekrar Logto cloud bitiş noktasına değiştirin: https://foobar.logto.app/. Bu sefer, Logto tünel hizmetini durdurabilirsiniz ve uygulamanız artık barındırılan çevrimiçi özel arayüzle çalışmalıdır.

Sonuç#

Bu eğitimde, kendi özel oturum açma arayüzünüzü Logto Cloud'a uygulama ve dağıtma sürecinde size rehberlik ettik.

Bu özellik sayesinde, oturum açma arayüzünüzü ve kimlik doğrulama akışlarınızı markanızı ve belirli iş gereksinimlerinizi karşılayacak şekilde derinlemesine özelleştirebilirsiniz.

Keyifli kodlamalar! 🚀