Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LIFFで認証しようとしたら意外と奥が深かった話

C9237e9aa6c8fe028a484c9621991423?s=47 捧隆二
December 16, 2021
Programming
0
530

 LIFFで認証しようとしたら意外と奥が深かった話

C9237e9aa6c8fe028a484c9621991423?s=128

捧隆二

December 16, 2021
Tweet

More Decks by 捧隆二

See All by 捧隆二
LINEミニアプリ/LIFFアプリを サクッと作りたいならFirebase
C9237e9aa6c8fe028a484c9621991423?s=48 arahabica
2
99
Firebase x LINE / Ruby on Rails x LINEでログイン画面を無くそう
C9237e9aa6c8fe028a484c9621991423?s=48 arahabica
0
640
公式管理画面 vs 非公式管理画面
C9237e9aa6c8fe028a484c9621991423?s=48 arahabica
0
280
Share Target Pickerを使って LIFFアプリを拡散しよう
C9237e9aa6c8fe028a484c9621991423?s=48 arahabica
0
540
Share Target Pickerを使って消えるメッセージを作ってみた
C9237e9aa6c8fe028a484c9621991423?s=48 arahabica
0
4.8k
非公式LINE管理画面を作ってみた
C9237e9aa6c8fe028a484c9621991423?s=48 arahabica
0
250
Clovaで他とは違うスマートスピーカー体験
C9237e9aa6c8fe028a484c9621991423?s=48 arahabica
0
65
LINEグループであそぼ
C9237e9aa6c8fe028a484c9621991423?s=48 arahabica
1
280
VUILT4資料 「LINE Clovaスキルはボット連携で パーソナライズしよう」
C9237e9aa6c8fe028a484c9621991423?s=48 arahabica
1
750

Other Decks in Programming

See All in Programming
SRE NEXT 2022に学ぶこれからのSREキャリア
71929a476c581dd754e4e1f355ac07d0?s=48 fukubaka0825
2
390
How to Test Your Compose UI (Droidcon Berlin 2022)
E8168a08862631072b2e82e7b662dc07?s=48 stewemetal
1
130
FullStack eXchange, July 2022
6f3ec7315ad0715ae2a5f89a52877218?s=48 brucel
0
200
閱讀原始碼 - 再戰十年的 jQuery
Dbfa12cd7e1ff8b06a588609369d6e49?s=48 eddie
1
290
Introduction to Property-Based Testing @ COSCUP 2022
Fd9f21969cd8a0cbf0b2f48a9af0cc28?s=48 cybai
1
150
OSS貢献を気軽にしたい Let's Go Talk #1
Aa0368c69701536321af9db1ae552b45?s=48 yuyaabo
2
230
More Than Micro Frontends: 3 Further Use Cases for Module Federation @DWX 2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
360
読みやすいコード クラスメソッド 2022 年度新卒研修
E86b46be0f4e61db6b28becc5493bbab?s=48 januswel
0
2.9k
Google IO 2022 社内LT会 / What's new in Android development tools
B65b9817b6cdb9bc923b82657a3162b7?s=48 shingo_kobayashi
0
400
プロダクトの成長とSREと
5a9fb3b80c517e51e4e95a27b63c6a67?s=48 takuyatezuka
0
120
Computer Vision Seminar 1/コンピュータビジョンセミナーvol.1 OpenCV活用
Bbf28bf908ac83e5b85b52a675641641?s=48 fixstars
0
150
Rust、何もわからない...#3
5d9c07f0c2044b1407a84d88362bc84d?s=48 estie
0
150

Featured

See All Featured
Art Directing for the Web. Five minutes with CSS Template Areas
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
196
9.5k
A Tale of Four Properties
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
149
21k
Designing Experiences People Love
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
130
22k
How to name files
0a4f62e90c976eeb44d33add75cca5af?s=48 jennybc
40
63k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
100
5.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
12
940
Web development in the modern age
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
197
9.3k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
29
4.4k
How New CSS Is Changing Everything About Graphic Design on the Web
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
213
11k
Java REST API Framework Comparison - PWX 2021
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
11
4.8k
Practical Orchestrator
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.7k

