Szeroka Perspektywa Full-Stack Web Developmentu: OAUTH 2.0 i JWT

0:00Następny w kolejce mechanizm uwierzytelnienia to 2.0.

0:04W tym przypadku sytuacja jest nieco bardziej skomplikowana niż w każdym

0:07wcześniejszym ze względu na to, że musimy zadbać o zdecydowanie więcej rzeczy.

0:13Zasadniczo na tym etapie wykorzystamy już bazę danych oraz możliwość logowania

0:17poprzez podanie loginu oraz hasła, które zostaną wykorzystane do tego, aby w

0:22odpowiedni sposób porównać je z informacjami przechowywane w bazie, a

0:26następnie zwrócić użytkownikowi Access token.

0:29W naszym jednak przypadku nie będziemy wykorzystywać http only kuki, ponieważ na

0:33to przyjdzie jeszcze czas, tylko zwyczajnie pokażę Ci prostszy sposób

0:36polegający na zwróceniu Access tokena bezpośrednio w samej odpowiedzi.

0:41A następnie też wykorzystamy ten token do

0:43tego, aby wykonać kolejne zapytanie do naszego serwera.

0:46Proponuję więc, abyśmy przeszli teraz do samego edytora.

0:50Na początek uruchomimy tutaj serwer i niech on działa tutaj w tle, a następnie

0:54przejrzymy sobie wszystkie pliki, które tutaj przygotowałem.

0:58Jak widzisz, w porównaniu do projektu

0:59uwzględniającego chociażby grafiki, jest tutaj zdecydowanie więcej plików.

1:03Wynika to z faktu, że w pierwszej kolejności podłączamy tutaj mój głos i

1:07kontaktujemy się bezpośrednio z lokalną bazą danych.

1:11To wewnątrz niej będą przechowywane informacje na temat użytkowników.

1:14W momencie, gdy MongoDB zainstalowane i uruchomione jest na moim systemie, jedyne

1:19co muszę tutaj zrobić, to przekazać adres do tej bazy danych.

1:22Następnie potrzebuję tutaj dwa moduły.

1:24Jeden z nich będzie odpowiedzialny za obsługę samych użytkowników, a drugi za

1:29kwestie dotyczące autoryzacji oraz uwierzytelnienia.

1:32W moim przypadku chciałbym zarówno uwzględnić możliwość rejestrowania

1:36użytkowników, jak też pobierania informacji na temat samego użytkownika.

1:41Warto tutaj zaznaczyć, że to decyzją projektową jest to, czy sama rejestracja

1:46czy też tworzenie nowego użytkownika znajduje się WZ z kontroler, czy raczej

1:50bezpośrednio w kontrolerze, ale w moim przypadku raczej jestem za tym, aby

1:54tworzenie nowego użytkownika było tam gdzie sami użytkownicy.

1:58A jeżeli chodzi o samo logowanie to już znajduje się w module Auth.

2:02W związku z tym jak widzisz mamy tutaj trzy ścieżki.

2:05Pierwsza służy założeniu konta, druga tutaj logowaniu użytkownika i trzecia

2:10dotyczy zwrócenia informacji na temat zalogowanego użytkownika.

2:13Ta ostatnia będzie weryfikować nam token i

2:16od teraz w przypadku samego logowania będziemy wykorzystywać dodatkową strategię

2:20Passport umożliwiającą logowanie użytkownika.

2:24W związku z tym mamy tutaj do czynienia z dwiema strategiami.

2:27Pierwsze będzie polegało na tym, aby

2:29wykorzystać dane logowania użytkownika podane razem z zapytaniem do tego, żeby

2:34zweryfikować to, czy istnieje w bazie danych.

2:36Jeżeli tak nie będzie, bądź też jego hasło

2:38będzie niepoprawne, odrzucimy zapytanie, a w przeciwnym razie zwrócimy tutaj obiekt

2:43użytkownika, który w tym przypadku zostanie dołączony do naszego obiektu

2:47zapytania, tak jak pokazywałem to w poprzedniej lekcji.

2:50Jeżeli chodzi o samą funkcję weryfikuj

2:52obecność użytkownika, to w pierwszej kolejności wykorzystujemy jego login,

2:56który powinien być dla każdego użytkownika unikatowy np.

3:00adres email, a następnie w momencie gdy

3:03sam użytkownik nie zostanie znaleziony zwracamy NULL.

