Angular, Spring security и MYSQL basi c логин - PullRequest
0 голосов
/ 26 февраля 2020

Я пытаюсь сделать простую страницу входа и регистрации. Фронт это сделать Angular бэкэнд в Spring Framework. Пользовательские данные сохраняются в MYSQL БД. Моя проблема в том, что я не знаю, как проверить свои учетные данные в бэкэнде с базой данных. После успешного входа в систему я хотел бы перенаправить на страницу приветствия и сообщение об ошибке печати. Кроме того, я не знаю, правильна ли конечная точка входа в систему. Позвонить / basicauth в angular или / войти в форму?

У меня также есть страница регистрации, которая работает и сохраняет новых пользователей в базе данных.

Моя ошибка console.log

Доступ к XMLHttpRequest по адресу http://localhost: 8080 / basicauth 'от источника' http://localhost: 4200 'заблокирован политикой CORS: Ответ на запрос предполетной проверки не проходит проверку контроля доступа: перенаправление не разрешено для предварительного запроса. login.component.ts: 33 HttpErrorResponse {заголовки: HttpHeaders, status: 0, statusText: «Неизвестная ошибка», URL: «http://localhost: 8080 / basicauth », ok: false,…} zone- evergreen. js: 2952 GET http://localhost: 8080 / basicauth net :: ERR_FAILED

Пользователь. java

@Entity
@Table(name = "user")
public class User{
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private int id;

@Column(name="name")
private String name;

@Column(name="password")
private String password;

@Column(name="role")
private String role;

@Column(name="status")
private boolean status;

public User() {
}

public User(String name, String password) {
    this.name = name;
    this.password = password;
}

public int getId() {
    return id;
}

public void setId(int id) {
    this.id = id;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

public String getPassword() {
    return password;
}

public void setPassword(String password) {
    this.password = password;
}

public String getRole() {
    return role;
}

public void setRole(String role) {
    this.role = role;
}

public boolean getStatus() {
    return status;
}

public void setStatus(boolean status) {
    this.status = status;
}
}

UserController

@CrossOrigin(origins="http://localhost:4200")
@RestController
public class UserController {

@Autowired
private UserService userService;

@GetMapping(path="/basicauth")
public AuthenticationBean helloWorldBean(){
    //throw new RuntimeException("Some Error");
    return new AuthenticationBean("You are authenticated");
}

@PostMapping("/registration")
public User create(@RequestBody Map<String, String> body){
    String username = body.get("username");
    String password = body.get("password");
    return userService.saveUser(new User(username, password));
}
}

MyUserDetailsService

@Service
public class MyUserDetailsService implements UserDetailsService {

@Autowired
private UserService userService;

@Override
@Transactional
public UserDetails loadUserByUsername(String userName) {
    User user = userService.findUserByName(userName);
    List<GrantedAuthority> authorities = getUserAuthority(user.getRole());
    return buildUserForAuthentication(user, authorities);
}

private List<GrantedAuthority> getUserAuthority(String userRoles) {
    Set<GrantedAuthority> roles = new HashSet<>();

    roles.add(new SimpleGrantedAuthority(userRoles));

    return new ArrayList<>(roles);
}

private UserDetails buildUserForAuthentication(User user, List<GrantedAuthority> authorities) {
    return new org.springframework.security.core.userdetails.User(user.getName(), user.getPassword(),
            user.getStatus(), true, true, true, authorities);
}
}

UserService

@Service
public class UserService {

private UserRepository userRepository;
private BCryptPasswordEncoder bCryptPasswordEncoder;

@Autowired
public UserService(UserRepository userRepository,
                   BCryptPasswordEncoder bCryptPasswordEncoder) {
    this.userRepository = userRepository;
    this.bCryptPasswordEncoder = bCryptPasswordEncoder;
}


public User findUserByName(String userName) {
    return userRepository.findByName(userName);
}

public User saveUser(User user) {
    user.setPassword(bCryptPasswordEncoder.encode(user.getPassword()));
    user.setName(user.getName());
    user.setStatus(true);
    user.setRole("USER");
    return userRepository.save(user);
}

}

Webconfig

@Configuration
@EnableWebSecurity
public class WebSecurityConfiguration extends WebSecurityConfigurerAdapter {

@Autowired
private BCryptPasswordEncoder bCryptPasswordEncoder;

@Autowired
private MyUserDetailsService userDetailsService;



@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
    auth
            .userDetailsService(userDetailsService)
            .passwordEncoder(bCryptPasswordEncoder);
}

@Override
protected void configure(HttpSecurity http) throws Exception {

    String loginPage = "/login";
    String logoutPage = "/logout";

    http.
            authorizeRequests()
            .antMatchers("/").permitAll()
            .antMatchers(loginPage).permitAll()
            .antMatchers("/registration").permitAll()
            .antMatchers("/admin/**").hasAuthority("ADMIN")
            .anyRequest()
            .authenticated()
            .and().csrf().disable()
            .formLogin()
            .loginPage(loginPage)
            .loginPage("/")
            .failureUrl("/login?error=true")
            .defaultSuccessUrl("/welcome")
            .usernameParameter("username")
            .passwordParameter("password")
            .and().logout()
            .logoutRequestMatcher(new AntPathRequestMatcher(logoutPage))
            .logoutSuccessUrl(loginPage).and().exceptionHandling();
}

@Override
public void configure(WebSecurity web) throws Exception {
    web
            .ignoring()
            .antMatchers("/resources/**", "/static/**", "/css/**", "/js/**", "/images/**");
}

}

