Laravel: Resetowanie hasła

5.8.x

0:00Skonfigurowaliśmy już mailtrap, czyli możemy przyjmować wiadomości email

0:04i w tej lekcji pokażę ci w jaki sposób możemy zresetować hasło. Przejdziemy

0:09do login i tutaj taki link mamy jak Reset it here, on jeszcze nie jest podlinkowany

0:13i teraz się tym będziemy chcieli zająć. Znowu sobie wyświetliłem wszystkie

0:17nasze route'y czyli php artisan route:list i zobacz czy

0:21mamy tutaj takie, jak na przykład password/email, password/reset, password/reset i jeszcze

0:25jedno tutaj password/reset. No właśnie będziemy chcieli z tego teraz skorzystać,

0:30znowu będę chciał sobie to przekopiować do web kropka php i od

0:34czego zaczniemy, showLinkRequestForm, to jest pierwsza rzecz, którą chcemy

0:38zrobić i tym razem pozostawię sobie takie ścieżki jak są, czyli

0:42password/reset, już nie będę robił account ukośnik password reset, chociaż

0:46w razie czego możesz też po zastosować, uważam, że te są w porządku, w tym przypadku i

0:50to będzie get i nazwa password request, te

0:54nazwy również sobie będę chciał zostawić. Przejdźmy do w web i

1:00będzie to get password

1:07email. Jeśli dobrze pamiętam, zobaczmy, w zasadzie

1:12password reset i tutaj name to będzie password.request.

1:18Skoro nic tutaj nie zmieniłem, to nie musiałbym tego dawać

1:22bo Auth routes nam to dodaje. Na końcu sobie to usuniemy, to jak wspomniałem tylko kwestia

1:26moich preferencji, lubię tutaj od razu widzieć, co się dzieje. Teraz mamy

1:31taki Controller jak właśnie ForgotPasswordController. Zauważ, że

1:36się znajduje w tym miejscu, ma middleware guest, to oznacza, że wyłącznik

1:40gość może korzystać z jego metod. Gościem jesteś kiedy jesteś niezalogowany, więc

1:45dokładnie tak jest w naszym przypadku. Jeżeli przejdziemy do jego trait'a, to zobaczymy,

1:49że on zwraca nam widok auth password passwords email, więc

1:53zobaczmy czy taki widok się u nas pojawił, ale powinien kiedy wygenerowaliśmy

1:58sobie cały ten system autentykacji, więc powinno być tutaj views auth passwords

2:03i następnie email. Jak widzisz, jest taki oto,

2:07taki oto templet i znowu ja będę chciał go zastąpić naszym

2:11własnym, więc kopiuje sobie wszystko co mieliśmy na przykład tutaj. Zmienię

2:16tutaj na reset password, tutaj

2:20również, okej. No i

2:25oczywiście teraz z HTML'a sobie skopiujemy odpowiedni widok. Jest to reset,

2:30widzimy że formularz

2:34wygląda następująco, czyli tylko wnętrze formularza w zasadzie sobie skopiujmy. Okej, tutaj

2:46podajemy email, to jest istotne, znowu znaleźlibyśmy to w tamtych plikach, route

2:50to tym razem będzie inna ścieżka, musimy sobie ją

2:54podejrzeć najpierw czy będzie to post i dokładnie jest

2:58to ten post, czyli password email. Znowu ja sobie go dodam do web. Będzie

3:04to password email i password email, tak

3:19to będzie wyglądać i skoro mamy nazwę password email to sobie tutaj wpiszę,

3:23okej. Wysyłamy

3:28tam email, powinno być porządku tutaj oczywiście można sobie jeszcze zastosować walidację i

3:37wyrzucimy jeszcze to co skopiowałem z login. Dobrze, sprawdźmy

3:42zatem jak by to mogło wyglądać, reset it Here, czy

3:47nam się to wyświetli. Musimy tutaj odświeżyć ten link, a nie podlinkowaliśmy

3:51go jeszcze, przejdźmy do login, route i

3:57to będzie password reset, w

4:01zasadzie request, zgadza

4:08się i nasz widok reset password się pokazał jeżeli zrobię submit, tutaj jak widzimy

4:12tutaj się podświetla nasz globalny komunikat. Również tutaj działa poprawnie, czyli

