CapacitorJS kimlik doğrulamasını Logto ile oluşturun
Bu öğreticide, Capacitor'da Logto ile kimlik doğrulama akışını nasıl oluşturacağımızı göstereceğiz. Bu, platformlar arası giriş ve kayıt akışları oluşturmanıza olanak tanıyacak.
Founder
Giriş
- Logto, müşteri kimlik altyapısını minimum çabayla oluşturmak için modern bir Auth0 alternatifidir. Kullanıcı adı, e-posta, telefon numarası ve Google ve GitHub gibi popüler sosyal giriş yöntemlerini destekler.
- Capacitor, Web Native uygulamalar oluşturmak için açık kaynaklı bir yerel çalıştırma ortamıdır.
Bu öğreticide, Capacitor'da Logto ile kimlik doğrulama akışını nasıl oluşturacağımızı göstereceğiz. Bu, platformlar arası giriş ve kayıt akışları oluşturmanıza olanak tanıyacak.
Gereksinimler
Başlamadan önce aşağıdakilere sahip olduğunuzdan emin olun:
- Bir Logto hesabı. Eğer yoksa, ücretsiz kaydolabilirsiniz.
- Bir Capacitor projesi. Bir tane oluşturmak için resmi kılavuzu takip edebilirsiniz.
Logto uygulaması oluşturun
Başlamak için "Yerel" türünde bir Logto uygulaması oluşturun. Logto uygulamaları, OAuth 2.0 ve OpenID Connect (OIDC) akışlarında istemci uygulamalar olarak hizmet eder. Bir Logto uygulaması oluşturmak için şu adımları takip edin:
- Logto Bulut Konsolu 'na giriş yapın.
- Sol gezinme çubuğunda, Uygulamalar 'a tıklayın.
- Uygulama oluştur 'a tıklayın.
- Uygulama türü olarak Yerel 'i seçin ve uygulama adını girin.
- Oluştur 'a tıklayın.
Logto uygulamasını oluşturduktan sonra yönlendirme URI'sini yapılandırın. Yönlendirme URI'si, kimlik doğrulama akışından sonra kullanıcıyı uygulamanıza geri yönlendirmek için kullanılır.
URI'nin Capacitor uygulamanıza yönlendirdiğinden emin olun, örneğin, com.example.app://callback. Değer, Capacitor uygulama yapılandırmanıza bağlı olarak değişebilir. Daha fazlası için Capacitor Derin Bağlantılar 'a bakın.
Yönlendirme URI'sini güncelledikten sonra Değişiklikleri Kaydet 'e tıklamayı unutmayın.
Yönlendirme URI'si hakkında emin değilseniz, şimdilik boş bırakabilir ve daha sonra güncelleyebilirsiniz.
Capacitor'u kurun
Bir Capacitor projeniz olduğunu varsayarak, bu öğretici çerçeve bağımsızdır, bu nedenle tercih ettiğiniz herhangi bir UI çerçevesini kullanabilir ve kodu buna göre güncelleyebilirsiniz.
Bağımlılıkları yükleyin
Logto istemcisini başlatın
endpoint, Logto API ana noktasıdır. Yerleşik kılavuzda veya kiracı ayarlarının Domainler bölümünde bulabilirsiniz.appId, Logto uygulama kimliğidir. Uygulama detay sayfasında bulabilirsiniz.
Oturum açma düğmesini uygulayın
Oturum açma düğmesinin onClick işlemcisine aşağıdaki kodu ekleyin:
com.example.app://callback 'i Logto uygulamasında yapılandırdığınız yönlendirme URI'si ile değiştirin.
Kontrol noktası: Kimlik doğrulama akışını tetikleyin
Capacitor uygulamasını çalıştırın ve oturum açma düğmesine tıklayın. Bir tarayıcı penceresi açılacak ve Logto oturum açma sayfasına yönlendirecektir.
Oturumdan çıkış
Capacitor, iOS'ta Safari Görünüm Denetleyicisi ve Android'de Chrome Özel Sekmeleri kullandığından, kimlik doğrulama durumu bir süre devam edebilir. Ancak bazen kullanıcı uygulamadan hemen çıkmak isteyebilir. Bu durumda, kullanıcıyı oturumdan çıkarmak için signOut metodunu kullanabiliriz:
signOut metodunun isteğe bağlı bir parametresi vardır ve oturum kapatıldıktan sonra yönlendirilecek URI'yi belirtebilirsiniz. Sağlanmazsa, kullanıcı Logto çıkış sayfasına yönlendirilir:
Kullanıcının web görünümünü kapatmak ve Capacitor uygulamasına dönmek için "Bitti" ye tıklaması gerekir. Kullanıcıyı otomatik olarak Capacitor uygulamasına geri yönlendirmek istiyorsanız, oturum kapatma sonrası yönlendirme URI'si sağlayabilirsiniz:
Oturum kapatma sonrası yönlendirme URI'sinin Capacitor uygulamasına yönlendirdiğinden emin olun ve oturum kapatma sonrası yönlendirme URI'sini Logto Konsolu'na eklemeyi unutmayın:
Kontrol noktası: Kimlik doğrulama akışını tamamlayın
Capacitor uygulamasını tekrar çalıştırın ve oturum açma düğmesine tıklayın. Eğer her şey yolunda giderse, kimlik doğrulama akışı tamamlandığında, Capacitor uygulaması oturum açma sonucunu alacak ve kullanıcı iddialarını konsola yazdıracaktır.
Ardından oturumdan çıkış düğmesine tıklayın ve Capacitor uygulaması Logto çıkış sayfasına yönlendirilecektir. Oturumu kapatma sonrası yönlendirme URI'si yapılandırılmışsa, uygulama otomatik olarak Capacitor uygulamasına geri yönlendirecektir.
Artık karmaşık kodlar yazmadan Logto Bulut Konsolu'nda kimlik doğrulama akışını yapılandırabilirsiniz. Yapılandırma, tüm istemci uygulamalarına uygulanacak ve tutarlı bir kullanıcı deneyimi sağlayacaktır.
Entegrasyon sırasında herhangi bir sorunla karşılaşırsanız, lütfen [email protected] adresinden bize e-posta gönderin veya Discord sunucumuza katılın!