ユーザーの登録状態に応じて LINE 公式アカウントのリッチメニューを切り替える【実装編】

LINEのサービスを活用してよくある体験を実現する記事です。ユーザーの登録状態に応じてLINE公式アカウントのリッチメニューを切り替える仕組みを実装していきます。
2021.03.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

今回は以前投稿されたユーザーの登録状態に応じて LINE 公式アカウントのリッチメニューを切り替えるの具体的な実装方法を紹介したいと思います。

最終的なイメージはこちら。

ややわかりにくい部分はありますが、会員登録の前後でLINEのトーク画面のメニューが切り替わっていることが確認できると思います。なぜこのようなことをする必要があるのか?という部分については上記のブログを参考にしてください。今回実装したコードはこちらになります。

進め方

以下のような手順で進めていきます。

  1. LINE Developer より LINE ログイン/LIFF アプリを登録
  2. LINE Developer より Messaging API を登録
  3. Amplify Console で LIFF アプリをデプロイ
  4. サーバーサイドのコードを修正
  5. LIFF アプリのエンドポイントを変更
  6. リッチメニューを登録
  7. 環境変数を設定しサーバーサイドをデプロイ
  8. 環境変数を設定し LIFF アプリを再デプロイ

React と CDK で LIFF アプリを作ってみようをベースに必要なところを追加で実装します。

本ブログの構成イメージ

やってみた

それでは早速やっていきましょう。

LINE Developer より LINE ログイン/LIFF アプリを登録

LINE ログイン/LIFF アプリの登録を参考に LIFF アプリを登録します。エンドポイント URL は後ほど変更するため、一旦任意の URL を登録しておきます。

LINE Developer より Messaging API を登録

Messaging API とは、LINE のプッシュ通知や応答メッセージなど LINE 公式アカウントとユーザーを繋ぐ機能を提供しています。LINE ログインと同様、LINE Dveloper にて登録します。チャネル名、チャネル説明等は任意の名前を入力します。作成が完了すると MessagingAPI 設定よりチャネルアクセストークン(長期)が発行できるようになるため、その値を取得します。

Amplify Console で LIFF アプリをデプロイ

上記ブログのコードに対し、入力フォームの実装、Amplify Console の設定ファイルを追加し GitHub にプッシュします。その後、Amplify Console を利用し SPA をホスティングします。

Amplify Console とは静的 Web サイトをホスティングするためのサービスです。スマホからリッチメニューを確認するためにこのサービスを利用します。Amplify Console の詳しい説明については以下をご確認ください。

マネジメントコンソール上での操作は以下を参考に実施してください。

サーバーサイドのコードを修正

LIFF のサーバーサイドでは、LambdaAuthorizer によって LINE の UserID(LINE 公式アカウントのプロバイダーで一意になる値)を取得しています。リッチメニューを変更する際にはこの UserID と MessagingAPI のチャネルアクセストークン、変更後のリッチメニュー ID を利用します。コードを以下のように変更します。

export const handler = async (event: LambdaEvent): Promise<APIGatewayProxyResult> => {
  console.log('event: ', JSON.stringify(event, null, 2))
  const lineUserId = event.requestContext.authorizer.lineUserId

  // メインのユーザー登録処理などを実施
  
  const richMenu = process.env.AFTER_REGISTRATION_RICH_MENU_ID
  const channelAccessToken = process.env.CHANNEL_ACCESS_TOKEN

  try {
    await fetch(`https://api.line.me/v2/bot/user/${lineUserId}/richmenu/${richMenu}`, {
      method: 'POST',
      body: '{}',
      headers: {
        Authorization: `Bearer ${channelAccessToken}`,
        'Content-Type': 'application/json',
      },
    })
  } catch (err) {
    console.log(err.toString())
  }

  return {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': '*',
    },
    body: JSON.stringify({}),
  }
}

MessagingAPI のチャネルアクセストークン、変更後のリッチメニュー ID は環境変数にて設定します。

LIFF アプリのエンドポイントを変更

LIFF アプリのエンドポイント URL を AmplifyConsole がホスティングする URL に変更します。

リッチメニューを登録

公式ドキュメントを参照し会員登録前のリッチメニュー(会員登録で100ポイント獲得!)、会員登録後のリッチメニュー(会員情報の確認)を登録します。

実行する API は以下の 3 つです。

postman で実行したAPIをエクスポートしたファイルはこちらになりますので参考にしてください。

環境変数を設定しサーバーサイドをデプロイ

登録後のリッチメニュー ID と MassagingAPI のチャネルアクセストークンを環境変数 AFTER_REGISTRATION_RICH_MENU_IDCHANNEL_ACCESS_TOKEN に設定しサーバーサイドのアプリケーションをデプロイします。

yarn backend:build
yarn backend:deploy

環境変数を設定し LIFF アプリを再デプロイ

公式ドキュメントを参考に、Amplify Console の環境変数に REACT_APP_LIFF_IDREACT_APP_API_URL を設定します。REACT_APP_API_URL には先ほどデプロイしたサーバーサイドのアプリケーションの URL を指定します。何かしらリポジトリ内のコードを修正し AmplifyConsole を再実行します。

デプロイ完了後、LINE Developer の Messaging API より QR コードを読み取り友達になると、冒頭で紹介したアプリが利用できます。

おわりに

以上、 MessagingAPI を利用したリッチメニュー変更の Tips でした!