Logto kullanarak özel FlutterFlow kimlik doğrulama

Giriş#

FlutterFlow, Flutter uygulamalarını görsel olarak oluşturmanıza olanak tanıyan bir düşük kod platformudur. Uygulamanızın kullanıcı arayüzünü tasarlamak için bir sürükle ve bırak arayüzü sağlar ve buna karşılık gelen Flutter kodunu üretir. Resmi belgelere göre, üç farklı kimlik doğrulama entegrasyon seçeneği sağlar:

1. Yerleşik Firebase kimlik doğrulama aracılığıyla
2. Yerleşik Supabase kimlik doğrulama aracılığıyla
3. Özel kimlik doğrulama

İlk iki seçenek için FlutterFlow, Firebase ve Supabase ile sorunsuz bir entegrasyon sağlar. Firebase veya Supabase projenizi kurmanız ve FlutterFlow'da kimlik doğrulama ayarlarını yapılandırmanız gerekecek. Ancak, farklı bir kimlik doğrulama sağlayıcısı kullanmak istiyorsanız, kimlik doğrulama mantığını kendiniz uygulamanız gerekecek.

Özel kimlik doğrulama söz konusu olduğunda, FlutterFlow herhangi bir kimlik doğrulama sağlayıcısı ile tek bir özel kimlik doğrulama API üzerinden entegre olmanız için bir yol sağlar.

Ancak, modern güvenlik standartlarına göre, istemci ile kimlik doğrulama sunucusu arasında doğrudan kullanıcı kimlik bilgileri alışverişi önerilmez. Bunun yerine, kullanıcıları kimlik doğrulamak için OAuth 2.0 veya OpenID Connect (OIDC) gibi güvenli bir kimlik doğrulama akışı kullanmalısınız. Auth0, Okta ve Logto gibi modern OAuth 2.0 veya OIDC tabanlı Kimlik Sağlayıcıları (IdP) için kaynak sahibi parola kimlik bilgileri (ROPC) verme türü, güvenlik nedenleriyle önerilmez veya yasaklanmıştır. Daha fazla ayrıntı için Kullanımdan Kaldırılmış ropc grant type başlığına bakın.

Standart bir OAuth 2.0 veya OIDC kimlik doğrulama akışı, istemci uygulaması, yetkilendirme sunucusu ve kullanıcının tarayıcısı arasında birden fazla adım ve yönlendirme içerir. Bu yazıda, FlutterFlow uygulamanızda güvenli bir kimlik doğrulama akışını uygulamak için Logto Flutter SDK kullanarak FluterFlow'un CustomAuthManager sınıfını nasıl özelleştireceğinizi göstereceğiz.

Önkoşullar#

• Bir Logto Cloud hesabı veya kendi kendine barındırılan bir Logto instance. (Bir Logto instance oluşturmak için ⚡ Başlayın kılavuzuna göz atın)
• FlutterFlow kullanarak oluşturulmuş bir Flutter uygulaması.
• Logto konsolunda bir Flutter uygulaması kaydedin.
• FlutterFlow'da özel kodunuzu yönetmek için bir GitHub deposu.
• Flutter SDK'mızın entegrasyon kılavuzuna göz atın.

Adım 1: FlutterFlow'da özel kodu yönetmeyi etkinleştirin#

CustomAuthManager sınıfını özelleştirmek için FlutterFlow'da özel kod özelliğini etkinleştirmeniz gerekecek. GitHub'da Özel Kod Yönetimi kılavuzunu izleyerek FlutterFlow projenizi GitHub ile bağlayın ve senkronize edin.

Bu tamamlandığında, GitHub FlutterFlow deponuzda üç farklı dalınız olacak:

1. main: Flutter projesi için ana dal. Projenizi dağıtmak için bu dalı kullanmanız gerekecek.
2. flutterflow: FlutterFlow'un kullanıcı arayüzü editöründen kod tabanınıza senkronize edeceği dal.
3. develop: Özel kodunuzu düzenleyebileceğiniz dal.

Adım 2: FlutterFlow'da özel kullanıcı arayüzü akışınızı tasarlayın ve oluşturun#

Sayfalarınızı oluşturun#

Kullanıcı arayüzünüzü FlutterFlow'da oluşturun. Gereksinimlerinize göre kullanıcı arayüzünüzü oluşturmak için FlutterFlow belgelerini izleyebilirsiniz. Bu öğreticide, minimum gereklilikler için iki sayfanız olduğunu varsayacağız:

1. Bir oturum açma düğmesine sahip basit bir HomePage. (Giriş formuna gerek yoktur, kullanıcı kimlik doğrulama akışı Logto tarafından yönetilir. Daha fazla ayrıntı için özelleştirme kılavuzu başlığına göz atın.)

2. Kullanıcı bilgilerini ve çıkış yapma düğmesini göstermek için bir Kullanıcı profil sayfası.

FlutterFlow'da özel kimlik doğrulamayı etkinleştirin#

App Settings - Authentication sayfasına gidin ve özel kimlik doğrulamayı etkinleştirin. Bu işlem, FlutterFlow projenizde bir CustomAuthManager sınıfı ve ilgili dosyalar oluşturacaktır.

Adım 3: FlutterFlow projenizi GitHub ile senkronize edin#

Özel kullanıcı arayüzünüzü oluşturduktan ve FlutterFlow'da özel kimlik doğrulamayı etkinleştirdikten sonra, projenizi GitHub ile senkronize etmeniz gerekecek. integrations - GitHub sayfasına gidin ve Push to Repository düğmesine tıklayın

