1 00:00:02,170 --> 00:00:05,530 Teraz, jak już wspomniałem, Firebase ma wbudowane uwierzytelnianie, po 2 00:00:05,530 --> 00:00:11,350 prostu musimy tam przejść do obszaru uwierzytelniania, a następnie kliknąć metodę konfiguracji logowania i tam wybrać 3 00:00:11,350 --> 00:00:16,500 hasło oraz hasło e-mail lub e-mail. Włącz to i kliknij Zapisz, a 4 00:00:16,600 --> 00:00:18,550 dzięki temu mamy włączone. 5 00:00:18,550 --> 00:00:25,640 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 6 00:00:25,640 --> 00:00:27,140 przejść do Google 7 00:00:27,140 --> 00:00:32,630 Firebase REST Auth API, a znajdziesz te oficjalne dokumenty, w których dowiesz się, jak 8 00:00:32,630 --> 00:00:36,180 tworzyć i logować użytkowników za pomocą ich interfejsów API. 9 00:00:36,210 --> 00:00:40,820 Teraz jest kilka punktów końcowych dla różnych rzeczy, tutaj w tej aplikacji skupimy się na rejestracji 10 00:00:40,820 --> 00:00:41,440 i logowaniu. 11 00:00:41,540 --> 00:00:45,200 Jeśli klikniemy opcję rejestracji za pomocą adresu e-mail i hasła, dowiemy się, jak to działa. 12 00:00:45,290 --> 00:00:52,250 Musimy wysłać żądanie HTTP, żądanie postu z tym rodzajem treści na ten adres URL, wprowadzić tutaj własny klucz API, który 13 00:00:52,280 --> 00:00:58,890 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 14 00:00:58,910 --> 00:01:05,180 pole tokena, które zasadniczo powinno zawsze być prawdziwe. W odpowiedzi odzyskamy token, to jest ten token, 15 00:01:05,180 --> 00:01:10,820 o którym wspomniałem na slajdzie, użyty e-mail, token odświeżania, który jest bardziej zaawansowany, 16 00:01:10,940 --> 00:01:13,790 token tutaj wygaśnie właściwie po tej liczbie 17 00:01:13,790 --> 00:01:19,430 sekund, którą również odzyskamy . Dzięki tokenowi odświeżania możemy go ponownie utworzyć, 18 00:01:19,430 --> 00:01:22,350 ponownie zweryfikować bez konieczności ponownego logowania użytkownika, nie 19 00:01:22,910 --> 00:01:26,460 zrobimy tego tutaj, będziesz mieć osobny punkt końcowy, do którego 20 00:01:26,570 --> 00:01:31,100 wyślesz token odświeżania, aby uzyskać nowy token identyfikacyjny, „ Uprość to tutaj, po 21 00:01:31,100 --> 00:01:37,310 prostu użyj tego tokena i zaloguj się ponownie po upływie tego czasu, ponieważ ten czas wygaśnięcia jest również 22 00:01:37,310 --> 00:01:39,080 czymś, co otrzymujemy, abyśmy wiedzieli, 23 00:01:39,080 --> 00:01:43,880 kiedy ten token straci ważność i nie będzie można go już użyć, ponieważ 24 00:01:43,880 --> 00:01:49,850 będziemy do tego czasu musimy go wyczyścić w naszej aplikacji, abyśmy nie próbowali dołączać tego nieprawidłowego tokena 25 00:01:49,850 --> 00:01:56,600 do przyszłych żądań do naszej bazy danych i localId, to identyfikator użytkownika, który Firebase utworzył na swoich serwerach, ponieważ 26 00:01:56,600 --> 00:02:02,050 nie musimy tego robić jakiekolwiek zarządzanie użytkownikami, Firebase to zrobi, nie musimy pisać kodu po 27 00:02:02,060 --> 00:02:03,380 stronie serwera. 28 00:02:03,440 --> 00:02:07,610 Musimy więc wysłać żądanie HTTP, a ponieważ będę również zarządzał 29 00:02:07,610 --> 00:02:13,340 tym wszystkim za pomocą Redux, utworzę dla tego nowego twórcę akcji i nadam mu 30 00:02:13,340 --> 00:02:14,500 nazwę auth. 31 00:02:14,510 --> 00:02:20,720 Stworzę również reduktor, ponieważ będziemy tam również zarządzać niektórymi elementami związanymi z uwierzytelnianiem, na przykład 32 00:02:20,720 --> 00:02:22,790 tokenem i identyfikatorem użytkownika. 33 00:02:23,090 --> 00:02:25,980 Zacznijmy jednak od akcji i stąd 34 00:02:26,510 --> 00:02:31,810 wyeksportujmy tutaj twórcę akcji, który można nazwać rejestracją, warto zacząć od 35 00:02:31,940 --> 00:02:37,070 tego, ponieważ zalogowanie użytkowników będzie możliwe dopiero po utworzeniu co najmniej 36 00:02:37,070 --> 00:02:40,130 jednego użytkownika. Więc tutaj, podczas 37 00:02:40,130 --> 00:02:44,590 rejestracji, chcę móc utworzyć nowego użytkownika, a do tego 38 00:02:44,600 --> 00:02:50,420 potrzebujemy adresu e-mail i hasła, które należy przekazać twórcy akcji rejestracji z zewnątrz. 39 00:02:50,690 --> 00:02:56,750 Teraz wyśle to żądanie HTTP i aby móc to zrobić, ponownie użyjemy pakietu Redux 40 00:02:56,750 --> 00:03:01,180 Thunk i dlatego zwrócimy tutaj asynchroniczną wysyłkę, więc zwracamy 41 00:03:01,460 --> 00:03:07,970 funkcję, która może użyć asynchronicznej odpowiedzi oczekującej, która otrzyma tę wysyłkę funkcjonuje jako argument przekazany 42 00:03:08,000 --> 00:03:14,150 przez oprogramowanie pośredniczące Redux Thunk, którego zaczęliśmy używać w ostatnim module HTTP tego kursu, 43 00:03:14,150 --> 00:03:20,480 co pozwala nam uruchomić kod asynchroniczny przed wysłaniem akcji, która faktycznie dociera do naszego sklepu. 44 00:03:20,620 --> 00:03:25,940 Teraz potrzebujemy również identyfikatora akcji dla tej akcji, którą później chcemy obsłużyć w 45 00:03:25,940 --> 00:03:31,590 naszym sklepie i tam po prostu użyję rejestracji, która również rejestruje się jako identyfikator łańcucha. 46 00:03:31,850 --> 00:03:39,290 Tak więc tutaj, w końcu, wyślemy ten obiekt akcji, w którym typ jest zarejestrowany i gdzie 47 00:03:39,290 --> 00:03:45,940 prawdopodobnie również dodamy dodatkowe dane, ale zanim to zrobimy, musimy wysłać żądanie HTTP. 48 00:03:46,020 --> 00:03:51,170 Teraz można to zrobić za pomocą interfejsu API pobierania, o którym dowiedziałeś się w ostatnim module, i zdecydowanie 49 00:03:51,170 --> 00:03:52,360 najpierw przejrzyj ten 50 00:03:52,370 --> 00:04:01,130 moduł, a to jest adres URL, do którego musimy wysłać żądanie, abyśmy mogli go skopiować. Dodaj go tutaj, a teraz mamy 51 00:04:01,130 --> 00:04:03,700 kluczową funkcję API. 52 00:04:04,220 --> 00:04:07,240 To jest coś, co możemy uzyskać z Firebase, klikając tutaj ikonę 53 00:04:07,250 --> 00:04:09,700 koła zębatego, ustawienia projektu. Tam znajdziesz 54 00:04:09,760 --> 00:04:13,450 klucz API sieci Web i dokładnie tego 55 00:04:13,460 --> 00:04:19,680 potrzebujesz, skopiuj go i zastąp klucz API, w tym nawiasy kwadratowe, tym kluczem. 56 00:04:19,700 --> 00:04:25,970 To jest adres URL, do którego będziemy musieli wysłać zapytanie. Teraz, jak mówią nam oficjalne dokumenty, musimy 57 00:04:25,970 --> 00:04:26,870 wysłać 58 00:04:26,990 --> 00:04:30,950 żądanie postu, więc jak się dowiedziałeś, musimy dodać tutaj 59 00:04:30,950 --> 00:04:36,680 drugi argument, aby pobrać, który jest obiektem, który pozwala nam skonfigurować to żądanie i 60 00:04:37,280 --> 00:04:44,180 tam możemy ustawić metodę aby opublikować, a także dodać nagłówki, ponieważ będziemy musieli dodać nagłówek JSON 61 00:04:44,180 --> 00:04:52,130 aplikacji, więc nagłówek typu zawartości, który powinien mieć wartość JSON aplikacji, i musimy dodać treść, która musi być w 62 00:04:52,130 --> 00:04:58,700 formacie JSON które możemy uzyskać za pomocą JSON. stringify, a dane, które chcę skreślić, muszą być 63 00:04:58,700 --> 00:05:07,660 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 64 00:05:07,660 --> 00:05:14,890 jako argument, to samo dla hasła, które odnosi się do argumentu hasła, który otrzymujemy, a następnie jest 65 00:05:14,890 --> 00:05:22,060 to trzeci i po prostu skopiuję go, aby go nie pomylić, zwróć tutaj argument bezpiecznego tokena 66 00:05:22,060 --> 00:05:29,770 lub parę klucz-wartość, gdzie wartość powinna być prawdziwa. To żądanie powinno utworzyć 67 00:05:29,770 --> 00:05:31,770 nowego użytkownika. 68 00:05:31,900 --> 00:05:38,530 Teraz możemy poczekać na odpowiedź za pomocą słowa kluczowego „czekaj”, a następnie, jak się dowiedziałeś wcześniej, 69 00:05:38,620 --> 00:05:46,660 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 70 00:05:46,930 --> 00:05:55,340 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 71 00:05:55,380 --> 00:06:02,970 to w porządku, chcę uzyskać moje dane odpowiedzi, czekając na odpowiedź JSON, która rozpakuje treść odpowiedzi i automatycznie 72 00:06:02,970 --> 00:06:09,780 przekształci ją z formatu JSON w JavaScript, więc do obiektu JavaScript lub tablicy, a teraz będziemy mogli 73 00:06:10,500 --> 00:06:16,200 z tym pracować i na razie po prostu zarejestruję tutaj dane odpowiedzi. 74 00:06:17,910 --> 00:06:23,590 Teraz nie dodaliśmy reszty naszego sklepu Redux związanego z uwierzytelnianiem, zrobimy to później, ale mamy coś, 75 00:06:23,590 --> 00:06:28,840 co powinno działać, powinniśmy móc to wysłać, a zatem wysłać taką prośbę o rejestrację. 76 00:06:28,840 --> 00:06:36,460 Teraz możemy wrócić do ekranu uwierzytelniania i tam na końcu, kiedy klikniemy ten przycisk logowania, który jest nieprawidłowo oznaczony 77 00:06:36,460 --> 00:06:41,770 login w momencie, w którym faktycznie się rejestrujemy, ale zostawmy to na chwilę, 78 00:06:41,770 --> 00:06:42,420 więc 79 00:06:42,460 --> 00:06:50,330 kiedy klikniemy to przycisk Chcę wysłać prośbę o rejestrację. W tym celu musimy, jak poprzednio, zaimportować 80 00:06:50,390 --> 00:06:55,810 użycie wysyłki z React Redux, abyśmy mogli wysłać akcje 81 00:06:56,150 --> 00:07:05,810 i oczywiście zaimportować wszystko jako akcje autoryzacji z danych folderu sklepu, z folderu akcji i tam z 82 00:07:05,810 --> 00:07:09,590 pliku auth oraz za pomocą po 83 00:07:09,840 --> 00:07:13,170 dodaniu możemy tutaj dodać funkcję, funkcję 84 00:07:13,190 --> 00:07:17,880 wbudowaną lub podobną, nazwaną funkcję przechowywaną w stałej, 85 00:07:18,410 --> 00:07:20,850 którą nazwiję moduł obsługi 86 00:07:20,990 --> 00:07:23,240 rejestracji, tam 87 00:07:23,250 --> 00:07:27,780 nie oczekuję żadnych argumentów i tam chcę wysłać, 88 00:07:27,780 --> 00:07:33,590 więc potrzebujemy aby uzyskać dostęp do tej funkcji wysyłki, wykonując 89 00:07:33,650 --> 00:07:36,090 use dispatch, a następnie 90 00:07:36,210 --> 00:07:41,410 tutaj możemy wysłać to zdarzenie rejestracji lub akcji logowania. 91 00:07:41,430 --> 00:07:44,430 Teraz problem polega na tym, że wymaga to adresu e-mail i hasła, 92 00:07:44,430 --> 00:07:46,020 a teraz nie przechowuję tego. 93 00:07:46,020 --> 00:07:51,500 Dostaję to w swoich danych wejściowych, ale tutaj po zmianie danych wejściowych nie przechowuję tych danych, co oczywiście powinienem. 94 00:07:51,570 --> 00:07:56,320 Teraz możemy rzucić okiem na naszą drugą formę tutaj, aby zobaczyć, jak to zrobiliśmy. 95 00:07:56,370 --> 00:08:06,760 Na ekranie edycji produktu mamy oczywiście nasz reduktor formularzy, który zarządza całą naszą poprawnością związaną z formularzem 96 00:08:06,910 --> 00:08:08,670 i wartościami. 97 00:08:08,800 --> 00:08:15,790 Na koniec możemy to skopiować i dodać do ekranu autoryzacji poza takim komponentem autoryzacji i 98 00:08:16,990 --> 00:08:24,140 wrócić do ekranu edycji produktu, aby następnie pobrać tam część, w której inicjujemy to za 99 00:08:24,140 --> 00:08:25,400 pomocą reduktora, 100 00:08:25,430 --> 00:08:28,970 więc skopiuj wszystko to i dodajmy to 101 00:08:28,970 --> 00:08:38,730 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 102 00:08:38,730 --> 00:08:40,350 po tym zaimportowanym, 103 00:08:40,480 --> 00:08:46,140 teraz musimy go trochę ulepszyć kawałek. Ten reduktor formularzy jest w porządku, a przy okazji 104 00:08:46,150 --> 00:08:51,160 możesz zlecić to w oddzielnym pliku, ponieważ używamy tego samego typu reduktora zarówno na ekranie uwierzytelniania, 105 00:08:51,400 --> 00:08:53,860 jak i na ekranie edycji produktu, możesz 106 00:08:53,860 --> 00:08:57,160 nawet utworzyć niestandardowy haczyk, jeśli wiesz, jak to zrobić działa, 107 00:08:57,160 --> 00:08:59,180 na razie zostawię to tak. 108 00:08:59,230 --> 00:09:01,560 Jedną rzeczą, której potrzebuję, to aktualizacja danych 109 00:09:01,570 --> 00:09:04,620 wejściowych formularza, pozwól mi pobrać to z ekranu edycji produktu, 110 00:09:04,630 --> 00:09:05,810 ta stała tutaj, 111 00:09:05,830 --> 00:09:08,020 przenieśmy to również na ekranie autoryzacji. 112 00:09:08,980 --> 00:09:09,670 Więc 113 00:09:09,670 --> 00:09:15,190 teraz wszystko jest w porządku, ale tam, gdzie nazywam reduktorem użycia i inicjuję to wszystko, 114 00:09:15,190 --> 00:09:16,470 to oczywiście wygląda inaczej. 115 00:09:16,630 --> 00:09:22,120 Powinniśmy mieć wiadomość e-mail, która początkowo jest pusta, i hasło, które początkowo jest puste i dla 116 00:09:22,120 --> 00:09:23,720 ważności, to jest to 117 00:09:23,800 --> 00:09:28,690 samo, po prostu mamy wiadomość e-mail, która początkowo jest niepoprawna i mamy hasło, które 118 00:09:28,690 --> 00:09:33,310 początkowo jest nieprawidłowe, a zatem ogólna forma również początkowo nie jest ważny. 119 00:09:34,570 --> 00:09:40,240 Teraz stan formularza wysyłki powinien być uruchamiany za każdym razem, gdy zmieniają się tutaj nasze 120 00:09:43,290 --> 00:09:49,830 dane wejściowe, więc tutaj przy zmianie danych wejściowych, oczywiście, wiesz i możesz to zobaczyć na ekranie edycji 121 00:09:49,830 --> 00:09:55,230 produktu, otrzymujemy trzy wartości - otrzymujemy identyfikator wejściowy, wartość wejściową i ważność wejścia. 122 00:09:56,100 --> 00:10:03,630 Więc w końcu możemy po prostu skopiować to tutaj z ekranu edycji produktu i przenieść na ekran 123 00:10:03,630 --> 00:10:10,630 autoryzacji i zastąpić tę anonimową funkcją lub zapisać ją w nowej zmiennej tutaj, moduł obsługi 124 00:10:10,770 --> 00:10:18,620 zmian danych wejściowych, który teraz posiada tę funkcję. Teraz, podobnie jak na ekranie edycji produktu, powinieneś pobrać to 125 00:10:18,620 --> 00:10:24,620 za pomocą wywołania zwrotnego, aby upewnić się, że nie zostanie ono ponownie przesłane, gdy nie powinno. 126 00:10:24,620 --> 00:10:31,190 Tak więc powinniśmy pobrać go tutaj, w tym wywołanie zwrotne użycia i zależności 127 00:10:31,250 --> 00:10:38,360 wywołania zwrotnego użycia, więc to właśnie powinno być tam użyte w module obsługi zmiany danych wejściowych. 128 00:10:38,460 --> 00:10:45,690 Teraz ten moduł obsługi zmian danych wejściowych można powiązać lub ustawić tutaj na rekwizyty zmian danych wejściowych, aby 129 00:10:45,720 --> 00:10:48,340 te rekwizyty były ukierunkowane na tę 130 00:10:48,840 --> 00:10:55,740 funkcję, a teraz wraz z tym przechowujemy nasze wartości formularza lub nasze wartości wejściowe w naszym stanie 131 00:10:55,740 --> 00:10:59,370 formularza, którym zajmowaliśmy się użyj reduktora i tak dalej. 132 00:10:59,380 --> 00:11:04,630 Więc teraz jest to ten stan formularza, który mnie tu interesuje w module obsługi rejestracji, ponieważ aby się 133 00:11:04,630 --> 00:11:11,830 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, 134 00:11:11,840 --> 00:11:18,850 które zostały zebrane, a teraz tutaj procedura obsługi rejestracji, ta funkcja może być powiązana z tym przyciskiem 135 00:11:18,850 --> 00:11:24,320 na dole, z przyciskiem logowania tutaj w onPress, ponieważ jest to funkcja, którą 136 00:11:24,560 --> 00:11:28,160 chcę wskazać, aby ją wykonać, gdy wciśnij ten przycisk. 137 00:11:28,410 --> 00:11:34,810 Zobaczmy, czy to działa tak, jak powinno. Jeśli zacznę tu wpisywać wartości, dostaję 138 00:11:38,160 --> 00:11:42,750 błędy sprawdzania poprawności, ale jakoś się nie pokazują, tak jest, 139 00:11:44,040 --> 00:11:50,950 ponieważ nie jest to komunikat o błędzie, ale tekst błędu na wejściach na ekranie autoryzacji. 140 00:11:51,060 --> 00:11:54,920 Więc jeśli zmienimy ten komunikat o błędzie na tekst błędu, teraz jeśli to 141 00:11:55,020 --> 00:11:58,460 przetestujemy, więc jeśli kliknę tutaj, stuknijcie stamtąd, otrzymam moje ostrzeżenia. 142 00:11:58,500 --> 00:12:00,960 Teraz, jeśli podam prawidłowy adres e-mail, 143 00:12:00,960 --> 00:12:08,740 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. 144 00:12:08,740 --> 00:12:14,880 Przejdźmy do Firebase, do uwierzytelnienia i tam powinieneś zobaczyć nowego użytkownika, to właśnie 145 00:12:14,950 --> 00:12:17,360 ten użytkownik właśnie został utworzony. 146 00:12:17,530 --> 00:12:19,810 Tak więc rejestracja działa, teraz upewnijmy 147 00:12:19,810 --> 00:12:24,060 się, że możemy również przejść do trybu logowania i sprawić, aby również działał. 148 00:12:25,100 --> 00:12:28,970 Nawiasem mówiąc, należy również pamiętać, że tutaj są dane, które otrzymaliśmy, 149 00:12:29,030 --> 00:12:30,150 więc jest 150 00:12:30,150 --> 00:12:32,300 to odpowiedź, ten obiekt z e-mailem, 151 00:12:32,300 --> 00:12:34,440 jak długo token jest ważny w 152 00:12:34,550 --> 00:12:40,220 sekundach, następnie sam token, który jest tym długim, zaszyfrowanym łańcuchem, a także identyfikator użytkownika, który został 153 00:12:40,220 --> 00:12:41,960 utworzony i ten token odświeżania.