Successfully reported this slideshow.
Your SlideShare is downloading. ×

LIFFとの連携でさらに強力に。こんなに使えるLINEログイン

Ad

#linedc
#lpf_revup
LIFFとの連携でさらに強⼒に。
こんなに使えるLINEログイン
2020/11/14
Naohiro Fujie
@phr_eidentity

Ad

#linedc
#lpf_revup
⾃⼰紹介
• 役割
• IDをコアとしたビジネス開発担当。⼤阪から全国をカバー
• 標準化等
• OpenIDファウンデーション・ジャパン理事、KYC WGリーダー
• OpenID Foundation,...

Ad

#linedc
#lpf_revup
Q&Aについて
• ご質問があればこちらまで。
• https://app.sli.do/event/kmmo5u26/live/questions
• 17時〜全体のQ&Aセッションでご回答します。
Co...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 29 Ad
1 of 29 Ad

LIFFとの連携でさらに強力に。こんなに使えるLINEログイン

Download to read offline

2020/11/14に開催されたRev Upで使った資料です。
LIFF v2を使ってLINEログインを簡単に実装する、というテーマです。従来OpenID Connect/OAuthの知識が必要でしたが、お手軽にLINEログインを試したい人は是非LIFFを使ってみてください。
※LIFF:LINE Front-end Framework

2020/11/14に開催されたRev Upで使った資料です。
LIFF v2を使ってLINEログインを簡単に実装する、というテーマです。従来OpenID Connect/OAuthの知識が必要でしたが、お手軽にLINEログインを試したい人は是非LIFFを使ってみてください。
※LIFF:LINE Front-end Framework

Advertisement
Advertisement

More Related Content

Slideshows for you (19)

Similar to LIFFとの連携でさらに強力に。こんなに使えるLINEログイン (20)

Advertisement

More from Naohiro Fujie (19)

Advertisement

