LINEログイン機能をNode-REDで実装

13169 ワード
IBMChampion IBM-Cloud LineLogin LIFF node-red node-red テキストリンク

はじめに

今回は、ハッカソンでよく利用される、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ノード内に以下のコードを記載する。

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の部分)

template
liffId: 'xxxxxxxxxxxxxxxxxxx'

デプロイし、完成！！
Node-REDで作成したURLにアクセスし、試してみる！

おわりに

メモ書きのため、伝わりにくい部分があったら申し訳ありません。
アドバイスをコメントなどでもらえると助かります。

参考資料

LIFF v2でLINEログイン、QRスキャン、LIFFからメッセージ送信などを試すハンズオン #ヒーローズリーグ