Kendi giriş arayüzünüzü Logto Cloud'a getirin

Arka Plan#

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

Ancak, bazı kullanıcılar kendi markalarını ve özel iş gereksinimlerini karşılamak için giriş deneyimini (hem UI hem de kimlik doğrulama akışlarını) derinlemesine özelleştirmek istemektedir. Seni duyduk! Ve "Kendi UI'nizi Getirin" özelliğinin artık Logto Cloud'da mevcut olduğunu duyurmaktan mutluluk duyuyoruz.

Bu eğitimde, kendi özel giriş arayüzünüzü Logto Cloud'a oluşturma ve dağıtma adımlarında size rehberlik edeceğiz.

Ön Koşullar#

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

• Bir abonelik planıyla Logto Cloud hesabı
• Logto ile entegre edilmiş bir uygulama (Hızlı Başlangıçlar)
• Kurulmuş Logto tünel CLI
• Temel HTML, CSS ve JavaScript bilgisi

Basitlik için, aşağıdaki adımlarda klasik "kullanıcı adı ve şifre" giriş yöntemini kullanacağız. Logto Console'da giriş yöntemini değiştirdiğinizden emin olun.

Özel giriş arayüzünüzü oluşturun#

Bir giriş arayüzü için minimum gereklilik, en az bir kullanıcı adı girişi, bir şifre girişi ve bir gönderme düğmesi içeren bir giriş formuna sahip index.html dosyasıdır. ChatGPT kullanarak örnek bir HTML oluşturdum ve işte bu pembe sevimli giriş sayfası ortaya çıktı.

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

Create React App, Next.js veya Vue CLI gibi favori ön uç çerçevenizden bir başlangıç şablonuyla da başlayabilirsiniz.

Logto açık kaynak olduğundan, bir başka öneri de Logto Experience projesini klonlayıp ihtiyaçlarınıza göre kodu değiştirmektir. Bu, Logto'nun React ve TypeScript ile yazılmış tam özellikli yerleşik giriş deneyimi arayüzüdür.

Logto tünel CLI'yi kurun#

Logto tünel CLI, sadece HTML sayfalarınızı sunan bir araç değil, aynı zamanda yerel geliştirme ortamınızda HTML sayfalarınızdan Logto'nun Experience API'si ile etkileşim kurmanıza da olanak tanır.

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

Veya, yerleşik geliştirme sunucusuna sahip bir UI ç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/ üzerinde başlatılacaktır.

Uygulamanızdan giriş işlemini tetikleyin#

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

Örnek React projemizi ele alalım:

Uygulamanızdaki "Giriş yap" butonuna tıklayın. Yerleşik Logto giriş arayüzünü görmek yerine, şimdi özel giriş sayfanıza yönlendirilmelisiniz.

Logto Experience API ile etkileşim kurun#

Bu adımda, özel arayüzünüzde Logto Experience API ile etkileşim kuracağız. İlk olarak script.js adlı bir dosya oluşturun ve index.html dosyanıza referans ekleyin.

script.js dosyanıza aşağıdaki kodu yerleştirin.

Bu betik, aşağıdaki API'lerin yardımıyla kullanıcı adı ve şifre ile giriş akışını tamamlayacaktır:

• PUT /api/experience - Giriş 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ımla
• POST /api/experience/submit - Giriş etkileşimini gönder

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

Özel giriş sayfanızı test edin#

1. Uygulamanıza gidin ve "Giriş yap" butonuna tıklayın.
2. http://localhost:9000/ adresindeki özel giriş sayfanıza yönlendirilmelisiniz.
3. Kullanıcı adı ve şifre girin, "Gönder" butonuna tıklayın.
4. Her şey doğru ayarlanmışsa, yetkili kullanıcı bilgisiyle birlikte uygulamanıza geri yönlendirilmelisiniz.

Özel giriş arayüzünüzü Logto Cloud'a dağıtın#

Kendi özel giriş arayüzünüzü yerel olarak geliştirip test ettikten sonra, bunu Logto Cloud'a dağıtabilirsiniz. Basitçe özel arayüz klasörünüzün bir zip dosyasını oluşturun ve bunu Logto Konsolundaki "Özel Arayüz" bölümüne yükleyin.

Yükleme işlemi tamamlandıktan sonra değişiklikleri kaydedin ve özel giriş arayüzünüz, yerleşik Logto giriş deneyiminin yerine geçerek Logto Cloud kiracınızda canlı yayımlanacaktır.

Son olarak, uygulamanıza geri dönün ve uç nokta URI'sini Logto bulut uç noktanıza geri değiştirin: https://foobar.logto.app/. Bu sefer, Logto tünel hizmetini durdurabilirsiniz ve uygulamanız artık çevrimiçi olarak barındırılan özel arayüz ile doğrudan çalışmalıdır.

Sonuç#

Bu eğitimde, kendi özel giriş arayüzünüzü Logto Cloud'a uygulama ve dağıtma süreçlerinin üzerinden geçtik.

Bu özellikle, giriş arayüzünüzü ve kimlik doğrulama akışlarını kendi markanıza ve özel iş gereksinimlerinize uygun şekilde derinlemesine özelleştirebilirsiniz.

İyi kodlamalar! 🚀