Redditアプリでログインから登録を分離する

投稿日: 2019-10-19 2019-11-05
タグ: REST, Spring

1概要

このチュートリアルでは – RedditがサポートするOAuth2認証プロセスを、よりシンプルなフォームベースのログインに置き換えます。

ログインした後でも、Redditをリンクしてアプリケーションに接続することができます。/case-study-a-reddit-app-with[アプリケーション]メインのログインフローを操作するためにRedditを使用することはしません。

2基本ユーザー登録

まず、古い認証フローを置き換えましょう。

2.1.

User

エンティティ

Userエンティティにいくつか変更を加えます:

username

を一意にし、

password

フィールドを追加します（一時的）。

@Entity
public class User {
    ...

    @Column(nullable = false, unique = true)
    private String username;

    private String password;

    ...
}

2.2. 新しいユーザーを登録する

次に、バックエンドに新しいユーザーを登録する方法を見てみましょう。

@Controller
@RequestMapping(value = "/user")
public class UserController {

    @Autowired
    private UserService service;

    @RequestMapping(value = "/register", method = RequestMethod.POST)
    @ResponseStatus(HttpStatus.OK)
    public void register(
      @RequestParam("username") String username,
      @RequestParam("email") String email,
      @RequestParam("password") String password)
    {
        service.registerNewUser(username, email, password);
    }
}

明らかにこれはユーザーにとっての基本的な作成操作です – 鐘と笛はありません。

これが、実際のサービス層での実装です。

@Service
public class UserService {
    @Autowired
    private UserRepository userRepository;

    @Autowired
    private PreferenceRepository preferenceReopsitory;

    @Autowired
    private PasswordEncoder passwordEncoder;

    @Override
    public void registerNewUser(String username, String email, String password) {
        User existingUser = userRepository.findByUsername(username);
        if (existingUser != null) {
            throw new UsernameAlreadyExistsException("Username already exists");
        }

        User user = new User();
        user.setUsername(username);
        user.setPassword(passwordEncoder.encode(password));
        Preference pref = new Preference();
        pref.setTimezone(TimeZone.getDefault().getID());
        pref.setEmail(email);
        preferenceReopsitory.save(pref);
        user.setPreference(pref);
        userRepository.save(user);
    }
}

2.3. 例外への対処

そしてシンプルな

UserAlreadyExistsException

:

public class UsernameAlreadyExistsException extends RuntimeException {

    public UsernameAlreadyExistsException(String message) {
        super(message);
    }
    public UsernameAlreadyExistsException(String message, Throwable cause) {
        super(message, cause);
    }
}

例外は、アプリケーションのメイン例外ハンドラ内の** で処理されます。

@ExceptionHandler({ UsernameAlreadyExistsException.class })
public ResponseEntity<Object>
  handleUsernameAlreadyExists(RuntimeException ex, WebRequest request) {
    logger.error("400 Status Code", ex);
    String bodyOfResponse = ex.getLocalizedMessage();
    return new
      ResponseEntity<Object>(bodyOfResponse, new HttpHeaders(), HttpStatus.BAD__REQUEST);
}

2.4. 簡単な登録ページ

最後に – シンプルなフロントエンド

signup.html

:

<form>
    <input  id="username"/>
    <input  id="email"/>
    <input type="password" id="password"/>
    <button onclick="register()">Sign up</button>
</form>

<script>
function register(){
    $.post("user/register", {username: $("#username").val(),
      email: $("#email").val(), password: $("#password").val()},
      function (data){
        window.location.href= "./";
    }).fail(function(error){
        alert("Error: "+ error.responseText);
    });
}
</script>

繰り返しになりますが、これは完全に成熟した登録プロセスではありません。完全な登録の流れについては、Baeldungにある

主な登録シリーズ

をチェックしてください。

** 3新しいログインページ

これが私たちの新しいシンプルなログインページです。

<div th:if="${param.containsKey('error')}">
Invalid username or password
</div>
<form method="post" action="j__spring__security__check">
    <input name="username"/>
    <input type="password" name="password"/>
    <button type="submit" >Login</button>
</form>
<a href="signup">Sign up</a>

4セキュリティ設定

それでは、

新しいセキュリティ設定

を見てみましょう。

