LIFFのLINEログインとFirebase Auth連携チュートリアル【実装からセキュリティールールまで解説】

LIFFとFirebase（Firestore）を使うと、様々なLINEサービスを手軽に作成することができます。
例えばスターバックスの会員カードような、LINEのユーザーと会員情報を紐付けたサービスの開発が可能となります。

LIFFとFirebase Authの関係性

LIFFを使うことでWebアプリの処理でLINE IDを取得することができるため、LINE botを使ったサービスと連携ができたり、Webで取得したデータを元にプッシュメッセージを送ったりすることができます。

LIFFアプリを開発する上で、取得したデータなどを安全にFirestorenに保存する場合、セキュリティールールの記述が必要となります。
安全なセキュリティールールを記述するためには、Firebase Authを使ってユーザー認証をする必要があります。

Firebase AuthにはメアドログインやGoogleログインなど、様々なログイン方法が提供されていますが、LINEログインは用意されていないため、連携するプログラムを自作する必要があります。

認証しなくてもFirebaseのデータベースにアクセスすることができますが、認証なしではセキュリティールールが作れないため、誰でもデータにアクセスできる危険な状態となってしまいます。

本チュートリアルについて

本チュートリアルでは、LIFFのログインからFirebase Authとの連携実装、セキュリティールールの正しい記述まで解説していきます。
セキュリティーが担保されたLIFFサービスの根幹を作成できるようになることが目的です。

記事内のコードをそのままコピペするだけで完成するようになっています。
また購入者には、TwitterのDMで質問サポートに応じます。

システム開発全体像

今回の実装の全体図は以下のようになります。

①LIFFプロジェクトの作成、LINEログインの実装
②LINE IDを使って Firebase の認証トークン作成
③作成した認証トークンを使ってFirebase認証を実装

本チュートリアルではNuxt.jsを使いますが、他の開発環境でも応用可能な基本の仕組みの説明もします。

解説は実際のコードから始まり、最後に仕組みの説明をしていますが、最初に仕組みから知っておきたい人は読む順序を変えても構いません。
目次からどうぞ！

コードの実装

①LIFFプロジェクトの作成、LINEログインの実装

Nuxt.jsでプロジェクトを作ります。
コマンドラインで line_firebase_login という名前でプロジェクトを作成します。プロジェクト名は任意です。
npx で作成する方法もあります。詳しくはこちら。
Nuxt.js modulesにて、Axiosを選択することに注意してください。

$ yarn create nuxt-app line_firebase_login

? Project name: line_firebase_login
? Programming language: Javascript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: 選択しない
? Testing framework: None
? Rendering mode: Universal (SSR / SSG) 
? Deployment target: Server (Node.js hosting) 
? Development tools: 選択しない

次に開発に入る前に、LINE Developers で チャンネル（LIFFアプリ）を作りましょう。

https://developers.line.biz/ja/　でログイン後、初めてログインした方はプロバイダーを作成し、「Create a new channel」からLINE Login チャンネル を作成します。
Channel type を LINE Login 、他の項目は任意で入力しチャンネルを作成します。
一旦ここでNuxt.jsの実装に戻り、LIFFアプリの作成は後ほど行います。

プロジェクトのルートディレクトリで以下のコマンドを実行し、必要なモジュールをインストールします。

$ yarn add express firebase firebase-admin dotenv

各種ファイルを以下のように作成・上書きしていきます。

layouts/default.vue（上書き）

<template>
<v-app>
  <v-main>
    <v-container>
      <nuxt />
    </v-container>
  </v-main>
</v-app>
</template>

pages/index.vue（上書き）

<template>
   <div>Login Test</div>
</template>

<script>
export default {
   async created() {
       if (process.browser) {
           await liff
           .init({
               liffId: '後ほど作成するLIFF ID'
           })
           .then(async () => {
               if (!liff.isLoggedIn()) {
                   liff.login();
               } else {
                   
               }
           })
           .catch((err) => {
               console.log(err.code, err.message);
           });
       }
   }
}
</script>

ルートディレクトリで、以下コマンドを走らせるとローカルホストを立ち上げることができます。