## Giriş [FlutterFlow](https://flutterflow.io/), 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](https://docs.flutterflow.io/settings-and-integrations/app-settings/authentication) 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](https://docs.flutterflow.io/data-and-backend/custom-authentication) söz konusu olduğunda, FlutterFlow herhangi bir kimlik doğrulama sağlayıcısı ile tek bir özel [kimlik doğrulama API](https://docs.flutterflow.io/data-and-backend/custom-authentication#id-3.-authenticate-users) ü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](https://blog.logto.io/deprecated-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](https://docs.logto.io/quick-starts/flutter) kullanarak FluterFlow'un `CustomAuthManager` sınıfını nasıl özelleştireceğinizi göstereceğiz. ## Önkoşullar - Bir [Logto Cloud](https://cloud.logto.io/) hesabı veya kendi kendine barındırılan bir Logto instance. (Bir Logto instance oluşturmak için [⚡ Başlayın](https://docs.logto.io/docs/tutorials/get-started/) 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](https://docs.logto.io/quick-starts/flutter/) göz atın. - Logto Flutter SDK paketi [pub.dev](https://pub.dev/packages/logto_dart_sdk) ve Logto [GitHub deposunda](https://github.com/logto-io/dart) mevcuttur. - SDK şu anda yalnızca Android ve iOS platformları için uygundur. - GitHub'da özel kod yönetimi, FlutterFlow'da bir premium özelliktir. Bu özelliği etkinleştirmek için FlutterFlow'unuzu `Pro` planına yükseltmeniz gerekecek. ## 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](https://docs.flutterflow.io/customizing-your-app/manage-custom-code-in-github) 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](https://docs.flutterflow.io/) 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](https://docs.logto.io/docs/recipes/customize-sie/) başlığına göz atın.) ![ana sayfa](https://uploads.strapi.logto.io/1/home_page_f57a437adb.webp) 2. Kullanıcı bilgilerini ve çıkış yapma düğmesini göstermek için bir `Kullanıcı` profil sayfası. ![kullanıcı sayfası](https://uploads.strapi.logto.io/1/user_page_0bed85dc6d.webp) ### 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. FlutterFlow özel kimlik doğrulama

## 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 FlutterFlow GitHub gönderimi

