Türkçe

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

Bu eğitim, kendi özel giriş arayüzünüzü Logto Cloud'a oluşturma ve dağıtma sürecinde size rehberlik edecek.

Charles

Developer

8/23/2024

Kullanıcı kimlik doğrulamasına haftalar harcamayı bırakın

Logto ile güvenli uygulamaları daha hızlı yayınlayın. Kullanıcı kimlik doğrulamasını dakikalar içinde entegre edin ve temel ürününüze odaklanın.

Başlayın

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

Uygulamanıza gidin ve "Giriş yap" butonuna tıklayın.
http://localhost:9000/ adresindeki özel giriş sayfanıza yönlendirilmelisiniz.
Kullanıcı adı ve şifre girin, "Gönder" butonuna tıklayın.
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! 🚀

Logto Cloud'u ücretsiz deneyin

Arka Plan#

Ön Koşullar#

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

Logto tünel CLI'yi kurun#

Uygulamanızdan giriş işlemini tetikleyin#

Logto Experience API ile etkileşim kurun#

Özel giriş sayfanızı test edin#

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

Sonuç#

Arka Plan#

Ön Koşullar#

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

Logto tünel CLI'yi kurun#

Uygulamanızdan giriş işlemini tetikleyin#

Logto Experience API ile etkileşim kurun#

Özel giriş sayfanızı test edin#

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

Sonuç#

Arka Plan

Ön Koşullar

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

Logto tünel CLI'yi kurun

Uygulamanızdan giriş işlemini tetikleyin

Logto Experience API ile etkileşim kurun

Özel giriş sayfanızı test edin

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

Sonuç

Arka Plan

Ön Koşullar

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

Logto tünel CLI'yi kurun

Uygulamanızdan giriş işlemini tetikleyin

Logto Experience API ile etkileşim kurun

Özel giriş sayfanızı test edin

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

Sonuç