如何讓 Chatbot 透過 Account Link 來串接使用者體驗

Evan Lin2019-03-15

LINE Taiwan Technology Evangelist

我是 LINE Taiwan 資深開發技術推廣工程師 Evan ，接下來會有一系列的文章教導大家該如何使用 Account Link 與 LINE Login ，這是系列文章的第一篇。

2019/04/15更新: 附上在 2019/04/12 chatbots 小小聚的投影片，希望能讓讀者們更加清楚。

前言

許多經營多年有成的電子商務網站，想要透過加入 LINE 的官方帳號並且開發聊天機器人與他們的讀者來互動。但是要如何讓原本的網站的讀者資料與聊天機器人上面的使用者綁定在一起呢？本文將介紹 LINE account link，透過 account link 可以讓 chatbot 了解面對的使用者身份。並且透過綁定帳號的方式來提供使用者一致化的體驗。並且透過一個範例更容易建置出來。

本文將透過一個電子商務的範例來解釋如何透過 account link 連結使用者的體驗；讓讀者更了解該如何與商業來做有效的結合。

透過 Account Link 來做服務的一體化結合

透過 Account Link 可以讓使用者將 LINE 的帳號與該電子商務網站的資料結合再一起，並且讓使用者可以直接在 LINE 的官方帳號裡面使用某些官方網站提供的相關服務．那麼什麼是 Account Link? 跟 LINE Login 又有什麼不同呢？透過一個範例來了解一下：

情境描述

在使用範例程式碼之前，先跟讀者們講解一下使用範例程式碼的情境。一家經營有成的電子商務網站，想要開始在 LINE 官方帳號上面開啟更多的服務，也希望有聊天機器人的服務。使用者在加入了這個官方帳號後，希望能夠像在原本電子商務網站一樣，透過同一個帳號可以進行帳單查詢與購買。這個時候問題來了， chatbot 上面的使用者跟電子商務網站的使用者要如何連接呢?

以往開發者可能得自己開發另外一個登入介面，比如說透過聊天機器人來登入電子商務網站，輸入完帳號與密碼後再將使用者的資料來做連接綁定。這樣的做法不安全也多了一次開發的時間，在實作上相當不建議。最好的方式應該就是讓使用者回到原本的電子商務網站進行登入，在登入完成之後能夠直接回到聊天機器人完成整個資料連接與綁定。這樣一來能夠之間使用原來網站上面的登入介面，也能夠安全的讓使用者資料傳遞到聊天機器人的服務上。

接下來就透過範例程式碼，來了解該如何達成這樣的流程。

範例程式碼

https://github.com/kkdai/line-account-link

如何部署範例程式碼:

到 LINE Developer Console 建立相關的 Provider 跟 Channel
建立一個 LINE@ 並且打開 MessageAPI 的功能，並且將以下兩個資訊記住:
- Channel SecretChannel Token
到 https://github.com/kkdai/line-account-link 按下 Heroku Deploy ，建立該帳號並且部署該服務。這時候會要輸入三個資訊:
- LINECORP_PLATFORM_CHANNEL_CHANNELSECRETLINECORP_PLATFORM_CHANNEL_CHANNELTOKENLINECORP_PLATFORM_CHANNEL_SERVERURL
  - 這個資訊根據設定的 Heroku app 名稱來決定，假設伺服器的 Heroku app 名稱叫做 test-api-1234 那麼就該填 https://test-api-1234.herokuapp.com/
記得把 https://test-api-1234.herokuapp.com/callback 加到 LINE chatbot webhook 才能正確地啟動聊天機器人。

範例應用場景

這個範例想要是一家電子商務公司有三位客戶 (ID: 11, 22, 33) 也都有相關的身份資料在該電子商務網站。而這個聊天機器人可以展示如何透過 LINE account binding 來串連使用者與聊天機器人。

整個場景都流程分成以下幾個步驟:

使用者加入電子商務的官方帳號。
在官方帳號選單的聊天機器人視窗中，選擇“帳號綁定” (link)。
連線到該電子商務網站，輸入原本已經有的帳號跟密碼。
確認帳號訊息無誤後，倒回聊天機器人並且進行帳號綁定。

實際跑一個範例

先 Deploy 該範例專案，或是直接加入測試機器人 @yzy8635g
加入帳號後，輸入任何字串都是會顯示帳號尚未綁定。可以連到該商業網站顯示帳號 (list) 或是直接開始綁定帳號 (account link)

按下 “list” 會傳回顯示所有使用者的網址，可以透過該網址顯示該網站所有的使用者帳號，密碼與資料。

按下 “link” 則顯示登入頁面開始登入。

到了登入網頁，就輸入該商業網站的帳號跟密碼。這個範例程式裡面是 11, pw11 。

登入成功之後，就會收到 chatbot 回報帳號綁定成功。把綁定帳號網頁關閉即可。(要做得更好，可以透過 LIFF 來做 account binding 就可以自動關閉網頁)

回到聊天機器人，這時候帳號就顯示綁定完成。表示 chatbot 能夠將使用者與商業網站的使用者連接一起。 chatbot 也就已經將使用者 Tom 的帳號綁定。

