Logto Flutter SDK kullanarak Flutter uygulamanızda özel kimlik doğrulamayı nasıl uygulayacağınızı öğrenin.
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:
İ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.
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:
main: Flutter projesi için ana dal. Projenizi dağıtmak için bu dalı kullanmanız gerekecek.flutterflow: FlutterFlow'un kullanıcı arayüzü editöründen kod tabanınıza senkronize edeceği dal.develop: Özel kodunuzu düzenleyebileceğiniz dal.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:
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.)
Kullanıcı profil sayfası.
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.
Ö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
CustomAuthManager kodunu özelleştirinGitHub 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.
Projenize Logto SDK bağımlılığını ekleyin.
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.
OpenIdClaimssınıfı, kimliği doğrulanmış bir kullanıcıdan OIDC standartid_tokentaleplerini sağlayacak olan Logto SDK içinde tanımlanmıştır.
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_tokentalepleri yerel depoya kaydedilecektir.
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.
signOut yöntemi, yerel depoda saklanan kullanıcı kimlik doğrulama verilerini temizleyecek ve mevcut kullanıcı akışını güncelleyecektir.
CustomAuthManager instance'ını erişmek için authManager getter'ını ekleyin.currentUserUid getter'ını ekleyin.currentUserData getter'ını ekleyin.logtoClient getter'ını ekleyin.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.
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.
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.
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.