Част втора: Добавяне на Firebase заедно с по-добра проверка на грешки
В част първа създадохме просто приложение със следните компоненти:
- Основна входна точка на приложението по подразбиране
- Използване на FutureBuilder Widget за изчакване на данни преди изобразяване на потребителския интерфейс, концепция, използвана в цялото приложение
- Страница за вход
- Начална страница
- Услуга за удостоверяване
- Демонстрирайте използването на доставчика, както е обсъдено тук в документацията на Flutter (Опростено управление на състоянието на приложението)
- Вижте част първа: Прост процес на влизане във 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