Bottender - Linebot LIFF

tags: Bottender Node.js LIFF
category: Linebot
description: Bottender - Linebot LIFF
created_at: 2021/07/13 7:00:00

cover image

回到 手把手使用 Bottender 建立 Linebot

要使用 LIFF 要先在你的 Line Developers 建立一個新的 Channel ， 並選擇 Line Login

建立 Channel 的頁面因為已經經歷過 Messaging API 了，就不多做解釋，主要就是以下:

  • Region: Taiwan
  • App types: Web app

其他都填好之後按下 Create 就成功建立了

成功建立之後可以到 LIFF 的頁籤去 Add

詳細資訊可以看官方: https://developers.line.biz/en/docs/liff/registering-liff-apps/#registering-liff-app

基本上就是

  • LIFF app name: 取個名字
  • Size: 打開的瀏覽器視窗大小
  • Endpoint URL: 連到哪個網站
  • Scopes: sdk功能範圍，可參考官方說明，這裡全部都打勾(包含view all中的chat_message.write)
  • Bot link feature: 當使用者用你的 LIFF 要怎麼推廣你的機器人(官方帳號)，詳細看官方的圖(如下)

建立完成之後會看到你的 LIFF ID 與 LIFF URL

再來可以回到 Designer 去建立一個 按鍵範本訊息 ，來測試開啟 LIFF

再來在你的 index.js 把那一段 json 貼進去，之後回到你的手機任意發送一段訊息，讓他回應那個按鈕，再來點擊 開啟 應該就會導向到你剛才所設定的 URL 。

開始寫 LIFF

成功開啟之後，可以來試著寫寫 LIFF 的程式了

官方文件: https://developers.line.biz/en/reference/liff/

必須先引入 LIFF 的 SDK ， 你可以使用 CDN 的方式或是使用 npm 之類的

如果只是練習，使用簡單的 CDN 也不錯

<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>

如果你要用 npm 的話是

$ npm install --save @line/liff

又或者是 yarn

$ yarn add @line/liff

如果你使用的不是 CDN ，需要像下面這樣 Import

import liff from '@line/liff';

liff.init({ liffId: 'myLiffId' });

基本上之後都在寫前端 JavaScript 了，所以基本上應該對照著文件就可以實做出自己想做的功能，所以這邊就列幾個比較主要的東西。

初始化 LIFF

有很多方法必須先初始化後才能用

liff.init({
    liffId: "myLiffId"
  }).then(() => {
    console.log('init');
  }).catch((err) => {
    console.log(err);
  });

檢查使用者是不是在LIFF中使用

這個也方法可以在init前執行

liff.isInClient()

回傳 Boolean

檢查使用者有沒有登入

liff.isLoggedIn()

回傳 Boolean

登入

liff.login()

也可以帶參數，詳細可以看官方，不帶參數的話預設登入完就會回到當初 LIFF 的 Endpoint

這個方法不能在 LIFF 中使用，因為他會在 init 自動被執行，所以如果像是瀏覽器預設沒被登入的情況下，你可以這麼寫

liff.init({
    liffId: 'myLiffId'
}).then(() => {
    if (!liff.isInClient() && !liff.isLoggedIn()) {
        return liff.login()
    }
    console.log(await liff.getProfile());
}).catch((err) => {
    console.log(err);
});

這時如果登入成功就會在 console 印出 profile

登出

有登入當然就有登出，很單純

liff.logout()

發送訊息

基本上就是讓 LIFF 幫你發送訊息到聊天室，有些限制

  • 建立 LIFF 的時候 chat_message.write 必須打勾
  • 不能在 LIFF 以外的環境使用，例如瀏覽器
  • 使用者進入 LIFF 的時候必須有給權限
liff.sendMessages([{
    type: 'text',
    text: 'Hello, World!'
}]).then(() => {
    console.log('message sent');
}).catch((err) => {
    console.log('error', err);
});

分享訊息

上一個的火力加強版，可以讓你選要分享給哪些人或群組，一樣要使用者給權限，另外下圖的地方也要打開。

官方範例:https://developers.line.biz/en/reference/liff/#share-target-picker

if (liff.isApiAvailable('shareTargetPicker')) {
  liff.shareTargetPicker([
    {
      'type': 'text',
      'text': 'Hello, World!'
    }
  ])
    .then(function (res) {
      if (res) {
        // succeeded in sending a message through TargetPicker
        console.log(`[${res.status}] Message sent!`)
      } else {
        const [majorVer, minorVer] = (liff.getLineVersion() || "").split('.');
        if (parseInt(majorVer) == 10 && parseInt(minorVer) < 11) {
          // LINE 10.3.0 - 10.10.0
          // Old LINE will access here regardless of user's action
          console.log('TargetPicker was opened at least. Whether succeeded to send message is unclear')
        } else {
          // LINE 10.11.0 -
          // sending message canceled
          console.log('TargetPicker was closed!')
        }
      }
    }).catch(function (error) {
      // something went wrong before sending a message
      console.log('something wrong happen')
    })
}

練習

最後來做一個小練習好了

目的: 讓使用者輸入 1234 之後換掉圖文選單，用來假設一個使用者輸入手機號碼收到認證信的驗證行為

先拆解功能

做到這件事至少要先有個表單，還有一個送出的按鈕

送出之後

  • 成功: 更換圖文選單並關閉LIFF
  • 失敗: 顯示提示訊息

關閉LIFF可以使用 liff.closeWindow() 做到，所以除了更換圖文選單以外，現在程式碼變成

HTML:

<input type="text">
<button>送出</button>
<div id="message"></div>

JavaScript:

const input = document.querySelector('input');
const button = document.querySelector('button');
const message = document.getElementById('message');
liff.init({
    liffId: 'myLiffId'
}).then(async () => {
    if (!liff.isInClient() && !liff.isLoggedIn()) {
        return liff.login()
    }

    const {
        userId
    } = await liff.getProfile();

    button.addEventListener('click', () => {
        if (input.value === '1234') {
            // 這裡要換選單
            liff.closeWindow();
        } else {
            message.textContent = '驗證碼錯誤!';
        }
    });
}).catch((err) => {
    console.log(err);
});

如果要切換單個使用者的圖文選單，可以參考官方網站:https://developers.line.biz/en/reference/messaging-api/#link-rich-menu-to-user

大致上就是

POST: https://api.line.me/v2/bot/user/{userId}/richmenu/{richMenuId}
Headers: {
    Authorization: Bearer {channel access token}',
}

再來使用你前端習慣用的 HTTP POST 方式去發出 Request ，就完成了。

真實環境下 1234 會從 Server 驗證，不會顯示相關資訊在前端，因為前端沒有祕密，存在前端不安全。

延伸練習

用你習慣的後端開發工具建立 API 去負責產生驗證碼驗證並發出 HTTP Request 更換選單。

講白了就是剛才做的事跑去後端做

最後更新時間: 2021年07月13日.