`@logto/browser` kullanarak özel bir SDK nasıl oluşturulacağını öğrenin.
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.
Başlamadan önce, Logto'daki oturum açma akışını anlayalım. Oturum açma akışı, aşağıdaki adımlardan oluşur:
@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:
signIn(): OIDC kimlik doğrulama URL'sini oluşturur ve yönlendirir.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.isAuthenticated(): Kullanıcının kimlik doğrulamasının kontrolünü sağlar.SDK'da, 2 adet hook sağlayacağız: useLogto ve useHandleSignInCallback, ve bununla birlikte bir LogtoProvider bileşeni:
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.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.
İlk olarak, npm veya diğer paket yöneticilerini kullanarak @logto/browser paketini yükleyin:
Sağlayıcının içeriğini tanımlayın, 3 bölüm içerir:
LogtoClient örneği.Yeni bir context.tsx dosyası oluşturun ve aşağıdaki kodu yazın:
İç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:
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:
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.
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: