LINE BOTアプリとLIFFを利用して既存WEBサービスをログインレス化する part.2

5296 ワード
LIFF spring-boot LINEmessagingAPI linebot spring-boot テキストリンク

概要

下記のpart.1の記事ではLINE側で発行されたIDと既存サービスのIDの紐付けを安全に行う方法を解説しました。
本記事ではLIFFとLINE側が用意している認証認可機能を利用してログインレスシステムを実現いたします。

またpart.1同様下記のサンプルプログラムを利用して解説を行います。

解説

1. 前提

前提としてWEBサービスをHTML、CSS、JSなどを生成するVIEW機能とその中のコンテンツデータを取得及び更新するAPIに分離しています。
今回後者のAPI部分をLINE側が用意している認証認可機能を利用します。

2. LIFF初期化

LIFFを利用するためにまず初期化を行います。

liff.init({
  liffId: defaultLiffId,
  withLoginOnExternalBrowser: true
})
.then(() => {
  console.log("liff init success");
 });

3. アクセストークン取得

LIFFでは下記のコードのようにgetAccessTokenメソッドを呼ぶことでアクセストークンを取得できる機能が用意されています。
下記の例ではAPIサーバ側のLINEIDを取得するAPIを呼んでいます。
取得したアクセストークンはヘッダに詰めてAPIサーバに送信します。

const accessToken = liff.getAccessToken();
axios.get("{change your domain}/liff/getLineId",{
  headers: {
    'Authorization': 'Bearer ' + accessToken
  }
})
.then(function(response){
  const userId = response.data;
  alert(userId);
});

4. userId取得

送信したアクセストークンAPIサーバ側で抽出し、LINEのアクセストークン検証APIに送ります。そうするとpart.1で取得したLINE側のuserIdが取得できます。Springでは下記のように実装すればuserIdを取得できます。(LineAuthResponseクラスは自分で実装しています。サンプルプログラムを参照してください。)

ResponseEntity<LineAuthResponse> auth
  = restTemplate
    .getForEntity(URI.create("https://api.line.me/oauth2/v2.1/verify?access_token=" + accessToken)
    , LineAuthResponse.class);

このuserIdはDBにWEBサービス側のIDとセットで保存されています。
そのためuserIdをキーにしてDB検索すればどのユーザがLIFFを通じてアクセスしてきているかログインせずに安全に特定する事ができます。
例えばECサイトなどで特定したユーザに紐づく属性情報（住所や購入履歴など）を返しても問題ない
もし特定できなければ、紐付けできていないユーザか不正にアクセスしているかのどちらかなので401などのレスポンスを返すようにします。

まとめ

ログインレスでシステムを構築することで、ユーザビリティを向上させることができます。
その際に課題となるセキュリティ面の保証をLINEというプラットフォームに任せることで簡単に実装できます。
ユーザ目線でも認知度が高いプラットフォームなので安心して使うことができるのではないでしょうか。また、ミニアプリとしてサービス展開できます。アプリのようにインストールして使う必要がないのでうまく活用すれば新規ユーザの獲得も見込めると思います。

免責

この記事にはセキュリティに関する内容が含まれています。
最新の注意を払って記事を執筆していますが、この記事によって起こった損害については一切保証しかねます。
この記事を参考にし同様の実装を行う際には改めて問題はないか検討し、自己責任で適応していただきますようお願い致します。