LIFFとの連携でさらに強力に。こんなに使えるLINEログイン

  1. 1. #linedc #lpf_revup LIFFとの連携でさらに強⼒に。 こんなに使えるLINEログイン 2020/11/14 Naohiro Fujie @phr_eidentity
  2. 2. #linedc #lpf_revup ⾃⼰紹介 • 役割 • IDをコアとしたビジネス開発担当。⼤阪から全国をカバー • 標準化等 • OpenIDファウンデーション・ジャパン理事、KYC WGリーダー • OpenID Foundation, Co-chair of eKYC and Identity Assurance WG • ⽇本ネットワークセキュリティ協会アイデンティティ管理WG • Blog:IdM実験室(https://idmlab.eidentity.jp) • その他活動 • Microsoft MVP for Enterprise Mobility(Jan 2010 -) • LINE API Expert (Feb 2018 -) • Auth0 Ambassador(Sep 2018 -) Copyright Naohiro Fujie, 2020 2
  3. 3. #linedc #lpf_revup Q&Aについて • ご質問があればこちらまで。 • https://app.sli.do/event/kmmo5u26/live/questions • 17時〜全体のQ&Aセッションでご回答します。 Copyright Naohiro Fujie, 2019 3
  4. 4. #linedc #lpf_revup LINEログインとは OpenID Connect/OAuthに対応したIdentity Provider Copyright Naohiro Fujie, 2019 4 Developerサイトより
  5. 5. #linedc #lpf_revup ⾃分のサイトにLINEでログインさせたい • 基本は「OpenID Connect」を使ってID連携 • Starter-packもあるが、、、、Java!!!! • https://github.com/line/line-login-starter • ⾮公式SDK(by 中嶋さん) • https://github.com/nkjm/line-login • ちなみにモバイルシナリオなら公式SDKあり • Swift、Objective-C、Android、Unity Copyright Naohiro Fujie, 2020 5
  6. 6. #linedc #lpf_revup OpenID Connectとは • OpenID Connect 1.0 は, OAuth 2.0 プロトコルの上にシンプル なアイデンティティレイヤーを付与したものである. このプロ トコルは Client が Authorization Server の認証結果に基づいて End-User のアイデンティティを検証可能にする. また同時に End-User の必要最低限のプロフィール情報を, 相互運⽤可能か つ RESTful な形で取得することも可能にする. • OpenID Connect Core 1.0 ⽇本語訳 • http://openid-foundation-japan.github.io/openid-connect-core- 1_0.ja.html • OpenIDファウンデーション・ジャパン翻訳・教育WG Copyright Naohiro Fujie, 2020 6
  7. 7. #linedc #lpf_revup 具体的なフロー (code flow) LINEの場合のエンドポイント • Authorization Endpoint • https://access.line.me/oauth2/v2.1/authorize • Token Endpoint • https://api.line.me/oauth2/v2.1/token • Profile Endpoint • https://api.line.me/v2/profile Copyright Naohiro Fujie, 2020 7
  8. 8. #linedc #lpf_revup id_token • JWT(JSON Web Token)形式 • JSON Web Token (JWT) - draft-ietf-oauth-json-web-token-11 ⽇本 語訳 • http://openid-foundation-japan.github.io/draft-ietf-oauth-json-web-token- 11.ja.html • OpenIDファウンデーション・ジャパン翻訳・教育WG • 内部構造 • ヘッダ:署名や暗号化形式など • ペイロード:クレーム(属性)セット、暗号化する場合も • シグニチャ:デジタル署名 • Base64Urlエンコードし、”.”で各パートを連結する • eyJhb̶snip--iJ9.eyJpc3̶snip--pwIn0.gC4ub--snip--yBm0 Copyright Naohiro Fujie, 2020 8
  9. 9. #linedc #lpf_revup id_tokenの中⾝ • jwt.io(by Auth0)とかjwt.ms(by MS) Copyright Naohiro Fujie, 2019 9
  10. 10. #linedc #lpf_revup id_tokenの中⾝ Claim Type Value Notes iss https://access.line.me JWTの発⾏者(issuer)を表す識別⼦ sub U9f1cac4f164ef3f5c02c92d00 67a11a1 JWTの主体(subject)を表す識別⼦ LINEの場合はuserId aud 1516319320 JWTの発⾏先(audience)を表す識別⼦ LINEの場合はChannel Id exp 1552324580 JWTの有効期限(UNIX Time) iat 1552320980 JWTの発⾏時刻(UNIX Time) nonce 51501f6a-9a12-4d42-ad72- 0d36e44df96f リクエスト時に設定したnonceの値 リクエストと発⾏されたid_tokenの中の値がマッチ するかどうかを検査し置き換え攻撃を検知する name Naohiro Fujie 名前。LINEの場合は表⽰名 picture https://profile.line- scdn.net/0m0--snip-- xxx プロファイル写真のURL email naohiro.fujie@eidentity.jp メールアドレス Copyright Naohiro Fujie, 2020 10
  11. 11. #linedc #lpf_revup ⾃前でLINEログインに対応させるには • 各種エンドポイントとのやり取りを実装 • 認可エンドポイントへの認可要求 • Callbackの実装と認可コードの受け取り • トークンエンドポイントへの認可コード送信とアクセストークンとID トークンの受け取り • IDトークンの署名検証と属性(メールアドレス)の取り出し • userInfoエンドポイントへアクセストークンをつけたリクエストとプ ロファイルの受け取り • セキュリティ上の考慮は必須 • CSRF対策:state発⾏、検証 • 認可コード置き換え対策:PKCE対応(認可コード検証) Copyright Naohiro Fujie, 2020 11
  12. 12. #linedc #lpf_revup 難しいですか? Copyright Naohiro Fujie, 2020 12 • 簡単なことは簡単に • 難しいことも可能に • モジュラーデザイン OpenID Connectの設計思想
  13. 13. #linedc #lpf_revup もっと⼿軽にやりたい • 2つの典型的な⽅法 1. IDaaSを使う • ベンダに頼んでください。 • Azure AD B2CとかAuth0とか。 • LINE以外(Facebookとかtwitterとか)も統合して使う場合はこちら。 2. LIFF v2を使う • LIFF v2がMessaging APIの範疇から⾶び出したことにより使い道が広がった • ただし(当然だけど)LINEログインだけ Copyright Naohiro Fujie, 2020 13
  14. 14. #linedc #lpf_revup LIFFとは(v1のころ) • LIFFとは、LINE Front-end Frameworkの略で、LINEアプリ内 で動作するウェブアプリのプラットフォームです。 • LIFFに登録したウェブアプリ(LIFFアプリ)をLINEアプリ内 で起動すると、LINEのユーザーIDや、LIFF APIを利⽤するため のトークンをLINEプラットフォームから取得できます。LIFFア プリではこれらを利⽤して、ユーザー情報を活⽤した機能を提 供したり、ユーザーの代わりにトークルームにメッセージを送 信したりできます。 Copyright Naohiro Fujie, 2020 14 https://engineering.linecorp.com/ja/blog/liff-our-latest-product-for-third-party-developers/ (昔のドキュメントが残ってなかったので⽴花さんのblogより)
  15. 15. #linedc #lpf_revup LIFFとは(v2) • LINE Front-end Framework(LIFF)は、LINEが提供するウェ ブアプリのプラットフォームです。このプラットフォームで動 作するウェブアプリを、LIFFアプリと呼びます。 • LIFFアプリを使うと、LINEのユーザーIDなどをLINEプラット フォームから取得できます。LIFFアプリではこれらを利⽤して、 ユーザー情報を活⽤した機能を提供したり、ユーザーの代わり にメッセージを送信したりできます。 Copyright Naohiro Fujie, 2020 15 https://developers.line.biz/ja/docs/liff/overview/ (開発者ドキュメントより)
  16. 16. #linedc #lpf_revup LIFF V1とV2の違い V1 V2(追加分) 動作環境 LINEアプリ内View In Appブラウザ 外部ブラウザ LINEログイン ログイン機構はLINEアプリに依存 アクセストークンの取得 プロファイルの取得 LINEログインV2.1対応 ログイン、ログアウト IDトークンの取得、デコード メールアドレス取得 公式アカウントとの友達状態取得 メッセージ メッセージ送信 送信ターゲット選択 その他 Bluetoothの利⽤ クライアント環境取得(OS、⾔語、起動 環境、バージョン) QRコードスキャン パーマネントリンクの取得 Copyright Naohiro Fujie, 2020 16
  17. 17. #linedc #lpf_revup (LINEログイン+Social API)⊂LIFF • と思っていたら Copyright Naohiro Fujie, 2019 17 https://developers.line.biz/ja/news/2020/11/12/social-api-is-now-part-of-line-login/
  18. 18. #linedc #lpf_revup 使ってみる:準備 • LINEログインのチャネルを作成し、LIFFアプリを追加 • 以下を設定、作成後LIFF_IDをメモしておく Copyright Naohiro Fujie, 2020 18 設定項⽬ 設定内容 LIFFアプリ名 任意の名前 サイズ 画⾯サイズ エンドポイントURL LIFFアプリを実装したWebアプリのURL(https) ⼿軽に試すならngrokでローカルで起動したWebアプリを設定 ※アプリができていない時はダミーで設定しておいて後から設定OK Scope LIFFアプリのスコープ(openid, email, profile, chat_message.write) ボットリンク ボットとの連携(bot_prompt) Scan QR QRコードリーダー機能の有効/無効
  19. 19. #linedc #lpf_revup 使ってみる • SDKのロード <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script> • 初期化 liff.init( config, successCallback, errorCallback ) • ログイン • liff.login Copyright Naohiro Fujie, 2020 19
  20. 20. #linedc #lpf_revup Starter Packで試す • LIFF v2 starter pack • https://github.com/line/line-liff-v2-starter • heroku前提で書かれているが、ローカルで動かしても良い • cloneして普通に動かす • git clone https://github.com/line/line-liff-v2-starter • npm install • index.jsを変更し、LIFF_IDを指定する • const myLiffId = process.env.MY_LIFF_ID || "1608..{snip}..73o"; • node index.js • ngrokでエンドポイントを公開し、LIFF設定を更新する • ngrok http 5000 Copyright Naohiro Fujie, 2020 20
  21. 21. #linedc #lpf_revup PCブラウザ Copyright Naohiro Fujie, 2020 21
  22. 22. #linedc #lpf_revup LINEアプリ内ブラウザ(liff://スキームで起動) Copyright Naohiro Fujie, 2019 22
  23. 23. #linedc #lpf_revup モバイルブラウザ Copyright Naohiro Fujie, 2019 23
  24. 24. #linedc #lpf_revup 実際の⼿順 • デモ Copyright Naohiro Fujie, 2020 24
  25. 25. #linedc #lpf_revup ちょっと改造 • id_token/メールアドレスを確認できるように • liff-starter.js • index.html • 関連するエレメント作成 Copyright Naohiro Fujie, 2020 25 // get id token document.getElementById('getIDToken').addEventListener('click', function() { if (!liff.isLoggedIn() && !liff.isInClient()) { alert('To get an id token, you need to be logged in. Please tap the "login" button below and try again.ʼ); } else { const idToken = liff.getDecodedIDToken(); document.getElementById('idTokenField').textContent = JSON.stringify(idToken); toggleIDToken(); } });
  26. 26. #linedc #lpf_revup 実際の⼿順 • デモ Copyright Naohiro Fujie, 2020 26
  27. 27. #linedc #lpf_revup LINEログインの使われ⽅ • liff.login() Copyright Naohiro Fujie, 2019 27 GET https://access.line.me/liff/v1/authorize? app_id={LIFF ID}& state=T9evaQNqc2sA& response_type=code& code_challenge_method=S256& code_challenge=504WdHttTzfKFvveUBVqc1KePYYF9jRjO5l2Lb4xe_U& liff_sdk_version=2.5.0 HTTP/1.1 GET https://access.line.me/oauth2/v2.1/authorize? app_id={LIFF ID}& client_id={CHANNEL ID}& scope=chat_message.write+openid+profile+email& state=T9evaQNqc2sA& response_type=code& code_challenge_method=S256& code_challenge=504WdHttTzfKFvveUBVqc1KePYYF9jRjO5l2Lb4xe_U& liff_sdk_version=2.5.0& type=L& redirect_uri=https%3A%2F%2F704c550e9618.ngrok.io HTTP 302 CSRF対策の state PKCE対応の code_challenge
  28. 28. #linedc #lpf_revup LINEログインの使われ⽅ • ユーザログイン Copyright Naohiro Fujie, 2020 28 GET https://access.line.me/oauth2/v2.1/authorize/consent?{省略} GET https://704c550e9618.ngrok.io/? code=OHlhI7PyKYWQTZZ0AZKk& state=T9evaQNqc2sA& liffRedirectUri=https%3A%2F%2F704c550e9618.ngrok.io HTTP/1.1 POST https://api.line.me/oauth2/v2.1/token HTTP/1.1 ***POST DATA*** grant_type: authorization_code client_id: {CHANNEL ID} appId: {LIFF ID} code: OHlhI7PyKYWQTZZ0AZKk code_verifier: eNCyweGSTe529mp9YZZqylHSo0CiJfb3vk3zAz2TY9q redirect_uri: https://704c550e9618.ngrok.io Id_token_key_type: JWK access_token id_token の取得 Callbackの実装
  29. 29. #linedc #lpf_revup まとめ • 素のLINEログインを使うにはOpenID Connectに関する知識が ある程度必要 • 正しく実装しないと危険 • IDaaSなどを使うのが吉 • LIFF v2になってLINEアプリの外でもWebアプリケーションを 動かせる • LINEログインを包含しているので、プロトコル知識は不要 • LINEログインだけでOKなシナリオであればLINEログイン以外のLINE プラットフォームをフル活⽤できる点でLIFFはかなり便利 Copyright Naohiro Fujie, 2020 29

×