LINEミニアプリの「サービスメッセージ」を試してみた④ : ミニアプリからLIFFアクセストークン付きでアクセスする

BULB加藤です。LINEミニアプリのサービスメッセージの開発検証、引き続きやっていきます！

①:概要確認 https://zenn.dev/bulb/articles/b10f61b983a949
②:開発環境準備 https://zenn.dev/bulb/articles/8528cd7d830532
③:サーバ構築 https://zenn.dev/bulb/articles/e369d3e41935ec
④:ミニアプリ開発 https://zenn.dev/bulb/articles/7b576300730c42 ←
⑤:APIをデプロイ https://zenn.dev/bulb/articles/3b237d1fdc1183

ミニアプリはとりあえずデプロイしておく

LIFFをLINEミニアプリとして動かせる状態が前提です！まだの場合はこちらなどを参考にしてみてください。
https://zenn.dev/bulb/articles/fb0666bb027a79
https://developers.line.biz/ja/docs/line-mini-app/quickstart/

LIFFアクセストークンを取得してサーバーへ送信する

今回やりたいのは、LINEミニアプリ内のアクションによってサービスメッセージを送らせるという実装です。

Reactで作っているので、下準備としてaxiosをインストールしときます。

$ npm install axios

ビューのコードを書いていくapp.jsでaxiosをimport

app.js

import axios from 'axios';

LIFF initしてLINEログイン処理

アクセストークンを取るためにはLIFF initで初期化しログイン状態を確認できる必要があります。

LIFFの公式ドキュメントにもありますが、こんなかんじでOK。

app.js

window.onload = function() {
  const defaultLiffId = "#########-########"; //LIFF IDを入れる
  initializeLiff(defaultLiffId);
};

function initializeLiff(myLiffId) {
  liff
  .init({
      liffId: "#########-########" //LIFF IDを入れる
  })
  .then(() => {
    if (liff.isLoggedIn()) {
      setuid()
    } else {
      window.alert('ログアウト')
      liff.login()
    }
  })
  .catch((err) => {
      window.alert('Something went wrong with LIFF initialization.');
  });
}

UIを置く

画面からサービスメッセージ送信するためのテキストリンクを置いておきます。

コンポネントのreturn内のjsxに、かんたんにこんなのを追記。見えるとこならどこでも良し。

app.js

<a href="#" onClick={getServiveMessage(accessToken)}>サービスメッセージを送る</a>

クリックしたら関数getServiveMessageでアクセストークンを送るようにします。getServiveMessageがまだないので作ります

僕の開発画面。関係ない要素も入ってしまっていますが、とりあえずサービスメッセージを送るためのUIが作れました。

トークンAPIへのリクエスト

以下のような関数を追記します。

app.js

function getServiveMessage(accessToken){
  axios.get(`https://#######.herokuapp.com/?access_token=` + accessToken) 
  .then(res => {
    window.alert('アクセストークンを送りました')
  })
}

https://#######.herokuapp.com/　にはご自身で設定したAPIのURLを入れておきましょう。

さて、ここまでで細かい作業は完了です。

あとはherokuにアプリケーションとAPIをデプロイしてLINE上から試して見るだけです！