## Введение [FlutterFlow](https://flutterflow.io/) - это платформа с низким кодом, которая позволяет создавать приложения Flutter визуально. Она предоставляет интерфейс перетаскивания для проектирования интерфейса приложения и генерирует соответствующий код Flutter. Согласно официальной [документации](https://docs.flutterflow.io/settings-and-integrations/app-settings/authentication), платформа предоставляет три различных варианта интеграции аутентификации: 1. Через встроенную аутентификацию Firebase 2. Через встроенную аутентификацию Supabase 3. Пользовательская аутентификация Для первых двух FlutterFlow предлагает бесшовную интеграцию с Firebase и Supabase. Нужно настроить проект Firebase или Supabase и настроить параметры аутентификации в FlutterFlow. Однако, если вы хотите использовать другого провайдера аутентификации, вам придется самостоятельно реализовать логику аутентификации. Что касается [пользовательской аутентификации](https://docs.flutterflow.io/data-and-backend/custom-authentication), FlutterFlow предоставляет возможность интеграции с любым провайдером аутентификации, полагаясь на один кастомный [API аутентификации](https://docs.flutterflow.io/data-and-backend/custom-authentication#id-3.-authenticate-users). Однако прямой обмен учетными данными между клиентом и сервером аутентификации не рекомендуется согласно современным стандартам безопасности. Вместо этого следует использовать безопасный процесс аутентификации, такой как OAuth 2.0 или OpenID Connect (OIDC), чтобы аутентифицировать пользователей. Для современных провайдеров удостоверений (IdP), основанных на OAuth 2.0 или OIDC, таких как Auth0, Okta и Logto, тип гранта «пароль ресурсообладателя» (ROPC) не рекомендуется или запрещен по соображениям безопасности. Подробнее см. [Устаревший тип гранта ropc](https://blog.logto.io/deprecated-ropc-grant-type/). Стандартный процесс аутентификации OAuth 2.0 или OIDC включает несколько шагов и перенаправлений между клиентским приложением, сервером авторизации и браузером пользователя. В этом посте мы покажем, как кастомизировать класс `CustomAuthManager` во FlutterFlow с использованием [Logto Flutter SDK](https://docs.logto.io/quick-starts/flutter) для реализации безопасного процесса аутентификации в вашем приложении FlutterFlow. ## Необходимые условия - Аккаунт в [Logto Cloud](https://cloud.logto.io/) или самостоятельный экземпляр Logto. (Посмотрите руководство [⚡ Начало работы](https://docs.logto.io/docs/tutorials/get-started/), чтобы создать экземпляр Logto) - Приложение Flutter, созданное с использованием FlutterFlow. - Зарегистрируйте приложение Flutter в вашей консоли Logto. - Репозиторий GitHub для управления вашим пользовательским кодом в FlutterFlow. - Обратитесь к нашему руководству по интеграции Flutter SDK [здесь](https://docs.logto.io/quick-starts/flutter/). - Пакет Logto Flutter SDK доступен на [pub.dev](https://pub.dev/packages/logto_dart_sdk) и в репозитории Logto на [github](https://github.com/logto-io/dart). - SDK в настоящее время подходит только для платформ Android и iOS. - Управление пользовательским кодом в GitHub является премиальной функцией в FlutterFlow. Вам нужно обновить FlutterFlow до плана `Pro`, чтобы включить эту функцию. ## Шаг 1: Включите управление пользовательским кодом в FlutterFlow Для того чтобы кастомизировать класс `CustomAuthManager`, необходимо включить функцию пользовательского кода в FlutterFlow. Следуйте руководству [Управление пользовательским кодом в GitHub](https://docs.flutterflow.io/customizing-your-app/manage-custom-code-in-github), чтобы связать и синхронизировать ваш проект FlutterFlow с GitHub. После этого у вас будет три разные ветви в вашем репозитории GitHub FlutterFlow: 1. `main`: Главная ветка для проекта Flutter. Вам понадобится эта ветка для развертывания вашего проекта. 2. `flutterflow`: Ветка, в которую FlutterFlow синхронизирует изменения из редактора пользовательского интерфейса в ваш код. 3. `develop`: Ветка, в которой вы можете изменять ваш пользовательский код. ## Шаг 2: Спроектируйте и создайте ваш пользовательский UI-поток в FlutterFlow ### Создайте ваши страницы Создайте пользовательский интерфейс в FlutterFlow. Вы можете следовать [документации FlutterFlow](https://docs.flutterflow.io/), чтобы создать интерфейс на основе ваших требований. В этом учебном пособии, для минимального требования, мы предположим, что у вас есть две страницы: 1. Простая `HomePage` со кнопкой входа. (Форма входа не требуется, пользовательский процесс аутентификации осуществляется на стороне Logto. Пожалуйста, ознакомьтесь с [руководством по кастомизации sie](https://docs.logto.io/docs/recipes/customize-sie/) для получения более подробной информации.) ![домашняя страница](https://uploads.strapi.logto.io/1/home_page_f57a437adb.webp) 2. Страница профиля `user` для отображения информации о пользователе и кнопки выхода из системы. ![страница пользователя](https://uploads.strapi.logto.io/1/user_page_0bed85dc6d.webp) ### Включите пользовательскую аутентификацию в FlutterFlow Перейдите в `Настройки приложения` - `Аутентификация` и включите пользовательскую аутентификацию. Это создаст класс `CustomAuthManager` и связанные файлы в вашем проекте FlutterFlow. Пользовательская аутентификация FlutterFlow

