1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Node-REDでLIFF動かしてみた

Last updated at Posted at 2020-01-01

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

今回のフロー

コメント 2020-01-01 180001.png

今回は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を設定するので予めメモしておきましょう。

コメント 2020-01-01 175907.png

LIFF URLを生成する

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

コメント 2020-01-01 182256.png

作成ボタンを押すとLIFFの一覧が出力されます。先程のURLをメモしておきましょう。
コメント 2020-01-01 183033.png

Node-RED側の設定

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

コメント 2020-01-01 183706.png

動作確認

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

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

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?