Logto için bir sosyal bağlayıcı oluşturma

Arka plan#

Modern uygulamalar için sosyal giriş zorunludur. Kullanıcı kayıt sürecini basitleştirir, kullanıcı deneyimini geliştirir ve kullanıcı katılımını ve dönüşüm oranını artırır. Logto'da, üçüncü taraf bir sosyal kimlik sağlayıcıyla giriş yapmak için sosyal bağlayıcılar kullanıyoruz.

"Bağlayıcı" nedir?#

Bağlayıcı, Logto'yu üçüncü taraf bir hizmetle bağlayan mini bir program parçasıdır. Giriş akışını yönetmekten, token takasına ve üçüncü taraf hizmetten kullanıcı bilgilerini almaktan sorumludur.

Logto, çeşitli sosyal platformlarla entegrasyonu basitleştirmek için tasarlanan zengin bir resmi bağlayıcı seti sunar. Bugüne kadar, toplamda 30+ bağlayıcı bulunmaktadır, bunların 10+'u açık kaynak topluluğumuz tarafından katkıda bulunmuştur. Ve gelecekte bu sayıların hızla artmasını bekliyoruz.

Ancak, şu anda Logto'nun resmi desteğine sahip olmayan birçok farklı platform olduğunu anlıyoruz. Neyse ki, bir açık kaynak platform olarak, her zaman kendi özel bağlayıcılarınızı kolayca oluşturabilirsiniz. Bu yüzden, bu gönderide, Logto için nasıl sadece birkaç adımda özel bir sosyal bağlayıcı oluşturabileceğinizi adım adım size göstereceğiz.

Giriş akışı nasıl çalışır?#

Başlamadan önce, Logto'da sosyal giriş akışının nasıl çalıştığını anlayalım.

Şimdi başlayalım#

Başlamak için en hızlı yol, mevcut resmi bir bağlayıcının kodunu kopyalayıp ihtiyaçlarınıza göre değiştirmektir. GitHub bağlayıcısını bir örnek olarak ele alalım.

Adım 1: Mevcut bir bağlayıcı paketini klonlayın#

Bir bağlayıcı kaynak klasöründe şunları bulacaksınız:

• index.ts: Bağlayıcının ana giriş dosyası.
• constant.ts: Bağlayıcıda kullanılan sabitler.
• types.ts: Bağlayıcıda kullanılan TypeScript türleri.
• index.test.ts: Bağlayıcı için test vakaları.
• mock.ts: Bağlayıcı test vakalarında kullanılan sahte veriler.

Bu dosyaların yanı sıra, bağlayıcıyı açıklamak için bir README.md dosyası, logo.svg (isteğe bağlı olarak karanlık mod kullanıcı deneyimi için logo-dark.svg), ve npm paket bilgilerini tanımlamak için bir package.json dosyası sağlamanız gerekecek.

Adım 2: Ana giriş dosyasını (index.ts) değiştirin#

index.ts dosyasında, bağlayıcının çoğu mantığını bulacaksınız. Tipik olarak uygulamanız gereken 4 fonksiyon vardır:

• getAuthorizationUri: Üçüncü taraf sosyal platform için yetkilendirme URI'si oluşturur. GitHub için bu şu şekilde olacaktır: https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}. Hedef sosyal platformunuzun geliştirici belgelerine başvurarak doğru URI'yi alın.
• authorizationCallbackHandler: Yetkilendirme geri çağırma URI'sinde döndürülen parametre değerlerini korur, yetkilendirme kodunu çıkarır ve olası hataları yönetir.
• getAccessToken: Yetkilendirme kodunu bir erişim token'ına takas eder.
• getUserInfo: Erişim token'ı ile üçüncü taraf sosyal platformdan kullanıcı bilgilerini alır.

Diğer yaygın mantıkların çoğu, Logto bağlayıcı kiti tarafından ele alınmıştır, bu da işinizi kolaylaştırmalıdır.

Son olarak, dosyanın sonunda, GitHub bağlayıcısındakiyle aynı kod yapısını izleyerek bağlayıcı nesnesini dışa aktarmanız yeterli olacaktır.

Adım 3: Bağlayıcıyı test edin#

Birim testi#

İlk olarak, bazı birim test vakaları yazın ve temel işlevlerin beklenildiği gibi çalıştığından emin olun.

Yerel test#

• Logto'yu yerel ortamınızda kurun: Logto'yu yerel olarak çalıştırmak için birkaç yöntemi vardır, CLI, docker veya hatta kaynak kodundan derleme kullanabilirsiniz. Daha fazla detay için belgelere göz atın.

• Özel bağlayıcınızı Logto örneğinize bağlayın: Bağlayıcınızın Logto örneğinize sembolik bir bağlantısını oluşturmak için CLI'yı kullanın. Daha fazla detay.

• Bağlayıcıyı bağladıktan sonra, <logto-root-path>/packages/core/connectors klasöründe görmelisiniz.

• Logto örneğinizi yeniden başlatın, Logto Yönetim Konsolu'na gidin, sosyal bağlayıcılar listesinde onu görmelisiniz.

• Bağlayıcınızı "Giriş deneyimi" -> "Kayıt ve giriş" -> "Sosyal giriş" kısmında yapılandırın. Ve "Canlı önizleme" özelliği ile demo uygulamamızda deneyin.

  

Adım 4 (isteğe bağlı): Bağlayıcıyı yayınlayın#

Bağlayıcınızı NPM'e yayınlayabilir ve toplulukla paylaşabilirsiniz. Veya hatta bir PR oluşturup katkıda bulunarak Logto'nun resmi GitHub deposuna katkı sağlayabilirsiniz. Resmi bağlayıcılar, Logto geliştirme ekibi tarafından bakım yapılacak ve hem açık kaynak hem de Logto Cloud kullanıcılarına kullanılabilir hale getirilecektir.

Özet#

Logto için özel bir sosyal bağlayıcı oluşturmak, düşündüğünüz kadar zor değil. Logto bağlayıcı kiti ve iyi kod örnekleriyle, sadece birkaç adımda kolayca bir bağlayıcı oluşturabilirsiniz.

Ve bağlayıcınızı paylaşarak, Logto ailesine getirdiğiniz sosyal platformu daha fazla kullanıcının keyifle kullanmasına yardımcı olabilirsiniz.