こんにちは。エンジニアの砂町です。
前回の記事に続き、今回もLINE BOT開発のお話をします。
前回は「LaravelでLINE Message API使ってみた」という内容をお話ししました。
※前回の記事はこちら => LaravelでLINE Message API使ってみた
今回は「LIFF（LINE Login）」のことについて話したいと思います。
LIFFとは
みなさん、LIFFという言葉を聞いたことがありますか？私は今回の開発に携わるまでLIFFを聞いたことがありませんでした。
LIFFとは「LINEのアプリ上で動くWebアプリ」のことです。
LIFFを活用することで
- LINEに登録しているアカウント情報を用いてログインの手間を省く
- トークルームにメッセージを送信する
といったことが可能になります。
公式のドキュメントには下記のような内容が記述されています。
LINE Front-end Framework（LIFF）は、LINEが提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。
LIFFアプリを使うと、LINEのユーザーIDなどをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできます。
引用元：LINE Developers
LIFFを使うまでの流れ
LIFFを使うためのざっくりとした流れとしまして、
- LINE Developersに登録する。(前回の記事でMessage APIで登録していれば不要)
- 新規プロバイダーを作成する。(前回の記事でMessage APIで登録していれば不要)
- チャンネルを作成する（LINE Loginのチャンネル）
- 作成したチャンネルの中でLIFFアプリを作成
- プロジェクトにnpmで「@line/liff」をインストール
4のLIFFアプリを作成の際に指定したエンドポイントのURLを叩けば、アプリが動いているのを確認することができると思います。
LIFFアプリはLINE内ブラウザだけでなく、外部ブラウザでも動かすことができます。
※その際利用できる機能が制限されることもあるのでご注意ください。またLIFFアプリは、チャンネルの中で複数作成することも可能です。
LIFFを触ってみる
/*
import liff from '@line/liff';
import React, {useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import * as Config from '../config';
function LiffPage() {
useEffect(()=>{
initLiff()// 初期化処理
}, [])
/**
* LIFFの初期化を行う
* 初期化完了. 以降はLIFF SDKの各種機能を利用できる
* =>初期化前でも使用できる機能もある（liff.isInClient()など）
*/
const initLiff = () => {
liff.init({ liffId: Config.LIFF_ID})
.then(()=>{
//ログインしていなければログインさせる
if(liff.isLoggedIn() === false) liff.login({})
}).catch( (error)=> {});
}
/**
* LINEで保持しているユーザー情報取得
*/
const getUserInfo = () => {
liff.getProfile().then(profile => {
alert( JSON.stringify(profile) );
}).catch((error)=>{})
}
return (
<>
{/* LIFF内以外からアクセス */}
{liff.isInClient() === false ?
<p>ブラウザからはお使いいただけません。LINE内アプリ（LIFF）からご利用ください。</p>
:
<p>こんにちは</p>
}
</>
);
}
export default LiffPage;
if (document.getElementById('LiffContent')) {
ReactDOM.render(
,
document.getElementById('MachineContent')
);
}
公式のドキュメントにはいろんな機能がまとめられているので、ぜひ遊んでみてください！
引用元：公式ドキュメント
