In this Tutorial, would see how to add custom Login Form. So instead of using the generated form we’ll build one. You can find Tutorials 1 to 3 below<\/p>\n
We would cover the following 4 topics;<\/p>\n
<\/p>\n
Follow the steps below to add custom login and logout pages<\/p>\n
Step 1:<\/strong> Create a html page (for login) inside the templates folder. Name it login.html. The content of the body section be as shown below. Note the action of the form. Also note the th: prefix as we are using thymeleaf<\/p>\n Finally, see that the span displays message for invalid credentials<\/p>\n <\/p>\n Step 2:<\/strong> Create another html page. Name it logout.html. The content of the body section is as shown below<\/p>\n <\/p>\n Step 3:<\/strong> Open the AppSecurityConfig file and override the configure(HttpSecurity http) method<\/p>\n Step 4<\/strong>: Write the following code inside the method<\/p>\n <\/p>\n Before I move on to the next step, let me explain to you the meaning of some of the codes in the above snippet<\/p>\n .csrf().disable():<\/em> <\/strong>this line disables cross-site-request-forgery security<\/p>\n .authorizeRequests().andMatchers(“\/login”).permitAll()<\/strong>: indicates that request must the authorized except for “\/login”<\/p>\n .formLogin():<\/strong> this is the main part. It allows you to use a custom login form<\/p>\n .logout().invalidateHttpSession(true):<\/strong> destroy the session once the user logs out<\/p>\n .clearAuthentication(true)<\/strong>: this plays similar role\u00a0 as the preceding line above<\/p>\n .logoutRequestMatcher(new AntPathRequestMatcher(“\/logout”))<\/strong>: specify path to the logout page<\/p>\n .logoutSuccessUrl(“\/logout-success”).permitAll():<\/strong> the url to call on logout<\/p>\n <\/p>\n Now, we are going to write methods to call when login and logout requests are made.<\/p>\n Step 1:<\/strong> Open the HomeController File<\/p>\n Step 2:<\/strong> Write the method below to handle login requests<\/p>\n <\/p>\n Step 3:<\/strong> Write the following method to handle logout request<\/p>\n <\/p>\n At this point, we have completed the neccessary configuration.<\/p>\n Step 4:<\/strong> Fire up the application. Visit http:\/\/localhost\/home.\u00a0 You will be prompted for a username and password. Enter the username and password and click on login. If it works, then congratulations! Otherwise, watch the video<\/p>\n <\/p>\n Open the home page (index.html) and add the code to make a logout request. Add the code below the ‘Subscribe <br>. This is shown below<\/p>\n <\/p>\n Now, relaunch the application. Try to login. Then try to logout and make sure everything works.<\/p>\n In the next lesson, we would try to implement the OAuth 2.0 using existing user accounts.<\/p>\n","protected":false},"excerpt":{"rendered":" In this Tutorial, would see how to add custom Login Form. So instead of using the generated form we’ll build one. You can find Tutorials … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-1952","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1952","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=1952"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1952\/revisions"}],"predecessor-version":[{"id":2120,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1952\/revisions\/2120"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<h1><\/span>Login<\/h1><\/span>\n<span<\/span> th:if=<\/span>\"${session[SPRING_SECURITY_LAST_EXCEPTION] != null and session[SPRING_SECURITY_LAST_EXCEPTION].message != null}\"<\/span> th:text=<\/span>\"${session[SPRING_SECURITY_LAST_EXCEPTION].message}\"<\/span>><\/span>Invalid credentials<\/span><\/span>\n\n<form<\/span> th:action=<\/span>\"@{\/login}\"<\/span> method=<\/span>\"post\"<\/span>><\/span>\n<table><\/span>\n<tr><\/span>\n\t<td><\/span>Username:<\/td><\/span>\n\t<td><input<\/span> type=<\/span>\"text\"<\/span> name=<\/span>\"username\"<\/span> value=<\/span>\"\"<\/span>><\/td><\/span>\n<\/tr><\/span>\n<tr><\/span>\n\t<td><\/span>Password:<\/td><\/span>\n\t<td><input<\/span> type=<\/span>\"text\"<\/span> name=<\/span>\"password\"<\/span>><\/td><\/span>\n<\/tr><\/span>\n<tr><\/span>\n\t<td><input<\/span> name=<\/span>\"submit\"<\/span> type=<\/span>\"submit\"<\/span> value=<\/span>\"submit\"<\/span>><\/span> <\/td><\/span>\n<\/tr><\/span>\n<\/table><\/span>\n<\/form><\/span>\n<\/pre>\n<h1><\/span>Logout Home<\/h1><\/span>\n<a<\/span> th:href =<\/span>\"@{\/home}\"<\/span>><\/span>Home<\/a><\/span>\n<\/pre>\n2. Modify the AppSecurityConfig File<\/strong><\/h5>\n
@Override<\/span>\nprotected<\/span> void<\/span> configure<\/span>(<\/span>HttpSecurity http)<\/span> throws<\/span> Exception {<\/span>\n\thttp\n\t.<\/span>csrf<\/span>().<\/span>disable<\/span>()<\/span>\n\t.<\/span>authorizeRequests<\/span>().<\/span>antMatchers<\/span>(<\/span>\"\/login\"<\/span>).<\/span>permitAll<\/span>()<\/span>\n\t.<\/span>anyRequest<\/span>().<\/span>authenticated<\/span>()<\/span>\n\t.<\/span>and<\/span>()<\/span>\n\t.<\/span>formLogin<\/span>()<\/span>\n\t.<\/span>loginPage<\/span>(<\/span>\"\/login\"<\/span>).<\/span>permitAll<\/span>()<\/span>\n\t.<\/span>and<\/span>()<\/span>\n\t.<\/span>logout<\/span>().<\/span>invalidateHttpSession<\/span>(<\/span>true<\/span>)<\/span>\n\t.<\/span>clearAuthentication<\/span>(<\/span>true<\/span>)<\/span>\n\t.<\/span>logoutRequestMatcher<\/span>(<\/span>new<\/span> AntPathRequestMatcher(<\/span>\"\/logout\"<\/span>))<\/span>\n\t.<\/span>logoutSuccessUrl<\/span>(<\/span>\"\/logout-success\"<\/span>).<\/span>permitAll<\/span>();<\/span>\n}<\/span>\n<\/pre>\n3. Write Methods for Login and Logout<\/strong><\/h5>\n
@RequestMapping<\/span>(<\/span>\"\/login\"<\/span>)<\/span>\npublic<\/span> String loginPage<\/span>()<\/span> {<\/span>\n\treturn<\/span> \"login\"<\/span>;<\/span>\n}<\/span>\n<\/pre>\n@RequestMapping<\/span>(<\/span>\"\/logout-success\"<\/span>)<\/span>\t\npublic<\/span> String logoutPage<\/span>()<\/span> {<\/span>\n\treturn<\/span> \"logout\"<\/span>;<\/span>\n}<\/span>\n<\/pre>\n4. Add Logout Link to the Home page<\/strong><\/h5>\n
<br><\/span>\n<a<\/span> th:href =<\/span>\"@{\/logout}\"<\/span>><\/span>Logout<\/a><\/span>\n<\/pre>\n