Archive: 2021

0

Spring Security OAuth2를 이용한 로그인 구현 - OAuth2를 이용한 인증 사용하기

목차 Spring Security OAuth2 - Handler Spring Security OAuth2 - Login 페이지 Customizing 하기 Spring Security OAuth2를 이용한 로그인 구현 - 사용자 정보 가져오기 Spring Security OAuth2를 이용한 로그인 구현 - Spring boot OAuth2 인증 살펴보기 Spring Security OAuth2를 이용한 로그인 구현 - OAuth2를 이용한 인증 사용하기 Google OAuth2 인증 방식 이해하기 OAuth2를 이용한 로그인 구현 이해하기 1. OAuth2를 이용한 인증 사용하기참고 https://www.docs4dev.com/docs/en/spring-security/5.1.2.RELEASE/reference/jc.html#oauth2client Google에 Web Application 등록하기Google의 OAuth2 서비스를 이용하기 위해서 사용할 Web Application을 등록해 Client Id와 Client Secret을 받아야 한다. 구글 클라우드 플랫폼 : https://console.cloud.google.com/ API및 서비스 > OAuth 동의 화면을 클릭

0

Google OAuth2 인증 방식 이해하기

목차 Spring Security OAuth2 - Handler Spring Security OAuth2 - Login 페이지 Customizing 하기 Spring Security OAuth2를 이용한 로그인 구현 - 사용자 정보 가져오기 Spring Security OAuth2를 이용한 로그인 구현 - Spring boot OAuth2 인증 살펴보기 Spring Security OAuth2를 이용한 로그인 구현 - OAuth2를 이용한 인증 사용하기 Google OAuth2 인증 방식 이해하기 OAuth2를 이용한 로그인 구현 이해하기 Google Oauth2 인증 시나리오 살펴보기 Web Server가 Google에 Access Token 을 요청한다. 사용자가 구글 ID와 Password를 이용해 로그인을 한다. Web Server쪽으로 Authorization code 가 반환된다. Authorization code를 이용해 Access Token을 요청 구글에서 Access Token값을 반환한다. Access Token을 이용해 사용자의 profile과 같은 정보들을 가져온다. 스프링에서 기본적으로 제공하는 OAuth2Provider https://docs.aws.amazon.com/ko_kr/cognito/latest/developerguide/amazon-cognito-user-pools-using-tokens-verifying-a-jwt.html Google, Facebook, Github 등을 통해 OAuth2인증하기 위한 기본적인 설정값들이 들어가 있다. authorizationUri 인증을 진행하기 위해 사용하는 URI tokenUri Resource server 로부터 Access token 을 받기 위해 사용하는 URI jwkSetUri Google로 부터 받은 JWT(JSON Web Token) 의 유효성을 확인할 수 있는 Public key(JSON Web Key) 를 받을 수 있는 URI userInfoUri Resource Server (ex. Google) 로부터 사용자 정보를 가져오기 위한 URI userNameAttributeName Resource server 가 제공하는 id값 clientName Resource Server 이름 (client Name을 사용할 때도 있다.) public enum CommonOAuth2Provider { GOOGLE { @Override public Builder getBuilder(String registrationId) { ClientRegistration.Builder builder = getBuilder(registrationId, ClientAuthenticationMethod.BASIC, DEFAULT_REDIRECT_URL); builder.scope("openid", "profile", "email"); builder.authorizationUri("https://accounts.google.com/o/oauth2/v2/auth"); builder.tokenUri("https://www.googleapis.com/oauth2/v4/token"); builder.jwkSetUri("https://www.googleapis.com/oauth2/v3/certs"); builder.issuerUri("https://accounts.google.com"); builder.userInfoUri("https://www.googleapis.com/oauth2/v3/userinfo"); builder.userNameAttributeName(IdTokenClaimNames.SUB); builder.clientName("Google"); return builder; } }, ... private static final String DEFAULT_REDIRECT_URL = "{baseUrl}/{action}/oauth2/code/{registrationId}"; protected final ClientRegistration.Builder getBuilder(String registrationId, ClientAuthenticationMethod method, String redirectUri) { ClientRegistration.Builder builder = ClientRegistration.withRegistrationId(registrationId); builder.clientAuthenticationMethod(method); builder.authorizationGrantType(AuthorizationGrantType.AUTHORIZATION_CODE); builder.redirectUri(redirectUri); return builder; }}

