Node-REDでLIFF動かしてみた

18453 ワード
linebot LIFF node-red node-red テキストリンク

Node-REDで認証機能を使ったアプリケーションを作るときはセッションが使えないなどの制約があり思い通りの設計が出来ないこともあるとおもいます。そんな時、LIFFを使えばLINEの認証機能を使ったアプリケーションを簡単に作ることが出来ます。というわけで、新年1発目はNode-REDでLIFFを使ったWebアプリケーションを使ってみました。なお、今回は昨年リリースされたLIFF V2向けの開発方法を紹介しますので、工夫すればブラウザでもLIFFアプリを動かすことができます。（今回はブラウザ対応にしてません。）ブラウザに対応させた話はこちらで紹介してますので、合わせてどうぞ。

今回のフロー

今回はLINEアプリでLIFFを開くと自動ログインして画面にLINEのユーザー名が表示されるだけのアプリです。Node-REDで以下のJSONをインポートしてお使いください。

[
    {
        "id": "b59bc4d3.917488",
        "type": "tab",
        "label": "フロー 1",
        "disabled": false,
        "info": ""
    },
    {
        "id": "49eeb9d7.b013e8",
        "type": "http in",
        "z": "b59bc4d3.917488",
        "name": "",
        "url": "/liffv2",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 160,
        "y": 120,
        "wires": [
            [
                "ccb5bcbe.5d6bf"
            ]
        ]
    },
    {
        "id": "e184963c.01a588",
        "type": "http response",
        "z": "b59bc4d3.917488",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 690,
        "y": 120,
        "wires": []
    },
    {
        "id": "80b9e0e4.c75be",
        "type": "template",
        "z": "b59bc4d3.917488",
        "name": "v2",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<html>\n    <head>\n        <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>LIFF Starter</title>\n    </head>\n    <body>\n        <h1 id=\"displaynamefield\"></h1>\n\n        {{!--load LIFF SDK--}}\n        <script src=\"https://static.line-scdn.net/liff/edge/2.1/sdk.js\"></script>\n        <script>\n            var userId = \"\";\n            window.onload = function() {\n                initializeLiff(\"{{payload}}\");\n            };\n            \n            function initializeLiff(myLiffId) {\n                liff\n                    .init({\n                        liffId: myLiffId\n                    })\n                    .then(() => {\n                        // start to use LIFF's api\n                        liff.getProfile().then(function(profile) {\n                            document.getElementById('displaynamefield').textContent = 'ようこそ' + profile.displayName + 'さん';\n                            userId = profile.userId;\n                        }).catch(function(error) {\n                            window.alert('Error getting profile: ' + error);\n                        })\n                    })\n                    .catch((err) => {\n                        document.getElementById('displaynamefield').textContent = \"LINEアプリで開いてください。\";\n                    });\n            }\n        </script>\n    </body>\n</html>",
        "output": "str",
        "x": 550,
        "y": 120,
        "wires": [
            [
                "e184963c.01a588"
            ]
        ]
    },
    {
        "id": "ccb5bcbe.5d6bf",
        "type": "change",
        "z": "b59bc4d3.917488",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "1653453273-3ybAnYe0",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 360,
        "y": 120,
        "wires": [
            [
                "80b9e0e4.c75be"
            ]
        ]
    }
]

デプロイして、ブラウザで【Node-REDのURL】/liffv2を開くと以下の画面が出力されます。LIFFの設定をしていないので、この時点ではLINEのユーザ名が出力されません。このURLでLIFFを設定するので予めメモしておきましょう。

LIFF URLを生成する

LIFF v2からはLIFFを動かすためにLIFF URLに含まれているLIFF IDを動かすアプリケーションに設定する必要があります。そこで、LIFFを動かすためのLINE botのチャンネルを用意します。こちらを参考にして作成したら、LIFFのタブを開き先程メモしたURLをエンドポイントURL（【Node-REDのURL】/liffv2）にコピーします。この時、URLはHTTPSで入力してください。それ以外に項目がありますが、今回はプロフィール名を表示するので、Scopeの欄のProfileにはチェック入れてください。それ以外はお好みの設定で大丈夫です。

作成ボタンを押すとLIFFの一覧が出力されます。先程のURLをメモしておきましょう。

Node-RED側の設定

先程用意したフローの中のChangeノード（左から2つ目のノード）を開き、先程メモしたLIFF URLのうち、line://app/以降の文字列をmsg.payloadに代入させます。この文字列がアプリ内で定義しなければならないLIFF IDです。

動作確認

それでは、動作確認です。先程のLINE botを友だち追加して、メッセージでLIFF URLを投稿しておきます。スマホのLINEアプリから投稿したリンクをタップしてLIFFを立ち上げてみましょう。iPhoneにプリインストールされたメモ帳アプリに記入したURLからでも開くことができます。初回の起動の際には権限の許可を求められるので、許可しておきましょう。


許可するとタブが立ち上がり、ユーザー名が画面に表示されたら成功です。

今回はLIFFアプリをNode-REDで作ってみました。これでユーザ認証がフロントエンド上で行うことができ、Node-REDのようにセッションが使えない開発環境でも認証アプリを作ることができます。 ブラウザでも動かせるように設定することができるので、気が向いたら対応させてみようとおもいます。
ブラウザ対応させたLIFFは、続編としてこちらでまとめてます。