springsecurity.html

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Thymeleaf + Spring Security integration basics - Thymeleaf: java XML/XHTML/HTML5 template engine</title>
    <link rel="stylesheet" type="text/css" media="all" href="css/thymeleaf.css" />
    <link rel="shortcut icon" href="http://www.thymeleaf.org/favicon.ico" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {lang:'en', parsetags:'explicit'}
    </script>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-1276954-9']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    <script type="text/javascript" src="sh/scripts/shCore.js"></script>
    <script type="text/javascript" src="sh/scripts/shBrushXml.js"></script>
    <script type="text/javascript" src="sh/scripts/shBrushJava.js"></script>
    <link href="sh/styles/shCore.css" rel="stylesheet" type="text/css" />
    <link href="sh/styles/shThemeThymeleaf.css" rel="stylesheet" type="text/css" />
  </head>


  <body lang="en" dir="ltr">

  <div id="page">


   <div id="menu">
     <ul>
       <li><a href="index.html" title="Home">Home</a></li>
       <li><a href="features.html" title="Features">Features</a></li>
       <li><a href="download.html" title="Download">Download</a></li>
       <li><a href="documentation.html" title="Documentation">Documentation</a></li>
       <li><a href="ecosystem.html" title="Ecosystem">Ecosystem</a></li>
       <li><a href="http://forum.thymeleaf.org" title="User Forum">User Forum</a></li>
       <li><a href="issuetracking.html" title="Issue Tracking">Issue Tracking</a></li>
     </ul>
   </div>

   <div id="header">
     <a href="index.html" title="Thymeleaf home"><img src="images/thymeleaflogonameverysmall.png" class="logo" alt="Thymeleaf Template Engine"/></a>
   </div>

   <div id="breadcrumb">
      <a href="index.html">thymeleaf</a>
      ::
      <a href="documentation.html">documentation</a>
      ::
      articles
      ::
      <span class="current">thymeleaf + spring security integration basics</span>
   </div>


   <div id="content">


     <h1>Thymeleaf + Spring Security integration basics</h1>

     <p id="author">
       <i>By Jos&eacute; Miguel Samper &lt;jmiguelsamper AT users.sourceforge.net&gt;</i>
     </p>

     <p>
         Have you switched to Thymeleaf but your login and error pages are still using JSP? <br />
         In this article we will see how to configure your Spring application to use Thymeleaf for
         login and error pages.
     </p>

     <h2>Prerequisites</h2>

     <p>
         We asume you are familiar with Thymeleaf and Spring Security, and you have a working application using
         these technologies.
         If you don't know Spring Security, you could be interested on reading the
         <a href="http://static.springsource.org/spring-security/site/reference.html">Spring Security Documentation</a>.
     </p>

     <h2>Login pages</h2>

     <p>
         With Spring security you could specify any URL to act as a login page, so we simply set URLs for
         login page and login error page as <b>&lt;form-login&gt;</b> element attributes into the Spring-Security
         configuration file (usually <b>applicationContext-security.xml</b>):
     </p>

    <script type="syntaxhighlighter" class="brush:html"><![CDATA[
        <http auto-config="true">
            <form-login login-page="/login.html" authentication-failure-url="/login-error.html" />
            <logout />
            ...
        </http>
    ]]></script>

    <p>
        Now we have to match these pages inside a Spring Controller:
    </p>

    <script type="syntaxhighlighter" class="brush:java"><![CDATA[
        @Controller
        public class MainController {

            ...

            // Login form
            @RequestMapping("/login.html")
            public String login() {
                return "login.html";
            }

            // Login form with error
            @RequestMapping("/login-error.html")
            public String loginError(Model model) {
                model.addAttribute("loginError", true);
                return "login.html";
            }

        }
    ]]></script>


    <p>
        Note that we are using the same template <b>login.html</b> for both pages, but when there is an error,
        we set a boolean attribute into the model.
    </p>

    <p>
        Our <b>login.html</b> template is as follows:
    </p>

    <script type="syntaxhighlighter" class="brush:html"><![CDATA[
        <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
            <head>
                <title>Login page</title>
            </head>
            <body>
                <h1>Login page</h1>
                <p th:if="${loginError}">Wrong user or password</p>
                <form th:action="@{/j_spring_security_check}" method="post">
                    <label for="j_username">Username</label>:
                    <input type="text" id="j_username" name="j_username" /> <br />
                    <label for="j_password">Password</label>:
                    <input type="password" id="j_password" name="j_password" /> <br />
                    <input type="submit" value="Log in" />
                </form>
            </body>
        </html>
    ]]></script>


    <h2>Error page</h2>

    <p>
        We also can configure a Thymeleaf error page. In this case Spring Security is not involved at all, we
        should simply modify our <b>web.xml</b> adding error <b>&lt;error-page&gt;</b> elements like:
    </p>

    <script type="syntaxhighlighter" class="brush:xml"><![CDATA[
        ...
        <error-page>
            <exception-type>java.lang.Throwable</exception-type>
            <location>/error.html</location>
        </error-page>
        <error-page>
            <error-code>500</error-code>
            <location>/error.html</location>
        </error-page>
        ...
    ]]></script>


    <p>
        Then, we have to map the <b>/error.html</b> in our Spring Controller:
    </p>

    <script type="syntaxhighlighter" class="brush:java"><![CDATA[
        @Controller
        public class HomeController {

            ...

            // Error page
            @RequestMapping("/error.html")
            public String error(HttpServletRequest request, Model model) {
                model.addAttribute("errorCode", request.getAttribute("javax.servlet.error.status_code"));
                Throwable throwable = (Throwable) request.getAttribute("javax.servlet.error.exception");
                String errorMessage = null;
                if (throwable != null) {
                    errorMessage = throwable.getMessage();
                }
                model.addAttribute("errorMessage", errorMessage.toString());
                return "error.html";
            }

        }
    ]]></script>


    <p>
        Note that we store error code and error message into the model to show some information in the error page.
    </p>

    <p>
        The <b>error.html</b> template could be like:
    </p>

    <script type="syntaxhighlighter" class="brush:html"><![CDATA[
        <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
            <head>
                <title>Error page</title>
            </head>
            <body>
                <h1 th:text="${errorCode}">500</h1>
                <p th:text="${errorMessage}">java.lang.NullPointerException</p>
            </body>
        </html>
    ]]></script>

