FlutterFlow Документация
Заказать разработку

Вход по JWT-токену

Вход по JWT позволяет пользоваться сервисами Firebase — базой и push-уведомлениями — с учётной записью, которую завёл ваш собственный сервер.

Схема входа по JWT-токену

Порядок такой: приложение отправляет логин и пароль на ваш сервер, тот проверяет их, создаёт учётную запись, выпускает JWT-токен и возвращает его приложению. С этим токеном приложение входит в Firebase.

инфо

Подробности — в документации Firebase про пользовательские токены.

Как это настроить

Соберём пример входа по JWT-токену. Готовый результат:

инфо
Что нужно заранее

Пять шагов:

  1. Настроить API входа
  2. Собрать страницу входа
  3. Добавить действие входа
  4. Добавить выход
  5. Проверить создание пользователя

1. API входа

На своём сервере создайте эндпоинт, который принимает почту или логин с паролем, проверяет их и возвращает JWT-токен.

Сам токен выпускают через Firebase Admin SDK или стороннюю библиотеку JWT — подробности в документации Firebase.

инфо

Как вариант, подключите аутентификацию Supabase и берите JWT-токен, который она выдаёт после входа.

Эндпоинт должен выглядеть примерно так.

API входа на вашем сервере

POST /login

Тело запроса
ПолеТипОписание
email*Stringпочта или логин
password*Stringпароль
Ответ 200: OK
{
    "user": {
        "id": 1,
        "role_id": 1,
        "name": "james",
        "email": "james@yopmail.com"
    },
    "token_type": "Bearer",
    "expires_in": 3600,
    "jwt_token": "eyJraWQiOiItSE5TUmtwMWdXcG9QcC1wWVBmU1U4UW1fdng4Q0VwdzRSdTZTQU9WLThRIiwiYWxnIjoiUlMyNTYifQ...",
    "refresh_token": "dlIOQHHAmweyOrVkDlpNYpi1XM-DwX5Cgx70LoKIbTI"
}
внимание

Обычно приложение должно открываться сразу после регистрации. Значит, JWT-токен нужно выпускать и возвращать не только при входе, но и при успешном создании аккаунта.

инфо

Хотите попробовать до того, как эндпоинт готов, — сгенерируйте токен локально.

2. Страница входа

Добавьте страницу из шаблонов: вкладка Auth, шаблон Authenticate Solo Alt. Лишние кнопки входа через соцсети уберите.

Страница входа из шаблона

3. Действие входа

Вход состоит из двух шагов: вызов API вашего сервера, а затем передача полученного токена в действие Log In.

  1. Выберите виджет — например, кнопку Sign In.
  2. В панели свойств справа откройте Actions и нажмите Open — откроется Action Flow Editor.
  3. Добавьте вызов API входа и задайте Action Output Variable Name — из неё потом достанете токен.
  4. В ветке TRUE нажмите + и выберите Add Action.
  5. Найдите и выберите Log In (раздел Firebase Authentication).
  6. В Auth Provider укажите JWT token.
  7. Передайте сам токен:
    1. Нажмите UNSET и выберите Action Outputs → имя переменной, заданное на шаге 3.
    2. В API Response Options выберите JSON Body, в Available Options — JSON Path.
    3. Укажите путь к токену в ответе — например, $.token — и нажмите Confirm.
  8. По желанию добавьте Show SnackBar с сообщением об успехе.
  9. По желанию добавьте такое же сообщение об ошибке в ветку FALSE.

4. Добавить выход

Выход из аккаунта — действие Logout.

5. Проверить создание пользователя

Записи новых пользователей появятся в Firebase project > Authentication > Users. Обратите внимание: идентификатор, который выдал ваш сервер, попадает в колонку User UID.

Локальная генерация токена

Иногда собрать и проверить вход хочется до того, как готов серверный API. Токен можно выпустить локально и передать его в действие входа.

внимание

Это только для проверки. В рабочем приложении токен выпускает сервер.

Как сделать это на Node.js:

  1. В консоли Firebase откройте Project Settings → Service accounts.
  2. Нажмите Generate new private key, затем Generate key и сохраните файл .json в отдельную папку.
  3. Установите Node.js.
  4. Откройте терминал в папке с файлом .json и выполните npm install firebase-admin.
  5. В той же папке создайте файл index.js:
const admin = require('firebase-admin');
const ServiceAccount = require('./[YOUR_SERVICE_ACCOUNT_JSON_FILE_NAME].json');
admin.initializeApp({
	credential: admin.credential.cert(ServiceAccount)
});

const uid= 'userid1'; // этот идентификатор сохранится в Firebase

admin.auth().createCustomToken(uid)
  .then((customToken) => {
    console.log(customToken);
  })
  .catch((error) => {
    console.log('Error creating custom token:', error);
  });
  1. Выполните node index.js — токен появится в консоли.
  2. Скопируйте его, вернитесь во FlutterFlow и сохраните в переменную состояния приложения типа String.
  3. Откройте действие входа по JWT, нажмите UNSET и выберите App State → имя переменной с токеном.

Доступ к базе Firebase

После входа по токену доступен объект Authenticated User с данными вошедшего пользователя — в том числе User Reference, ссылка на его документ. Она нужна при записи и чтении документов Firestore.

Например, так список дел фильтруется по автору:

Фильтрация документов по ссылке на пользователя

Push-уведомления

Ссылка на пользователя из Authenticated User пригодится и для уведомлений. Если она сохранена в документах Firestore, её подставляют в Single Recipient или Multiple Recipients при выборе Audience в действии Trigger Push Notification:

Выбор получателей уведомления по ссылке на пользователя

Подробнее — в разделе про push-уведомления.

перевод официальной документации FlutterFlow

обновлено

⌕ ESC