Reactを使用したSpringSecurityログインページ

投稿日: 2019-10-18 2022-11-10
タグ: Authentication, React, Spring Security

1. 概要

React は、Facebookによって構築されたコンポーネントベースのJavaScriptライブラリです。 Reactを使用すると、複雑なWebアプリケーションを簡単に構築できます。この記事では、SpringセキュリティをReactログインページと連携させます。

前の例の既存のSpringセキュリティ構成を利用します。したがって、Springセキュリティを使用したフォームログインの作成に関する以前の記事に基づいて構築します。

2. Reactを設定する

まず、コマンドラインツールcreate-react-appを使用して、コマンド「create-react-appreact」を実行してアプリケーションを作成しましょう。

react /package.jsonには次のような構成があります。

{
    "name": "react",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "react": "^16.4.1",
        "react-dom": "^16.4.1",
        "react-scripts": "1.1.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
    }
}

次に、 frontend-maven-pluginを使用して、Mavenを使用したReactプロジェクトの構築を支援します：

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.6</version>
    <configuration>
        <nodeVersion>v8.11.3</nodeVersion>
        <npmVersion>6.1.0</npmVersion>
        <workingDirectory>src/main/webapp/WEB-INF/view/react</workingDirectory>
    </configuration>
    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
        </execution>
        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
        </execution>
        <execution>
            <id>npm run build</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>run build</arguments>
            </configuration>
        </execution>
    </executions>
</plugin>

プラグインの最新バージョンはここにあります。

mvn compile を実行すると、このプラグインはnodeとnpmをダウンロードし、すべてのノードモジュールの依存関係をインストールして、reactプロジェクトをビルドします。

ここで説明する必要のある構成プロパティがいくつかあります。プラグインがダウンロードするバージョンを認識できるように、nodeとnpmのバージョンを指定しました。

ReactログインページはSpringで静的ページとして機能するため、「 src / main / webapp / WEB-INF / view /react」をnpmとして使用します。 ]の作業ディレクトリ。

3. Springセキュリティ構成

Reactコンポーネントに飛び込む前に、Reactアプリの静的リソースを提供するようにSpring構成を更新します。

@EnableWebMvc
@Configuration
public class MvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(
      ResourceHandlerRegistry registry) {
 
        registry.addResourceHandler("/static/**")
          .addResourceLocations("/WEB-INF/view/react/build/static/");
        registry.addResourceHandler("/*.js")
          .addResourceLocations("/WEB-INF/view/react/build/");
        registry.addResourceHandler("/*.json")
          .addResourceLocations("/WEB-INF/view/react/build/");
        registry.addResourceHandler("/*.ico")
          .addResourceLocations("/WEB-INF/view/react/build/");
        registry.addResourceHandler("/index.html")
          .addResourceLocations("/WEB-INF/view/react/build/index.html");
    }
}

ログインページ「index.html」を動的に提供されるJSPではなく静的リソースとして追加することに注意してください。

次に、これらの静的リソースへのアクセスを許可するようにSpringSecurity構成を更新します。

以前のフォームログインの記事で行ったように“ login.jsp” を使用する代わりに、ここではログインとして“ index.html”を使用します。 ページ：

@Configuration
@EnableWebSecurity
@Profile("!https")
public class SecSecurityConfig 
  extends WebSecurityConfigurerAdapter {

    //...

    @Override
    protected void configure(final HttpSecurity http) 
      throws Exception {
        http.csrf().disable().authorizeRequests()
          //...
          .antMatchers(
            HttpMethod.GET,
            "/index*", "/static/**", "/*.js", "/*.json", "/*.ico")
            .permitAll()
          .anyRequest().authenticated()
          .and()
          .formLogin().loginPage("/index.html")
          .loginProcessingUrl("/perform_login")
          .defaultSuccessUrl("/homepage.html",true)
          .failureUrl("/index.html?error=true")
          //...
    }
}

上記のスニペットからわかるように、フォームデータを「 /form_login」に投稿すると、クレデンシャルが正常に一致した場合、Springは「/homepage.html」にリダイレクトします。それ以外の場合は、/index.html?error=true」。

4. コンポーネントを反応させる

それでは、Reactで手を汚しましょう。コンポーネントを使用してフォームログインを構築および管理します。

ES6（ECMAScript 2015）構文を使用してアプリケーションを構築することに注意してください。

4.1. 入力

react / src /Input.jsのログインフォームの要素をサポートするInputコンポーネントから始めましょう。

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Input extends Component {
    constructor(props){
        super(props)
        this.state = {
            value: props.value? props.value : '',
            className: props.className? props.className : '',
            error: false
        }
    }

    //...

    render () {
        const {handleError, ...opts} = this.props
        this.handleError = handleError
        return (
          <input {...opts} value={this.state.value}
            onChange={this.inputChange} className={this.state.className} /> 
        )
    }
}

Input.propTypes = {
  name: PropTypes.string,
  placeholder: PropTypes.string,
  type: PropTypes.string,
  className: PropTypes.string,
  value: PropTypes.string,
  handleError: PropTypes.func
}

export default Input

上記のように、要素をReact制御コンポーネントにラップして、その状態を管理し、フィールド検証を実行できるようにします。

Reactは、PropTypesを使用して型を検証する方法を提供します。具体的には、 Input.propTypes ={…}を使用して、ユーザーから渡されたプロパティのタイプを検証します。

PropType検証は開発でのみ機能することに注意してください。 PropType 検証は、コンポーネントに関して行っているすべての仮定が満たされていることを確認することです。

