Аутентификация пользователя Firebase во Flutter

В нашем последнем руководстве мы использовали Firebase для хранения и отслеживания задач, которые нам нужно было выполнить. Но этот подход не был адаптирован к конкретному пользователю, т.е. у всех был один и тот же список задач. Один из способов персонализировать эти задачи для разных пользователей - включить аутентификацию пользователей. Именно этим мы и займемся в этой публикации.

Примечание: приложение, созданное в этом посте, является продолжением поста ниже. Вы можете найти шаги по настройке Firebase Cloud Firestore, а также Firebase для Flutter здесь.

В этом посте мы:

1. Разрешить аутентификацию пользователей из Firebase
2. Создавайте страницы регистрации, входа в систему и заставки
3. Создайте объект пользователя в процессе регистрации
4. Обработка набора задач для каждого пользователя

Шаг 1. Включите аутентификацию Firebase

Перейдите к опции Authentication в разделе Develop на панели инструментов проекта Firebase.

Как видите, все методы аутентификации по умолчанию отключены. На данный момент включите электронную почту / пароль, чтобы мы могли начать использовать его для регистрации учетной записи. Поскольку мы включаем только этого провайдера, мы можем зарегистрироваться и войти в систему, используя только адрес электронной почты и пароль.

В разделе «Шаблоны» мы находим шаблоны для обычных писем. При желании вы можете изменить некоторые детали, такие как название проекта и имя отправителя.

Шаг 2. Интегрируйте аутентификацию Firebase

Если вы продолжаете с последнего сообщения, вам нужно будет только установить плагин FlutterFire. Если нет, ознакомьтесь с опубликованным выше сообщением в блоге, чтобы интегрировать Firebase в приложение.

FlutterFire - это набор плагинов для каждой службы Firebase. FlutterFire может использоваться обеими платформами, так как это зависит от многоплатформенного Flutter SDK.

Здесь вы найдете различные плагины для каждой службы:

Для аутентификации мне нужно установить firebase_auth, официальный плагин FlutterFire.

Обновите файл pubspec.yaml, включив в него зависимость плагина, указанную ниже, внутри зависимостей:

dependencies:
  flutter_test:
    sdk: flutter
  firebase_auth: ^0.11.0 # add this line

Еще раз запустите flutter packages get, чтобы установить необходимые пакеты.

Чтобы использовать этот пакет, нам нужно импортировать его, как показано ниже:

import 'package:firebase_auth/firebase_auth.dart';

Шаг 3. Измените последовательность навигации

Чтобы включить аутентификацию пользователя, нам нужно изменить поток, который пользователь использует в приложении. Один из наиболее распространенных методов - проверить статус аутентификации пользователя на странице-заставке. Затем, в зависимости от статуса, мы направляем пользователя в поток аутентификации (Login) или в основной поток приложения (Home).

Чтобы реализовать описанный выше процесс, нам нужно обновить файл main.dart, включив в него следующий код:

class MyApp extends StatelessWidget {
// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: SplashPage(),
      routes: <String, WidgetBuilder>{
        '/task': (BuildContext context) => TaskPage(title: 'Task'),
        '/home': (BuildContext context) => HomePage(title: 'Home'),
        '/login': (BuildContext context) => LoginPage(),
        '/register': (BuildContext context) => RegisterPage(),
      });
  }
}

В приведенном выше коде названные маршруты соответствуют определенной странице. Нам нужно будет сделать следующие виджеты;

1. SplashPage
2. Страница авторизации
3. RegisterPage

Примечание. Виджет SecondPage из предыдущего сообщения переименован в виджет TaskPage. Виджет MyHomePage из предыдущего сообщения переименован в виджет HomePage.

SplashPage

На странице выше мы:

1. Сделайте запрос к экземпляру FirebaseAuth, чтобы узнать, вошел ли пользователь в систему.
2. Метод currentUser возвращает информацию о вошедшем в систему пользователе, например его уникальный идентификатор (uid).
3. Если объект currentUser не найден, пользователь перенаправляется на страницу входа.
4. Мы используем метод Navigator pushReplacement, чтобы сделать страницу входа или домашнюю страницу - первой в стеке. Это сделано для того, чтобы пользователь не возвращался на страницу-заставку.
5. Если пользователь уже вошел в систему, мы получаем объект пользователя из службы Cloud Firestore. Он содержит все данные и задачи, относящиеся к этому конкретному пользователю. (Подробнее об этом на странице регистрации.)
6. Мы используем имя пользователя в заголовке главной страницы, чтобы персонализировать взаимодействие с пользователем.
7. На данный момент пользовательский интерфейс для страницы-заставки представляет собой простой текстовый виджет с отображением «Загрузка…».

RegisterPage