0

OAuth2를 이용한 로그인 구현 이해하기

목차 Spring Security OAuth2 - Handler Spring Security OAuth2 - Login 페이지 Customizing 하기 Spring Security OAuth2를 이용한 로그인 구현 - 사용자 정보 가져오기 Spring Security OAuth2를 이용한 로그인 구현 - Spring boot OAuth2 인증 살펴보기 Spring Security OAuth2를 이용한 로그인 구현 - OAuth2를 이용한 인증 사용하기 Google OAuth2 인증 방식 이해하기 OAuth2를 이용한 로그인 구현 이해하기 OAuth2를 이용한 로그인 구현 이해하기OAuth란? OAuth란 Open Authorization의 약자이며 사용자 인증을 대신해서 해주고 Client에게 Access Token을 발급해 사용자 Resource에 대한 접근 권한(Authorization)을 제공하는 방법이다. OAuth가 등장하기 이전에는 각 사이트 별로 사용자 Id와 Password를 입력해 인증을 하고 정보를 저장하는 방식이였다. 때문에 사용자 입장에서는 본인의 Id와 Password를 각 사이트에 등록해야 한다는 신뢰성 적인 문제와 각 사이트에서는 사용자 정보를 관리하고 책임져야 하는 문제점이 있었다. 해당 문제를 해결하기 위해 등장한 방법이 OAuth 인증 방식이다. OAuth2 사용하기Web Application을 기준으로 OAuth2를 사용하기 위한 방법은 크게 3가지가 있다. Resource Server(Google, Naver 등) 에 Application을 등록 Resource Owner 사용자 인증을 통해 Autorization Code 를 가져오기 Client가 획득한 Autorization Code를 이용해 Access Token 을 발급 받기

0

Spring Security Form Login - 4. 회원가입 페이지 만들기

