Част втора: Добавяне на Firebase заедно с по-добра проверка на грешки

В част първа създадохме просто приложение със следните компоненти:

Сега ще интегрираме firebase в приложението.

Има много примери онлайн за настройка на Firebase за Flutter, така че ще премина направо към кода, вместо да разглеждам основите. Вижте Google CodeLabs Flutter за Firebase за инструкции стъпка по стъпка за настройка на вашия проект на iOS или Android.

Създайте тестов потребител във Firebase

Тъй като ние просто изграждаме приложението и в момента няма функционалност за създаване на потребители в приложението, моля, влезте във вашата Firebase Console и добавете потребител към вашия проект. Моля, не забравяйте да активирате удостоверяването на имейл, когато актуализирате проекта във вашата Firebase Console.

Стъпки за добавяне на функционалност на Firebase към проекта

  • Добавете методите на Firebase към AuthService
  • Достъп до свойството getUser от AuthService при стартиране, за да определите коя страница да заредите в main.dart
  • Променете HomePage, за да показва имейл адреса на влезлия FirebaseUser
  • Променете LoginPage, за да извикате метода loginUser на AuthService, за да влезете в потребител чрез Firebase API, за да видите дали можем да влезем в реално FirebaseUser
  • И накрая, обработвайте правилно грешките при влизане и при търсене на текущ потребител при стартиране.

Услуга за удостоверяване: Добавяне на функционалност на Firebase API

Първо услугата за удостоверяване, където просто обгръщаме някои от основните функции на Firebase, които са ни необходими за удостоверяване и определяне дали вече има потребител, поддържан от предишна сесия.

Както можете да видите от кода по-горе, все още имаме същите методи за достъп до нашите AuthService; единствената разлика сега е, че сме заменили обаждането с реални обаждания към задния край на Firebase, който сте настроили.

Забележете, че вече не е необходимо да поддържаме собственост с текущия потребител, тъй като Firebase ще управлява това вместо нас. Всичко, което трябва да направим, е да извикаме метода getUser и ако има потребител, ще получим обект. В противен случай ще върне нула.

Най-важното за отбелязване е, че извикваме notifyListeners(), когато състоянието на влизане се променя по време на влизане или излизане.

Модифициране на main.dart

Не са необходими реални модификации на файла, тъй като работим със същия външен API. Единствената разлика е, че сега връщаме FirebaseUser обект, така че нека добавим конкретен тип към кода и да коригираме още няколко неща.

Добавихме типа обект, FirebaseUser, свързан с AsyncSnapshot, и сега проверяваме за грешка, в случай че има проблем при първоначалното зареждане на Firebase.

Също така добавихме нов параметър към конструктора на HomePage изпълнимия модул, който е FirebaseUser обектът, върнат от getUser извикване, направено към AuthService. В следващия раздел ще видим как се използва новият параметър.

Накрая добавихме нова джаджа, наречена LoadingCircle, за да ни даде приятно потребителско изживяване, когато приложението се стартира и осъществява достъп до Firebase, за да провери за нов потребител. Вижте кода по-долу за приспособлението LoadingCircle.

Вижте документацията на CircularProgressIndicator

Промяна на приспособлението за начална страница в home_page.dart

Трябва първо да модифицираме изпълнимия модул, като добавим нов конструктор, който ще задържи потребителя на Firebase, предаден от FutureBuilder в main.dart

Сега имаме достъп до информацията за текущия потребител от уиджета; имаме достъп до него, когато изобразяваме HomePage, като направим модификациите, които виждате по-долу. Просто ще добавим още няколко джаджи към метода за изграждане:

Промяна на приспособлението LoginPage в login_page.dart

Тъй като API подписът не е променен, трябва да направим много малко за тази функция, за да получим желаните резултати. Все пак би било най-добре да направите по-добра проверка за грешки.

С Future трябва да обвием повикването с блок try catch, тъй като всички грешки, които се случват с Firebase, ще бъдат хвърлени като изключения. След това ще покажем съобщението за грешка в диалогов прозорец. Вижте кода за метода _buildErrorDialog и останалите промени по-долу.

Добавете новия импорт за изключението за грешка:

Направете съответните промени в метода onPressed на бутона за влизане.

Добавете кода за новия частен метод _buildErrorDialog, който ще показва грешки от извикването към метода за влизане AuthService.

Заключение

На този етап трябва да имате работещо приложение с основния поток на влизане, където потребителят ще влезе във Firebase, като използва идентификационните данни за тестовия потребител, който сте добавили в конзолата на Firebase.

Опитайте да въведете невалидни идентификационни данни за паролата и непълни имейл адреси и грешките трябва да се показват по подходящ начин.

Ресурси

Изходният код е достъпен тук: https://github.com/aaronksaunders/simple_firebase_auth