Node-REDでLIFF動かしてみた(ブラウザで動かす編)

9552 ワード
linebot JavaScript フロントエンド node-red LIFF JavaScript テキストリンク

前回の記事ではLIFF V2を使ってNode-REDで動く認証機能付きWebアプリを作りました。記事で作ったアプリはLINEのアプリ上で立ち上げることで自分のLINEのユーザー名を表示させるだけのシンプルな構造でした。ですが、この記事の中でも述べていますが、LIFF V2の醍醐味はLINEアプリだけではなく、外部ブラウザからアプリにアクセスしたときにも認証機能をつけることができることです。というわけで今回は前回のアプリを外部ブラウザからでも認証することでユーザ情報を取得することを試していきます。なお、今回の記事は前回の内容を済ませている前提で話を進めます。

前回まで作成したアプリ


前回はLINEアプリ上で立ち上げると、LINEのユーザ名を出力するアプリを作成しました。これをブラウザ上で立ち上げてみます。ブラウザで【Node-REDのURL】/liffv2で起動してみると以下の画面が出力されます。

このエラーはブラウザ上でまだ認証機能を入れてないからユーザーの情報を取得できないというエラーです。普通は認証処理を実装するときはサーバーサイドと連携する必要がありますが、LIFF v2ではフロントエンドのJava Scriptだけで完結できるAPIが揃っています。

V2に追加されたAPI

ブラウザ対応させるために使うAPIをまとめます。この他にもLIFF V2に追加されたAPIを知りたい方は、こちらのブログが参考になります。

liff.isInClient()

これはLIFFアプリがLINEのアプリ上で起動しているかどうかを判別するときに使うAPIです。trueならLINEのアプリ上で動作しており、falseならWebブラウザ上で動作していると判断できます。

liff.isLoggedIn()

ユーザがLIFFアプリにログインしているかどうかを判別するときに使います。trueならログインしており、falseならログアウトしています。

liff.login()

WebブラウザでLINEログインを行うことができます。ログインページに遷移しログインが完了すると、元の画面に戻ります。ログインが完了すると、認証のいるLIFFの機能を使用することが可能です。なお、このAPIはブラウザでアクセスする際に使います。引数にリダイレクト先のURLを指定することで、別画面にリダイレクトします。

実際に使ってみる

それでは、上記で紹介したAPIを利用して、前回のアプリを改良します。templateノードの中身を以下のコードに変更します。

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>LIFF Starter</title>
    </head>
    <body>
        <h1 id="displaynamefield"></h1>

        {{!--load LIFF SDK--}}
        <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
        <script>
            var userId = "";
            window.onload = function() {
                initializeLiff("{{payload}}");
            };

            function initializeLiff(myLiffId) {
                liff
                    .init({
                        liffId: myLiffId
                    })
                    .then(() => {
                        //LINEアプリで起動しているかどうかとログインをしているのかを判断している
                        if (!liff.isInClient() && !liff.isLoggedIn()){
                            window.alert("LINEアカウントにログインしてください。");
                            liff.login();
                        }else{
                            // start to use LIFF's api
                            liff.getProfile().then(function(profile) {
                                document.getElementById('displaynamefield').textContent = 'ようこそ' + profile.displayName + 'さん';
                                userId = profile.userId;
                            }).catch(function(error) {
                                window.alert('Error getting profile: ' + error);
                            })
                        }

                    })
                    .catch((err) => {
                        document.getElementById('displaynamefield').textContent = "LINEアプリで開いてください。";
                    });
            }
        </script>
    </body>
</html>

変更したらデプロイして、もう一度パソコンかスマホのブラウザで、【Node-REDのURL】/liffv2にアクセスしてみましょう。すると、先ほどと変わって以下のアラートが表示されてLINEアカウントへのログインを促します。

以下のようなログイン画面が表示されますのでログインします。

先程の画面にもどり、LINEアプリのときと同様にLINEのユーザ名が表示されたら、成功です。

まとめ

これで簡単にLINEを使った認証アプリがブラウザでも動作するようになりました。今までフロントエンドで完結する認証アプリを作ったことがなかったので最初は戸惑いましたが、サンプルコードやドキュメントを見ながら実装できました。これでLINEを活用したアプリケーションの可能性が広がると感じました。