Пользовательская аутентификация FlutterFlow

## Шаг 3: Синхронизируйте ваш проект FlutterFlow с GitHub После того как вы создали пользовательский интерфейс и включили пользовательскую аутентификацию в FlutterFlow, необходимо синхронизировать ваш проект с GitHub. Перейдите в `интеграции` - `GitHub` и нажмите `Push to Repository` FlutterFlow GitHub push

## Шаг 4: Кастомизация кода `CustomAuthManager` Переключитесь на ветку `develop` в вашем репозитории GitHub и объедините последние изменения из ветки `flutterflow`. Это синхронизирует все изменения пользовательского интерфейса с вашей веткой `develop`, включая ваши элементы страниц и предустановленный класс `CustomAuthManager`. ### Установите зависимость Logto SDK Добавьте зависимость Logto SDK в ваш проект. ```bash flutter pub add logto_dart_sdk ``` Опциональный пакет Http: Клиенту Logto требуется http-клиент для выполнения вызовов API. Вы можете использовать пакет `http` или любой другой пакет http-клиента на ваше усмотрение. ```bash flutter pub add http ``` ### Обновите класс UserProvider Класс `UserProvider` отвечает за управление состоянием аутентификации пользователя. Нам нужно кастомизировать свойства для хранения информации о пользователе, предоставленной SDK Logto. Добавьте свойство `idToken` с типом `OpenIdClaims` для хранения утверждений `id_token` аутентифицированного пользователя. > Класс `OpenIdClaims` определен в Logto SDK, который предоставляет утверждения `id_token` в соответствии со стандартом OIDC от аутентифицированного пользователя. ```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; } /// Генерирует поток аутентифицированного пользователя. BehaviorSubject flutterFlowAuthAuthUserSubject = BehaviorSubject.seeded(FlutterFlowAuthAuthUser(loggedIn: false)); Stream flutterFlowAuthAuthUserStream() => flutterFlowAuthAuthUserSubject .asBroadcastStream() .map((user) => currentUser = user); ``` ### Кастомизация класса CustomAuthManager и инициализация клиента Logto ```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 final logtoConfig = const LogtoConfig( appId: '', endpoint: ''); // ... FlutterFlowAuthAuthUser? _updateCurrentUser( {bool loggedIn = false, String? uid, OpenIdClaims? idToken}) { // Обновите текущий поток пользователя. 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('Ошибка при инициализации аутентификации: $e'); } } _updateCurrentUser( loggedIn: idToken != null, uid: idToken?.subject, idToken: idToken); } } FlutterFlowAuthAuthUser? currentUser; bool get loggedIn => currentUser?.loggedIn ?? false; ``` Метод `initialize` инициализирует экземпляр клиента Logto и обновляет текущий поток пользователя с состоянием аутентификации пользователя, сохраненным в локальном хранилище. > SDK Logto использует пакет [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage) для безопасного хранения данных аутентификации пользователя. После того как пользователь аутентифицирован, утверждения `id_token` будут сохранены в локальном хранилище. ### Реализация метода входа с использованием клиента Logto Вызов метода `LogtoClient.signIn` инициирует стандартный процесс аутентификации `OIDC`. Страница входа Logto откроется во webview. Процесс аутентификации на основе webview поддерживается пакетом [flutter_web_auth](https://pub.dev/packages/flutter_web_auth). ```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, ); } ``` Клиент Logto обеспечивает выполнение шагов авторизации, обмена токенами и получения информации о пользователе. После аутентификации пользователя утверждения `idTokenClaims` будут сохранены в локальном хранилище. Получите утверждения `idTokenClaims` от клиента Logto и обновите текущий поток пользователя. ### Реализация метода выхода из системы ```dart // lib/auth/custom_auth/custom_auth_manager.dart Future signOut() async { await logtoClient.signOut(); flutterFlowAuthAuthUserSubject.add( FlutterFlowAuthAuthUser(loggedIn: false), ); } ``` Метод `signOut` очистит данные аутентификации пользователя, сохраненные в локальном хранилище, и обновит текущий поток пользователя. ### Обновление утилитных методов аутентификации - Добавьте геттер `authManager` для доступа к экземпляру `CustomAuthManager`. - Добавьте геттер `currentUserUid`, чтобы получить текущий уникальный идентификатор пользователя (uid). - Добавьте геттер `currentUserData`, чтобы получить текущие данные пользователя. - Добавьте геттер `logtoClient` для получения доступа к экземпляру клиента Logto. ```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; ``` ## Шаг 5: Обновление кнопок входа и выхода на вашем UI ### Домашняя страница Вызовите метод `authManager.signIn`, чтобы инициировать процесс аутентификации, когда пользователь нажимает на кнопку входа. > `redirectUri` - это URL обратного вызова, который будет использоваться для получения обратного вызова авторизации со страницы входа Logto. > Подробнее о redirectUri см. [реализация входа](https://docs.logto.io/quick-starts/flutter/#implement-sign-in). ```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: 'Войти', // ... ) ``` Пользователь будет перенаправлен на страницу `user` после успешной аутентификации. ### Страница профиля пользователя Используйте утилитные геттеры аутентификации для доступа к текущим данным пользователя и экземпляру клиента Logto. Например, чтобы отобразить информацию о пользователе с использованием нескольких виджетов `Text`: ```dart // lib/pages/user/user_widget.dart import '/auth/custom_auth/auth_util.dart'; // ... children: [ Text( 'ID пользователя: $currentUserUid', ), Text( 'Отображаемое имя: ${currentUserData?.name}', ), Text( 'Имя пользователя: ${currentUserData?.username}', ), Text( 'Электронная почта: ${currentUserData?.emailVerified ?? currentUserData?.email}', ), ] ``` Проведите метод выхода из системы, когда пользователь нажимает на кнопку выхода, и перенаправьте пользователя обратно на домашнюю страницу. ```dart // lib/pages/user/user_widget.dart FFButtonWidget( onPressed: () async { await authManager.signOut(); context.replaceNamed('HomePage'); }, text: 'Выйти', // ... ) ``` ## Тестирование Запустите ваше приложение FlutterFlow на эмуляторе. Нажмите кнопку входа на домашней странице для начала процесса аутентификации. Страница входа Logto откроется в webview. После успешной аутентификации пользователь будет перенаправлен на страницу профиля пользователя. Информация о пользователе будет отображаться на странице профиля пользователя. Нажмите кнопку выхода, чтобы выйти из системы и вернуться на домашнюю страницу. Не забудьте объединить ветку `develop` с веткой `main` и отправить изменения в репозиторий GitHub. GitHub push от FlutterFlow — это однонаправленная синхронизация от FlutterFlow к GitHub. Любые изменения, внесенные в ветку `fluterflow`, будут перезаписаны редактором пользовательского интерфейса FlutterFlow при отправке изменений в репозиторий GitHub. Убедитесь, что вы используете ветку `develop` для управления вашим пользовательским кодом и объединяйте изменения в ветку `main` для развертывания. ## Дополнительные материалы для чтения SDK Logto предоставляет больше методов для взаимодействия с API Logto. Вы можете далее кастомизировать класс `CustomAuthManager`, чтобы реализовать больше функционала с использованием SDK Logto. - [Эндпоинт информации о пользователе](https://docs.logto.io/quick-starts/flutter/#get-user-information) - [Получение токена доступа к ресурсу](https://docs.logto.io/quick-starts/flutter/#api-resources) - [Получение токена доступа организации](https://docs.logto.io/quick-starts/flutter/#organization)