3:06Czyli tutaj warunek nie zostanie spełniony i połączenie zostanie odrzucone.

3:10W przeciwnym razie użytkownik zostaje odnaleziony w bazie, więc musimy porównać

3:14jego hasło z tym, które przechowywane jest w bazie.

3:18Tak jak powiedziałem, z punktu widzenia

3:19bezpieczeństwa w naszej bazie przechowywane są hash haseł.

3:23Oznacza to, że nie możemy po prostu porównać wartości przesłanej przez

3:26użytkownika, czyli po prostu jego hasła z wartością, którą przechowujemy w bazie.

3:31Musimy w tym celu wykorzystać bibliotekę

3:33Big Crypt oraz metodę Compare, aby porównać hash tych haseł.

3:38No i tutaj mamy widzę tylko jeden mały

3:40problem, ponieważ oczywiście w momencie gdy użytkownik nie zostanie znaleziony to

3:43zwracamy wyjątek, a w przeciwnym razie weryfikujemy jego hasło i dopiero w

3:48momencie, gdy to hasło jest poprawne, zwracamy informację na temat użytkownika.

3:52W przeciwnym razie null.

3:54Rezultat jest taki, że gdy login oraz hasło zgadzają się z tym, co mamy w bazie,

3:59przechodzimy dalej i tym samym mamy dostęp do aplikacji.

4:02W związku z tym powinniśmy wygenerować dla użytkownika token.

4:06W tym przypadku po prostu szyfruje tzw.

4:08palu, który zostanie zapisany w naszym token, a następnie z pomocą specjalnego

4:13serwisu podpisujemy ten token i przesyłamy go do użytkownika.

4:17Zwróć uwagę, że wewnątrz tokenu

4:19uwzględniamy tylko informacje, które pozwolą nam zidentyfikować użytkownika.

4:24Tak naprawdę nic nie stoi na przeszkodzie, abyśmy wykorzystali tutaj np.

4:27wyłącznie jego identyfikator, ale w tym

4:29momencie nic nie stoi na przeszkodzie, aby przesłać te dwie dane.

4:33W każdym razie najważniejsze jest to, aby

4:35wewnątrz tego pawilonu nie przechowywać żadnych danych wrażliwych, np.

4:39adresu email.

4:40Wynika to z faktu, że te informacje

4:42wewnątrz tokenu mogą zostać w bardzo prosty sposób odczytane.

4:45Zatem na tym etapie użytkownik powinien dostać swój access token.

4:49Wróćmy jednak krok wcześniej do możliwości rejestrowania konta.

4:53W tym przypadku użytkownik przesyła swój

4:55login oraz hasło, a następnie wykorzystujemy tutaj BIG do tego, aby.

5:00Hasz, który zostaje zapisany w bazie danych.

5:03Jak widzisz, zapisujemy tutaj jego imię oraz hasło, a następnie zwracamy to, co

5:07zostanie zwrócone przez tą metodę, czyli po prostu nowy obiekt użytkownika.

5:12Myślę, że na tym etapie możemy przejść

5:14tutaj przez proces tworzenia konta, czyli po prostu przesyłam tutaj dane użytkownika

5:19i po utworzeniu tego konta jak widzisz zostaje tutaj wygenerowany jego obiekt

5:23uwzględniający imię, hasło oraz identyfikator użytkownika.

5:26Swoją drogą tak naprawdę w tym momencie

5:28nie powinniśmy już przesyłać do klienta jego hasła.

5:31Natomiast mi na tym zależało, aby było dla Ciebie jasne, że jego hasło nie zostaje

5:36przechowywane w naszej bazie w formie bezpośredniej, czyli tzw.

5:39plain tekstu.

5:40W zamian przechowywany jest tutaj taki oto hash.

5:43No i teraz, w momencie gdy mamy już konto

5:45użytkownika, możemy się tutaj na nie zalogować.

5:48W odpowiedzi otrzymujemy tutaj Access Token, którego ważność w konfiguracji

5:52naszej aplikacji ustawiona jest na 60 sekund.

5:55Zatem jeżeli skopiujesz sobie jego

5:57zawartość, a następnie przekaże ją do kolejnego zapytania, wykorzystując tutaj

6:02nagłówek, a następnie wartość, którą skopiowałem poprzedzoną frazą brr.

6:06No to po wykonaniu tego zapytania otrzymam tutaj login użytkownika.