<h2>Spring security dialect</h2>

<p>
    The <a href="https://github.com/thymeleaf/thymeleaf-extras-springsecurity3">Spring Security 3 integration module</a>
    is a Thymeleaf dialect equivalent to <a href="http://static.springsource.org/spring-security/site/docs/3.1.x/reference/taglibs.html">Spring security taglib</a>.
</p>

<p>
    We use this dialect in the example in order to print the logged user credentials and to
    show different content to different roles.
</p>

<p>
    The attribute <b>sec:authorize</b> renders its content when the attribute expression
    is evaluated to <b>true</b>:
</p>

<script type="syntaxhighlighter" class="brush:html"><![CDATA[
    <div sec:authorize="hasRole('ROLE_ADMIN')">
        This content is only shown to administrators.
    </div>
    <div sec:authorize="hasRole('ROLE_USER')">
        This content is only shown to users.
    </div>
]]></script>

<p>
    The attribute <b>sec:authentication</b> is used to print logged user name and roles:
</p>

<script type="syntaxhighlighter" class="brush:html"><![CDATA[
    Logged user: <span sec:authentication="name">Bob</span>
    Roles: <span sec:authentication="principal.authorities">[ROLE_USER, ROLE_ADMIN]</span>
]]></script>

<h2>Download example</h2>

<p>
    The full working example code used in this article is available for download at
    the <a href="documentation.html">project's documentation page</a>.
</p>


   </div>


   <div id="footer">
     <div id="googleplus">
       <div id="plusone-div" class="plusone"></div>
       <script type="text/javascript">
           gapi.plusone.render('plusone-div',{"size": "small", "count": "true", "href": "http://www.thymeleaf.org"});
       </script>
     </div>
     <div id="twitter">
       <a href="http://twitter.com/thymeleaf" class="twitter-follow-button" data-show-count="false">Follow @thymeleaf</a>
       <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
     </div>
     <div id="copy">
       Copyright &copy; The <a href="team.html">THYMELEAF Team</a>. See <a href="documentation.html">applicable licenses</a>.
     </div>
   </div>

  </div>

  <script type="text/javascript">
      SyntaxHighlighter.all();
  </script>

  </body>

</html>