【CRMに必須】LINEミニアプリ / LIFFでLINEのUIDを取得して保存。認証・DBはFirebaseで試してみた

4 min read読了の目安(約4100字

どもー、BULB加藤です。

LINEミニアプリやLIFFの開発をするのであれば、CRMのためにLINEのUIDを取得して活用しなければ効果半減です。

これまでLIFFの立ち上げやAPI動作確認をしてきましたが、実用を見据えてUID取得とDB保存を試してみます。

前提

ReactでLIFFが動かせる状態を前提とします。できていないときはとりあえずこちら。

https://zenn.dev/bulb/articles/fb0666bb027a79

ローカルで手軽に試すための設定はこちら

https://zenn.dev/bulb/articles/d6f629def573f3

Firebaseで認証とデータベースを準備

とりあえずお手軽に。認証はFirebase Authentication、DBはCloud Firestoreを使います。

Firebase Authentication : メール認証を有効化

https://firebase.google.com/docs/auth/web/start?hl=ja

とりあえず最低限の設定ということで、メール認証だけ有効化します。いくつかテスト用のデータを入れた状態。

Cloud Firestore : collectionを作る

https://firebase.google.com/docs/firestore/quickstart?hl=ja

Firestoreにもデータを入れられるようにcollectionを作成。今回はLINEのuidやユーザーが入力するメールアドレスを取得するので、適当にusersというcollectionを作ります。

config情報をメモ

左上の歯車から「プロジェクトを設定」へ

「プロジェクトの設定」画面へ遷移するのでconfig情報をメモっておきます。アプリケーションからFirebaseに接続するために後で使います。

    apiKey: "xxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxx"

これでFirebase側の下準備はOK

ReactアプリケーションからFirebase Authenticationにログインできるようにしていく

こちらの記事を参考に進めます。

https://qiita.com/k-penguin-sato/items/6e892231922b360a8659#reactアプリケーションのセットアップ

記事に従ってFirebaseのコンフィグ設定やパッケージインストール、Context設定をしていく。とりあえず画面ができあがりました。

base.js内のfirebase初期化の部分で、さきほどメモったfirebaseのconfig情報を入れておきましょう。.envで環境変数管理しています

import firebase from "firebase/app";
import "firebase/auth";
import 'firebase/firestore';

//ここにfirebaseの情報を入れていく
export const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID
});

export const db = firebase.firestore();

LINEのUIDを表示

あとで使うので、LINE UIDの情報もここで表示してみました。

// liff.getContextでユーザー情報オブジェクトをとってくる。(LINEにログインしていることが前提)
const context = liff.getContext()

// context.userIdでuidを取得できる
const uid = context.userId

https://developers.line.biz/ja/reference/liff/#get-context

サインアップ動作を確認

/signupより適当なメールアドレスで登録を試みる

正しく設定されていれば、firebase authでユーザー登録できていることが確認できます。

Cloud FirestoreにLINE UIDのデータを格納する

続いて仕上げ。AuthProvider.js内に、Firestoreにデータを書き込むロジックを追加しましょう。

サインアップしたときにLINE UIDをDBに保存するようにします。

// Liffのインポートを忘れずに
import liff from '@line/liff';

const signup = async (email, password, history) => {
    try {
      await app.auth().createUserWithEmailAndPassword(email, password);
      const userRef = await db.collection('users').doc()
      const userProfile = await liff.getProfile() //liff.getProfile()でLINEのユーザー情報を取得
      const user = await firebase.auth().currentUser;
      await userRef.set({
        id: user.uid,
        lineuid: userProfile.userId, //これがLINE UID
        displayName: userProfile.displayName, //ついでにLINEのディスプレイネームもやってみる
        mail: email,
        createdAt: firebase.firestore.FieldValue.serverTimestamp(),
        updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
      })
      history.push("/");
    } catch (error) {
      alert(error);
    }
  };

これでもう一度サインアップを試してみます。Firestoreを確認すると、LINE UIDが無事保存できていました〜〜〜!

これで手持ちの顧客情報とLINE上のUIDを結びつけることができました。手軽にできてしまうこともあってここではサンプル的に簡単に試してみましたが、本実装時にもやること自体はそれほど変わりません。

LINEマーケティング支援のためにぜひ参考にしてみてください!