Teraz, jak już wspomniałem, Firebase ma wbudowane uwierzytelnianie, po
prostu musimy tam przejść do obszaru uwierzytelniania, a następnie kliknąć metodę konfiguracji logowania i tam wybrać
hasło oraz hasło e-mail lub e-mail. Włącz to i kliknij Zapisz, a
dzięki temu mamy włączone.
Teraz możemy wysyłać żądania do Firebase API w celu utworzenia użytkowników lub zalogowania się. Teraz, aby dowiedzieć się, gdzie wysyłać żądania, możesz
przejść do Google
Firebase REST Auth API, a znajdziesz te oficjalne dokumenty, w których dowiesz się, jak
tworzyć i logować użytkowników za pomocą ich interfejsów API.
Teraz jest kilka punktów końcowych dla różnych rzeczy, tutaj w tej aplikacji skupimy się na rejestracji
i logowaniu.
Jeśli klikniemy opcję rejestracji za pomocą adresu e-mail i hasła, dowiemy się, jak to działa.
Musimy wysłać żądanie HTTP, żądanie postu z tym rodzajem treści na ten adres URL, wprowadzić tutaj własny klucz API, który
pokażę, skąd masz go w sekundę i dołączę treść do żądania, więc e- wyślij hasło, a następnie zwróć bezpieczne
pole tokena, które zasadniczo powinno zawsze być prawdziwe. W odpowiedzi odzyskamy token, to jest ten token,
o którym wspomniałem na slajdzie, użyty e-mail, token odświeżania, który jest bardziej zaawansowany,
token tutaj wygaśnie właściwie po tej liczbie
sekund, którą również odzyskamy . Dzięki tokenowi odświeżania możemy go ponownie utworzyć,
ponownie zweryfikować bez konieczności ponownego logowania użytkownika, nie
zrobimy tego tutaj, będziesz mieć osobny punkt końcowy, do którego
wyślesz token odświeżania, aby uzyskać nowy token identyfikacyjny, „ Uprość to tutaj, po
prostu użyj tego tokena i zaloguj się ponownie po upływie tego czasu, ponieważ ten czas wygaśnięcia jest również
czymś, co otrzymujemy, abyśmy wiedzieli,
kiedy ten token straci ważność i nie będzie można go już użyć, ponieważ
będziemy do tego czasu musimy go wyczyścić w naszej aplikacji, abyśmy nie próbowali dołączać tego nieprawidłowego tokena
do przyszłych żądań do naszej bazy danych i localId, to identyfikator użytkownika, który Firebase utworzył na swoich serwerach, ponieważ
nie musimy tego robić jakiekolwiek zarządzanie użytkownikami, Firebase to zrobi, nie musimy pisać kodu po
stronie serwera.
Musimy więc wysłać żądanie HTTP, a ponieważ będę również zarządzał
tym wszystkim za pomocą Redux, utworzę dla tego nowego twórcę akcji i nadam mu
nazwę auth.
Stworzę również reduktor, ponieważ będziemy tam również zarządzać niektórymi elementami związanymi z uwierzytelnianiem, na przykład
tokenem i identyfikatorem użytkownika.
Zacznijmy jednak od akcji i stąd
wyeksportujmy tutaj twórcę akcji, który można nazwać rejestracją, warto zacząć od
tego, ponieważ zalogowanie użytkowników będzie możliwe dopiero po utworzeniu co najmniej
jednego użytkownika. Więc tutaj, podczas
rejestracji, chcę móc utworzyć nowego użytkownika, a do tego
potrzebujemy adresu e-mail i hasła, które należy przekazać twórcy akcji rejestracji z zewnątrz.
Teraz wyśle to żądanie HTTP i aby móc to zrobić, ponownie użyjemy pakietu Redux
Thunk i dlatego zwrócimy tutaj asynchroniczną wysyłkę, więc zwracamy
funkcję, która może użyć asynchronicznej odpowiedzi oczekującej, która otrzyma tę wysyłkę funkcjonuje jako argument przekazany
przez oprogramowanie pośredniczące Redux Thunk, którego zaczęliśmy używać w ostatnim module HTTP tego kursu,
co pozwala nam uruchomić kod asynchroniczny przed wysłaniem akcji, która faktycznie dociera do naszego sklepu.
Teraz potrzebujemy również identyfikatora akcji dla tej akcji, którą później chcemy obsłużyć w
naszym sklepie i tam po prostu użyję rejestracji, która również rejestruje się jako identyfikator łańcucha.
Tak więc tutaj, w końcu, wyślemy ten obiekt akcji, w którym typ jest zarejestrowany i gdzie
prawdopodobnie również dodamy dodatkowe dane, ale zanim to zrobimy, musimy wysłać żądanie HTTP.
Teraz można to zrobić za pomocą interfejsu API pobierania, o którym dowiedziałeś się w ostatnim module, i zdecydowanie
najpierw przejrzyj ten
moduł, a to jest adres URL, do którego musimy wysłać żądanie, abyśmy mogli go skopiować. Dodaj go tutaj, a teraz mamy
kluczową funkcję API.
To jest coś, co możemy uzyskać z Firebase, klikając tutaj ikonę
koła zębatego, ustawienia projektu. Tam znajdziesz
klucz API sieci Web i dokładnie tego
potrzebujesz, skopiuj go i zastąp klucz API, w tym nawiasy kwadratowe, tym kluczem.
To jest adres URL, do którego będziemy musieli wysłać zapytanie. Teraz, jak mówią nam oficjalne dokumenty, musimy
wysłać
żądanie postu, więc jak się dowiedziałeś, musimy dodać tutaj
drugi argument, aby pobrać, który jest obiektem, który pozwala nam skonfigurować to żądanie i
tam możemy ustawić metodę aby opublikować, a także dodać nagłówki, ponieważ będziemy musieli dodać nagłówek JSON
aplikacji, więc nagłówek typu zawartości, który powinien mieć wartość JSON aplikacji, i musimy dodać treść, która musi być w
formacie JSON które możemy uzyskać za pomocą JSON. stringify, a dane, które chcę skreślić, muszą być
obiektem z tymi trzema kluczami - e-mailem, hasłem i bezpiecznym tokenem zwrotnym. Więc tutaj oczywiście e-mail odnosi się do e-maila, który otrzymujemy
jako argument, to samo dla hasła, które odnosi się do argumentu hasła, który otrzymujemy, a następnie jest
to trzeci i po prostu skopiuję go, aby go nie pomylić, zwróć tutaj argument bezpiecznego tokena
lub parę klucz-wartość, gdzie wartość powinna być prawdziwa. To żądanie powinno utworzyć
nowego użytkownika.
Teraz możemy poczekać na odpowiedź za pomocą słowa kluczowego „czekaj”, a następnie, jak się dowiedziałeś wcześniej,
możemy sprawdzić, czy odpowiedź nie jest w porządku, jeśli tak jest, chcę zgłosić nowy błąd, w którym mówię, że
coś poszło nie tak, a my przyjrzyjmy się bardziej szczegółowej obsłudze błędów później, na razie to wszystko i jeśli jest
to w porządku, chcę uzyskać moje dane odpowiedzi, czekając na odpowiedź JSON, która rozpakuje treść odpowiedzi i automatycznie
przekształci ją z formatu JSON w JavaScript, więc do obiektu JavaScript lub tablicy, a teraz będziemy mogli
z tym pracować i na razie po prostu zarejestruję tutaj dane odpowiedzi.
Teraz nie dodaliśmy reszty naszego sklepu Redux związanego z uwierzytelnianiem, zrobimy to później, ale mamy coś,
co powinno działać, powinniśmy móc to wysłać, a zatem wysłać taką prośbę o rejestrację.
Teraz możemy wrócić do ekranu uwierzytelniania i tam na końcu, kiedy klikniemy ten przycisk logowania, który jest nieprawidłowo oznaczony
login w momencie, w którym faktycznie się rejestrujemy, ale zostawmy to na chwilę,
więc
kiedy klikniemy to przycisk Chcę wysłać prośbę o rejestrację. W tym celu musimy, jak poprzednio, zaimportować
użycie wysyłki z React Redux, abyśmy mogli wysłać akcje
i oczywiście zaimportować wszystko jako akcje autoryzacji z danych folderu sklepu, z folderu akcji i tam z
pliku auth oraz za pomocą po
dodaniu możemy tutaj dodać funkcję, funkcję
wbudowaną lub podobną, nazwaną funkcję przechowywaną w stałej,
którą nazwiję moduł obsługi
rejestracji, tam
nie oczekuję żadnych argumentów i tam chcę wysłać,
więc potrzebujemy aby uzyskać dostęp do tej funkcji wysyłki, wykonując
use dispatch, a następnie
tutaj możemy wysłać to zdarzenie rejestracji lub akcji logowania.
Teraz problem polega na tym, że wymaga to adresu e-mail i hasła,
a teraz nie przechowuję tego.
Dostaję to w swoich danych wejściowych, ale tutaj po zmianie danych wejściowych nie przechowuję tych danych, co oczywiście powinienem.
Teraz możemy rzucić okiem na naszą drugą formę tutaj, aby zobaczyć, jak to zrobiliśmy.
Na ekranie edycji produktu mamy oczywiście nasz reduktor formularzy, który zarządza całą naszą poprawnością związaną z formularzem
i wartościami.
Na koniec możemy to skopiować i dodać do ekranu autoryzacji poza takim komponentem autoryzacji i
wrócić do ekranu edycji produktu, aby następnie pobrać tam część, w której inicjujemy to za
pomocą reduktora,
więc skopiuj wszystko to i dodajmy to
również do ekranu autoryzacji, teraz wewnątrz komponentu, być może tutaj i żeby działało, musimy również zaimportować reduktor użycia z Reacta i
po tym zaimportowanym,
teraz musimy go trochę ulepszyć kawałek. Ten reduktor formularzy jest w porządku, a przy okazji
możesz zlecić to w oddzielnym pliku, ponieważ używamy tego samego typu reduktora zarówno na ekranie uwierzytelniania,
jak i na ekranie edycji produktu, możesz
nawet utworzyć niestandardowy haczyk, jeśli wiesz, jak to zrobić działa,
na razie zostawię to tak.
Jedną rzeczą, której potrzebuję, to aktualizacja danych
wejściowych formularza, pozwól mi pobrać to z ekranu edycji produktu,
ta stała tutaj,
przenieśmy to również na ekranie autoryzacji.
Więc
teraz wszystko jest w porządku, ale tam, gdzie nazywam reduktorem użycia i inicjuję to wszystko,
to oczywiście wygląda inaczej.
Powinniśmy mieć wiadomość e-mail, która początkowo jest pusta, i hasło, które początkowo jest puste i dla
ważności, to jest to
samo, po prostu mamy wiadomość e-mail, która początkowo jest niepoprawna i mamy hasło, które
początkowo jest nieprawidłowe, a zatem ogólna forma również początkowo nie jest ważny.
Teraz stan formularza wysyłki powinien być uruchamiany za każdym razem, gdy zmieniają się tutaj nasze
dane wejściowe, więc tutaj przy zmianie danych wejściowych, oczywiście, wiesz i możesz to zobaczyć na ekranie edycji
produktu, otrzymujemy trzy wartości - otrzymujemy identyfikator wejściowy, wartość wejściową i ważność wejścia.
Więc w końcu możemy po prostu skopiować to tutaj z ekranu edycji produktu i przenieść na ekran
autoryzacji i zastąpić tę anonimową funkcją lub zapisać ją w nowej zmiennej tutaj, moduł obsługi
zmian danych wejściowych, który teraz posiada tę funkcję. Teraz, podobnie jak na ekranie edycji produktu, powinieneś pobrać to
za pomocą wywołania zwrotnego, aby upewnić się, że nie zostanie ono ponownie przesłane, gdy nie powinno.
Tak więc powinniśmy pobrać go tutaj, w tym wywołanie zwrotne użycia i zależności
wywołania zwrotnego użycia, więc to właśnie powinno być tam użyte w module obsługi zmiany danych wejściowych.
Teraz ten moduł obsługi zmian danych wejściowych można powiązać lub ustawić tutaj na rekwizyty zmian danych wejściowych, aby
te rekwizyty były ukierunkowane na tę
funkcję, a teraz wraz z tym przechowujemy nasze wartości formularza lub nasze wartości wejściowe w naszym stanie
formularza, którym zajmowaliśmy się użyj reduktora i tak dalej.
Więc teraz jest to ten stan formularza, który mnie tu interesuje w module obsługi rejestracji, ponieważ aby się
zarejestrować, muszę przejść od wartości wejściowych stanu. wartości wejściowe adresu e-mail i stanu formularza. hasło, więc te dwie wartości,
które zostały zebrane, a teraz tutaj procedura obsługi rejestracji, ta funkcja może być powiązana z tym przyciskiem
na dole, z przyciskiem logowania tutaj w onPress, ponieważ jest to funkcja, którą
chcę wskazać, aby ją wykonać, gdy wciśnij ten przycisk.
Zobaczmy, czy to działa tak, jak powinno. Jeśli zacznę tu wpisywać wartości, dostaję
błędy sprawdzania poprawności, ale jakoś się nie pokazują, tak jest,
ponieważ nie jest to komunikat o błędzie, ale tekst błędu na wejściach na ekranie autoryzacji.
Więc jeśli zmienimy ten komunikat o błędzie na tekst błędu, teraz jeśli to
przetestujemy, więc jeśli kliknę tutaj, stuknijcie stamtąd, otrzymam moje ostrzeżenia.
Teraz, jeśli podam prawidłowy adres e-mail,
to go nie ma, jeśli wprowadzę wystarczająco długie hasło, już go nie ma, jeśli teraz kliknę tutaj login, zobaczmy, czy to działa.
Przejdźmy do Firebase, do uwierzytelnienia i tam powinieneś zobaczyć nowego użytkownika, to właśnie
ten użytkownik właśnie został utworzony.
Tak więc rejestracja działa, teraz upewnijmy
się, że możemy również przejść do trybu logowania i sprawić, aby również działał.
Nawiasem mówiąc, należy również pamiętać, że tutaj są dane, które otrzymaliśmy,
więc jest
to odpowiedź, ten obiekt z e-mailem,
jak długo token jest ważny w
sekundach, następnie sam token, który jest tym długim, zaszyfrowanym łańcuchem, a także identyfikator użytkownika, który został
utworzony i ten token odświeżania.