This corresponds to Part 40 of our Complete Spring Boot Application (FleetMS) and we would create the user registration page. You will need to take the following 6 steps<\/p>\n
Let’s dive right in!<\/p>\n
<\/p>\n
Before you begin, you need to write the endpoint for \/register.<\/strong><\/p>\n <\/p>\n The easiest way to do this is to make a copy of the login page and name it register.html. Then add additional fields for Firstname, Lastname and ConfirmPassword.<\/p>\n Also remember to set the th:action to “\/users\/addNew”. As you already know, the method should be post.<\/p>\n Add a message placeholder using the code below<\/p>\n Then set the id of the password text field to password and the id of the confirmPassword field to confirmPassword<\/p>\n <\/p>\n Now update the User.java class to include Firstname and Lastname fields<\/p>\n Run the application and check that these fields are created in the database<\/p>\n If not, then manually create them. This means, you need to open MySQL Command Prompt and write the queries.<\/p>\n Moreover, ensure that the id field is an auto_increment field.<\/p>\n <\/p>\n Now we are going to write the JavaScript code to confirm that the passwords match.<\/p>\n Create a new file in the js folder called register.js.<\/p>\n Include the code below:<\/p>\n <\/p>\n Now we need to modify the security configuration to allow access to the register.html and register.js without authentication. Also we should allow access to the “\/user\/addNew” endpoint.<\/p>\n Open the ApplicationSecurityConfig.java file<\/p>\n Add an antMatcher() for “\/register” and “\/users\/addNew”.<\/p>\n For the “\/register” you need to allow access the the js folder by also adding “\/js\/**”.<\/p>\n So the addition to the file is as shown below:<\/p>\n <\/p>\n We now need to modify the method for saving a new user. This because, we want a successful user registration to redirect to the login page.<\/p>\n We would also display a message telling the user that the registration was successful and he can go on to login.<\/p>\n Open the UserController, change the addNew method to the one below:<\/p>\n Just to explain briefly what is happening here.<\/p>\n First we did not use Model and addAttributes. The reason is that, values in the model attributes are cleared after redirect.<\/p>\n Therefore, we make the method return a RedirectView instead of a string(view). Then we place a flashAttribute in the\u00a0RedirectAttributes object. In this way, the value of the flash attribute is preserved when a redirect occurs.<\/p>\n <\/p>\n Since we need to redurect to the login page after registration, the success message will therefore be placed in the login page. But it shows only if a redirect occurs from the register page.<\/p>\n Open the login page.<\/p>\n Just below the opening <form> tag, add the following code:<\/p>\n <\/p>\n Now we would encode the password using BCryptPasswordEncoder. Although there are other encoders, BCrypt offers a stronger encryption algorithm than most. We’ll do this in just three steps.<\/p>\n Now you can test the application!<\/p>\n","protected":false},"excerpt":{"rendered":" This corresponds to Part 40 of our Complete Spring Boot Application (FleetMS) and we would create the user registration page. You will need to take … <\/p>\n","protected":false},"author":1,"featured_media":216,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[23,22],"class_list":["post-213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-spring-boot-tutorials","tag-bcryptpasswordencoder","tag-user-registration-page"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/comments?post=213"}],"version-history":[{"count":8,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/213\/revisions"}],"predecessor-version":[{"id":248,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/213\/revisions\/248"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/media\/216"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/media?parent=213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/categories?post=213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/tags?post=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Step 1: Create the Registration page<\/strong><\/h5>\n
<span<\/span> th:text=<\/span>\"${message}\"<\/span>><\/span><\/span>\r\n<\/pre>\nStep 2: Update the Model and Database<\/strong><\/h5>\n
Step 3: Write the Password Confirmation Script<\/strong><\/h5>\n
$('document'<\/span>).ready(function<\/span>(){\t\t\t\r\n\tvar<\/span> password =<\/span> document<\/span>.getElementById(\"password\"<\/span>)\r\n\tvar<\/span> confirmPassword =<\/span> document<\/span>.getElementById(\"confirmPassword\"<\/span>);\r\n\t\r\n\tfunction<\/span> validatePassword(){\r\n\t if<\/span>(password.value !=<\/span> confirmPassword.value) {\r\n\t confirmPassword.setCustomValidity(\"Passwords Don't Match\"<\/span>);\r\n\t } else<\/span> {\r\n\t confirmPassword.setCustomValidity(''<\/span>);\r\n\t }\r\n\t}\t\r\n\tpassword.onchange =<\/span> validatePassword;\r\n\tconfirmPassword.onkeyup =<\/span> validatePassword;\t\t\r\n});\r\n<\/pre>\nStep 4: Modify the SecurityConfiguration<\/strong><\/h5>\n
.<\/span>antMatchers<\/span>(<\/span>\"\/register\"<\/span>,<\/span> \r\n\t\t\"\/resources\/**\"<\/span>,<\/span> \r\n\t\t\"\/css\/**\"<\/span>,<\/span> \r\n\t\t\"\/fonts\/**\"<\/span>,<\/span> \r\n\t\t\"\/img\/**\"<\/span>,<\/span> \r\n\t\t\"\/js\/**\"<\/span>).<\/span>permitAll<\/span>()<\/span>\r\n.<\/span>antMatchers<\/span>(<\/span>\"\/users\/addNew\"<\/span>).<\/span>permitAll<\/span>()<\/span>\r\n<\/pre>\nStep 5: Modify the “addNew” Method<\/strong><\/h5>\n
\/\/Modified method to Add a new user User<\/span>\r\n@PostMapping<\/span>(<\/span>value=<\/span>\"users\/addNew\"<\/span>)<\/span>\r\npublic<\/span> RedirectView addNew<\/span>(<\/span>User user,<\/span> RedirectAttributes redir)<\/span> {<\/span>\r\n\tuserService.<\/span>save<\/span>(<\/span>user);<\/span>\t\r\n\tRedirectView redirectView=<\/span> new<\/span> RedirectView(<\/span>\"\/login\"<\/span>,<\/span>true<\/span>);<\/span>\r\n redir.<\/span>addFlashAttribute<\/span>(<\/span>\"message\"<\/span>,<\/span>\r\n \t\t\"You successfully registered! You can now login\"<\/span>);<\/span>\r\n return<\/span> redirectView;<\/span>\t\t\t\t\r\n}<\/span>\t\r\n<\/pre>\nStep 6: Add the Success Message<\/strong><\/h5>\n
<div<\/span> style=<\/span>\"text-align:center; font-size:20px; color:green; font-weight:bold\"<\/span>><\/span> \r\n <span<\/span> th:utext=<\/span>\"${message}\"<\/span>><\/span><\/span> \r\n<\/div><\/span>\r\n<\/pre>\nStep 7: Encode the Password<\/strong><\/h5>\n
\n
@Bean<\/span>\r\npublic<\/span> BCryptPasswordEncoder bCryptPasswordEncoder<\/span>()<\/span> {<\/span>\r\n\treturn<\/span> new<\/span> BCryptPasswordEncoder<\/span>();<\/span>\r\n}<\/span>\r\n<\/pre>\n\n