すごく今更な話ですが、LIFF の npm パッケージが去年公開されました。
そして半年たった今でも普通に公開されています。
リリースしたばかりの頃に試そうとしましたが、ドキュメントが少ないのとサンプルが無いせいですぐ断念しましたｗ。
しかしこのままではせっかく npm パッケージ公開してくれたのになんとなくもったいない気分がしたので今回は LIFF の npm パッケージを使ってみたいと思います。
今回の成果物は以下の Github レポジトリに公開しています。
開発環境
- Node.js : v10.16.0
- Vue CLI : 4.5.11
- LIFF : 2.8.0
環境構築
Vue.js のプロジェクトを作成
以下のコマンドで Vue.js のプロジェクトを作成します。
vue create liff_login
プリセットの選択が出るので、Default (Vue 3 Preview) ([Vue 3] babel, eslint)を選択します。
LIFF パッケージのインストール
続いて LIFF の npm パッケージを用意します。
以下のコマンドでインストールします。
npm install @line/liff
ngrok の用意
ngrok を用意して以下のコマンドでホスティングを起動します。
ngrok http 8080
実行後に生成した URL は次の設定で必要なので、メモしておきます。(https のほうを選択します。)
LIFF ID の用意
次に LIFF ID を用意します。
LINE Developersにログインし、プロバイダーを作成したらチャネルの作成から「LINE ログイン」を選択します。
LIFFタブから LIFF を作成します。エンドポイント URL には先程メモした ngrok の URL を記入します。また Scope は profile にチェックを入れます。
その他の設定はお好みのもので OK です。
必要なファイルの用意
App.vue
それでは必要なファイルを用意します。
まずは App.vue を用意します。
src/App.vueを以下のコードに書き換えます。
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld v-if="isLoggedIn" v-bind:msg="'Hello, ' + userName"/>
<button class="btn-square" v-if="!isInClient" @click="logout">ログアウト</button>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import liff from "@line/liff";
export default {
name: 'App',
components: {
HelloWorld
},
data() {
return {
userName: undefined,
isInClient: undefined,
isLoggedIn: false,
}
},
created() {
liff
.init({
liffId: process.env.VUE_APP_LIFF_ID
})
.then(() => {
this.isLoggedIn = liff.isLoggedIn();
if (!liff.isInClient() && !liff.isLoggedIn()) {
liff.login();
} else {
this.isInClient = liff.isInClient();
liff.getProfile()
.then(profile => {
this.userName = profile.displayName;
})
}
})
},
methods: {
logout: function () {
if (liff.isLoggedIn()) {
liff.logout();
location.reload();
}
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.btn-square {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #42b983;
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.btn-square:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
}
</style>
.env
続いて.env ファイルを用意します。
.env ファイルに LIFF ID を書き込むことで Git で公開するときに LIFF ID の箇所を隠すことができますし、開発環境用と本番環境用で LIFF ID を使い分けたいときに楽です。
.env ファイルはアプリのプロジェクトディレクトリのルート直下に以下のファイルを追加します。YOUR_LIFF_IDはご自分のものに書き換えます。
VUE_APP_LIFF_ID="YOUR_LIFF_ID"
Vue.js の環境変数名は頭にVUE_APPを付ける必要があります。
vue.config.js
ローカルでサーバーを立ち上げて ngrok から開こうとするとInvalid Host headerと表示されます。
これを解決するために以下のコードをプロジェクトディレクトリのルート直下に追加します。
module.exports = {
devServer: {
disableHostCheck: true,
},
};
動作確認
それでは、実際に動かしてみます。
以下のコマンドでサーバーを立ち上げます。
npm run serve
ブラウザで LIFF の URL を開き LINE ログインを行い、以下のように LINE のユーザー名がタイトルに表示されたら成功です。
まとめ
今回は Vue.js で LIFF の npm パッケージを使う方法を紹介しました。今までは CDN で LIFF を読み込んでエラーになってもう一回ビルドして公開するという面倒なことをしていましたが、npm が使えるようになったことで、Vue.js はじめフロントエンドのフレームワークで LIFF を導入しやすくなったのは大きいですね。これで Vue.js で LIFF が使えるようになったのでミニアプリのバリエーションがさらに増えそうですね！
Discussion