HttpIntercepterBasicAuthService.ts

* 1039 1040 * BasicAuthenticationService.ts
    export const TOKEN = 'token';
    export const AUTHENTICATEDUSER = 'authenticaterUser';

    @Injectable({
     providedIn: 'root'
    })

  export class BasicAuthenticationService {

  constructor(private http: HttpClient) { }

  executeAuthenticationService(username, password) {

    const basicAuthHeaderString = 'Basic ' + window.btoa(username + ':' + password);
    const headers = new HttpHeaders(
      {Authorization: basicAuthHeaderString}
    )
    return this.http.get<AuthenticationBean>(`${API_URL}/basicauth`,
      {headers}).pipe(
      map(data => {
        sessionStorage.setItem(AUTHENTICATEDUSER, username);
        sessionStorage.setItem(TOKEN, basicAuthHeaderString);
        return data;
      })
    );

  }

  getAuthenticatedUser() {
    return sessionStorage.getItem(AUTHENTICATEDUSER);
  }

  getAuthenticatedToken() {
    if (this.getAuthenticatedUser()) {
      return sessionStorage.getItem(TOKEN);
    }
  }

  logout() {
    sessionStorage.removeItem(AUTHENTICATEDUSER);
    sessionStorage.removeItem(TOKEN);
  }

  isLoggedIn() {
    const user = sessionStorage.getItem(AUTHENTICATEDUSER);
    return !(user === null);
  }
}

export class AuthenticationBean{
  constructor(public message: string) { }
}

LoginComponent.ts

export class LoginComponent implements OnInit {

  username = '';
  password = '';
  errorMessage = 'Špatné přihlašovací údaje';
  invalidLogin = false;
  // router

  constructor(private router: Router,
              private basicAuthenticationService: BasicAuthenticationService) { }

  ngOnInit() {
  }

  handleLogin() {
    this.basicAuthenticationService.executeAuthenticationService(this.username, this.password)
      .subscribe(
        data => {
          console.log(data);
          this.router.navigate(['welcome']);
          this.invalidLogin = false;
        },
        error => {
          console.log(error);
          this.invalidLogin = true;
        }
      );
    // redirect welcome page
  }

}

1 Ответ

0 голосов
/ 26 февраля 2020

У вас есть проблема с перенаправлением запроса из приложения Angular на ваш сервер, поскольку ваше приложение пытается получить доступ к серверу из другого домена. Чтобы решить эту проблему, используйте прокси angular: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...