1. Пользовательский интерфейс для страницы регистрации отображается слева. Он состоит из 5 текстовых полей для ввода имени и фамилии пользователя, электронной почты, пароля и подтвержденного пароля. Он также включает один виджет RaisedButton для регистрации пользователя. FlatButton Виджет включен для перенаправления пользователя на страницу входа в систему, если у него уже есть учетная запись.
2. Каждый виджет TextFormField имеет собственный контроллер для обработки и чтения введенных в него данных.
3. У каждого TextFormField виджета есть собственный валидатор.
4. Оба имени проверяются на предмет наличия в них более двух букв.
5. Электронная почта проверяется шаблоном регулярного выражения электронной почты.
6. Поля пароля проверяются, если их длина превышает 7 символов. Поля также имеют тег obscureText, который стал истинным, чтобы скрыть значения пароля.
7. Форма имеет уникальный GlobalKey. Это необходимо для проверки текущего состояния формы во время регистрации, чтобы убедиться, что все поля проходят проверку. Если какое-либо поле не проходит проверку, под текстовым полем отображается сообщение об ошибке.
8. При нажатии кнопки «Зарегистрироваться» поля формы сначала проверяются, прошли ли они свои проверки. Следующим шагом будет проверка совпадения обоих полей пароля. В противном случае пользователю отображается предупреждение об ошибке.
9. Если они совпадают, метод createUserWithEmailAndPassword экземпляра FirebaseAuth используется для регистрации нового пользователя.
10. Если пользователь успешно зарегистрирован, создается новый документ, содержащий его имя и фамилию, адрес электронной почты и uid (то же, что упоминалось выше на странице-заставке). Чтобы упростить получение этого нового объекта из Cloud Firestore, идентификатором документа является uid пользователя.
11. Если оба действия Firebase выполнены успешно, пользователь перенаправляется на домашнюю страницу. Главная страница включает в себя имя пользователя в заголовке.
12. Метод навигатора pushAndRemoveUntil используется для того, чтобы домашняя страница стала первой страницей в стеке.

Страница авторизации

1. Пользовательский интерфейс этой страницы очень похож на страницу регистрации. Незначительное отличие состоит в том, что фиксируются только адрес электронной почты и пароль пользователя. Оба поля TextFormFields имеют свои собственные контроллеры и методы проверки, например страницу регистрации. Однако виджет RaisedButton используется для входа пользователя в систему. Включенный виджетFlatButton перенаправляет пользователя на страницу регистрации, если у него нет учетной записи. У формы есть собственный GlobalKey, чтобы отслеживать состояние формы.
2. При нажатии кнопки «Войти» форма сначала проверяется. Если проверка прошла успешно, для входа пользователя в систему используется метод signInWithEmailAndPassword экземпляра FirebaseAuth.
3. Если пользователь успешно входит в систему, документ пользователя выбирается из коллекции users в Cloud Firestore.
4. Если оба действия Firebase выполнены успешно, пользователь перенаправляется на главную страницу с именем пользователя, включенным в заголовок.
5. Метод навигатора pushReplacement используется для того, чтобы домашняя страница стала первой страницей в стеке.

Шаг 4 - Обновление домашней страницы

Мы изменили расположение коллекции задач. Теперь это коллекция в пользовательском документе из одной коллекции. Теперь нам нужно обновить код главной страницы, чтобы обработать это изменение. Нам также необходимо обновить состояние домашней страницы, чтобы принять переданный ей uid.

Домашняя страница обновлена ​​до кода, приведенного ниже:

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title, this.uid}) : super(key: key); 
  //update the constructor to include the uid
  final String title;
  final String uid; //include this
  @override
  _HomePageState createState() => _HomePageState();
}

Необходимо обновить две области, в которых осуществляется доступ к коллекции задач:

Снимки объекта потока:

Firestore.instance.collection("users").document(widget.uid).collection('tasks').snapshots()

И ссылка на коллекцию, в которую мы помещаем созданные новые задачи:

Firestore.instance
  .collection("users")
  .document(widget.uid)
  .collection('tasks')
  .add({
    "title": taskTitleInputController.text,
    "description": taskDescripInputController.text
  })
  .then((result) => {
        Navigator.pop(context),
        taskTitleInputController.clear(),
        taskDescripInputController.clear(),
  })
  .catchError((err) => print(err));
}

Значение widget.uid - это uid, передаваемый на главную страницу, когда пользователь регистрируется или входит в систему.

Демо

Теперь взглянем на конечный продукт (пропуская утомительный ввод данных 🤭):

Мы можем найти нового пользователя, зарегистрированного через приложение, на странице аутентификации панели управления:

Мы также найдем новый документ в коллекции Cloud Firestore users:

Как вы можете видеть выше, новый пользовательский uid используется в качестве идентификатора документа этого конкретного пользователя в коллекции «users».

Итак, чтобы резюмировать

Мы могли:

1. Разрешить аутентификацию пользователя из консоли Firebase
2. Интегрируйте аутентификацию Firebase в приложение
3. Измените поток навигации приложения, чтобы включить процесс аутентификации
4. Создайте новые страницы Splash, Login и Register
5. Зарегистрируйте нового пользователя и создайте собственный документ в коллекции пользователя Cloud Firestore.
6. Извлекать задачи из этого конкретного пользовательского объекта и добавлять новые задачи

Репо кода:

Найдите коммит для этого сообщения:

Примечание редактора. Heartbeat - это онлайн-публикация и сообщество, созданное авторами и посвященное предоставлению первоклассных образовательных ресурсов для специалистов по науке о данных, машинному обучению и глубокому обучению. Мы стремимся поддерживать и вдохновлять разработчиков и инженеров из всех слоев общества.

Независимо от редакции, Heartbeat спонсируется и публикуется Comet, платформой MLOps, которая позволяет специалистам по данным и группам машинного обучения отслеживать, сравнивать, объяснять и оптимизировать свои эксперименты. Мы платим участникам и не продаем рекламу.

Если вы хотите внести свой вклад, отправляйтесь на наш призыв к участникам. Вы также можете подписаться на наши еженедельные информационные бюллетени (Deep Learning Weekly и Comet Newsletter), присоединиться к нам в » «Slack и подписаться на Comet в Twitter и LinkedIn для получения ресурсов, событий и гораздо больше, что поможет вам быстрее создавать лучшие модели машинного обучения.