Logto için bir web SDK'sı dakikalar İçinde Nasıl Hazırlanır

Logto, çeşitli frameworkler ve platformlar için entegrasyonu basitleştirmek üzere tasarlanmış çok sayıda resmi SDK sunan açık kaynaklı bir auth platformudur. Ancak, hala resmi SDK'ları olmayan birçok platform bulunmaktadır.

Bu boşluğu doldurmak üzere, Logto geliştiricilerin belirli gereksinimlere göre özel SDK'lar oluşturmasına yardımcı olmak üzere tasarlanmış temel @logto/browser paketini sunmaktadır. Bu paket, Logto'nun çekirdek fonksiyonalitelerini, JavaScript'i destekleyen ve bir tarayıcı ortamında çalışan herhangi bir belirli framework ya da platformdan bağımsız olarak uygular.

Bu rehberde, sizinle @logto/browser kullanarak bir React SDK'sı oluşturmak için adımları paylaşacağız, bu SDK oturum açma akışını uygulayacaktır. Aynı adımları, tarayıcıda çalışan herhangi bir diğer JavaScript tabanlı platform için bir SDK oluşturmak için takip edebilirsiniz.

Oturum açma akışı#

Başlamadan önce, Logto'daki oturum açma akışını anlayalım. Oturum açma akışı, aşağıdaki adımlardan oluşur:

1. Logto'ya Yönlendirme: Kullanıcı, Logto oturum açma sayfasına yönlendirilir.
2. Kimlik Doğrulama: Kullanıcı bilgilerini girer ve Logto ile kimliğini doğrular.
3. Uygulamanıza geri yönlendirme: Başarılı kimlik doğrulamadan sonra, kullanıcı bir doğrulama koduyla birlikte uygulamanıza geri yönlendirilir.
4. Kod Değişimi: Uygulamanız doğrulama kodunu tokenler ile değiştirir.

@logto/browser'ın Kısa Bir Tanıtımı#

@logto/browser paketi, bir LogtoClient sınıfı sunar bu sınıf Logto'nun çekirdek işlevlerini sağlar, oturum açma akışı için yöntemler dahil:

1. signIn(): OIDC kimlik doğrulama URL'sini oluşturur ve yönlendirir.
2. handleSignInCallback(): Geri çağrı URL'sini kontrol eder ve analiz eder ve doğrulama kodunu çıkarır, daha sonra kodu tokenlerle değiştirmek için token uç noktasını çağırır.
3. isAuthenticated(): Kullanıcının kimlik doğrulamasının kontrolünü sağlar.

React SDK'sının Hazırlanması#

SDK'da, 2 adet hook sağlayacağız: useLogto ve useHandleSignInCallback, ve bununla birlikte bir LogtoProvider bileşeni:

1. useLogto: Oturum açma akışını tetiklemek için signIn yöntemini ve kimliğin doğrulanıp doğrulanmadığını kontrol etmek için 'isAuthenticated' durumunu sağlayan bir hook.
2. useHandleSignInCallback: Geri çağrı URL'sini işler ve doğrulama kodunu çıkarır, tokenler ile değiştirir ve oturum açma akışını tamamlar.

SDK'yı kullanmak için, uygulamanızı LogtoProvider bileşeni ile basitçe sarabilir ve auth durumunu kontrol etmek, oturum açmak ve geri çağrıyı işlemek için hookları kullanabilirsiniz.

Adım 1: Paketi Yükle#

İlk olarak, npm veya diğer paket yöneticilerini kullanarak @logto/browser paketini yükleyin:

Adım 2: React'in içeriğini tanımla#

Sağlayıcının içeriğini tanımlayın, 3 bölüm içerir:

1. Sağlayıcıda başlatılacak ve hooklarda kullanılacak altta yatan LogtoClient örneği.
2. Kimlik doğrulama durumu.
3. Kimlik doğrulama durumunu ayarlamak için yöntem.

Yeni bir context.tsx dosyası oluşturun ve aşağıdaki kodu yazın:

Adım 3: Sağlayıcının Uygulanması#

İçerik hazırken, sağlayıcının uygulanmasını sağlayalım. Sağlayıcı, LogtoClient örneğini başlatacak, kullanıcının kimlik doğrulamasının yapılıp yapılmadığı kontrol edilecek ve içeriği çocuklarına sağlayacaktır.

Yeni bir provider.tsx dosyası oluşturun:

Adım 4: Hookların Uygulanması#

Hadi şimdi de hookları uygulayalım.

• useLogto: Bu hookta, LogtoClient örneğini almak için içeriği kullanıyoruz ve signIn yöntemini ve isAuthenticated durumunu sağlıyoruz. Bu hooka daha fazla yöntem ekleyebilirsiniz.
• useHandleSignInCallback: Bu hook, tarayıcıdan geri çağrı URL'sini okuyacak, auth kodunu çıkaracak ve tokenlerle değiştirecektir. Ayrıca kullanıcı kimliğini doğruladıktan sonra kimlik doğrulama durumunu true olarak ayarlar.

Yeni bir hooks.ts dosyası oluşturun ve aşağıdaki kodu yazın:

Kontrol Noktası: SDK'nın Kullanımı#

Artık, Logto içi React SDK'ı hazırladınız. Uygulamanızı LogtoProvider bileşeni ile sararak ve auth durumunu kontrol etmek, oturum açmak ve geri çağrıyı işlemek için hookları kullanarak uygulamanızda kullanabilirsiniz. Resmi React örnek projesini buradan kontrol edebilirsiniz.

Sonuç#

Bu rehberde, Logto için temel auth akışını uygulayan bir React SDK'sı oluşturmak için adımları sizinle paylaştık. Buradan sağlanan SDK, temel bir örnektir. Uygulamanızın ihtiyaçlarına uygun olarak daha fazla yöntem ve işlevsellik ekleyerek genişletebilirsiniz.

Tarayıcıda çalışan herhangi başka bir JavaScript bazlı platform için bir SDK oluşturmak için aynı adımları takip edebilirsiniz.

Kaynaklar:

1. Logto Tarayıcı SDK
2. Logto React SDK