ReactJSを使用したSprintブートでのSpring Securityの実装

Question

Spring BootとReactJSを使用して、Spring Securityでユーザー名とパスワードの基本的なログイン認証を実装しようとしています。私はいくつかの例をオンラインでやろうとしましたが、ほとんどすべてはJSPに関するものであり、ReactJSに関するものではありません。私はSpring Securityのデフォルトのログインでこれを実行することができますが、ReactJSを使用してカスタムログインページを実行しようとしているときに実行できます。私はそれを行う方法を見つけることができません。どんな助けや指針も高く評価されます。

**login.html** 



var App = React.createClass({ 

    getInitialState: function() { 
      return { 
      username: "", 
      password: "" 
      }; 
     }, 
     _onSubmit: function (event) { 

      event.preventDefault(); 

       var data = { 
        username: this.state.username, 
        password: this.state.password 
       } 

       $.ajax({ 
        headers: { 
         'Accept': 'application/json', 
         'Content-Type': 'application/json' 
        }, 
        type: "POST", 
        url: "/login", 
        data: JSON.stringify(data), 
        success: function(data){ 

        }.bind(this), 
        error:function(data) 
        { 
         alert(data.responseJSON.message); 
        } 
       }); 

     }, 
     _onUserNameChange: function (event) { 
      this.setState({username: event.target.value}); 
     }, 
     _onPasswordChange: function (event) { 
      this.setState({password: event.target.value}); 
     }, 
     render: function() { 
    return (
     <Grommet.App> 
     <Box pad='medium' align='center' > 
      <Box pad={{ vertical: 'medium', horizontal: 'medium', between: 'medium' }} align='center'> 
      </Box> 
      <Box size='large' pad='medium'> 
      <Section align='center' pad='small' separator='top'> 
       <Label margin='none' uppercase={true}>Tool</Label> 
      </Section> 
      </Box> 
      <Form pad='medium'> 
      <FormField label='User Name' error={this.state.usernameError}> 
       <input type='text' value={this.state.username} onChange={this._onUserNameChange} /> 
      </FormField> 
      <FormField label='Password' value={this.state.password} onChange={this._onPasswordChange} error={this.state.passwordError}> 
       <input type='password' /> 
      </FormField> 
      <Footer pad={{ vertical: 'medium' }} direction='column'> 
       <Button label='Login' primary={true} fill={true} onClick={this._onSubmit} type="submit" name="submit" /> 
      </Footer> 
      </Form> 
     </Box> 
     </Grommet.App> 
    ); 
     } 

     }); 

     var element = document.getElementById('content'); 
     ReactDOM.render(React.createElement(App), element); 




**SecurityConfig.java** 


import org.springframework.beans.factory.annotation.Autowired; 
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder; 
import org.springframework.security.config.annotation.web.builders.HttpSecurity; 
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity; 
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter; 

@EnableWebSecurity 
public class SecurityConfig extends WebSecurityConfigurerAdapter{ 

@Override 
public void configure(HttpSecurity httpSecurity) throws Exception{ 
    httpSecurity.authorizeRequests() 
     .antMatchers("/*").hasRole("USER") 
     .and() 
    .formLogin() 
     .loginProcessingUrl("/login.html"); 
} 

@Autowired 
public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception{ 
    auth.inMemoryAuthentication() 
     .withUser("user").password("password").roles("USER"); 

} 

}

Answer 1

問題は、ログイン処理のURLのパスです：あなたは/ログイン URLにReactJSから資格情報を掲示しているが、春のセキュリティの設定であなたが聞いています/login.html。

だけに設定を変更します。私はそれがOKになると思う

.loginProcessingUrl("/login"); 

。 幸運を祈る！