In this Article explains how to create the login and registration using Spring Boot and Angular and how to set the hash password for the Security .Spring boot as backend front end angular.
Lets follow the following step
First you have add the following dependencies while you configuring the spring initializr
- spring jpa
- spring web
- spring security
- mysql
Open the project on the pom.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>com.mysql</groupId> <artifactId>mysql-connector-j</artifactId> <scope>runtime</scope> </dependency> <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-security --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> <version>2.7.8</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> |
you see the dependencies what you added.
Create the Mysql Database and Configure the database connection in the application.properties. this place where connect to Spring boot to Mysql.
application.properties
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | spring.application.name=Registation server.port=8085 spring.jpa.hibernate.ddl-auto=create spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/dbkms?createDatabaseIfNotExist=true spring.datasource.username=root spring.datasource.password=root123 #jpa vendor adapter configuration spring.jpa.database-platform=org.hibernate.dialect.MySQL57Dialect spring.jpa.generate-ddl=true spring.jpa.show-sql=true |
Employee
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | package com.example.Registation.Entity; import javax.persistence.*; @Entity @Table(name="employee") public class Employee { @Id @Column(name="employee_id", length = 45) @GeneratedValue(strategy = GenerationType.AUTO) private int employeeid; @Column(name="employee_name", length = 255) private String employeename; @Column(name="email", length = 255) private String email; @Column(name="password", length = 255) private String password; public Employee() { } public Employee(int employeeid, String employeename, String email, String password) { this.employeeid = employeeid; this.employeename = employeename; this.email = email; this.password = password; } //create getters and setters |
EmployeeDTO
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | public class EmployeeDTO { private int employeeid; private String employeename; private String email; private String password; public EmployeeDTO() { } public EmployeeDTO(int employeeid, String employeename, String email, String password) { this.employeeid = employeeid; this.employeename = employeename; this.email = email; this.password = password; } } //create getters and setters |
LoginDTO
1 2 3 4 5 6 7 8 9 10 11 | public class LoginDTO { private String email; private String password; public LoginDTO() { } public LoginDTO(String email, String password) { this.email = email; this.password = password; } //create getters and setters |
EmployeeRepo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | package com.example.Registation.Repo; import com.example.Registation.Entity.Employee; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.config.EnableJpaRepositories; import org.springframework.stereotype.Repository; import java.util.Optional; @EnableJpaRepositories @Repository public interface EmployeeRepo extends JpaRepository<Employee,Integer> { Optional<Employee> findOneByEmailAndPassword(String email, String password); Employee findByEmail(String email); } |
EmployeeService
1 2 3 4 5 6 7 8 9 10 11 12 | package com.example.Registation.Service; import com.example.Registation.Dto.EmployeeDTO; import com.example.Registation.Dto.LoginDTO; import com.example.Registation.payload.response.LoginMesage; public interface EmployeeService { String addEmployee(EmployeeDTO employeeDTO); LoginMesage loginEmployee(LoginDTO loginDTO); } |
EmployeeImpl
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | package com.example.Registation.Service.impl; import com.example.Registation.Dto.EmployeeDTO; import com.example.Registation.Dto.LoginDTO; import com.example.Registation.Entity.Employee; import com.example.Registation.Repo.EmployeeRepo; import com.example.Registation.Service.EmployeeService; import com.example.Registation.payload.response.LoginMesage; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder; import org.springframework.security.crypto.password.PasswordEncoder; import org.springframework.stereotype.Service; import javax.annotation.Resource; import java.util.Optional; @Service public class EmployeeIMPL implements EmployeeService { @Autowired private EmployeeRepo employeeRepo; @Autowired private PasswordEncoder passwordEncoder; @Override public String addEmployee(EmployeeDTO employeeDTO) { Employee employee = new Employee( employeeDTO.getEmployeeid(), employeeDTO.getEmployeename(), employeeDTO.getEmail(), this.passwordEncoder.encode(employeeDTO.getPassword()) ); employeeRepo.save(employee); return employee.getEmployeename(); } EmployeeDTO employeeDTO; @Override public LoginMesage loginEmployee(LoginDTO loginDTO) { String msg = ""; Employee employee1 = employeeRepo.findByEmail(loginDTO.getEmail()); if (employee1 != null) { String password = loginDTO.getPassword(); String encodedPassword = employee1.getPassword(); Boolean isPwdRight = passwordEncoder.matches(password, encodedPassword); if (isPwdRight) { Optional<Employee> employee = employeeRepo.findOneByEmailAndPassword(loginDTO.getEmail(), encodedPassword); if (employee.isPresent()) { return new LoginMesage("Login Success", true); } else { return new LoginMesage("Login Failed", false); } } else { return new LoginMesage("password Not Match", false); } }else { return new LoginMesage("Email not exits", false); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | package com.example.Registation.Dto; public class EmployeeDTO { private int employeeid; private String employeename; private String email; private String password; public EmployeeDTO() { } public EmployeeDTO(int employeeid, String employeename, String email, String password) { this.employeeid = employeeid; this.employeename = employeename; this.email = email; this.password = password; } public int getEmployeeid() { return employeeid; } public void setEmployeeid(int employeeid) { this.employeeid = employeeid; } public String getEmployeename() { return employeename; } public void setEmployeename(String employeename) { this.employeename = employeename; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } @Override public String toString() { return "EmployeeDTO{" + "employeeid=" + employeeid + ", employeename='" + employeename + '\'' + ", email='" + email + '\'' + ", password='" + password + '\'' + '}'; } } |
Create a file SecurityConfig for managing the Security password
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | package com.example.Registation.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder; import org.springframework.security.crypto.password.PasswordEncoder; @Configuration public class SecurityConfig { @Bean public PasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); } } |
Create LoginResponse Page for displaying Messages while testing
LoginResponse
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | public class LoginMesage { String message; Boolean status; public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public Boolean getStatus() { return status; } public void setStatus(Boolean status) { this.status = status; } public LoginMesage(String message, Boolean status) { this.message = message; this.status = status; } } |
Angular
Angular is a front-end application we have already created the folder front end inside the folder open the command prompt and type the commands.
Installing Angular CLI
1 | npm install -g @angular/cli |
After that create the new Project of Angular running by the following command
1 | ng new front-endapp-project |
ng serve |
it will generate the url link to run the angular application.paste the url in to the browser
Now you see the Angular Welcome Page.
After that open the Angular project into VS code editor.
now you can see the following file structure
then you have create the following components by typing the command
1 2 3 4 5 | ng g c login ng g c register ng g c home |
After components has been created you have to visit the bootstrap site and copy the css
file and paste inside the index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>FrondEnd</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> </head> <body> <app-root></app-root> </body> </html> |
After that add module inside app.module.ts
inside the imports section add the FormsModule and HttpClientModule
if the path is not get automatically copy and paste it
import { HttpClientModule } from ‘@angular/common/http’;
1 2 3 4 5 6 | imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpClientModule ] |
add these module into the app.module.ts file then only we will manage the forms and Http requests
register.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div class="container mt-4" > <div class="card"> <h1>Employee Registation</h1> <form> <div class="form-group"> <label>Name</label> <input type="text" [(ngModel)]="employeename" [ngModelOptions]="{standalone: true}" class="form-control" id="name" class="form-control" placeholder="Enter Name"> </div> <div class="form-group"> <label>Email</label> <input type="email" [(ngModel)]="email" [ngModelOptions]="{standalone: true}" class="form-control" id="email" placeholder="Enter Email"> </div> <div class="form-group"> <label>Paaword</label> <input type="password" [(ngModel)]="password" [ngModelOptions]="{standalone: true}" class="form-control" id="password" class="form-control" placeholder="Enter Password"> </div> <button type="submit" class="btn btn-primary" (click)="save()">Register</button> </form> </div> </div> |
register.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | import { HttpClient } from '@angular/common/http'; import { Component } from '@angular/core'; @Component({ selector: 'app-register', templateUrl: './register.component.html', styleUrls: ['./register.component.scss'] }) export class RegisterComponent { employeename: string =""; email: string =""; password: string =""; constructor(private http: HttpClient ) { } save() { let bodyData = { "employeename" : this.employeename, "email" : this.email, "password" : this.password }; this.http.post("http://localhost:8085/api/v1/employee/save",bodyData,{responseType: 'text'}).subscribe((resultData: any)=> { console.log(resultData); alert("Employee Registered Successfully"); }); } } |
login.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="container mt-4" > <div class="card"> <h1>Employee Login</h1> <form> <div class="form-group"> <label>Email</label> <input type="email" [(ngModel)]="email" [ngModelOptions]="{standalone: true}" class="form-control" id="email" placeholder="Enter Email"> </div> <div class="form-group"> <label>Paaword</label> <input type="password" [(ngModel)]="password" [ngModelOptions]="{standalone: true}" class="form-control" id="password" class="form-control" placeholder="Enter Password"> </div> <button type="submit" class="btn btn-primary" (click)="Login()">Login</button> </form> </div> </div> |
login.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import { HttpClient } from '@angular/common/http'; import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.scss'] }) export class LoginComponent { email: string =""; password: string =""; constructor(private router: Router,private http: HttpClient) {} Login() { console.log(this.email); console.log(this.password); let bodyData = { email: this.email, password: this.password, }; this.http.post("http://localhost:8085/api/v1/employee/login", bodyData).subscribe( (resultData: any) => { console.log(resultData); if (resultData.message == "Email not exits") { alert("Email not exits"); } else if(resultData.message == "Login Success") { this.router.navigateByUrl('/home'); } else { alert("Incorrect Email and Password not match"); } }); } } |
app-routing.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | const routes: Routes = [ { path: '', component: LoginComponent }, { path: 'home', component: HomeComponent, }, { path: 'register', component: RegisterComponent, } ]; |
i have attached the video link below. which will do this tutorials step by step.