什麼是 Account Link

Account Link 通常是透過官方帳號也就是 (provider's bot) 來驅動．由於使用者已經有連接了商業服務的 LINE 官方帳號，但是卻不了解該使用者有沒有該商業服務的帳號資料；或是說兩者並沒有連接的關係．這個時候會依照以下的流程圖來連接 LINE 的使用者與他在商業網站中的資料．

以下的內容均可以在 LINE Developer: Link user account 找到完整的英文文件．

(圖片來自: LINE Developer Document: Link user account )

根據以上的流程圖，稍微說明一下每個角色代表的意義：

User:
- 就是指的是 LINE 上面的用戶。
Provider’s bot server:
- 這邊指的就是該商業服務的 LINE 聊天機器人伺服器。
Provider’s web server:
- 這個就是該商業服務的網站伺服器，如果是購物網站就是該購物網站的後台伺服器。
LINE Platform:
- 這個就是指 LINE 平台的資料處理系統。

了解每個角色代表的意義之後，我們開始解釋每個流程所代表的意思．通常在 Account Link 發生的時候，聊天機器人會發送一個「是否要連接你的 LINE 帳號與商業網站？」的請求．當使用者同意之後，才會啟動以下的相關步驟：

官方帳號的 LINE bot 會對 LINE 平台發送一個該使用者要求 account link 的 token 請求。
如果請求資料正確， LINE 平台就會回覆一個 token 。res, err := bot.IssueLinkToken(userID).Do() 這樣可以透過該使用者帳號直接 issue token
官方帳號的 LINE bot 透過取得的 token 跟 LINE 平台請求將兩個資料做連接。
LINE 平台會傳回一個網址，讓使用者透過該網址來做資料的連接。這邊就傳回該網站的 /link以這個作為鏈結的網址。
使用者連線到該網址（這裡通常是透過 LINE bot 直接送出 URL scheme 讓使用者點選導向該網頁）．請注意這個網址會是直接連接到商業網站之中。
顯示該商業網站的登入畫面，讓使用者登入該綱頁網站。
使用者在商業服務平台輸入了自己的登入資訊。
商業服務平台透過使用者的帳號資訊產生了一個隨機碼 (nonce)。雖然說 nonce 為隨機碼，其實有產生的規則與限制
- 使用 secure random number generator建議透過 base64 encode
商業服務平台將使用者導向到 LINE 平台的 account-linking 的進入點。
使用者讀取 account-linking 進去點，並且將商業服務平台的隨機數帶進去。
LINE 平台傳回同一組隨機數與使用者 ID (UID) 到商業服務平台的 webhook 用來作為綁定之用。
LINE bot 這時候收到該隨機碼的認證，透過這個隨機碼將使用者在 LINE 上面的身份與商業服務平台帳號取得綁定。也就是最後要將這些資訊傳回給 Server ，作為綁定成功地確認 https://access.line.me/dialog/bot/accountLink?linkToken={link token}&nonce={nonce}ㄧ
這時候 chatbot 會收到 EventTypeAccountLink 的 event 並且透過結果可以知道該使用者綁定成功。隨機碼也會提供作為帳號比對的資訊。

為何要使用 Account Link

透過 account link 可以讓 chatbot 裡面的使用者與原先商業網站的帳號相互的綁定。透過的機制就是一開始 issue link token 並且在登入成功後將 token 帶回到 chatbot 裡面，並且透過產生的nonce可以確保雙方資料的無誤與正確性。整體來說，使用 account link 具有以下的優點:

步驟簡單：透過 IssueLinkToken 與 API call 即可完成整個綁定流程。
安全：透過改使用者申請的 token 才能夠作為 accountLink 的回傳 token ，可以確保手續完整性。

什麼樣的情況會需要使用 Account Link

什麼樣的情況下會需要使用 account link:

已經有大量的使用者族群在原有的商業網站上面
chatbot 需要綁定原有的使用者資訊

Account Link 與 LINE Login 的差異

	LINE Login	Account Link
取得資料	- Username (LINE name) - User picture - User email (額外申請)	LINE 不會提供額外的資訊，所有資訊需要依賴網站本身使用者的資訊。
使用方式	- WebApp - Client App (iOS, Android)	LINE chatbot
使用情境	- 需要建立新帳號 - 透過 LINE login 登入	使用者原本在網站（或是其他服務有帳號）需要跟 OA 綁定讓 OA 提供一致性服務
需要具備資料	申請一個 LINE Login channel	- LINE chatbot - 某個網站服務
使用者好處	只要透過 LINE 帳號的登入，可以快速創建新的帳號或是加入相關服務．新帳號創立帳號鏈結 (透過 LINE 登入該服務）	透過 Account Link 讓原本在某個服務的帳號與 OA 結合以後可以透過 OA 直接存取該服務

總結:

對於已經有相當量使用者的服務提供商而言，透過 account link 可以讓 chatbot 的使用者與原有服務的帳號資訊綁定，讓使用者有著一致的服務體驗。方法上也相當簡單，希望透過這個範例可以讓開發者更容易了解整個流程與概念。

Blog