プロダクションでのランダムな一時的な中断に驚かされるよりも、それを持っている方が良いです。

4.2. 形

次に、ログインフォームのベースとなるInputコンポーネントの複数のインスタンスを組み合わせた汎用フォームコンポーネントをファイルForm.jsに作成します。

Form コンポーネントでは、HTML 要素の属性を取得し、それらからInputコンポーネントを作成します。

次に、 Input コンポーネントと検証エラーメッセージがForm：に挿入されます。

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Input from './Input'

class Form extends Component {

    //...

    render() {
        const inputs = this.props.inputs.map(
          ({name, placeholder, type, value, className}, index) => (
            <Input key={index} name={name} placeholder={placeholder} type={type} value={value}
              className={type==='submit'? className : ''} handleError={this.handleError} />
          )
        )
        const errors = this.renderError()
        return (
            <form {...this.props} onSubmit={this.handleSubmit} ref={fm => {this.form=fm}} >
              {inputs}
              {errors}
            </form>
        )
    }
}

Form.propTypes = {
  name: PropTypes.string,
  action: PropTypes.string,
  method: PropTypes.string,
  inputs: PropTypes.array,
  error: PropTypes.string
}

export default Form

次に、フィールド検証エラーとログインエラーを管理する方法を見てみましょう。

class Form extends Component {

    constructor(props) {
        super(props)
        if(props.error) {
            this.state = {
              failure: 'wrong username or password!',
              errcount: 0
            }
        } else {
            this.state = { errcount: 0 }
        }
    }

    handleError = (field, errmsg) => {
        if(!field) return

        if(errmsg) {
            this.setState((prevState) => ({
                failure: '',
                errcount: prevState.errcount + 1, 
                errmsgs: {...prevState.errmsgs, [field]: errmsg}
            }))
        } else {
            this.setState((prevState) => ({
                failure: '',
                errcount: prevState.errcount===1? 0 : prevState.errcount-1,
                errmsgs: {...prevState.errmsgs, [field]: ''}
            }))
        }
    }

    renderError = () => {
        if(this.state.errcount || this.state.failure) {
            const errmsg = this.state.failure 
              || Object.values(this.state.errmsgs).find(v=>v)
            return <div className="error">{errmsg}</div>
        }
    }

    //...

}

このスニペットでは、フォームのエラー状態を管理するためにhandleError関数を定義します。 Inputフィールドの検証にも使用したことを思い出してください。 実際には、handleError（）はrender（）関数のコールバックとして入力コンポーネントに渡されます。

renderError（）を使用して、エラーメッセージ要素を作成します。 Formのコンストラクターはerrorプロパティを消費することに注意してください。このプロパティは、ログインアクションが失敗したかどうかを示します。

次に、フォーム送信ハンドラーがあります。

class Form extends Component {

    //...

    handleSubmit = (event) => {
        event.preventDefault()
        if(!this.state.errcount) {
            const data = new FormData(this.form)
            fetch(this.form.action, {
              method: this.form.method,
              body: new URLSearchParams(data)
            })
            .then(v => {
                if(v.redirected) window.location = v.url
            })
            .catch(e => console.warn(e))
        }
    }
}

すべてのフォームフィールドをFormDataにラップし、 fetchAPIを使用してサーバーに送信します。

ログインフォームにはsuccessUrlとfailureUrlが付属していることを忘れないでください。つまり、リクエストが成功したかどうかに関係なく、応答にはリダイレクトが必要になります。

そのため、応答コールバックでリダイレクトを処理する必要があります。

4.3. フォームレンダリング

必要なすべてのコンポーネントをセットアップしたので、引き続きそれらをDOMに配置できます。基本的なHTML構造は次のとおりです（ react / public / index.html の下にあります）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... -->
  </head>
  <body>

    <div id="root">
      <div id="container"></div>
    </div>

  </body>
</html>

最後に、フォームを react / src /index.jsのID「container」で

にレンダリングします。

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import Form from './Form'

const inputs = [{
  name: "username",
  placeholder: "username",
  type: "text"
},{
  name: "password",
  placeholder: "password",
  type: "password"
},{
  type: "submit",
  value: "Submit",
  className: "btn" 
}]

const props = {
  name: 'loginForm',
  method: 'POST',
  action: '/perform_login',
  inputs: inputs
}

const params = new URLSearchParams(window.location.search)

ReactDOM.render(
  <Form {...props} error={params.get('error')} />,
  document.getElementById('container'))

そのため、フォームにはusernameとpasswordの2つの入力フィールドと、送信ボタンが含まれています。

ここでは、追加のerror属性をFormコンポーネントに渡します。これは、失敗URLにリダイレクトした後のログインエラーを処理するためです： /index.html?error=true [X185X ]。

これで、Reactを使用したSpringセキュリティログインアプリケーションの構築が完了しました。最後に行う必要があるのは、 mvncompileを実行することです。

プロセス中、MavenプラグインはReactアプリケーションのビルドを支援し、ビルド結果を src / main / webapp / WEB-INF / view / react /buildに収集します。

5. 結論

この記事では、Reactログインアプリを構築し、それをSpringセキュリティバックエンドと相互作用させる方法について説明しました。より複雑なアプリケーションには、 ReactRouterまたはReduxを使用した状態遷移とルーティングが含まれますが、それはこの記事の範囲を超えています。

いつものように、完全な実装はGitHubのにあります。ローカルで実行するには、プロジェクトのルートフォルダーで mvn jetty：run を実行すると、 http：// localhost：8080のReactログインページにアクセスできます。

getdocs

13036