[Keycloak] 키클락 로그인 페이지로 리다이렉트 하기

➰ 서론

Keycloak을 사용하면 로그인 페이지를 제공해준다. 로그인을 하기 위해서는 키클락에서 제공해주는 로그인 페이지로 접속해야 한다.

로그인 페이지 접속 링크는 다음과 같다.

http://localhost:8080/realms/master/protocol/openid-connect/auth?response_type=code&client_id=a{client_id}&redirect_uri={redirect_uri}&scope=openid&nonce=asb3

하지만 로그인 할 때마다 긴 로그인 url로 접속할 순 없다.

➰ 해결방법

그래서 로그인 api를 만들고 그 api에서 위 주소로 리다이렉트 하는 방법을 선택 했다.

➰ UserController

@CrossOrigin
@RequiredArgsConstructor
@RequestMapping("/user")
@RestController
class UserController {

    @Value("${keycloak.client-url}")
    private String keycloakClientUrl;
    @Value("${keycloak.server-url}")
    private String keycloakServerUrl;

    @GetMapping("/login")
    public void login(Principal principal, HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        response.sendRedirect(keycloakServerUrl
                + "/realms/master/protocol/openid-connect/auth?response_type=code&client_id=admin-client&redirect_uri="
                + keycloakClientUrl + "/auth&scope=openid&nonce=asb3"
        );
    }

}

여기서 redirect_uri는 로그인 성공 후 리다이렉트 될 client 주소를 작성하면 된다.

➰ application.yml

keycloak:
  realm: master
  client-url: http://localhost
  server-url: http://localhost:8080

client는 80 포트를 사용하고 있어, 80포트는 생략이 가능하다.

➰ WebSecurityConfig

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(jsr250Enabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Value("${keycloak.logout-url}")
    private String keycloakLogoutURL;

    @Autowired
    private CustomLogoutSuccessHandler logoutSuccessHandler;

    @Bean
    public LogoutSuccessHandler logoutSuccessHandler() {
        SimpleUrlLogoutSuccessHandler successHandler = new SimpleUrlLogoutSuccessHandler();
        successHandler.setDefaultTargetUrl(keycloakLogoutURL);
        return successHandler;
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable().authorizeRequests()
            .antMatchers(HttpMethod.POST, "/user/join", "/user/**").permitAll()
            .antMatchers(HttpMethod.GET, "/login/**", "/user/**", "/auth", "/").permitAll()
            .anyRequest().authenticated()
            .and()
            .cors()
            .and()
            .oauth2Login()
            .loginPage("/user/login")
            .and()
            .logout()
            .logoutUrl("/user/logout")
            .logoutSuccessHandler(logoutSuccessHandler);
    }

}

그리고 security에서 loginPage("user/login")으로 설정해준다.

➰ 에러

시큐리티 설정에서 loginPage("/login")으로 설정이 되어 있었다.

login이라는 경로가 키클락에서 지정해둔 기본 경로인줄 알고, 그대로 뒀었는데 계속 위와 같은 페이지만 뜨길래 뭐가 문제인줄 몰랐다.

Github 버튼을 누르면 바로 github Oauth 로그인으로 넘어갔다.

➰ 해결

.loginPage("/user/login")

/login-> /user/login으로 수정하니 해결됐다.

➰ 결과화면

위와 같이 설정해주면 이렇게 로그인 화면이 잘 뜨는걸 확인할 수 있다.

보다시피 키클락에서 기본으로 제공해주는 로그인 페이지는 예쁘지 않다. 커스텀 하는 과정도 블로그에 올리도록 하겠다.

➰ 참고

https://www.keycloak.org/documentation