Türkçe
  • react
  • react-native
  • expo
  • eğitim
  • kimlik doğrulama
  • auth
  • oauth
  • oidc
  • kimlik

Logto ile Expo (React Native) kimlik doğrulaması oluşturma

Logto SDK'sini entegre ederek Expo (React Native) ile bir kullanıcı kimlik doğrulama akışı nasıl oluşturulacağını öğrenin.

Gao
Gao
Founder

Başlarken

Giriş

  • Logto, kimlik altyapıları oluşturmak için açık kaynaklı bir Auth0 alternatifidir. Kullanıcı adı, e-posta, telefon numarası ve Google ve GitHub gibi popüler sosyal giriş yöntemleri dahil olmak üzere çeşitli giriş yöntemlerini destekler.
  • Expo (React Native) Android, iOS ve web üzerinde çalışan React ile evrensel yerel uygulamalar oluşturmanıza yardımcı olan bir araç ekosistemidir.

Bu öğreticide, Logto SDK'yı entegre ederek Expo (React Native) ile bir kullanıcı kimlik doğrulama akışı oluşturmayı göstereceğiz. Öğreticide programlama dili olarak TypeScript kullanılmaktadır.

Ön Koşullar

Başlamadan önce, aşağıdakilere sahip olduğunuzdan emin olun:

Bir Logto uygulaması oluşturun

Başlamak için "Yerel" türünde bir Logto uygulaması oluşturun. Bir Logto uygulaması oluşturmak için şu adımları izleyin:

  1. Logto Konsolu'nda oturum açın.
  2. Sol gezinme çubuğunda Uygulamalar üzerine tıklayın.
  3. Uygulama oluştur üzerine tıklayın.
  4. Açılan sayfada, "Yerel" bölümünü bulun ve "Expo (React Native)" kartını seçin.
  5. Yapmaya başla üzerine tıklayın ve uygulamanızın adını girin.
  6. Oluştur üzerine tıklayın.

Daha sonra Expo (React Native) uygulamanızla Logto SDK'yı entegre etme sürecinde size yol gösterecek bir etkileşimli kılavuz göreceksiniz. Aşağıdaki içerik gelecekte referans olarak kullanılabilir.

Logto Cloud'un etkileşimli kılavuzunu deneyin

Logto SDK ile Entegrasyon

Kurulum

Favori paket yöneticiniz ile Logto SDK ve eş bağımlılıkları yükleyin:

@logto/rn paketi Logto için SDK'dır. Kalan paketler ise onun eş bağımlılıklarıdır. Expo CLI, yerel modüller için tüm bağımlılıkların doğrudan kök projenin package.json dosyasında yüklenmesini gerektirdiği için bunlar doğrudan bağımlılık olarak listelenememiştir.

Logto sağlayıcısını başlat

Bir Logto bağlamı sağlamak için LogtoProvider'ı içe aktarın ve kullanın:

Oturum açma ve oturum kapatma uygulaması

Logto Konsolu'nun uygulama detayları sayfasına geçin. Yerel bir yönlendirme URI'si ekleyin (örneğin, io.logto://callback), ardından "Kaydet"e tıklayın.

  • iOS için, yönlendirme URI'si şeması pek önemli değildir çünkü ASWebAuthenticationSession sınıfı, kayıtlı olup olmadığından bağımsız olarak yönlendirme URI'sini dinleyecektir.

  • Android için, yönlendirme URI'si şeması Expo'nun app.json dosyasında doldurulmalıdır, örneğin:

Şimdi uygulamanıza geri dönün, oturum açmak ve oturumu kapatmak için useLogto kancasını kullanabilirsiniz:

Kullanıcı bilgilerini görüntüleme

Kullanıcı bilgilerini görüntülemek için getIdTokenClaims() yöntemini kullanabilirsiniz:

Kontrol Noktası: Uygulamayı çalıştır

Şimdi uygulamayı çalıştırabilir ve Logto ile giriş/çıkış yapmayı deneyebilirsiniz:

  1. Uygulamayı tarayıcınızda açın, "Giriş yap" düğmesini görmelisiniz.
  2. "Giriş yap" düğmesine tıklayın ve Logto giriş sayfasına yönlendirilmelisiniz.
  3. Giriş yaptıktan sonra uygulamaya geri yönlendirilmelisiniz ve kullanıcı verilerini ve "Çıkış yap" düğmesini görmelisiniz.
  4. "Çıkış yap" düğmesine tıklayın ve Logto çıkış sayfasına yönlendirilmeli ve ardından giriş yapılmamış durumda uygulamaya geri yönlendirilmelisiniz.

Entegrasyon sırasında herhangi bir sorunla karşılaşırsanız, topluluk ve Logto ekibiyle sohbet etmek için Discord sunucumuza katılmaktan çekinmeyin!

Daha fazla okuma

Bugün Logto'yu Deneyin