6:10Wygląda na to, że wszystko się tutaj zgadza.

6:13I teraz, w momencie gdy sam token albo

6:15zostanie przesłany jako niepoprawny, to zablokuje nam się połączenie lub też

6:19ewentualnie w momencie gdy przywrócimy ten token, ale jego wartość już wygasła.

6:24Ze względu na to, że u mnie minęła już minuta i w związku z tym pomimo tego, że

6:28mamy tutaj poprawny token, to nadal dostępu nie mamy.

6:31I na tym etapie albo musimy zalogować się ponownie, aby uzyskać nowy token lub też

6:36ewentualnie w momencie gdybyśmy mieli taki mechanizm zaimplementowany moglibyśmy

6:41wykorzystać oddzielny endpoint do tego, aby przekazać tam refresh token i w zamian

6:45odczytać nowy access token, który odblokuje nam dostęp do naszych zasobów.

6:50I teraz tak w zasadzie mamy tutaj jeszcze nasz ostatni GET, który uwzględnia tak

6:54naprawdę Password, który zajmuje się w całości tym, aby obsługiwać nasze tokeny.

6:59Mamy tutaj zarówno nasz GET, jak i

7:01strategię uwzględniającą to, aby odpowiednio obsłużyć same tokeny.

7:05Jeżeli chodzi o szczegóły, myślę, że na

7:07tym etapie nie będziemy się im bardzo przyglądać.

7:10Natomiast jak widzisz mamy tutaj możliwość ustawienia tego, w jaki sposób odczytujemy

7:15token i w naszym przypadku będzie to nagłówek.

7:17Aczkolwiek na etapie tworzenia naszej aplikacji jest.

7:21Wykorzystamy tutaj http only kuki.

7:23Na razie jednak musisz wiedzieć, że

7:25istnieje tutaj możliwość ustawienia kilku sposobów.

7:28Następnie mamy możliwość weryfikowania wygaśnięcia tokenu.

7:31Oczywiście ta opcja powinna być ustawiona na false, aczkolwiek np.

7:35w środowisku deweloperskim możesz ustawić

7:38tę wartość na true, oczywiście na podstawie zmiennych środowiskowych.

7:42No i ostatecznie mamy jeszcze sekret,

7:44który powinien być wygenerowany z pomocą następującej metody.

7:48Mianowicie wykonuje polecenie,

7:50aby udostępnić sobie możliwość wykonywania poleceń.

7:54I tutaj wpisujesz następujące polecenie.

7:56W rezultacie w momencie gdy je wykonasz, otrzymasz taki oto ciąg znaków, który

8:00umieszczasz w pliku, a następnie wykorzystujesz w tym miejscu.

8:05Oczywiście w tym wszystkim będziemy się

8:06jeszcze zajmować, natomiast na ten moment nie ma co komplikować.

8:09Najważniejsze jest dla mnie to, aby stało

8:11się dla Ciebie jasne, że w momencie, gdy wykorzystujemy w 2.0 oraz tokeny jw.

8:17Ważne jest to aby wykorzystać local

8:19strategi do tego aby udostępnić logowanie użytkownika, ponieważ na tym etapie on

8:23zgłasza się do nas aby uzyskać swój token, a następnie dopiero w momencie gdy będzie

8:28prosił o jakieś dane, które wymagają uwierzytelnienia będziemy wykorzystywać go

8:33uwzględniający właśnie przesłany przez niego token.

8:36Dodatkowo jak widzisz mamy tutaj zastosowaną tą modyfikację obiektu

8:39żądania, która dodaje obiekt użytkownika do tego żądania.

8:43W rezultacie za każdym razem, gdy będziemy mieć podłączony ten gadżet, będziemy mieć

8:48też dostęp do aktualnie zalogowanego użytkownika.

8:51Wszystkie pozostałe elementy, które są tutaj uwzględnione, takie jak np.

8:55połączenie z bazą danych, modele, serwisy itd.

8:58Zostawimy sobie na później.

9:00Podobnie też na później zostawimy sobie

9:02sam mechanizm odświeżenia tokenów z pomocą Refresh token.

9:06Zatem jeżeli chodzi o szybki przegląd tokenów j wt to by było na tyle, więc na

9:10ten moment zachęcam Cię co najwyżej, aby przeklikać sobie zawartość tego projektu,

9:14a następnie zapraszam Cię do kolejnej lekcji.