Slide 1
Slide 1 text
LIFFで認証しようとしたら
意外と奥が深かった話
2021/12/26
ボイスアップラボ 捧隆⼆
1
Slide 2
Slide 2 text
Ø ⾃⼰紹介
Ø LIFFアプリっていいよね
Ø サーバでの認証⽅法(基本)
Ø サーバでの認証⽅法(発展)
⽬次
2
Slide 3
Slide 3 text
Ø ⾃⼰紹介
Ø LIFFアプリっていいよね
Ø サーバでの認証⽅法(基本)
Ø サーバでの認証⽅法(発展)
⽬次
3
Slide 4
Slide 4 text
⾃⼰紹介
u 名前: 捧隆⼆
u 2021年よりLINE API Expert
u 所属: ボイスアップラボ所属
u LINEアプリ制作
u 趣味: 温泉めぐり
4
Slide 5
Slide 5 text
Ø ⾃⼰紹介
Ø LIFFアプリっていいよね
Ø サーバでの認証⽅法(基本)
Ø サーバでの認証⽅法(発展)
⽬次
5
Slide 6
Slide 6 text
LIFFアプリっていいよね
6
Slide 7
Slide 7 text
こちらに参加されてる皆さんなら、
そもそも「LIFFアプリとは」の説明は
⼤丈夫ですよね︖
7
Slide 8
Slide 8 text
LINE上で動くLIFFアプリなら、
インストール要らずだし通知もできるよ
8
Slide 9
Slide 9 text
LINE上で動くLIFFアプリなら、
インストール要らずだし通知もできるよ
ええやん
9
Slide 10
Slide 10 text
ユーザのアクションなしで
クライアントJSで認証情報が取得できるよ︕
10
Slide 11
Slide 11 text
ユーザのアクションなしで
クライアントJSで認証情報が取得できるよ︕
楽やん
11
Slide 12
Slide 12 text
サーバ側でも認証したければ、
セキュリティのためにクライアントから
アクセストークンだけ送ってね︕
12
Slide 13
Slide 13 text
サーバ側でも認証したければ、
セキュリティのためにクライアントから
アクセストークンだけ送ってね︕
はーい
13
Slide 14
Slide 14 text
Ø ⾃⼰紹介
Ø LIFFアプリっていいよね
Ø サーバでの認証⽅法(基本)
Ø サーバでの認証⽅法(発展)
⽬次
14
Slide 15
Slide 15 text
サーバでの認証⽅法(基本)
15
Slide 16
Slide 16 text
16
サーバでの認証⽅法(基本)
Ø 公式のドキュメントに詳細載ってます
Slide 17
Slide 17 text
17
Slide 18
Slide 18 text
18
認証成功︕︕
😀
Slide 19
Slide 19 text
19
サーバ認証の実装(基本)
Ø liff.getAccessToken()をサーバに送信
Ø サーバで確認
Slide 20
Slide 20 text
なんとなく分かったから
早速アプリ作っていくかー
20
Slide 21
Slide 21 text
...あれ、認証した後ってどうするんだっけ︖ 💦
21
Slide 22
Slide 22 text
リクエストのたびにLINE API叩いてアクセス
トークン検証するわけにもいかないし、、、 💦
...あれ、認証した後ってどうするんだっけ︖ 💦
22
Slide 23
Slide 23 text
リクエストのたびにLINE API叩いてアクセス
トークン検証するわけにもいかないし、、、 💦
...あれ、認証した後ってどうするんだっけ︖ 💦
できれば、いつも使ってる認証ライブラリ
に繋ぎ込みたい... 💦
23
Slide 24
Slide 24 text
24
リクエストのたびにアクセストークン検証
するわけにもいかないし、、、 💦
...あれ、認証した後ってどうするんだっけ︖ 💦
できれば、いつも使ってる認証ライブラリ
に繋ぎ込みたい... 💦
実はちゃんと認証するには
もうひと⼿間必要だった︕︕
Slide 25
Slide 25 text
Ø ⾃⼰紹介
Ø LIFFアプリっていいよね
Ø サーバでの認証⽅法(基本)
Ø サーバでの認証⽅法(発展)
⽬次
25
Slide 26
Slide 26 text
サーバでの認証⽅法(発展)
26
Slide 27
Slide 27 text
27
サーバ認証の⽅法（発展系）
Slide 28
Slide 28 text
28
独⾃のアクセストークンを返す
独⾃のアクセストークン
を⽣成し保存
Slide 29
Slide 29 text
29
認証
2回⽬以降のリクエスト
OK
独⾃のアクセストークン
Slide 30
Slide 30 text
実際どうやるの︖
30
Slide 31
Slide 31 text
31
実際どうやるの︖
Ø Firebaseの場合
Ø Ruby on Railsの場合
Slide 32
Slide 32 text
32
Firebaseの場合
Ø 使⽤技術
Ø Firebase Authentication
Ø Firebaseの認証機能を⼀⼿に担う
Ø 通常はEmail認証やGoogle認証などに対応
Ø カスタムトークン作成機能
Ø Firebase Authenticationの1機能
Ø カスタム認証システムとの統合のための機能
Slide 33
Slide 33 text
33
Firebaseの場合
Ø 処理の流れ
Ø LIFFでアクセストークンを取得
Ø アクセストークンをCloud Functions for Firebaseに送信
Ø Cloud Functions for FirebaseでLINEの認証処理
Ø userIdに対応するカスタムトークン作成
Ø クライアントでカスタムトークンを使⽤し、Firebaseにログイン
Slide 34
Slide 34 text
34
Ruby on Railsの場合
Ø 使⽤技術
Ø Devise
Ø Railsのデファクトの認証ライブラリ(gem)
Ø 認証関連は⾃作する部分はできるだけ減らして、
デファクトを活⽤
Ø devise_token_auth
Ø Deviseを利⽤しつつ、APIによる認証を可能にする
ライブラリ(gem)
Slide 35
Slide 35 text
35
Ø 処理の流れ
Ø LIFFでアクセストークンを取得
Ø アクセストークンをサーバに送信
Ø サーバでLINEの認証処理
Ø userIdに対応するトークン作成(devise_token_auth)
Ø クライアントからサーバにアクセスする時にトークンを
ヘッダにつける
Ruby on Railsの場合
Slide 36
Slide 36 text
36
Ø 処理の流れ
Ø LIFFでアクセストークンを取得
Ø アクセストークンをサーバに送信
Ø サーバでLINEの認証処理
Ø userIdに対応するトークン作成(devise_token_auth)
Ø クライアントからサーバにアクセスする時にトークンを
ヘッダにつける
Ruby on Railsの場合
1⽉19⽇にハンズオンで
Ruby on Railsでの実装⽅法を
解説予定です︕
宣伝
Slide 37
Slide 37 text
ご静聴ありがとうございました
37