PS #2: logowanie do systemu

rejestracja użytkowników

Po wprowadzeniu do technologii z których będę korzystać podczas pracy nad projektem w końcu możemy przejść do implementacji pierwszych funkcji systemu. Będzie to logowanie do systemu 🙂 Jak wspominałem we wcześniejszych wpisach – bardziej skupię się w na stronie back-endowej, dlatego też wcześniej przygotowałem szablon z którego skorzystam w naszym Sklepie.

Szablon

W folderze resources/templates dodałem pliki html, natomiast w folderze ../fragments znajdują się stałe elementy strony (nagłówek, pasek nawigacji, stopka). Tworząc szablon wykorzystałem Bootstrap’a, żeby jakoś to wyglądało 😉

szablon

Logowanie

Na początek, w oparciu o przewodnik z oficjalnej strony Spring’a, dodajmy możliwość logowania do konta o parametrach email: „user@mocode.pl” / hasło: „pass”. Usuńmy z pliku application.properties security.ignored=/**, ponieważ dzisiaj zajmiemy się właśnie konfiguracją Spring Security. W pakiecie pl.mocode.config stwórzmy klasę SecurityConfig. Znajduje się w niej nadpisana metoda configure. Po kolei omówię za co odpowiadają poszczególne elementy.

.authorizeRequests()
    .antMatchers("/style/**").permitAll()
    .antMatchers("/register", "/login", "/logout").permitAll()
    .antMatchers("/").hasRole("USER")
    .anyRequest().authenticated()
    .and()

Tutaj ustawiamy dla kogo dostępne będą wybrane zapytania http. I tak – dostęp do wszystkich plików oraz podkatalogów (dzięki /**) z katalogu style będą mieli wszyscy odwiedzający stronę; dostęp do strony rejestracji, logowania oraz funkcję wylogowania również wszyscy odwiedzający; dostęp do strony głównej tylko zalogowani użytkownicy, którzy mają rolę „USER”; natomiast do innych zapytań mają dostęp wszyscy zalogowani użytkownicy. Należy pamiętać, że ważna jest tutaj kolejność w jakiej dodajemy kolejne .antMatchers, ponieważ nie są one nadpisywane. W skrócie – im wyżej znajduje się zezwolenie, tym ma większy priorytet. Więcej informacji na ten temat znajduje się w dokumentacji 😉

.formLogin()
    .usernameParameter("email")
    .passwordParameter("password")
    .loginPage("/login")
    .loginProcessingUrl("/login")
    .and()

Następnie ustawiamy parametry dotyczące formularza logowania. W .usernameParameter podajemy name elementu input w którym wprowadzana jest nazwę użytkownika. Podobnie w .passwordParameter – podajemy name elementu input w którym wpisywane jest hasło. .loginPage odsyła nas do formularza logowania, natomiast .loginProcessingUrl to adres na który wysyłane jest zapytanie metodą POST po wciśnięciu przycisku logowania.

.logout()
    .logoutUrl("/logout")
    .logoutSuccessUrl("/login?logout")
    .and()

Na koniec konfigurujemy funkcję wylogowywania. .logoutUrl to adres, którego wprowadzenie spowoduje wylogowanie użytkownika, a następnie przekieruje go na stronę podaną w .logoutSuccessUrl. Dodanie parametru logout w zapytaniu /login umożliwi nam wyświetlenie komunikatu w przypadku, kiedy użytkownik się wyloguje.

Dalej możemy zarejestrować użytkownika w systemie „na twardo”, co wykorzystamy przy testowaniu czy logowanie działa prawidłowo. Odpowiada za to poniższy kod:

.inMemoryAuthentication()
    .withUser("user@mocode.pl").password("pass").roles("USER");

 

Zachęcam do dokładnego przeanalizowania pliku login.html. W ten sposób zaimplementowaliśmy funkcję logowania. Zwróć uwagę, że jako niezalogowany użytkownik, w przypadku próby odwiedzenia strony głównej zostaniesz przekierowany do formularza logowania, a po wpisaniu danych użytkownika user@mocode.pl / pass wyświetli się strona, którą chciałeś odwiedzić.

Zakończenie

Mamy już zaimplementowaną funkcję logowania, ale cały czas brakuje jeszcze możliwości zarejestrowania dowolnego użytkownika w systemie. Ten problem rozwiążemy w najbliższym wpisie, który pojawi się już w środę 😉

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *