はじめに
今回は、ハッカソンでよく利用される、Node-REDとLINEのAPIを用いたものを記載する。
第一弾として、LINEログイン機能の実装方法をここに記す。
※自身が今後利用するためのメモ書き
LINE Developers
LINE Developersにログイン
LINE Developersにログインする。
プロバイダーの作成
プロバイダーを作成する。
チャンネルの作成
チャンネルタイプを「LINE Login」とし、先ほど作成したプロバイダーを選択し、チャンネルを作成する。
LIFFアプリケーションの作成
LIFFアプリケーションを作成する。
Endpoint URLは、下記に記載するNode-REDで作成したURLにする。
作成し終えたら、LIFF detail内のLIFF URL「line://app/xxxxxxxxxxxxxxxxxxx」のxxxxxxxxxxxxxxxxxxxの部分をメモしておく。(後でNode-REDとの接続の際に使用するため)
Node-RED
※Node-REDに登録してある前提で以下を記載
Webページの作成
ノード置き場から以下のノードを取り出し取り出し、作業エリアに配置する。
・「入力」エリアにある「http」ノード
・「機能」エリアにある「template」ノード
・「出力」エリアにある「http response」ノード
左からこれらのノードを順に並べ、繋ぐ。
「http」ノードの編集画面を開き、URL欄にWebページの表示用のアドレス (今回は "/line") を入力して、「完了」をクリックする。
そして、右上のデプロイをクリックする。
templateノード内の編集
templateノード内に以下のコードを記載する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>LINE ログイン</title>
</head>
<body>
<div id="app">
<img :src=pictureUrl alt="profile" width="100px" align="left"/>
<h2><% displayName %></h2>
<p><% userId %></p>
<p><% statusMessage %></p>
<button @click=logout>ログアウトする</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
<script>
'use strict';
const app = new Vue({
el: '#app',
data: function(){
return{
displayName: '',
userId: '',
statusMessage: '',
pictureUrl: '',
}
},
delimiters: ["<%","%>"],
methods: {
//プロフィール取得関数
getProfile: async function(){
const accessToken = liff.getAccessToken();
const profile = await liff.getProfile();
this.displayName = profile.displayName; //名前
this.userId = profile.userId; //ID
this.pictureUrl = profile.pictureUrl; //アイコン画像
this.statusMessage = profile.statusMessage; //ステータスメッセージ
},
//ログアウト処理
logout: async function(){
if (liff.isLoggedIn()){
alert('ログアウトします。');
liff.logout();
window.location.reload();
}
},
},
//ページを開いた時に実行
mounted: async function(){
await liff.init({
liffId: 'xxxxxxxxxxxxxxxxxxx' //LIFFのID
});
//LINE内のブラウザかどうか
if(liff.isInClient()){
alert('LINE内のブラウザ');
this.getProfile(); //LINE内で開いた場合はログイン処理なし
}else{
//外部ブラウザかどうか
if(liff.isLoggedIn()){
alert('外部ブラウザ');
this.getProfile();
}else{
liff.login();
}
}
}
});
</script>
</body>
</html>
Node-REDとLIFFの接続
メモしておいたLIFF URL「line://app/xxxxxxxxxxxxxxxxxxx」のxxxxxxxxxxxxxxxxxxxの部分を、templateの中のコードに貼り付ける。(下記のxxxxxxxxxxxxxxxxxxxの部分)
liffId: 'xxxxxxxxxxxxxxxxxxx'
デプロイし、完成！！
Node-REDで作成したURLにアクセスし、試してみる！
おわりに
メモ書きのため、伝わりにくい部分があったら申し訳ありません。
アドバイスをコメントなどでもらえると助かります。