Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

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

はじめに

今回は、ハッカソンでよく利用される、Node-REDとLINEのAPIを用いたものを記載する。
第一弾として、LINEログイン機能の実装方法をここに記す。
※自身が今後利用するためのメモ書き

LINE Developers

LINE Developersにログイン

LINE Developersにログインする。
スクリーンショット 2020-03-11 18.06.10.png

プロバイダーの作成

プロバイダーを作成する。
スクリーンショット 2020-03-11 18.05.26.png

チャンネルの作成

チャンネルタイプを「LINE Login」とし、先ほど作成したプロバイダーを選択し、チャンネルを作成する。
スクリーンショット 2020-03-11 18.07.33.png

LIFFアプリケーションの作成

LIFFアプリケーションを作成する。
スクリーンショット 2020-03-11 18.22.18.png
Endpoint URLは、下記に記載するNode-REDで作成したURLにする。
スクリーンショット 2020-03-11 18.23.38.png

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

Node-RED

※Node-REDに登録してある前提で以下を記載

Webページの作成

ノード置き場から以下のノードを取り出し取り出し、作業エリアに配置する。
・「入力」エリアにある「http」ノード
・「機能」エリアにある「template」ノード
・「出力」エリアにある「http response」ノード
左からこれらのノードを順に並べ、繋ぐ。
スクリーンショット 2020-03-12 20.47.15.png
「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からメッセージ送信などを試すハンズオン #ヒーローズリーグ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?