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

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

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. #linedc
#lpf_revup
Q＆Aについて
• ご質問があればこちらまで。
• https://app.sli.do/event/kmmo5u26/live/questions
• 17時〜全体のQ&Aセッションでご回答します。
Copyright Naohiro Fujie, 2019 3

4. #linedc
#lpf_revup
LINEログインとは
OpenID Connect/OAuthに対応したIdentity Provider
Copyright Naohiro Fujie, 2019 4
Developerサイトより

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. #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. #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. #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. #linedc
#lpf_revup
id_tokenの中⾝
• jwt.io（by Auth0）とかjwt.ms（by MS）
Copyright Naohiro Fujie, 2019 9

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. #linedc
#lpf_revup
⾃前でLINEログインに対応させるには
• 各種エンドポイントとのやり取りを実装
• 認可エンドポイントへの認可要求
• Callbackの実装と認可コードの受け取り
• トークンエンドポイントへの認可コード送信とアクセストークンとID
トークンの受け取り
• IDトークンの署名検証と属性（メールアドレス）の取り出し
• userInfoエンドポイントへアクセストークンをつけたリクエストとプ
ロファイルの受け取り
• セキュリティ上の考慮は必須
• CSRF対策：state発⾏、検証
• 認可コード置き換え対策：PKCE対応（認可コード検証）
Copyright Naohiro Fujie, 2020 11

12. #linedc
#lpf_revup
難しいですか？
Copyright Naohiro Fujie, 2020 12
• 簡単なことは簡単に
• 難しいことも可能に
• モジュラーデザイン
OpenID Connectの設計思想

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. #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. #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. #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. #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. #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. #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. #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. #linedc
#lpf_revup
PCブラウザ
Copyright Naohiro Fujie, 2020 21

22. #linedc
#lpf_revup
LINEアプリ内ブラウザ（liff://スキームで起動）
Copyright Naohiro Fujie, 2019 22

23. #linedc
#lpf_revup
モバイルブラウザ
Copyright Naohiro Fujie, 2019 23

24. #linedc
#lpf_revup
実際の⼿順
• デモ
Copyright Naohiro Fujie, 2020 24

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. #linedc
#lpf_revup
実際の⼿順
• デモ
Copyright Naohiro Fujie, 2020 26

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. #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. #linedc
#lpf_revup
まとめ
• 素のLINEログインを使うにはOpenID Connectに関する知識が
ある程度必要
• 正しく実装しないと危険
• IDaaSなどを使うのが吉
• LIFF v2になってLINEアプリの外でもWebアプリケーションを
動かせる
• LINEログインを包含しているので、プロトコル知識は不要
• LINEログインだけでOKなシナリオであればLINEログイン以外のLINE
プラットフォームをフル活⽤できる点でLIFFはかなり便利
Copyright Naohiro Fujie, 2020 29