회원가입을 처리하기 위한 Controller 추가 요청으로 들어온 데이터를 받기 위한 DTO객체 생성 회원가입 page생성하기 회원 가입을 처리하기 위한 Controller 추가/signup으로 들어온 사용자 정보를 DTO객체로 받고 Account객체를 생성한 후 DB에 저장한다. @Controller@RequiredArgsConstructorpublic class SecurityController { private final CustomUserDetailsService customUserDetailsService; private final PasswordEncoder passwordEncoder; @GetMapping("/") public String index(){ return "index"; } @GetMapping("/login") public String login(){ return "login"; } @GetMapping("/logout") public void logout(){ } @GetMapping("/signup") public String signup(@ModelAttribute("signupDto") AccountDto accountDto, Model model){ return "signup"; } @PostMapping("/signup") public String createNewAccount(@ModelAttribute("signupDto") @Validated AccountDto accountDto, Model model){ Account account = Account.builder() .username(accountDto.getUsername()) .email(accountDto.getEmail()) .password(passwordEncoder.encode(accountDto.getPassword())) .role(Role.USER) .build(); customUserDetailsService.saveAccount(account); return "redirect:"; }} User정보를 받기위한 DTO만들기@Datapublic class AccountDto { private String username; private String email; private String password;} 회원가입 template 만들기<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Bootstrap Registration Page with Floating Labels</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow"> <meta name="googlebot" content="noindex, nofollow"> <meta name="viewport" content="width=device-width, initial-scale=1"><!-- <link rel="stylesheet" type="text/css" href="/css/result-light.css">--> <script type="text/javascript" th:src="@{/js/dummy.js}"></script> <script type="text/javascript" th:src="@{/js/jquery.slim.min.js}"></script> <script type="text/javascript" th:src="@{/js/bootstrap.bundle.min.js}"></script> <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/> <link rel="stylesheet" th:href="@{/css/all.css}"/> <link rel="stylesheet" th:href="@{/css/style.css}"/> <link rel="stylesheet" type="text/css" th:href="@{/css/signup.css}"/> <script id="insert"></script></head><body><div class="container"> <div class="row"> <div class="col-lg-10 col-xl-9 mx-auto"> <div class="card card-signin flex-row my-5"> <div class="card-img-left d-none d-md-flex"> <!-- Background image for card set in CSS! --> </div> <div class="card-body"> <h5 class="card-title text-center">Register</h5> <form class="form-signin" th:object="${signupDto}" th:action="@{/signup}" th:method="post"> <div class="form-label-group"> <input th:field="*{username}" type="text" id="inputUserame" class="form-control" placeholder="Username" required autofocus> <label for="inputUserame">Username</label> </div> <div class="form-label-group"> <input th:field="*{email}" type="email" id="inputEmail" class="form-control" placeholder="Email address" required> <label for="inputEmail">Email address</label> </div> <hr> <div class="form-label-group"> <input th:field="*{password}" type="password" id="inputPassword" class="form-control" placeholder="Password" required> <label for="inputPassword">Password</label> </div> <div class="form-label-group"> <input type="password" id="inputConfirmPassword" class="form-control" placeholder="Password" required> <label for="inputConfirmPassword">Confirm password</label> </div> <button class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Register</button> </form> </div> </div> </div> </div></div><script type="text/javascript">//<![CDATA[//]]></script><script> // tell the embed parent frame the height of the content if (window.parent && window.parent.parent) { window.parent.parent.postMessage(["resultsFrame", { height: document.body.getBoundingClientRect().height, slug: "1nu8g6e5" }], "*") } // always overwrite window.name, in case users try to set it manually window.name = "result"</script></body></html> Form에서 기입된 데이터 보내기

0

Spring Security Form Login - 3. 템플릿 만들기

Spring에서 제공하는 Thymeleaf템플릿 엔진을 이용해 로그인 페이지를 구현했다. Form Login Page<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head> <title>Bootstrap Login Page Card with Floating Labels</title> <script type="text/javascript" th:src="@{/js/dummy.js}"></script> <script type="text/javascript" th:src="@{/js/jquery.slim.min.js}"></script> <script type="text/javascript" th:src="@{/js/bootstrap.bundle.min.js}"></script> <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/> <link rel="stylesheet" th:href="@{/css/all.css}"/> <link rel="stylesheet" th:href="@{/css/style.css}"/></head><body><div th:class="container"> <div class="row"> <div class="col-sm-9 col-md-7 col-lg-5 mx-auto"> <div class="card card-signin my-5"> <div class="card-body"> <h5 class="card-title text-center">Sign In</h5> <form class="form-signin" th:action="@{/login}" method="post"> <div class="form-label-group"> <input type="text" th:name="username" class="form-control" placeholder="Email address" required autofocus> <label th:for="username">Email address</label> </div> <div class="form-label-group"> <input type="password" th:name="password" class="form-control" placeholder="Password" required> <label th:for="password">Password</label> </div> <div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1">Remember password</label> </div> <button class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign in</button> </form> </div> </div> </div> </div></div></body></html> Form 로그인을 처리하는 url로 post요청을 보낸다. <form class="form-signin" th:action="@{/login}" method="post"> username과 password를 받는 input태그에서 name속성에 username과 password를 확실히 기입해줘야 Security가 해당 데이터를 얻어올 수 있다. <input type="text" th:name="username" class="form-control" placeholder="Email address" required autofocus>...<input type="password" th:name="password" class="form-control" placeholder="Password" required> 로그인 후 진입 화면<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security"><head> <meta charset="UTF-8"> <title>Title</title></head><body><h1>시작페이지</h1><form action="/logout" th:action="@{/logout}" th:method="post" sec:authorize="isAuthenticated()"> <button type="submit" value="logout">로그 아웃</button></form></body></html>

