LIFFサイトの始め方、flaskでのログイン管理方法

現在、スマートデバイスが拡張性と便利性を提供していますが、それらをさらに強化する技術のひとつがLIFF（Line Front-End Framework）が有効です。LIFFはLINEのフロントエンドフレームワークで、LINEの各種機能をWebアプリケーション上で扱うことが可能です。今回は、LIFFの始め方と、pythonのflaskを用いた認証サンプルをご紹介します。

LIFFとは何か？

LIFF（Line Front-end Framework）はLINEが提供するフロントエンドフレームワークであり、LINEの各種機能を独自のWebアプリケーション上で利用することが可能です。これにより、LINEのユーザーに対して、プッシュ通知やチャット機能など独自の機能を提供することができます。

LIFFの初期設定

LIFFの初期設定はLINE Developersサイトで行います。以下に手順を説明します：

LINE Developersサイトにアクセスします。
「プロバイダー」を作成します。これは、作成したアプリケーションを管理するための組織です。
「チャンネル」を作成します。チャンネルはLINEとあなたのアプリケーションを連携するためのトンネルのようなものです。
「LIFFアプリ」を作成します。ここで自身のWebアプリケーションのURLを登録します。

LIFF SDKとJavaScriptでの認証サンプル

LIFF SDKを利用してJavaScriptで認証を行う基本的に方法は以下の通りです：

初期設定

まず、HTMLドキュメント内でLIFF SDKを読み込みます：

javascript

<script src="https://static.line-scdn.net/liff/edge/versions/2.7.1/sdk.js"></script>

SDKが読み込まれたら、次にアプリを初期化します。初期化するためには、LIFFポータルで取得したliffIdが必要です：

javascript

liff.init({ liffId: 'YOUR-LIFF-ID' })
.then(() => {
    // LIFFの初期化が成功した場合の処理
})
.catch((err) => {
    // LIFFの初期化が失敗した場合の処理
});

サインイン

ユーザーがアプリを使うのに最初に行うことは、サインインです。サインインを促すために、次のコードを追加します：

javascript

if (!liff.isLoggedIn()) {
    // ログインしていない場合、ログイン画面に遷移
    liff.login();
} else {
    // ログインしている場合、ユーザー情報を取得
    liff.getProfile().then(profile => {
        // ユーザー情報の取得に成功した場合の処理
    })
    .catch((err) => {
        // ユーザー情報の取得に失敗した場合の処理
    });
}

サインアウト

ユーザーがサインアウトしたい場合には、次のコードを追加します：

javascript

liff.logout();
window.location.reload();

これで、基本的なLIFFの初期設定とJavaScriptによる認証が完成しました。次は、pythonのflaskを用いたログイン情報の管理方法を紹介します。

PythonのWebフレームワークであるFlaskを使えば、LIFFのログイン情報を効率的に管理することが可能です。ここでは、最も基本的なFlaskを利用したサーバ側でのログイン情報の管理方法を説明します。

Flaskのインストールと初期設定

FlaskをインストールするにはPythonが必要です。Pythonがインストールされていることを確認したら、次のpipコマンドを実行してFlaskをインストールします：

bash

pip install flask

Flaskアプリケーションを作成します：

python

from flask import Flask, request, jsonify

app = Flask(__name__)

他のすべてのFlaskの設定が完了したら、以下のコードを追加して、アプリケーションが起動するポートを指定し、実行します：

python

if __name__ == "__main__":
    app.run(port=5000)

LIFFのIDトークンの検証

先ほどの、JavaScriptでのログイン認証処理とFlaskを用いたサーバー側を連携させて、ユーザー管理を行う方法を以下に説明します。

Step 1: LIFFによるログインとIDトークンの取得

まず、JavaScriptを使ってLINEのユーザーログインを実現するコードを再掲します：

javascript

if (!liff.isLoggedIn()) {
    // ログインしていない場合、ログイン画面に遷移
    liff.login();
} else {
    // ログインしている場合、IDトークンを取得
    const idToken = liff.getIDToken();
    // この後、このIDトークンをサーバに送信
}

ここの重要なポイントはliff.getIDToken()の部分です。これはログインしたユーザーのIDトークンを取得します。このトークンをサーバー側（この場合、PythonのFlaskを実行しているサーバー）に送信します。

Step 2: IDトークンの送信

JavaScript内のFetch APIを使用して、ログインしたユーザーのIDトークンをサーバに送ります：

javascript

fetch('http://YOUR_SERVER_URL/verify', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        idToken: idToken,
    }),
}).then(response => response.json())
.then(data => {
    if (data.success) {
        // IDトークンの検証成功
    } else {
        // IDトークンの検証失敗
    }
}).catch((error) => {
    console.error('Error:', error);
});

このスクリプトは、ユーザーのIDトークンをhttp://YOUR_SERVER_URL/verifyにPOSTします。そして、その応答を受け取ります。

Step 3: IDトークンの検証とユーザ情報の保存

Flask側では、上述した方法で受け取ったIDトークンを検証し、正しいユーザー情報を保存します。以下にそのコードの一部を再掲します：

python

from flask import Flask, request, jsonify
from linebot import LineBotApi
from linebot.exceptions import LineBotApiError

app = Flask(__name__)
line_bot_api = LineBotApi('YOUR_CHANNEL_ACCESS_TOKEN')


@app.route('/verify', methods=['POST'])
def verify():
    id_token = request.get_json()['idToken']
    try:
        line_bot_api.verify_id_token(id_token, 'YOUR_CHANNEL_SECRET')
        // ユーザー情報の保存がここで行われます
        return jsonify(success=True)
    } catch (LineBotApiError) {
        return jsonify(success=False)
    }
}

LIFFの認証情報の格納

エンドポイントがIDトークンを検証したら、次に必要なステップはログインユーザーの認証情報を安全に保存することです。認証情報は、一般的にデータベースに格納されます。最も簡単な方法は、SQLiteを使用することです。以下にその方法を示します：

まず、Flask-SQLAlchemyパッケージをインストールします：

bash

pip install Flask-SQLAlchemy

Flask-SQLAlchemyを使用してデータベースを設定します：

python

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////tmp/test.db'
db = SQLAlchemy(app)

ユーザーモデルを作成し、データベースにユーザーの認証情報とIDトークンを保存します：

python

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    id_token = db.Column(db.String(120), unique=True, nullable=False)

    def __repr__(self):
        return '<User %r>' % self.username

認証情報がサーバに送信されると、以下のようにデータベースに保存します：

python

@app.route('/store', methods=['POST'])
def store():
    creds = request.get_json()
    u = User(username=creds['username'], id_token=creds['idToken'])
    db.session.add(u)
    db.session.commit()
    return jsonify(success=True)

この方法を用いることで、上述のJavaScriptコードで取得したLIFFの認証情報をPythonのFlaskを利用して管理することが可能となります。これにより、ユーザーアクセスが安全かつ確実に管理されます。