Adım 4: CustomAuthManager kodunu özelleştirin#

GitHub deponuzda develop dalına geçin ve flutterflow dalından en son değişiklikleri birleştirin. Bu işlem, sayfa widget'larınız ve önceden oluşturulmuş CustomAuthManager sınıfı da dahil olmak üzere develop dalınıza tüm kullanıcı arayüzü değişikliklerini senkronize eder.

Logto SDK bağımlılığını yükleyin#

Projenize Logto SDK bağımlılığını ekleyin.

UserProvider sınıfını güncelleyin#

UserProvider sınıfı, kullanıcı kimlik doğrulama durumunu yönetmekten sorumludur. logto SDK tarafından sağlanan kullanıcı kimlik doğrulama bilgilerini saklamak için özellikleri özelleştirmemiz gerekiyor.

Kimliği doğrulanmış kullanıcı için id_token taleplerini saklamak amacıyla OpenIdClaims türünde bir idToken özelliği ekleyin.

OpenIdClaims sınıfı, kimliği doğrulanmış bir kullanıcıdan OIDC standart id_token taleplerini sağlayacak olan Logto SDK içinde tanımlanmıştır.

CustomAuthManager sınıfını özelleştirin ve Logto istemcisini başlatın#

initialize yöntemi, bir Logto istemci instance'ı başlatacak ve yerel depoda kalıcı olan kullanıcı kimlik doğrulama durumu ile mevcut kullanıcı akışını güncelleyecektir.

Logto SDK, kimlik doğrulama verilerini güvenli bir şekilde depolamak için flutter_secure_storage paketini kullanır. Kullanıcının kimliği doğrulandıktan sonra, id_token talepleri yerel depoya kaydedilecektir.

Sign-in yöntemini kullanarak Logto istemcisi ile kimlik doğrulama işlemini uygulayın#

LogtoClient.signIn yöntemini çağırarak standart bir OIDC kimlik doğrulama akışı başlatılacaktır. Logto oturum açma sayfası bir webview'de açılacaktır. Webview tabanlı kimlik doğrulama akışı, flutter_web_auth tarafından desteklenmektedir.

LogtoClient, yetkilendirme, token değişimi ve kullanıcı bilgilerini alma adımlarını yönetecektir. Kullanıcının kimliği doğrulandıktan sonra, idTokenClaims yerel depoya kaydedilecektir.

LogtoClient'tan idTokenClaims'i alın ve mevcut kullanıcı akışını güncelleyin.

Çıkış yapma yöntemini uygulayın#

signOut yöntemi, yerel depoda saklanan kullanıcı kimlik doğrulama verilerini temizleyecek ve mevcut kullanıcı akışını güncelleyecektir.

Kimlik doğrulama yardımcı yöntemlerini güncelleyin#

• CustomAuthManager instance'ını erişmek için authManager getter'ını ekleyin.
• Mevcut kullanıcı kimliğini almak için currentUserUid getter'ını ekleyin.
• Mevcut kullanıcı verilerini almak için currentUserData getter'ını ekleyin.
• Logto istemcisine erişmek için logtoClient getter'ını ekleyin.

Adım 5: Kullanıcı arayüzünüzde oturum açma ve çıkış yapma düğmelerini güncelleyin#

Ana Sayfa#

Kullanıcı oturum açma düğmesine tıkladığında kimlik doğrulama akışını başlatmak için authManager.signIn yöntemini çağırın.

redirectUri, Logto oturum açma sayfasından yetkilendirme geri çağrısını yakalamak için kullanılacak geri çağırma URL'sidir. Geri çağırma URL hakkında daha fazla ayrıntı için oturum açma işleminin uygulanması başlığına bakın.

Kullanıcı, başarılı kimlik doğrulama sonrasında user sayfasına yönlendirilecektir.

Kullanıcı Profil Sayfası#

Mevcut kullanıcı verilerine ve Logto istemcisine erişmek için auth yardımcı getter'larını kullanın.

Örneğin, kullanıcı bilgilerini birden fazla Text widget'ı kullanarak göstermek için:

Kullanıcı çıkış yapma düğmesine tıkladığında çıkış yapma yöntemini tetikleyin ve kullanıcıyı ana sayfaya geri yönlendirin.

Test Etme#

FlutterFlow uygulamanızı bir emülatörde çalıştırın. Ana sayfadaki oturum açma düğmesine tıklayarak kimlik doğrulama akışını başlatın. Logto oturum açma sayfası bir webview'de açılacaktır. Başarılı kimlik doğrulama sonrasında kullanıcı, kullanıcı profil sayfasına yönlendirilecektir. Kullanıcı bilgileri, kullanıcı profil sayfasında gösterilecektir. Kullanıcı çıkış yap düğmesine tıklayarak çıkış yapabilir ve kullanıcıyı ana sayfaya geri yönlendirebilir.

develop dalını main dalına geri birleştirmeyi ve değişiklikleri GitHub deposuna göndermeyi unutmayın.

Daha Fazla Bilgi#

Logto SDK, Logto API ile etkileşime geçmek için daha fazla yöntem sağlar. CustomAuthManager sınıfını Logto SDK using kullanarak daha fazla özellik uygulamak için özelleştirebilirsiniz.

• Kullanıcı bilgileri endpoint
• Kaynak erişim token'ı alma
• Organizasyon erişim token'ı alma