0

Spring Security Form Login - 2. Security 설정 및 UserDetailsService 정의하기

로그인 로그아웃을 처리를 위한 Controller 생성 Spring Security 설정하기 UserDetailsService 구현하기 로그인 로그아웃을 처리를 위한 Controller/login으로 사용자 로그인 요청을 처리하고 /logout으로 사용자 로그아웃 요청을 처리한다. @Controller@RequiredArgsConstructorpublic class SecurityController { private final CustomUserDetailsService customUserDetailsService; private final PasswordEncoder passwordEncoder; @GetMapping("/") public String index(){ return "index"; } @GetMapping("/login") public String login(){ return "login"; } @GetMapping("/logout") public void logout(){ }} Spring Security 설정하기Spring Security를 설정하고 싶으면 EnableWebSecurity어노테이션과 WebSecurityConfigurerAdapter 클래스를 상속해 method들을 overriding한다. configure(AuthenticationManagerBuilder auth) AuthenticationManager를 설정하기 위해 사용하는 method configure(WebSecurity web) 전역적인 security를 설정할 때 사용하는 method, 보통은 보안 예외처리에 사용한다. configure(HttpSecurity http) request 단위로 보안을 걸때 사용하는 method configure(HttpSecurity http)을 이용해 허가를 하는 경우에는 Spring Filter Chain을 거처야 하지만 configure(WebSecurity web)를 이용하면 Spring Filter Chain을 거치지 않는다. @EnableWebSecurity@RequiredArgsConstructorpublic class SecurityConfig extends WebSecurityConfigurerAdapter { private final CustomUserDetailsService customUserDetailsService; @Override protected void configure(AuthenticationManagerBuilder auth) throws Exception { auth.userDetailsService(customUserDetailsService); } @Override public void configure(WebSecurity web) throws Exception { web .ignoring() .antMatchers("/css/**", "/js/**") .antMatchers("/favicon.ico", "/resources/**", "/error") ; } @Override protected void configure(HttpSecurity http) throws Exception { http. authorizeRequests() .anyRequest().authenticated(); http .formLogin() // Form Login을 이용한 인증 방식을 사용 .loginPage("/login") // Login Page로 redirect할 경로를 적어준다. .defaultSuccessUrl("/", true) // 로그인 성공후 이동할 경로 .permitAll() ; } @Bean public PasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); }}

0

Spring Security Form Login - 1. 기본적인 모델 정의하기

Spring properties 설정하기Spring Security에서 사용하는 기본적인 user정보를 등록한다. jpa를 사용하므로 관련 옵션도 추가해준다. application.ymlspring: security: user: name: user password: 1234 jpa: hibernate: ddl-auto: create-drop properties: hibernate: show_sql: true format_sql: true profiles: include: mysqllogging: level: org.springframework.security: DEBUG application-mysql.ymlspring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/{테이블명}?serverTimezone=UTC&characterEncoding=UTF-8 username: user_id password: user_password jpa: database: mysql database-platform: org.hibernate.dialect.MySQL5InnoDBDialect Entity 생성하기사용자 정보를 저장하기 위한 Account Entity를 만든다. @Entity@NoArgsConstructor@AllArgsConstructor@Getterpublic class Account { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long idx; private String username; @Column(unique = true, nullable = false) private String email; private String password; @Enumerated(EnumType.STRING) private Role role; private String getRoleValue(){ return this.role.getValue(); } @Builder public Account(String username, String email, String password, Role role){ this.username = username; this.email = email; this.password = password; this.role = role; }}