Перейти к основному содержимому

Аутентификация с JWT-токеном

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

JWT-login-flow.avif

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

к сведению

Подробнее о Firebase и JWT-токенах можно узнать здесь.

Добавление аутентификации с JWT-токеном​

Давайте создадим пример, в котором используется JWT-токен для входа в приложение. Вот как это выглядит после завершения:

JET-token-authentication.gif

Предварительные требования

Перед началом работы с этим разделом:

Добавление аутентификации с JWT-токеном включает следующие шаги:

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

1. Добавление API для входа​

Вы должны создать конечную точку API на вашем сервере, которая принимает email/имя пользователя и пароль. Если учетные данные верны, она генерирует JWT-токен и возвращает его в ответе.

На сервере вы можете генерировать JWT-токен с помощью Firebase Admin SDK или библиотеки JWT от третьей стороны. Подробные инструкции можно найти здесь.

к сведению

В качестве альтернативы вы можете интегрировать аутентификацию Supabase в приложение и использовать JWT-токен, сгенерированный после создания учетной записи.

Конечная точка API должна быть похожа на следующую (Совет: Разверните и посмотрите раздел '200 OK'):

API для входа, которое нужно создать на сервере​

POST /login

Тело запроса​
NameTypeDescription
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.eyJ2ZXIiOjEsImp0aSI6IkFULi1PaG5EdWREUG9qWklsZjMtVDRVWHlTWW5ERElHQ3dYTUdQcXk1c1JUbjAub2FydGh3ZmxpbzhZOVZJbHc0eDYiLCJpc3MiOiJodHRwczovL2Rldi00NTc5MzEub2t0YS5jb20vb2F1dGgyL2F1c2hkNGM5NVF0RkhzZld0NHg2IiwiYXVkIjoiYXBpIiwiaWF0IjoxNjU5MDAyOTQ5LCJleHAiOjE2NTkwMDY1NDksImNpZCI6IjBvYWhkaGprdXRhR2NJSzJNNHg2IiwidWlkIjoiMDB1aGVuaDFwVkRNZzJ1ZXg0eDYiLCJzY3AiOlsib2ZmbGluZV9hY2Nlc3MiXSwiYXV0aF90aW1lIjoxNjU5MDAyOTQ5LCJzdWIiOiJhcGktdXNlcjRAaXd0Lm5ldCJ9.g2TyTQECo-HCSjn58Fmazki8DBCtCq2hkG6OGQOJgr0JUq3uHgj8ulojoBI5ckv3e3TcVGFg1x9KknSwgiZo0LxRpbAdbF27hfF8truExjEv7hGKoV_oAOaiD56be5K-HjYkp6j-b5S6gXe4N10T1NtovLI7L6MZvmqCL_26qzXni5hNkCjgRm8Rd6GnJwbjDLpV3snp51bVNYNqhoAhOPBqjmOErFQvO2Wmfkj8DuVXzsvRqm_xfb8-7Oosx5oGVMVR3liXW5NZsRWes4TXXwsEou3qCyVy5fAhzm7rKjIk1zWv9vm0IOWMFwHHYTgEc_LTYWMovWtkuBx4ia546Q",
    "refresh_token": "dlIOQHHAmweyOrVkDlpNYpi1XM-DwX5Cgx70LoKIbTI"
}
warning

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

к сведению

Если вы хотите протестировать аутентификацию с JWT-токеном без создания конечной точки API прямо сейчас, вы можете сгенерировать JWT-токен локально для тестирования.

2. Добавление страницы входа​

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

login-page.avif

3. Добавление действия входа​

Процесс входа включает два шага. Сначала вы вызываете API на вашем сервере. При успешном завершении вызова вы используете возвращенный JWT-токен в действии JWT Token.

Вот пошаговые инструкции:

  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. Теперь вы должны предоставить сам JWT-токен. Чтобы установить токен из ответа API:

    1. Нажмите на UNSET и выберите Action Outputs -> Action Output Variable Name (который вы указали в разделе вызова API.)
    2. Установите API Response Options в JSON Body и Available Options в JSON Path.
    3. Введите JSON Path для поиска токена в ответе API, например $.token,, и нажмите Confirm.

  8. (Необязательно) добавьте действие snackbar, чтобы отобразить сообщение об успехе.

  9. (Необязательно) В разделе False добавьте действие snackbar, чтобы отобразить сообщение об ошибке.

4. Добавление действия выхода​

Чтобы пользователи могли выйти из приложения, используйте действие Logout.

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

Чтобы подтвердить успешную интеграцию и создание пользователей, перейдите в Firebase project > Authentication > Users и проверьте записи пользователей. Совет: Обратите внимание, что 'userid' (изначально созданный вашим сервером) добавлен в столбец User UID.

Создание JWT-токена локально​

Иногда может потребоваться собрать и протестировать аутентификацию с JWT до того, как API входа или создания учетной записи будет готово. Это можно сделать, создав JWT-токен локально и передав его в действие входа.

warning

Используйте этот метод только для целей тестирования. Идеально, если это будет выполняться на стороне сервера.

Ниже приведены шаги по созданию JWT-токена локально с помощью 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. Это установит Firebase Admin SDK в папку.

  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'; // This user id will be stored in Firebase.

admin.auth().createCustomToken(uid)
  .then((customToken) => {
    console.log(customToken);
  })
  .catch((error) => {
    console.log('Error creating custom token:', error);
  });

  1. Чтобы запустить файл index.js в терминале (в той же папке, где он находится), выполните команду: node index.js. Это выведет JWT-токен в консоль.

  2. Скопируйте этот JWT-токен, вернитесь в FlutterFlow и сохраните его в переменной состояния приложения (тип данных String).

  3. Откройте действие JWT-токена, нажмите на UNSET (или переменную, если она уже установлена), и выберите App State -> variableName (которая содержит JWT-токен).

Доступ к Firebase Database​

После входа с помощью JWT-токена становится доступен объект Authenticated User. Этот объект содержит поля (т.е. данные вошедшего пользователя), в частности User Reference (users ref), которые могут потребоваться при добавлении или получении документов Firestore.

Вот пример того, как использовать объект Authenticated User для фильтрации задач по пользователю, который их создал.

access-firebase-database.avif

Отправка push-уведомлений​

После входа с помощью JWT-токена становится доступен объект Authenticated User. Этот объект содержит поля (т.е. данные вошедшего пользователя), в частности User Reference (users ref), которые могут потребоваться при добавлении или получении документов Firestore.

Когда такая ссылка на пользователя хранится в документах Firestore, вы можете использовать ее в Single или Multiple Recipient при определении Audience в действии Trigger Push Notification, как показано на изображении ниже:

send-push-notification-to-users-created-via-JWT-token.png

Чтобы узнать больше о том, как использовать ссылки на пользователей для отправки push-уведомлений, ознакомьтесь с разделом push-уведомлений.