## 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. ```bash flutter pub add logto_dart_sdk ``` Opsiyonel Http paketi: Logto istemcisi API çağrıları yapmak için bir http istemcisine ihtiyaç duyar. `http` paketini veya tercih ettiğiniz herhangi bir http istemci paketini kullanabilirsiniz. ```bash flutter pub add http ``` ### 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. ```dart // lib/auth/custom_auth/custom_auth_user_provider.dart import 'package:logto_dart_sdk/src/modules/id_token.dart'; import 'package:rxdart/rxdart.dart'; import 'custom_auth_manager.dart'; class FlutterFlowAuthAuthUser { FlutterFlowAuthAuthUser({required this.loggedIn, this.uid, this.idToken}); bool loggedIn; String? uid; OpenIdClaims? idToken; } /// Kimliği doğrulanmış kullanıcıdan bir akış üretir. BehaviorSubject flutterFlowAuthAuthUserSubject = BehaviorSubject.seeded(FlutterFlowAuthAuthUser(loggedIn: false)); Stream flutterFlowAuthAuthUserStream() => flutterFlowAuthAuthUserSubject .asBroadcastStream() .map((user) => currentUser = user); ``` ### CustomAuthManager sınıfını özelleştirin ve Logto istemcisini başlatın ```dart // lib/auth/custom_auth/custom_auth_manager.dart import 'dart:async'; import 'package:flutter/foundation.dart'; import 'package:http/http.dart' as http; import 'package:logto_dart_sdk/logto_client.dart'; import 'package:logto_dart_sdk/src/modules/id_token.dart'; import 'custom_auth_user_provider.dart'; export 'custom_auth_manager.dart'; class CustomAuthManager { late LogtoClient logtoClient; // Logto yapılandırması final logtoConfig = const LogtoConfig( appId: '', endpoint: ''); // ... FlutterFlowAuthAuthUser? _updateCurrentUser( {bool loggedIn = false, String? uid, OpenIdClaims? idToken}) { // Mevcut kullanıcı akışını güncelleyin. final updatedUser = FlutterFlowAuthAuthUser( loggedIn: loggedIn, uid: uid, idToken: idToken, ); flutterFlowAuthAuthUserSubject.add(updatedUser); return updatedUser; } Future initialize() async { logtoClient = LogtoClient(config: logtoConfig, httpClient: http.Client()); late OpenIdClaims? idToken; try { idToken = await logtoClient.idTokenClaims; } catch (e) { if (kDebugMode) { print('Kimlik doğrulama başlatılırken hata: $e'); } } _updateCurrentUser( loggedIn: idToken != null, uid: idToken?.subject, idToken: idToken); } } FlutterFlowAuthAuthUser? currentUser; bool get loggedIn => currentUser?.loggedIn ?? false; ``` `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](https://pub.dev/packages/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](https://pub.dev/packages/flutter_web_auth) tarafından desteklenmektedir. ```dart // lib/auth/custom_auth/custom_auth_manager.dart Future signIn( String redirectUri, ) async { await logtoClient.signIn(redirectUri); var idTokenClaims = await logtoClient.idTokenClaims; return _updateCurrentUser( loggedIn: idTokenClaims != null, uid: idTokenClaims?.subject, idToken: idTokenClaims, ); } ``` 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 ```dart // lib/auth/custom_auth/custom_auth_manager.dart Future signOut() async { await logtoClient.signOut(); flutterFlowAuthAuthUserSubject.add( FlutterFlowAuthAuthUser(loggedIn: false), ); } ``` `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. ```dart // lib/auth/custom_auth/auth_util.dart import 'package:logto_dart_sdk/logto_client.dart'; import 'package:logto_dart_sdk/src/modules/id_token.dart'; import 'custom_auth_manager.dart'; export 'custom_auth_manager.dart'; final _authManager = CustomAuthManager(); CustomAuthManager get authManager => _authManager; String get currentUserUid => currentUser?.uid ?? ''; OpenIdClaims? get currentUserData => currentUser?.idToken; LogtoClient get logtoClient => _authManager.logtoClient; ``` ## 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ı](https://docs.logto.io/quick-starts/flutter/#implement-sign-in) başlığına bakın. ```dart // lib/pages/home_page/home_page_widget.dart final redirectUri = 'io.logto://callback'; // ... FFButtonWidget( onPressed: () async { GoRouter.of(context).prepareAuthEvent(); await authManager.signIn(redirectUri); context.replaceNamed('user'); }, text: 'Giriş yap', // ... ) ``` 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: ```dart // lib/pages/user/user_widget.dart import '/auth/custom_auth/auth_util.dart'; // ... children: [ Text( 'Kullanıcı kimliği: $currentUserUid', ), Text( 'Görünen Adı: ${currentUserData?.name}', ), Text( 'Kullanıcı Adı: ${currentUserData?.username}', ), Text( 'E-posta: ${currentUserData?.emailVerified ?? currentUserData?.email}', ), ] ``` Kullanıcı çıkış yapma düğmesine tıkladığında çıkış yapma yöntemini tetikleyin ve kullanıcıyı ana sayfaya geri yönlendirin. ```dart // lib/pages/user/user_widget.dart FFButtonWidget( onPressed: () async { await authManager.signOut(); context.replaceNamed('HomePage'); }, text: 'Çıkış yap', // ... ) ``` ## 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. FlutterFlow GitHub push, FlutterFlow'dan GitHub'a tek yönlü bir senkronizasyondur. `flutterflow` dalı altında yapılan herhangi bir değişiklik, FlutterFlow kullanıcı arayüzü editörü tarafından GitHub deposuna değişiklikleri gönderdiğinizde üzerine yazılacaktır. Özel kodunuzu yönetmek için `develop` dalını kullanın ve dağıtım için değişiklikleri `main` dalına geri birleştirin. ## 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](https://docs.logto.io/quick-starts/flutter/#get-user-information) - [Kaynak erişim token'ı alma](https://docs.logto.io/quick-starts/flutter/#api-resources) - [Organizasyon erişim token'ı alma](https://docs.logto.io/quick-starts/flutter/#organization)