Bu eğitim, kendi özel giriş arayüzünüzü Logto Cloud'a oluşturma ve dağıtma sürecinde size rehberlik edecek.
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.
Başlamadan önce, aşağıdakilere sahip olduğunuzdan emin olun:
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.
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, 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.
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.
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şlatPOST /api/experience/verification/password - Kullanıcı adı ve şifreyi doğrulaPOST /api/experience/identification - Mevcut etkileşim için kullanıcıyı tanımlaPOST /api/experience/submit - Giriş etkileşimini gönderDaha fazla ayrıntı için Logto Experience API belgelerine bakın.
http://localhost:9000/ adresindeki özel giriş sayfanıza yönlendirilmelisiniz.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.
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! 🚀