驗證碼小幫手現在預設的圖文選單是獲取驗證碼，可是使用者在身分認證前並不能使用這個功能，也就是說身份認證前後看到的圖文選單應該是不同的～

準備不同的 Rich Menu

首先當然是要先建立兩個不同的 Rich Menu，這次會用到 Messaging API 去建立圖文選單，因為只有使用這種方式建立的 才能用 Messaging API 進行切換。

文件

Creating rich menus with the Messaging API

LINE Bot Designer

這是一個好用的工具～幫助你用圖像的方式產生 Rich Menu 需要的 JSON
LINE Bot Designer

使用 LINE Bot Designer，無需任何程式相關知識，即可更快速輕鬆地設計 LINE 聊天機器人原型，依據所需的場景，自由設計聊天機器人。

尚未執行身份認證時的圖文選單

可以得到 JSON 如下：

{
  "size": {
    "width": 2500,
    "height": 843
  },
  "selected": true,
  "name": "bindMailFirst",
  "chatBarText": "身份認證",
  "areas": [
    {
      "bounds": {
        "x": 0,
        "y": 0,
        "width": 1253,
        "height": 843
      },
      "action": {
        "type": "uri",
        "uri": "YOUR_LIFF_APP_URL"
      }
    },
    {
      "bounds": {
        "x": 1254,
        "y": 0,
        "width": 1246,
        "height": 843
      },
      "action": {
        "type": "uri",
        "uri": "YOUR_LIFF_APP_URL/validate"
      }
    }
  ]
}

已執行身份認證時的圖文選單

可以得到 JSON 如下：

{
  "size": {
    "width": 2500,
    "height": 843
  },
  "selected": false,
  "name": "獲取驗證碼",
  "chatBarText": "獲取驗證碼",
  "areas": [
    {
      "bounds": {
        "x": 0,
        "y": 0,
        "width": 2499,
        "height": 843
      },
      "action": {
        "type": "message",
        "text": "獲取驗證碼"
      }
    }
  ]
}

Line Messaging API 操作 Rich Menu

文件

Using rich menus

使用 Line Messaging API 建立 Rich Menu

將 LINE Bot Designer 得到的 JSON 用 curl call messaging api：

curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
{
  "size": {
    "width": 2500,
    "height": 843
  },
  "selected": true,
  "name": "bindMailFirst",
  "chatBarText": "身份認證",
  "areas": [
    {
      "bounds": {
        "x": 0,
        "y": 0,
        "width": 1253,
        "height": 843
      },
      "action": {
        "type": "uri",
        "uri": "YOUR_LIFF_APP_URL"
      }
    },
    {
      "bounds": {
        "x": 1254,
        "y": 0,
        "width": 1246,
        "height": 843
      },
      "action": {
        "type": "uri",
        "uri": "YOUR_LIFF_APP_URL/validate"
      }
    }
  ]
}

可以得到 response 內容為這個圖文選單的 id：

{
    "richMenuId": "YOUR_RICH_MENU_ID"
}

如果忘記了也可以使用以下的 API 得到 Rich Menu list (p.s. 只有使用 Messaging API Create 的會出現在此)

curl -v -X GET https://api.line.me/v2/bot/richmenu/list \
-H 'Authorization: Bearer {channel access token}'

上傳 Rich Menu 的圖片

一樣是使用 API 方式上傳

curl -v -X POST https://api-data.line.me/v2/bot/richmenu/{richMenuId}/content \
-H "Authorization: Bearer {channel access token}" \
-H "Content-Type: image/jpeg" \
-T image.jpg

將指定的 Rich Menu 設為預設圖文選單

curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/richmenu-88c05ef6921ae53f8b58a25f3a65faf7 \
-H "Authorization: Bearer {channel access token}"

設置特定使用者看到的圖文選單

圖文選單顯示的優先順序如下(高到低)：

1. The per-user rich menu set with the Messaging API
2. The default rich menu set with the Messaging API
3. The default rich menu set with LINE Official Account Manager

也就是用 API 設定的優先順序就會是最高的～

一樣使用 Messaging API 進行設定

curl -v -X POST https://api.line.me/v2/bot/user/{userId}/richmenu/{richMenuId} \
-H "Authorization: Bearer {channel access token}"

了解這些之後，接下來就可以在我們綁定身份認證碼後，同時切換使用者的圖文選單，讓功能更貼近需求。

昨天把發送認證碼的請求送到 GAS 專案，今天則是了解圖文選單怎麼進行切換，明天就要繼續完成 GAS 專案收到請求後完成綁定身份認證碼的功能囉～