@Configuration
@EnableWebSecurity
@ComponentScan({ "org.baeldung.security" })
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private MyUserDetailsService userDetailsService;

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userDetailsService).passwordEncoder(encoder());
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            ...
            .formLogin()
            .loginPage("/")
            .loginProcessingUrl("/j__spring__security__check")
            .defaultSuccessUrl("/home")
            .failureUrl("/?error=true")
            .usernameParameter("username")
            .passwordParameter("password")
            ...
    }

    @Bean
    public PasswordEncoder encoder() {
        return new BCryptPasswordEncoder(11);
    }
}

ほとんどの作業は非常に簡単なので、ここでは詳しく説明しません。

そして、これがカスタムの

UserDetailsService

です。

@Service
public class MyUserDetailsService implements UserDetailsService {

    @Autowired
    private UserRepository userRepository;

    @Override
    public UserDetails loadUserByUsername(String username) {
        User user = userRepository.findByUsername(username);
        if (user == null) {
            throw new UsernameNotFoundException(username);
        }
        return new UserPrincipal(user);
    }
}

そして、これが

UserDetails

を実装する私たちのカスタム

Principal

“

UserPrincipal”

です。

public class UserPrincipal implements UserDetails {

    private User user;

    public UserPrincipal(User user) {
        super();
        this.user = user;
    }

    @Override
    public String getUsername() {
        return user.getUsername();
    }

    @Override
    public String getPassword() {
        return user.getPassword();
    }

    @Override
    public Collection<? extends GrantedAuthority> getAuthorities() {
        return Arrays.asList(new SimpleGrantedAuthority("ROLE__USER"));
    }

    @Override
    public boolean isAccountNonExpired() {
        return true;
    }

    @Override
    public boolean isAccountNonLocked() {
        return true;
    }

    @Override
    public boolean isCredentialsNonExpired() {
        return true;
    }

    @Override
    public boolean isEnabled() {
        return true;
    }
}

注:Spring Securityのデフォルトの

User

ではなく、カスタムの

Principal

“

UserPrincipal”

を使用しました。

5 Redditを認証する

認証フローをRedditに依存しなくなったので、ログイン後にユーザーが自分のアカウントをRedditに接続できるようにする必要があります。

まず、古いRedditログインロジックを修正する必要があります。

@RequestMapping("/redditLogin")
public String redditLogin() {
    OAuth2AccessToken token = redditTemplate.getAccessToken();
    service.connectReddit(redditTemplate.needsCaptcha(), token);
    return "redirect:home";
}

そして実際の実装 –

connectReddit（）

メソッド:

@Override
public void connectReddit(boolean needsCaptcha, OAuth2AccessToken token) {
    UserPrincipal userPrincipal = (UserPrincipal)
      SecurityContextHolder.getContext().getAuthentication().getPrincipal();
    User currentUser = userPrincipal.getUser();
    currentUser.setNeedCaptcha(needsCaptcha);
    currentUser.setAccessToken(token.getValue());
    currentUser.setRefreshToken(token.getRefreshToken().getValue());
    currentUser.setTokenExpiration(token.getExpiration());
    userRepository.save(currentUser);
}

ユーザーの

AccessToken

を取得することによって、

redditLogin（）

ロジックを使用して、システム内のユーザーのアカウントを彼のRedditアカウントに接続する方法がわかりました。

フロントエンドに関しては – それは非常に簡単です:

<h1>Welcome,
<a href="profile" sec:authentication="principal.username">Bob</a></small>
</h1>
<a th:if="${#authentication.principal.user.accessToken == null}" href="redditLogin" >
    Connect your Account to Reddit
</a>

また、投稿を送信する前に、ユーザーが自分のアカウントをRedditに接続していることを確認する必要があります。

@RequestMapping("/post")
public String showSubmissionForm(Model model) {
    if (getCurrentUser().getAccessToken() == null) {
        model.addAttribute("msg", "Sorry, You did not connect your account to Reddit yet");
        return "submissionResponse";
    }
    ...
}

6. 結論

小さなredditアプリは確実に前進しています。

Redditによって完全に裏付けられた古い認証フローは、いくつかの問題を引き起こしていました。だから今、

私たちはバックエンドであなたのReddit APIを接続することができる間

クリーンでシンプルなフォームベースのログイン** を持っています。

良いもの。

getdocs

9427

1概要