どもー、BULB加藤です。
LINEミニアプリやLIFFの開発をするのであれば、CRMのためにLINEのUIDを取得して活用しなければ効果半減です。
これまでLIFFの立ち上げやAPI動作確認をしてきましたが、実用を見据えてUID取得とDB保存を試してみます。
前提
ReactでLIFFが動かせる状態を前提とします。できていないときはとりあえずこちら。
ローカルで手軽に試すための設定はこちら
Firebaseで認証とデータベースを準備
とりあえずお手軽に。認証はFirebase Authentication、DBはCloud Firestoreを使います。
Firebase Authentication : メール認証を有効化
とりあえず最低限の設定ということで、メール認証だけ有効化します。いくつかテスト用のデータを入れた状態。
Cloud Firestore : collectionを作る
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にログインできるようにしていく
こちらの記事を参考に進めます。
記事に従って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
サインアップ動作を確認
/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マーケティング支援のためにぜひ参考にしてみてください！
Discussion