でソーシャルログインを実装する
Dec 18, 2019
Ryusuke Tanaka
Payment Solution Development Group.
Open Commerce Service Development Section.
EC Incubation Development Department.
Rakuten, Inc.

2
自己紹介
田中 竜介
• 所属：楽天株式会社 ECイン
キューベーション開発部
（ECID）
楽天ペイ（オンライン決済）の
開発業務を担当
• 趣味：スキー、自転車

3
担当サービス紹介：楽天ペイ（オンライン決済）
[楽天ペイ（オンライン決済）・2019/12/03・https://checkout.rakuten.co.jp/]
特徴
• 楽天ID でネット決済が可
能
• 楽天ポイントが貯まる、
使える

4
担当サービス紹介：楽天ペイ（オンライン決済）
分類 技術
言語 Java 11
フレームワーク • Spring Boot
• Spring Security
• Spring Session
• MyBatis
• etc..
インフラ • Azure
• Kubernetes（AKS Managed Cluster）
• Docker
採用技術

5
セッションのAgenda に入る前に、
大切なおしらせです

6
[Spring Social End of Life Announcement ・2019/12/03・https://spring.io/blog/2018/07/03/spring-social-end-of-life-announcement]

7
[Spring Social End of Life Announcement ・2019/12/03・https://spring.io/blog/2018/07/03/spring-social-end-of-life-announcement]
！！！

8
まとめ
Spring Social はEOL を迎えてしまったプロジェクトです。

9
しかし、このままEOL のライブラリを紹介するわけには。。。

10
[Spring Social End of Life Announcement ・2019/12/03・https://spring.io/blog/2018/07/03/spring-social-end-of-life-announcement]

11
セッションのテーマ
Spring Security
OAuth2
Spring Social
Spring Social の代わりに、
OAuth 2.0 のClient に対応したSpring Security OAuth2 をご紹介します。

12
気を取り直して
セッションのAgendaです

13
• ソーシャルログインとは
• デモ
• OAuth 2.0 / Open ID Connect とは
• デモソースコード / Spring Security OAuth2 解説
• 最後に

14
ソーシャルログインとは
[ENOTECA online ログイン・2019/12/03・https://www.enoteca.co.jp/auth/login?banner=hd]
[【楽天】ログイン・2019/12/06・https://grp02.id.rakuten.co.jp/rms/nid/login]
メリット
エンドユーザは自身のSNSアカウントでログインすることができる。
-> ユーザ登録の手間を省きコンバージョン率を改善

15
• ソーシャルログインとは
• -> デモ
• OAuth 2.0 / Open ID Connect とは
• デモソースコード / Spring Security OAuth2 解説
• 最後に

16
デモ：概要
ソーシャルログインが出来る掲示板
• エンドユーザは、自身のSNS アカウントでデモアプリケーションにログイン
ができる。SNS アカウントはFacebookとGoogleを選択できる。
• エンドユーザは、ログイン後、記事の投稿と閲覧ができる。
• デモアプリケーションは、SNS アカウントでログインしたエンドユーザの情
報を、選択されたSNS から取得ができる。

17
デモソースコード
https://github.com/jack-berkut/spring-security-oauth-demo

18
• ソーシャルログインとは
• デモ
• -> OAuth 2.0 / Open ID Connect とは
• デモソースコード / Spring Security OAuth2 解説
• 最後に

19
とは
背景
1. 近年、様々なサービスが公開されてきた。
2. 新しいユーザ価値を生み出すため、それらの機能の一部を一つのサービスに
統合させる必要が出てきた。
エンドユーザ
サービスA
サービスB
新しいサービス提供
①
サービスCサービス提供
機能を利用
エンドユーザ
サービスA
サービスB
②

20
とは
問題点
エンドユーザの代わりに、サービスCは別サービスのAPI を実行する必要がある
-> サービスCはエンドユーザからAPIの実行が認可されている
サービスC
API 実行を認可
サービスA（API）
サービスB（API）
API 実行
OAuth 2.0 はこの問題を解決するために生まれた

21
とは
OAuth 2.0 の概要と登場人物
OAuth 2.0 はクライアントが認可されるためのフロー（プロトコル）
クライアント
（サービスC）
認可サーバ
（サービスA）
リソースオーナー
（エンドユーザ） リソースサーバ
（サービスAの API）
認可
認可コードとアクセス
トークンの発行
アクセストークンを
使ってリソースサーバ
のAPI を実行
フローの最終目標

22
登場人物
登場人物 概要
リソースオーナー エンドユーザに該当。
クライアント
-> このセッションの対象
デモアプリケーションに該当。
認可された後にリソースサーバのAPI
を実行する。
認可サーバ SNS に該当。
リソースオーナーに認可を求めたり、
認可コードやアクセストークンを発行
する。
リソースサーバ SNS に該当。
リソースオーナーの情報を操作できる
API を公開する。

23
登場人物
登場人物 概要
クライアントID・シークレット 認可サーバがクライアントを識別する
ための情報
スコープ リソースオーナーがクライアントに認
可する範囲
認可コード リソースオーナーがクライアントを認
可した事を示すトークン
アクセストークン リソースサーバのAPI を実行できる
トークン

24
フローの種類
フロー 概要
認可コードフロー
-> このセッションの対象
認可コードでアクセストークンを取得
する
インプリシットフロー 直接アクセストークンを取得する
クライアントクレデンシャルフロー リソースオーナーのID・パスワードを
クライアントが取り扱う
リフレッシュトークンフロー 有効期限が過ぎたアクセストークンを
更新する

25
フロー（認可コードフロー）
クライアント 認可サーバリソース
オーナー
リソースサーバ
⑦ユーザ情報取得要求
⑤アクセストークン
取得要求
① 認可エンドポ
イントに遷移
⑥アクセストークン
⑧ユーザ情報
②リソースオー
ナーがクライアン
トを認可
③リダイレクトエ
ンドポイントにリ
ダイレクトさせる
④リダイレクト

26
をソーシャルログインで利用するときの問題点
• OAuth 2.0 は（クライアントに対する）認可のための仕様
-> リソースオーナーの認証は保証されていない
クライアント
認可サーバ
リソースオーナー
認証
認可
？
OpenID Connect はこの問題を解決するために生まれた

27
とは
OpenID Connect の概要と登場人物
クライアント
認可サーバ
リソースオーナー
リソースサーバ
認可
認可コードとID トークンの発行
ID トークンを使ってリ
ソースサーバのAPI を
実行
ID トークンを使って認証
？

28
登場人物（ と比較）
OAuth 2.0 OpenID Connect 説明
認可サーバ ID プロバイダー 認可コードとID トークンの
発行
アクセストークン ID トークン エンドユーザの一意なキー
や改ざん防止のプロパティ
などが含まれる

29
フロー追加
クライアント ID プロパイダーリソース
オーナー
⑤IDトークン取得要
求
① 認可エンドポ
イントに遷移
③リダイレクトエ
ンドポイントにリ
ダイレクトさせる
④リダイレクト
②リソースオー
ナーがクライアン
トを認可
⑥IDトークン⑦ID トークンを検証

30
• ソーシャルログインとは
• デモ
• OAuth 2.0 / Open ID Connect とは
• -> デモソースコード / Spring Security OAuth2 解説
• 最後に

31
とは
• OAuth 2.0 / OpenID Connect 関連のSpring Project
• OAuth 2.0 / OpenID Connect 登場人物毎の実装をサポートする
• クライアント：対応
-> このセッションの対象
• リソースサーバ：対応
• 認可サーバ：未対応

32
とは
Spring Project の各Module の役割
Spring Module 役割
Spring Security OAuth2 Client OAuth 2.0 のクライアント実装を提供
-> 複雑なクライアント実装が不要
Spring Security Core ユーザ認証のフローを提供
-> 具体的な認証方法はOAuth2 Client
に委譲
Spring Boot Auto Configure Auto-configuration によるSpring
Security のBeanを提供
-> Bean の手動設定が不要

33
デモソースコード解説
dependencies {
// Spring Security 関連
implementation 'org.springframework.boot:spring-boot-starter-security'
// OAuth 2.0 クライアント関連
implementation 'org.springframework.security:spring-security-oauth2-client'
// OpenID Connect JWT 関連
implementation 'org.springframework.security:spring-security-oauth2-jose'
}
build.gradle

34
デモソースコード解説
spring:
security:
oauth2:
client:
registration:
facebook:
client-id: Facebook Graph API のクライアントID
client-secret: Facebook Graph API のクライアントシークレット
google:
client-id: Google APIs のクライアントID
client-secret: Google APIs のクライアントシークレット
application.yaml
※このセッションではクライアントID・シークレットの取得方法は割愛

35
デモソースコード解説
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
// ログイン画面はログインしていない状態でもアクセスできる
.antMatchers("/login").permitAll()
// その他の画面はログイン必須
.anyRequest().authenticated()
.and()
// ログインはOAuth 2.0 のフローを利用する
.oauth2Login()
// Spring Security デフォルトのログイン画面ではなく独自のログイン画面を表示する
.loginPage("/login");
}
SecurityConfig.java

36
デモソースコード解説
@Override
public void configure(WebSecurity web) {
// 静的リソース（CSSやJavaScriptなど）はSpring Security の対象外にする
web.ignoring().antMatchers("/css/**", "/js/**", "/fonts/**");
}
SecurityConfig.java

37
デモソースコード解説
<!-- リソースオーナーを認可エンドポイントにリダイレクトさせるエンドポイント -->
<a th:href="@{/oauth2/authorization/facebook}">Facebook でログイン</a>
<a th:href="@{/oauth2/authorization/google}">Google でログイン</a>
login.html
※Spring Security OAuth 2.0デフォルトのログイン画面でも機能に支障は出ない

38
デモソースコード解説
@GetMapping(“/”)
public String showArticles(@AuthenticationPrincipal OAuth2User oauth2User, Model model) {
// Spring Boot Auto-configuration によってOAuth2User は自動でインジェクトされる
List<Article> articles = articleRepository.findAll();
model.addAttribute("userName", oauth2User.getAttribute("name"));
model.addAttribute("articles", articles);
model.addAttribute("articleForm", new ArticleForm());
return "index";
}
BBSController.java

39
デモソースコード解説
@PostMapping("/post")
public String postArticle(@AuthenticationPrincipal OAuth2User oauth2User, @ModelAttribute
ArticleForm articleForm) {
Article article = new Article();
article.setName(oauth2User.getAttribute("name"));
article.setEntry(articleForm.getEntry());
article.setDate(LocalDate.now());
articleRepository.save(article);
return "redirect:/";
}
BBSController.java

40
提供機能
Spring Security OAuth2 Client 提供機能
• リソースオーナーを認可エンドポイントにリダイレクトさせる
• リダイレクトエンドポイント提供
• アクセストークン取得
• ユーザ情報取得
• etc..

41
クラス概要
ClientRegistration クラス
• 認可サーバ（SNS）の情報を保持
• Registration ID（SNSの種類と同等）
• クライアントID
• クライアントシークレット
• スコープ
• etc..
• 認可リクエストや認可コード取得など、認可サーバと通信する際に使用される
• application.yaml からプロパティが読み込まれる
ClientRegistrationRepository インターフェイス
• 複数のClientRegistration を保持
• このインターフェイスから、リソースオーナーが選択した認可サーバの
ClientRegistration を取得できる

42
クラス概要
CommonOAuth2Provider クラス
• Spring Security OAuth2 デフォルト認可サーバ・リソースサーバの情報を保持
• Google
• Facebook
• GitHub
• Okta

43
クラス概要
OAuth2AuthorizationRequestRedirectFilter クラス
• /oauth2/authorization/${registrationId} にマッピングされている
• リソースオーナーを認可エンドポイントへリダイレクトさせる
（302 レスポンスコードをレスポンスする）
OAuth2LoginAuthenticationFilter クラス
• リダイレクトエンドポイントの実装
• /oauth2/code/${registrationId} にマッピングされている
• リクエストに含まれた認可コードでアクセストークンを取得する
• アクセストークンでユーザ情報を取得する

44
クラス概要
OAuth2AuthenticationToken クラス
• OAuth2AuthorizedClientService でアクセストークンやユーザ情報を取得するた
めに必要
OAuth2AuthorizedClientService クラス
• OAuth 2.0 フロー完了後、任意のタイミングでアクセストークンやユーザ情報
を取得できる
• デフォルトでは、OAuth2LoginAuthenticationFilter によってセッションに保存
されている

45
• ソーシャルログインとは
• デモ
• OAuth 2.0 / Open ID Connect とは
• デモソースコード / Spring Security OAuth2 解説
• -> 最後に

46
最後に
• OAuth 2.0 / OpenID Connect でソーシャルログインをはじめとした新しいユー
ザ価値を提供することが可能になった。
• Spring Security OAuth2やSpring Boot Auto-configuration を利用することで、ク
ライアントの実装の手間は極力削減することができる。
• ライブラリのEOL・サポート状況に気をつけましょう。。。。