FrontPage > Spring Bootの覚書 > Spring Security

設定

1. 設定用クラスの作成

  • configurationクラスを作成し、
    とりあえずユーザー情報を設定する。

    (例 WebSecurityConfig.java)
    package com.ziqoo.sbSample;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
    import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
    import org.springframework.security.config.annotation.web.servlet.configuration.EnableWebMvcSecurity;
    
    @Configuration
    @EnableWebMvcSecurity
    public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
       @Autowired
       public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
           auth
               .inMemoryAuthentication()
                   .withUser("user1").password("naisho").roles("USER");
       }
    }

2. 確認

  • プロジェクトを実行する
    プロジェクトを右クリック [Run As]->[Spring Boot App]を選択。
  • ブラウザよりプロジェクトのページへアクセスする。(例 /sbSample/)
  • ログイン画面が表示されるので、設定したユーザー、パスワードを入力する。

    ss-login1.png
          ↓
    sb2-1.png

3. 入力画面の修正

ログイン後に表示される入力画面で「ok」ボタンを押すとエラーになる。
Spring SecurityによりCSRF防止対応が成されているためである。

ss-error1.png

なので、入力画面をThymeleafにより作成しなおす。

  • EclipseのProject Explorerから、[Java Resources]->[src/main/resources]->[templates]へ入力画面テンプレートファイルを作成する。

    (例 input.html)
    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>入力画面</title>
    </head>
    <body>
    <form method="post" th:action="@{/sample/result}">
    名前:<input type="text" name="name"/>
    <input type="submit" value="ok"/>
    </form>
    </body>
    </html>
  • コントローラクラスを介さずにこの画面を表示させるため、ViewControllerを追加する。

    (例 MvcConfig.java)
    package com.ziqoo.sbSample;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    @Configuration
    public class MvcConfig extends WebMvcConfigurerAdapter {
       @Override
       public void addViewControllers(ViewControllerRegistry registry) {
           registry.addViewController("/input").setViewName("input");
       }
    }
  • ブラウザより/inputへアクセスし、ログインする。
    入力画面が表示される。

    ss-input.png
  • 入力画面のソースを見るとCSRFトークンが自動的に埋め込まれているのがわかる。

    ss-input-src.png
  • 入力画面から適当に入力し「ok」ボタンを押すと、問題なく出力画面が表示される。

    ss-input2.png
            ↓
    ss-output.png

4. ログインページの作成と設定

独自にログインページを用意する場合。

ログインページの作成

  • 先にスタイルシートを作成する。内容は適当。

    (src/main/resources/static/resources/css/base.css)
    @CHARSET "UTF-8";
    body {
     font: normal 10pt normal "メイリオ",Meiryo;
    }
    input {
     font: normal 10pt normal "メイリオ",Meiryo;
    }
    table {
     border: 1px solid gray;
    }
    th {
     background-color: silver;
     font-weight: normal;
    }
    td {
     background-color: white;
    }
  • ログインページを作成する。

    (src/main/resources/templates/login.html)
    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link th:href="@{/resources/css/base.css}" rel="stylesheet" type="text/css" />
    <title>Login</title>
    </head>
    <body>
     <form th:action="@{/login}" method="post">
       <table>
         <tr>
           <th>ユーザー名</th>
           <td><input type="text" id="username" name="username" /></td>
         </tr>
         <tr>
           <th>パスワード</th>
           <td><input type="password" id="password" name="password" /></td>
         </tr>
         <tr>
           <td colspan="2" style="text-align: right;">
             <input type="submit" value="ログイン"/>
           </td>
         </tr>
       </table>
     </form>
    </body>
    </html>

設定

  • ログインページ用のビューコントローラを追加する。

    (src/main/java/com/ziqoo/sbSample/MvcConfig.java 抜粋)
       @Override
       public void addViewControllers(ViewControllerRegistry registry) {
           registry.addViewController("/login").setViewName("login");
           registry.addViewController("/input").setViewName("input");
       }
  • 作成したログインページをログイン用ページとして指定。
    resourcesフォルダ、ログイン、ログアウトは認証不要に指定する。

    (src/main/java/com/ziqoo/sbSample/WebSecurityConfig.java 抜粋)
       @Override
       protected void configure(HttpSecurity http) throws Exception {
           http
               .authorizeRequests()
                   .antMatchers("/resources/**").permitAll()
                   .anyRequest().authenticated()
                   .and()
               .formLogin()
                   .loginPage("/login")
                   .permitAll()
                   .and()
               .logout()
                   .permitAll();
       }
  • プロジェクトを実行し、ブラウザよりプロジェクトのページへアクセスする。
    と作成したログインページが表示される。

    (localhost:8080/sbSample/input)
    ss-login2.png
            ↓
    ss-input3.jpg

ログインページにメッセージを表示する。

  • ログインに失敗した場合、ログアウトした場合のメッセージを
    それぞれ表示するようにログインページを修正する。

    (src/main/resources/templates/login.html抜粋)
     <form th:action="@{/login}" method="post">
       <div th:if="${param.error}">
         ユーザー名またはパスワードが違います。
       </div>
       <div th:if="${param.logout}">
         ログアウトしました。
       </div>
       <table>
         <tr>
           <th>ユーザー名</th>
           <td><input type="text" id="username" name="username" /></td>
         </tr>
         <tr>
           <th>パスワード</th>
           <td><input type="password" id="password" name="password" /></td>
         </tr>
         <tr>
           <td colspan="2" style="text-align: right;">
             <input type="submit" value="ログイン"/>
           </td>
         </tr>
       </table>
     </form>
  • 実行結果
    ss-login3.png
            ↓
    ss-login4.png
  • 入力画面にログアウトボタンを追加する。

    (src/main/resources/templates/input.html 抜粋)
     <form th:action="@{/logout}" method="post">
       <input type="submit" value="ログアウト" />
     </form>
     <p />
     <form method="post" th:action="@{/sample/result}">
       名前:<input type="text" name="name" /> <input type="submit" value="ok" />
     </form>
  • 実行結果
    ss-input4.png
            ↓
    ss-logout1.png




添付ファイル: filess-logout1.png 385件 [詳細] filess-input4.png 365件 [詳細] filess-login4.png 378件 [詳細] filess-login3.png 394件 [詳細] filess-input3.jpg 407件 [詳細] filess-login2.png 373件 [詳細] filess-error1.png 445件 [詳細] filess-output.png 402件 [詳細] filess-input2.png 427件 [詳細] filess-input-src.png 398件 [詳細] filess-input.png 446件 [詳細] filesb2-1.png 399件 [詳細] filess-login1.png 424件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-02-26 (木) 18:15:23 (2104d)