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

#はじめに
今回は、ハッカソンでよく利用される、Node-REDとLINEのAPIを用いたものを記載する。
第一弾として、LINEログイン機能の実装方法をここに記す。
※自身が今後利用するためのメモ書き
#LINE Developers
##LINE Developersにログイン
[LINE Developers](https://developers.line.biz/en/)にログインする。
<img width="1355" alt="スクリーンショット 2020-03-11 18.06.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/e1d8f4a2-9fcb-d499-a8fb-d2c1034b1cb9.png">

##プロバイダーの作成
プロバイダーを作成する。
<img width="1100" alt="スクリーンショット 2020-03-11 18.05.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/f527dd31-9c72-c327-3622-14460907c5ff.png">

##チャンネルの作成
チャンネルタイプを「LINE Login」とし、先ほど作成したプロバイダーを選択し、チャンネルを作成する。
<img width="1153" alt="スクリーンショット 2020-03-11 18.07.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/2d062b22-8f7d-725b-c87a-7120cff2b9cb.png">

##LIFFアプリケーションの作成
LIFFアプリケーションを作成する。
<img width="1147" alt="スクリーンショット 2020-03-11 18.22.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/9bf8a4bb-c4c8-884b-710f-e32b1db8217f.png">
Endpoint URLは、下記に記載するNode-REDで作成したURLにする。
<img width="1136" alt="スクリーンショット 2020-03-11 18.23.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/8f894614-b189-808f-e461-46ccaecd87f4.png">

作成し終えたら、LIFF detail内のLIFF URL「line://app/xxxxxxxxxxxxxxxxxxx」のxxxxxxxxxxxxxxxxxxxの部分をメモしておく。(後でNode-REDとの接続の際に使用するため)

#Node-RED
※Node-REDに登録してある前提で以下を記載
##Webページの作成
ノード置き場から以下のノードを取り出し取り出し、作業エリアに配置する。
・「入力」エリアにある「http」ノード
・「機能」エリアにある「template」ノード
・「出力」エリアにある「http response」ノード
左からこれらのノードを順に並べ、繋ぐ。
<img width="566" alt="スクリーンショット 2020-03-12 20.47.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/f8751c88-f32a-1058-969e-064c23c38351.png">
「http」ノードの編集画面を開き、URL欄にWebページの表示用のアドレス (今回は "/line") を入力して、「完了」をクリックする。
そして、右上のデプロイをクリックする。

##templateノード内の編集
templateノード内に以下のコードを記載する。

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

```html:template
liffId: 'xxxxxxxxxxxxxxxxxxx'
```

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

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

#参考資料
[LIFF v2でLINEログイン、QRスキャン、LIFFからメッセージ送信などを試すハンズオン #ヒーローズリーグ](https://qiita.com/n0bisuke/items/e367bb2d96e9b0cbc4ba)