4:17jeżeli teraz dobrze wyślemy ten formularz to on nam się wyślę właśnie

4:21pod ten adres, który zdefiniowaliśmy tutaj i powinien

4:26zostać do nas wysłany link do resetu hasła więc sprawdźmy czy tak rzeczywiście stanie. W

4:30moim przypadku muszę sobie zerknąć jaki był ten fejkowy email,

4:34który sobie utworzyłem. Podam go i wyślę, no

4:41właśnie i nic się tutaj nie wydarzyło, tak by się przynajmniej mogło wydawać. Okej,

4:47w zasadzie jeszcze nie zdążyło, bo tutaj musieliśmy poczekać, czyli wydarzyło

4:51się, sstrona się przykładowała dopiero teraz, bo chwilę trwało wysyłanie tego maila. Jeżeli

4:55przyjdziemy tutaj, on się wysłał dwa razy bo dwa razy wcisnąłem ten przycisk, w oczekiwaniu. Moglibyśmy

5:01ten przycisk w javascripcie oczywiście blokować po jednokrotnym kliknięciu, w każdym

5:05razie zobacz. Mail do nas przyszedł i teraz tak. No i to działa tak że from

5:09które sobie zdefiniowal my w pliku env, ładne jest tutaj, to jest adres, a

5:13tu widzimy do kogo ten email miał pójść. On tam tak naprawdę nie został wysłany i mailtrap

5:18jest genialny, bo możemy wszystko dokładnie sobie tutaj podejrzeć i zdebugować. Dla

5:23nas jednak ważne jest to, że laravel wysłał nam taki oto email i że mamy

5:27tutaj również zdefiniowane w pliku env w lekcje poprzedniej adres larablogger.test i

5:31mamy cały taki oto link, więc tego z tego linku będziemy chcieli

5:35skorzystać, ale on na razie u nas jeszcze nie zadziała, dlatego że on

5:39kieruje na password reset i tutaj jak widzisz jest jakiś token, więc jeżeli

5:43sobie zamkniemy okaże się że jest to ten adres dlatego zanim przejdziemy

5:47pod ten link to chciałbym taki adres również sobie w łeb zdefiniować to

5:54jest zwykły get bo on po prostu będzie wyświetlał odpowiedni formularz password/reset

5:58i tutaj jest token i podamy

6:04sobie jego name. To było chyba

6:08password reset. Zerknijmy, zgadza

6:13się i to z kolei wywołuje metodę showResetForm i

6:17od razu mogę ci powiedzieć, że to będzie wyświetlało taki oto formularz, jaki się

6:21tutaj znajduje, więc ten formularz będzie zawierał email, który trzeba

6:25wpisać oraz dwa razy hasło, nowe hasło, które trzeba wpisać. Dlatego

6:30musimy sobie tutaj również podstawić odpowiedni widok. Dla

6:35nas najprościej będzie skopiować wszystko, co było w tym miejscu. Wkleić tutaj i

6:39skoro email już podajemy. To teraz sobie podamy jeszcze password

6:44i oczywiście

6:51zmienimy tylko type i name, kopiujej teraz

6:55jeszcze i musimy zrobić password confirmation, czyli tutaj pozostaje

6:59password a name będzie to password confirmation. Zmieńmy

7:06sobie tutaj na new password i new

7:10password again. To

7:15powinno wystarczyć, tutaj możemy to podmienić na reset

7:20password, okej.

7:25I jeszcze tutaj musimy dostosować ten

7:29adres na password reset, czyli tak by to miało wyglądać.

7:33Zobaczmy jeszcze ostatnią rzecz, którą musimy

7:37dodać. Jak widzisz trochę tych kroków jest, ale zrobimy teraz i będzie działać to poprawnie. Skoro

7:43to nam wyświetla taki formularz to teraz ten formularz gdzieś musi być wysłany. On musi

7:47być wysłany pod password reset. Dokładnie pod taki adres. Nazwa

7:51to będzie password update, oczywiście to nazwa zależy od nas, jeżeli sobie ją tutaj zmieniamy,

7:56ale pozostaniemy przy tych, które tam są i na koniec chociaż nie musiałbym