Transcript

  1. LIFFで認証しようとしたら 意外と奥が深かった話 2021/12/26 ボイスアップラボ 捧隆⼆ 1

  2. Ø ⾃⼰紹介 Ø LIFFアプリっていいよね Ø サーバでの認証⽅法(基本) Ø サーバでの認証⽅法(発展) ⽬次 2

  3. Ø ⾃⼰紹介 Ø LIFFアプリっていいよね Ø サーバでの認証⽅法(基本) Ø サーバでの認証⽅法(発展) ⽬次 3

  4. ⾃⼰紹介 u 名前: 捧隆⼆ u 2021年よりLINE API Expert u 所属:

    ボイスアップラボ所属 u LINEアプリ制作 u 趣味: 温泉めぐり 4

  5. Ø ⾃⼰紹介 Ø LIFFアプリっていいよね Ø サーバでの認証⽅法(基本) Ø サーバでの認証⽅法(発展) ⽬次 5

  6. LIFFアプリっていいよね 6

  7. こちらに参加されてる皆さんなら、 そもそも「LIFFアプリとは」の説明は ⼤丈夫ですよね︖ 7

  8. LINE上で動くLIFFアプリなら、 インストール要らずだし通知もできるよ 8

  9. LINE上で動くLIFFアプリなら、 インストール要らずだし通知もできるよ ええやん 9

  10. ユーザのアクションなしで クライアントJSで認証情報が取得できるよ︕ 10

  11. ユーザのアクションなしで クライアントJSで認証情報が取得できるよ︕ 楽やん 11

  12. サーバ側でも認証したければ、 セキュリティのためにクライアントから アクセストークンだけ送ってね︕ 12

  13. サーバ側でも認証したければ、 セキュリティのためにクライアントから アクセストークンだけ送ってね︕ はーい 13

  14. Ø ⾃⼰紹介 Ø LIFFアプリっていいよね Ø サーバでの認証⽅法(基本) Ø サーバでの認証⽅法(発展) ⽬次 14

  15. サーバでの認証⽅法(基本) 15

  16. 16 サーバでの認証⽅法(基本) Ø 公式のドキュメントに詳細載ってます

  17. 17

  18. 18 認証成功︕︕ 😀

  19. 19 サーバ認証の実装(基本) Ø liff.getAccessToken()をサーバに送信 Ø サーバで確認

  20. なんとなく分かったから 早速アプリ作っていくかー 20

  21. ...あれ、認証した後ってどうするんだっけ︖ 💦 21

  22. リクエストのたびにLINE API叩いてアクセス トークン検証するわけにもいかないし、、、 💦 ...あれ、認証した後ってどうするんだっけ︖ 💦 22

  23. リクエストのたびにLINE API叩いてアクセス トークン検証するわけにもいかないし、、、 💦 ...あれ、認証した後ってどうするんだっけ︖ 💦 できれば、いつも使ってる認証ライブラリ に繋ぎ込みたい... 💦 23

  24. 24 リクエストのたびにアクセストークン検証 するわけにもいかないし、、、 💦 ...あれ、認証した後ってどうするんだっけ︖ 💦 できれば、いつも使ってる認証ライブラリ に繋ぎ込みたい... 💦 実はちゃんと認証するには

    もうひと⼿間必要だった︕︕

  25. Ø ⾃⼰紹介 Ø LIFFアプリっていいよね Ø サーバでの認証⽅法(基本) Ø サーバでの認証⽅法(発展) ⽬次 25

  26. サーバでの認証⽅法(発展) 26

  27. 27 サーバ認証の⽅法（発展系）

  28. 28 独⾃のアクセストークンを返す 独⾃のアクセストークン を⽣成し保存

  29. 29 認証 2回⽬以降のリクエスト OK 独⾃のアクセストークン

  30. 実際どうやるの︖ 30

  31. 31 実際どうやるの︖ Ø Firebaseの場合 Ø Ruby on Railsの場合

  32. 32 Firebaseの場合 Ø 使⽤技術 Ø Firebase Authentication Ø Firebaseの認証機能を⼀⼿に担う Ø

    通常はEmail認証やGoogle認証などに対応 Ø カスタムトークン作成機能 Ø Firebase Authenticationの1機能 Ø カスタム認証システムとの統合のための機能

  33. 33 Firebaseの場合 Ø 処理の流れ Ø LIFFでアクセストークンを取得 Ø アクセストークンをCloud Functions for

    Firebaseに送信 Ø Cloud Functions for FirebaseでLINEの認証処理 Ø userIdに対応するカスタムトークン作成 Ø クライアントでカスタムトークンを使⽤し、Firebaseにログイン

  34. 34 Ruby on Railsの場合 Ø 使⽤技術 Ø Devise Ø Railsのデファクトの認証ライブラリ(gem)

    Ø 認証関連は⾃作する部分はできるだけ減らして、 デファクトを活⽤ Ø devise_token_auth Ø Deviseを利⽤しつつ、APIによる認証を可能にする ライブラリ(gem)

  35. 35 Ø 処理の流れ Ø LIFFでアクセストークンを取得 Ø アクセストークンをサーバに送信 Ø サーバでLINEの認証処理 Ø

    userIdに対応するトークン作成(devise_token_auth) Ø クライアントからサーバにアクセスする時にトークンを ヘッダにつける Ruby on Railsの場合

  36. 36 Ø 処理の流れ Ø LIFFでアクセストークンを取得 Ø アクセストークンをサーバに送信 Ø サーバでLINEの認証処理 Ø

    userIdに対応するトークン作成(devise_token_auth) Ø クライアントからサーバにアクセスする時にトークンを ヘッダにつける Ruby on Railsの場合 1⽉19⽇にハンズオンで Ruby on Railsでの実装⽅法を 解説予定です︕ 宣伝

  37. ご静聴ありがとうございました 37