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

Firebase x LINE / Ruby on Rails x LINEでログイン画面を無くそう

捧隆二
October 03, 2021

Firebase x LINE / Ruby on Rails x LINEでログイン画面を無くそう

LIFF/LINEミニアプリでユーザの操作なしでセキュアに認証する方法を実際のコードを交えながら解説しました。

捧隆二

October 03, 2021
Tweet

More Decks by 捧隆二

Other Decks in Technology

Transcript

  1. Firebase x LINE / Ruby on Rails x LINE でログイン画⾯を無くそう

    2021/10/02 ボイスアップラボ 捧隆⼆ 1
  2. ⾃⼰紹介 u 名前: 捧隆⼆ u 2021年よりLINE API Expert u 所属:

    ボイスアップラボ所属 u LINEやスマートスピーカーのアプリ制作 u 趣味: 温泉めぐり 4
  3. 16 LIFFアプリの作り⽅ Ø 基本はWebアプリの開発です Ø HTML, JavaScript, CSS… Ø WebアプリにLIFF

    SDKを導⼊すればLIFFアプリ Ø LIFF SDK: JavaScriptライブラリ Ø (雑な)開発の流れ Ø LINE Developers ConsoleでLIFFアプリを登録 Ø Webアプリを作成 Ø WebアプリにLIFF SDKを導⼊し、登録したLIFFアプリの LIFF IDを使って初期化
  4. 17 LIFF SDKのよく使うメソッド Ø liff.init() Ø LIFFアプリを初期化 Ø liff.getProfile() Ø

    プロフィールを取得 Ø liff.getAccessToken() Ø ユーザーのアクセストークンを取得
  5. 31

  6. 34 認証状態を保持する⽅法 Ø LIFFでアクセストークンを取得 Ø アクセストークンをサーバに送信 Ø サーバからLINEにアクセストークンを送りプロフィール取得 Ø 認証成功(ここまでは同じ)

    Ø userIDに対してアプリ独⾃のアクセストークンを発⾏ Ø このアクセストークンはLINEとは関係ないもの Ø 2回⽬以降は独⾃のアクセストークンを使って認証
  7. 41 具体的な実現⽅法 Ø Firebase x LINE Ø Ruby on Rails

    x LINE https://github.com/Arahabica/line-firebase-auth-sample https://github.com/Arahabica/liff-rails-sample https://qiita.com/Arahabica/items/8f5c7472ded92128535f
  8. 44 Firebase x LINEでログイン画⾯を無くす Ø 使⽤技術 Ø Firebase Authentication Ø

    Firebaseの認証機能を⼀⼿に担う Ø 通常はEmail認証やGoogle認証などに対応 Ø カスタムトークン作成機能 Ø Firebase Authenticationの1機能 Ø カスタム認証システムとの統合のための機能
  9. 45 Firebase x LINEでログイン画⾯を無くす Ø 処理の流れ Ø LIFFでアクセストークンを取得 Ø アクセストークンをCloud

    Functions for Firebaseに送信 Ø Cloud Functions for FirebaseでLINEの認証処理 Ø userIdに対応するカスタムトークン作成 Ø クライアントでカスタムトークンを使⽤し、Firebaseにログイン
  10. 49 Ruby on Rails x LINEでログイン画⾯を無くす Ø 使⽤技術 Ø Devise

    Ø Railsのデファクトの認証ライブラリ(gem) Ø 認証関連は⾃作する部分はできるだけ減らして、 デファクトを活⽤ Ø devise_token_auth Ø Deviseを利⽤しつつ、APIによる認証を可能にする ライブラリ(gem)
  11. 50 Ø 処理の流れ Ø LIFFでアクセストークンを取得 Ø アクセストークンをサーバに送信 Ø サーバでLINEの認証処理 Ø

    userIdに対応するトークン作成(devise_token_auth) Ø クライアントからサーバにアクセスする時にトークンを ヘッダにつける Ruby on Rails x LINEでログイン画⾯を無くす