8:00tego robić tak wspominałem, dodaje sobie to w route, jako post, OK. Teraz

8:05to wszystko powinno nam już zadziałać. Przejdziemy

8:10tutaj, będę chciał skopiować cały ten link i na naszej stronie go wkleić.

8:14Jak widzisz reset password nam się wyświetliło. Teraz

8:18jeszcze tylko mógłbyś zastanawiać w jaki sposób to działa, dlatego na sekundkę przejdźmy sobie

8:23do bazy danych. Zauważ, że od początku mieliśmy taką migracje jak password reset,

8:27która nam utworzyła taką tabelę i dokładnie w momencie kiedy użytkownik zażądał

8:31resetowania hasła, jest tutaj dodawany jego email oraz token. Dzięki temu ten

8:35kontroler może sobie sprawdzić. Jeżeli ktoś przyjdzie pod taki adres, znajdzie

8:40ten token, zauważ. Użytkownik tutaj wpisze swój adres email

8:44i dwa razy nowe hasło, czyli łatwo już jest to sprawdzić po stronie

8:48serwera. Mamy wpisane przez kogoś adres email, mamy token, więc sprawdzamy w bazie danych czy

8:52ten token, który tutaj jest, jest przypisany do takiego adresu email. Jeżeli

8:56tak, wiemy, że jest to na pewno ten użytkownik, bo otrzymał ten token na adres

9:00email i w ten sposób może ustawić sobie nowe hasło. To

9:05nowe hasło powinno zostać bez problemu ustawione i powinniśmy

9:10wtedy otrzymać stosowny komunikat i żeby tej lekcji nie przedłużać to uprzedzam fakty

9:14i podobnie wcześniej przy login, przy register, będę chciał tutaj dodać odpowiedni,

9:19odpowiednią metodę. Przejdźmy do kontrolera

9:23reset password controller, tutaj do tego trait'a i tutaj

9:27gdzieś znajdziemy co dzieje się po tym jak uda się zresetować

9:31hasło. Jak widzisz, jest dokładnie ta metoda, ona nas przekierowuje do redirectPath,

9:36czyli do tego co mamy ustawione w redirect,

9:41czyli tutaj do home będziemy to chcieli zmienić w tym przypadku znowu

9:45na główną ścieżkę, więc tam nas przekierowuje,

9:50wrócimy nas jeszcze i ustawia status na jakąś wiadomość. Ja bym chciał

9:54żeby nas było to ustawione jako message, a nie status, bo to właśnie jest

9:58alternatywny sposób ustawienia sesji, czyli tak jak wcześniej ci

10:02pokazywałem session flash albo możemy przy użyciu funkcji redirect

10:06zrobić with. Dlatego my musimy w tym przypadku całą tą metodę nadpisać,

10:11nadpisać ResetPasswordController, wstawimy

10:15ją tutaj i chcę przekierować with messag

10:19i tu po prostu napiszemy użytkownikowi, że jego hasło zostało zresetowane. Okej,

10:25wiemy jak będziemy mieli message, to nasz komunikat się od razu wyświetli, więc mając już to wszystko

10:29spróbujmy zresetować hasło. Podaję adres tego użytkownika i dwa

10:33razy będę chciał wpisać nowe hasło, chociaż w zasadzie możemy wpisać jakieś

10:37hasło niepoprawne, sprawdzić czy walidacja nam tutaj zadziała. O, jak widzisz coś

10:41nam nie zadziałało. Widzimy, że kontroler który podaliśmy z jakiegoś

10:46powodu nie istnieje, i oczywiście skopiowałem

10:50tutaj zbyt wiele. Jak widzisz, taa ścieżka powinna wyglądać następująco,

10:54więc wrócimy sobie raz jeszcze do tej strony. Odświeżę ją, podam

10:59adres email i spróbuje wpisać tutaj jakieś niepoprawne rzeczy. Walidacja, jak

11:03widzisz nam działa i to jest bardzo dla nas istotne. Natomiast teraz już wpiszę nowe

11:07hasło, jak widzisz jeszcze ten email nie został zapamiętany, a to oznacza tylko tyle

11:11że powinniśmy sobie tutaj dodać value old. Teraz

11:21już będzie zapamiętywany, ale spróbujmy wpisać ostatecznie hasło

