Java初心者で右も左もわからないJavaのspring bootでOAuth認証を使ったログインを実装しようと思ったが調べても調べても良い文献がなく(初心者なので良い文献でも理解不能で実装できない...)困ったのでここに簡単な実装を記すことにする。
今回僕はgradleを使っていたのでそこで使っていたものをココに記載する
implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.boot:spring-boot-devtools'
//多分今回の認証で特に必要なのは下記の２つ
implementation 'org.springframework.social:spring-social-github:1.0.0.M4'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
compileOnly 'org.projectlombok:lombok:1.18.2'
runtime 'mysql:mysql-connector-java'
runtime 'org.springframework.boot:spring-boot-devtools'
testCompile 'org.springframework.boot:spring-boot-starter-test'
testCompile group: 'junit', name: 'junit', version: '4.12'
認証ようにアプリを制作してclientIdとSecretIdを取得します。 この手順はSpringにかかわらずいろんなところに記述してあるので割愛しますー
https://techium.hatenablog.com/entry/2016/04/11/090000
↑
※一応参考になりそうな記事を張っておく
callbackURLは「http://localhost:3030/callback」 みたいな形で登録しておきましょう！（http://localhost:3030の部分は適宜読み替えてください）
取得したgithubのclientIdとSecretIdはapplication.propertiesに下記のように記述します。
// ココは設定しなくても良い（3030にすると調整する必要が無い）
server.port = 3030
//githubの設定内容
github.client=ココに取得したclientId
github.secret=ココに取得したsecretId
github.callbackUrl=http://localhost:3030/callback
callbackUrlはgithubで登録したものと同じものを設定
今回はファイル多くなると面倒でよくわからなくなるので１つコントローラーを作成して全てそこで完結させる。 （もうほんとにJavaはすぐファイルを作って分割するけどあの思想がどうも理解できない...by Java嫌いマンより）
package com.example.demo.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.social.github.api.GitHub;
import org.springframework.social.github.api.impl.GitHubTemplate;
import org.springframework.social.github.connect.GitHubConnectionFactory;
import org.springframework.social.oauth2.GrantType;
import org.springframework.social.oauth2.OAuth2Operations;
import org.springframework.social.oauth2.OAuth2Parameters;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpSession;
@Controller
public class GithubController {
private static final String TOKEN = "token";
/**
* githubの設定
*/
@Value("${github.client}")
private String client;
@Value("${github.secret}")
private String secret;
@Value("${github.callbackUrl}")
private String callbackUrl;
private final HttpSession httpSession;
@Autowired
public GithubController(HttpSession httpSession) {
this.httpSession = httpSession;
}
/**
* トップページ
* @return
*/
@GetMapping("/")
public String login() {
return "index";
}
/**
* ログインアクション
* @return
*/
@GetMapping("/login")
public String github() {
return "redirect:" + operations().buildAuthorizeUrl(GrantType.AUTHORIZATION_CODE, new OAuth2Parameters());
}
/**
* githubからcallback時のアクション
* @param code
* @return
*/
@GetMapping("/callback")
public String githubCallback(String code) {
String token = operations().exchangeForAccess(code, callbackUrl, null).getAccessToken();
httpSession.setAttribute(TOKEN, token);
return "redirect:/profile";
}
/**
* 認証後にユーザー情報を取得するアクション
* @param mav
* @return
*/
@GetMapping("/profile")
public ModelAndView profile(ModelAndView mav) {
Object userInfo = httpSession.getAttribute(TOKEN);
if (userInfo != null){
mav.setViewName("profile");
GitHub gitHub = new GitHubTemplate(userInfo.toString());
String userName = gitHub.userOperations().getUserProfile().getUsername();
Long userId = gitHub.userOperations().getUserProfile().getId();
mav.addObject("userName",userName);
mav.addObject("userId",userId);
}else{
mav.setViewName("error/401");
}
return mav;
}
/**
* 認証後にユーザー情報を取得するアクション
* @return
*/
@GetMapping("/logout")
public String logout() {
httpSession.removeAttribute(TOKEN);
return "redirect:/";
}
/**
* githubの認証のコア機能
* @return
*/
private OAuth2Operations operations() {
GitHubConnectionFactory gitHubConnectionFactory = new GitHubConnectionFactory(client, secret);
OAuth2Operations operations = gitHubConnectionFactory.getOAuthOperations();
return operations;
}
}
これで必要な処理の準備は完了したので、あとは必要な画面を制作して完了です。
今回必要になる画面は
index.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="container" style="text-align: center;">
<h1>ログインページ</h1>
<button type="button" class="btn btn-dark" style="margin-top: 100px">
<a href="/login">Github</a>
</button>
</div>
</body>
</html>
profile.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
rel="stylesheet">
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<h1>プロフィールページ</h1>
<table class="table">
<tbody>
<tr>
<td>ユーザー名</td>
<td th:text="${userName}"></td>
</tr>
<tr>
<td>メールアドレス</td>
<td><img th:src="'https://avatars2.githubusercontent.com/u/'+${userId}"></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-danger">
<a href="/logout">logout</a>
</button>
</div>
</body>
</html>
error/401.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="container" style="text-align: center;">
<h1>401 Unauthorized</h1>
</div>
</body>
</html>
error.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="container" style="text-align: center;">
<h1>500 Internal Server Error</h1>
</div>
</body>
</html>