Redditアプリでログインから登録を分離する
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を接続することができる間
クリーンでシンプルなフォームベースのログイン** を持っています。
良いもの。