11:25jakie chcemy ustawić. Wpisałem, wciskam enter, okej

11:31i widzimy token field is required, czyli jeszcze jedna rzecz o której zapomnieliśmy.

11:35To dobrze, że nam się te błędy pojawiają. bo mogę ci pokazać jak je rozwiązać,

11:39to wynika z tego, że ja tutaj nie skorzystałem ich templatek, które były wygenerowane, ale

11:44zrobiłem to całości od nowa. Kiedy nam się wczytuje ten formularz reset,

11:48to jest tutaj przekazywany token, który jest w adresie URL pod specjalną zmienną

11:52i musimy tutaj jeszcze dodać ukryte pole które będzie wysłane razem z tym formularzem. Jego

11:58name jest to token, jego wartość ustawimy

12:02właśnie na zmienną token, która gwarantuje ci, jest tutaj przekazywana, też można

12:06to znaleźć w kodzie tego trait'a, gdybyśmy to podejrzeli, więc jeszcze raz spróbujmy. Wysyłam i

12:15jak widzimy znowu ten token z jakiegoś powodu nie został dodany. Odświeżmy

12:20zatem tutaj, po prostu podejrzany co tam jest. Być może jakieś dane z sesji się zapamiętały, widzę,

12:24że ten token tutaj jest dodawany, czyli być może to tylko jakiś chwilowy błąd. Raz

12:29jeszcze. Jak

12:37widzimy password reset token is invalid. Dlaczego tak się mogło stać? Zobaczmy. Być

12:43może ten token jest tylko przez chwilę ważny. Nie jestem stu procentach pewny,

12:47ale niewykluczone, że tak właśnie jest. Dlatego jeszcze raz sobie zrobimy

12:51request o nowy token lub może to wynikać jeszcze z tego

12:55że wcześniej kliknęliśmy dwa razy i dwa razy nam się wysłał ten mailtrap i

12:59drugi token po prostu może  być zupełnie inny, więc jak widzisz, mamy

13:03trochę przygód tym wszystkim, ale być może dzięki temu lepiej zrozumiesz jak to wszystko działa,

13:07więc spróbujmy raz jeszcze sobie zresetować hasło. Tutaj

13:12nie naciskam już po raz kolejny, czekamy aż się ten mail wyśle. Na mailtrap'ie

13:16on się powinien szybko pojawić. Kopiujemy ten link raz jeszcze, ten

13:21token tutaj powinien już być w naszym ukrytym polu i ostatecznie spróbujmy

13:26zmienić to hasło, reset password i jak

13:31widzimy, jeszcze jakiś błąd nam się pojawił i to jest ten sam błąd, który mieliśmy

13:35wcześniej, nie podając tutaj request przy kopiowaniu metody, natomiast wygląda na to

13:39już wszystko jest prawie porządku. Ja tutaj skopiowałem metody, a nie skopiowałem

13:43tego request, które się tam znajdowało. Wybacz, że tyle  razy nam

13:48coś nie wyszło, ale tak to właśnie wygląda w życiu, rzadko

13:52udaje się zrobić od razu. Natomiast wygląda na to, że nasze hasło zostało

13:57zresetowane, tylko że tego teraz nie zobaczymy. Jeżeli tutaj odświeżę

14:01i jak widzisz w password reset nic nie ma, to znaczy to hasło zostało poprawnie zresetowane. Jeżeli

14:07teraz będziemy chcieli przejść pod tą ścieżkę to automatycznie to middleware guest przekierowuje nas na stronę

14:11główną. Ja jeszcze tylko raz, żeby potwierdzić, że wszystko działa,

14:15będę chciał zresetować hasło. Przejdziemy

14:22pod nowy link, który został do nas przesłany i mam

14:29nadzieję, że po raz ostatni w tej lekcji, uda nam się to zrobić. Jak

14:35widzisz, udało się, your password has been reset. No i mamy hasło

14:39zmienione, po wielkich trudach, ale mamy gotowy system, który

14:43pozwala nam się rejestrować, wylogowywać, logować, zmieniać

14:47hasło i jeszcze będziemy chcieli dodać sobie ostatnią rzecz do tego systemu, mianowicie

14:52potwierdzenie adresu email.