Spring Social でソーシャルログインを実装する
•
3 likes•10,862 views
Spring Fest 2019 の資料です。 最近ソーシャルログインを提供するサービスは増えてきています。Spring Social は各SNS 専用のライブラリが用意されていて、これらを使ってソーシャルログインを実装することができます。 このセッションでは、このソーシャルログイン機能を提供するWebアプリケーションを実装する方法を紹介します。
More Related Content
What's hot
What's hot (20)
Similar to Spring Social でソーシャルログインを実装する
Similar to Spring Social でソーシャルログインを実装する (20)
More from Rakuten Group, Inc.
More from Rakuten Group, Inc. (20)
Recently uploaded
Recently uploaded (13)
Spring Social でソーシャルログインを実装する
- 1. でソーシャルログインを実装する Dec 18, 2019 Ryusuke Tanaka Payment Solution Development Group. Open Commerce Service Development Section. EC Incubation Development Department. Rakuten, Inc.
- 2. 2 自己紹介 田中 竜介 • 所属：楽天株式会社 ECイン キューベーション開発部 （ECID） 楽天ペイ（オンライン決済）の 開発業務を担当 • 趣味：スキー、自転車
- 3. 3 担当サービス紹介：楽天ペイ（オンライン決済） [楽天ペイ（オンライン決済）・2019/12/03・https://checkout.rakuten.co.jp/] 特徴 • 楽天ID でネット決済が可 能 • 楽天ポイントが貯まる、 使える
- 4. 4 担当サービス紹介：楽天ペイ（オンライン決済） 分類 技術 言語 Java 11 フレームワーク • Spring Boot • Spring Security • Spring Session • MyBatis • etc.. インフラ • Azure • Kubernetes（AKS Managed Cluster） • Docker 採用技術
- 6. 6 [Spring Social End of Life Announcement ・2019/12/03・https://spring.io/blog/2018/07/03/spring-social-end-of-life-announcement]
- 7. 7 [Spring Social End of Life Announcement ・2019/12/03・https://spring.io/blog/2018/07/03/spring-social-end-of-life-announcement] ！！！
- 8. 8 まとめ Spring Social はEOL を迎えてしまったプロジェクトです。
- 10. 10 [Spring Social End of Life Announcement ・2019/12/03・https://spring.io/blog/2018/07/03/spring-social-end-of-life-announcement]
- 11. 11 セッションのテーマ Spring Security OAuth2 Spring Social Spring Social の代わりに、 OAuth 2.0 のClient に対応したSpring Security OAuth2 をご紹介します。
- 13. 13 • ソーシャルログインとは • デモ • OAuth 2.0 / Open ID Connect とは • デモソースコード / Spring Security OAuth2 解説 • 最後に
- 14. 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. 15 • ソーシャルログインとは • -> デモ • OAuth 2.0 / Open ID Connect とは • デモソースコード / Spring Security OAuth2 解説 • 最後に
- 16. 16 デモ：概要 ソーシャルログインが出来る掲示板 • エンドユーザは、自身のSNS アカウントでデモアプリケーションにログイン ができる。SNS アカウントはFacebookとGoogleを選択できる。 • エンドユーザは、ログイン後、記事の投稿と閲覧ができる。 • デモアプリケーションは、SNS アカウントでログインしたエンドユーザの情 報を、選択されたSNS から取得ができる。
- 18. 18 • ソーシャルログインとは • デモ • -> OAuth 2.0 / Open ID Connect とは • デモソースコード / Spring Security OAuth2 解説 • 最後に
- 20. 20 とは 問題点 エンドユーザの代わりに、サービスCは別サービスのAPI を実行する必要がある -> サービスCはエンドユーザからAPIの実行が認可されている サービスC API 実行を認可 サービスA（API） サービスB（API） API 実行 OAuth 2.0 はこの問題を解決するために生まれた
- 21. 21 とは OAuth 2.0 の概要と登場人物 OAuth 2.0 はクライアントが認可されるためのフロー（プロトコル） クライアント （サービスC） 認可サーバ （サービスA） リソースオーナー （エンドユーザ） リソースサーバ （サービスAの API） 認可 認可コードとアクセス トークンの発行 アクセストークンを 使ってリソースサーバ のAPI を実行 フローの最終目標
- 22. 22 登場人物 登場人物 概要 リソースオーナー エンドユーザに該当。 クライアント -> このセッションの対象 デモアプリケーションに該当。 認可された後にリソースサーバのAPI を実行する。 認可サーバ SNS に該当。 リソースオーナーに認可を求めたり、 認可コードやアクセストークンを発行 する。 リソースサーバ SNS に該当。 リソースオーナーの情報を操作できる API を公開する。
- 23. 23 登場人物 登場人物 概要 クライアントID・シークレット 認可サーバがクライアントを識別する ための情報 スコープ リソースオーナーがクライアントに認 可する範囲 認可コード リソースオーナーがクライアントを認 可した事を示すトークン アクセストークン リソースサーバのAPI を実行できる トークン
- 24. 24 フローの種類 フロー 概要 認可コードフロー -> このセッションの対象 認可コードでアクセストークンを取得 する インプリシットフロー 直接アクセストークンを取得する クライアントクレデンシャルフロー リソースオーナーのID・パスワードを クライアントが取り扱う リフレッシュトークンフロー 有効期限が過ぎたアクセストークンを 更新する
- 26. 26 をソーシャルログインで利用するときの問題点 • OAuth 2.0 は（クライアントに対する）認可のための仕様 -> リソースオーナーの認証は保証されていない クライアント 認可サーバ リソースオーナー 認証 認可 ？ OpenID Connect はこの問題を解決するために生まれた
- 27. 27 とは OpenID Connect の概要と登場人物 クライアント 認可サーバ リソースオーナー リソースサーバ 認可 認可コードとID トークンの発行 ID トークンを使ってリ ソースサーバのAPI を 実行 ID トークンを使って認証 ？
- 28. 28 登場人物（ と比較） OAuth 2.0 OpenID Connect 説明 認可サーバ ID プロバイダー 認可コードとID トークンの 発行 アクセストークン ID トークン エンドユーザの一意なキー や改ざん防止のプロパティ などが含まれる
- 29. 29 フロー追加 クライアント ID プロパイダーリソース オーナー ⑤IDトークン取得要 求 ① 認可エンドポ イントに遷移 ③リダイレクトエ ンドポイントにリ ダイレクトさせる ④リダイレクト ②リソースオー ナーがクライアン トを認可 ⑥IDトークン⑦ID トークンを検証
- 30. 30 • ソーシャルログインとは • デモ • OAuth 2.0 / Open ID Connect とは • -> デモソースコード / Spring Security OAuth2 解説 • 最後に
- 31. 31 とは • OAuth 2.0 / OpenID Connect 関連のSpring Project • OAuth 2.0 / OpenID Connect 登場人物毎の実装をサポートする • クライアント：対応 -> このセッションの対象 • リソースサーバ：対応 • 認可サーバ：未対応
- 32. 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. 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. 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. 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. 36 デモソースコード解説 @Override public void configure(WebSecurity web) { // 静的リソース（CSSやJavaScriptなど）はSpring Security の対象外にする web.ignoring().antMatchers("/css/**", "/js/**", "/fonts/**"); } SecurityConfig.java
- 37. 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. 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. 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. 40 提供機能 Spring Security OAuth2 Client 提供機能 • リソースオーナーを認可エンドポイントにリダイレクトさせる • リダイレクトエンドポイント提供 • アクセストークン取得 • ユーザ情報取得 • etc..
- 41. 41 クラス概要 ClientRegistration クラス • 認可サーバ（SNS）の情報を保持 • Registration ID（SNSの種類と同等） • クライアントID • クライアントシークレット • スコープ • etc.. • 認可リクエストや認可コード取得など、認可サーバと通信する際に使用される • application.yaml からプロパティが読み込まれる ClientRegistrationRepository インターフェイス • 複数のClientRegistration を保持 • このインターフェイスから、リソースオーナーが選択した認可サーバの ClientRegistration を取得できる
- 42. 42 クラス概要 CommonOAuth2Provider クラス • Spring Security OAuth2 デフォルト認可サーバ・リソースサーバの情報を保持 • Google • Facebook • GitHub • Okta
- 43. 43 クラス概要 OAuth2AuthorizationRequestRedirectFilter クラス • /oauth2/authorization/${registrationId} にマッピングされている • リソースオーナーを認可エンドポイントへリダイレクトさせる （302 レスポンスコードをレスポンスする） OAuth2LoginAuthenticationFilter クラス • リダイレクトエンドポイントの実装 • /oauth2/code/${registrationId} にマッピングされている • リクエストに含まれた認可コードでアクセストークンを取得する • アクセストークンでユーザ情報を取得する
- 44. 44 クラス概要 OAuth2AuthenticationToken クラス • OAuth2AuthorizedClientService でアクセストークンやユーザ情報を取得するた めに必要 OAuth2AuthorizedClientService クラス • OAuth 2.0 フロー完了後、任意のタイミングでアクセストークンやユーザ情報 を取得できる • デフォルトでは、OAuth2LoginAuthenticationFilter によってセッションに保存 されている
- 45. 45 • ソーシャルログインとは • デモ • OAuth 2.0 / Open ID Connect とは • デモソースコード / Spring Security OAuth2 解説 • -> 最後に
- 46. 46 最後に • OAuth 2.0 / OpenID Connect でソーシャルログインをはじめとした新しいユー ザ価値を提供することが可能になった。 • Spring Security OAuth2やSpring Boot Auto-configuration を利用することで、ク ライアントの実装の手間は極力削減することができる。 • ライブラリのEOL・サポート状況に気をつけましょう。。。。