[Spring Security] Thymeleaf Integration

[Spring Security] Thymeleaf Integration - Spring Boot (9)

Spring/Security
2020. 9. 8.

이번 글에서는 Thymeleaf와 Spring Security를 Integeration하는 방법에 대해 알아보도록 하겠습니다.

1. Consider Security & View

이번글에서는 이전글에서 Thymeleaf로 작성한 page에 spring security를 integration 해보도록 하겠습니다.

실제 서비스되는 어플리케이션에서는 다음과 같이 security를 고려한 view를 작성할 수 있습니다.

• 로그인/비로그인 사용자 별로 show/hide 할 content를 구분합니다.

• ROLE/Permission 별로 show/hide 할 content를 구분합니다.

• 로그인한 사용자의 이름/permissions을 display합니다.

2. Thymeleaf Integeration

위와 같은 기능은 Thymeleaf를 사용하면 손쉽게 적용할 수 있습니다.

2-1) add dependency

먼저 dependency에 "thymeleaf-extras-springsecurity5"를 추가합니다.

build.gradle

implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5'

2-2) add name space

다음으로 spring security를 integration할 Thymeleaf view에 아래와 같이 xml name space를 추가합니다.

저는 화면 상단 Header에 아래와 같이 추가했습니다.

fragements.html

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

이제 모든 설정이 완료되었습니다. 차례대로 하나씩 적용해보도록 하겠습니다.

3. Login/Logout

먼저 Login/Logout입니다.

3-1) setting

사용방법은 다음과 같습니다.

<form class="form-inline my-2 my-lg-0" form-method="post" th:action="@{/logout}">
    <button sec:authorize="isAuthenticated()" class="btn btn-outline-danger my-2 my-sm-0 btn-sm" type="submit">Logout</button>
    <button sec:authorize="isAnonymous()" th:href="@{/login}" class="btn btn-outline-info my-2 my-sm-0 btn-sm" type="submit">Login</button>
</form>

• Thymeleaf에서 Spring Security를 사용하기위해 "sec: " 함수를 사용합니다.

• isAuthenticated( ) : 로그인한 사용자에게만 보입니다.

• isAnonymous( ) : 로그인하지 않은 사용자에게만 보입니다.

3-2) test

이제 로그인하지 않은 사용자는 위와 같이 Login 버튼만 보이게되며

로그인한 사용자는 Logout 버튼만 보이게 됩니다.

4. Menu Tab

이번에는 사용자의 권한별로 Tab을 show/hide 해보도록 하겠습니다.

4-1) setting

사용법은 다음과 같습니다.

<li class="nav-item">
    <a class="nav-link" href="#" th:href="@{~/index}"><i class="fa fa-home"></i>Home</a>
</li>
<li sec:authorize="isAuthenticated()" class="nav-item">
    <a class="nav-link" href="#" th:href="@{~/profile/index}">Profile</a>
</li>
<li sec:authorize="hasRole('ROLE_ADMIN')" class="nav-item">
    <a class="nav-link" href="#" th:href="@{~/admin/index}">Admin</a>
</li>
<li sec:authorize="hasAnyRole('ROLE_ADMIN', 'ROLE_MANAGER')" class="nav-item">
    <a class="nav-link" href="#" th:href="@{~/management/index}">Management</a>
</li>

• index는 모든 사용자에게 show 합니다.

• profile은 로그인한 사용자에게만 show 합니다.

• hasRole('ROLE_ADMIN') : admin은 ADMIN 권한을 가진 사용자에게만 show 합니다.

• hasAnyRole('ROLE_ADMIN','ROLE_MANAGER') : manager는 ADMIN이나 MANAGER 권한을 가진 사용자에게만 show 합니다.

4-2) test

이제 로그인하지 않은 사용자에게는 Home 탭만 보이게 됩니다.

admin으로 로그인할 경우에만 모든 탭을 확인할 수 있습니다.

5. Display User Info

마지막으로 로그인한 사용자의 User Info를 display 해보겠습니다.

5-1) setting

사용법은 다음과 같습니다.

profile page

<table>
    <tr>
        <td>Username</td>
        <td><span sec:authentication="name"></span></td>
    </tr>
    <tr>
        <td>Authorities</td>
        <td><span sec:authentication="principal.authorities"></span></td>
    </tr>
</table>

• "sec:authentication"은 로그인한 사용자만 사용할 수 있습니다. "sec:authorize"와 달리 만약 로그인하지 않은 사용자가 접근할 경우 에러가 발생합니다.

• name은 User의 username을 return 합니다.

• principal.authorities는 User의 전체 authorities를 return 합니다.

• principal 객체를 사용하면 authorities 이외의 다른 User 정보도 사용할 수 있습니다.

5-2) test

이제 로그인후 사용자정보 페이지에는 위와 같이 User의 name와 authorities가 display 됩니다.

위와 같이 Thymeleaf에서 Spring Security를 사용하면 손쉽게 사용자별로 화면구성을 달리할 수 있습니다. 👏👏👏

참고 자료 : https://www.youtube.com/playlist?list=PLVApX3evDwJ1d0lKKHssPQvzv2Ao3e__Q

[Spring Security] Google Login with Spring Security & JWT (1) (0)	2020.09.08
[Spring Security] JWT Security - Spring Boot (10) (0)	2020.09.08
[Spring Security] Customize Form Control Names - Spring Boot (8) (0)	2020.09.08
[Spring Security] Form Authentication - Spring Boot (7) (0)	2020.09.08
[Spring Security] Database Authentication - Spring Boot (6) (0)	2020.09.08

바보개발