本篇要解決的問題
之前有人留言問說「有沒有辦法在 URL 上帶入使用者的 LINE ID，這樣網站就可以抓網址上的參數判斷是哪位使用者？」就在 August 還沒開始研究時，對方又留言說他研究出來了，用 LIFF 可以做到。
LIFF，全名是「LINE Front-end Framework」，是 LINE 官方提供的一個 Web App，主要應用是可以用 JavaScript 抓取使用者的 LINE 資訊，像是暱稱、大頭照……等等。
進階一點的也可以透過使用者的帳號來發送訊息，當然，要使用者有勾選「許可」才可以這樣應用。
本篇是看了 LIFF 的官方文件後，整理出覺得未來會用到的功能。
主要參考文件：Developing a LIFF app
另外如果各功能有再參考其它文件，會附在各段中。
建立 LIFF
LINE Developers 登入後，建完 Providers，接著點進建立好的 Providers，按下「Create a new channel」，會看見有五種 channel 可選，如果要用 LIFF 的功能，就要選擇「LINE Login」：
接著我們把建 channel 的表單填一填，今天這篇是用網頁來做 LIFF，在「App types」的那項選擇「Web app」。必填欄位都填完了以後，按下 Create 就會創建一個 channel。
channel 建好，在導覽列的部份就會看見「LIFF」這個選單：
點擊「Add」就可以新增一個 LIFF。
新增 LIFF 的表單這邊需要說明。
Size
Size 這一項有三個值：Full、Tall、Compact。
這邊指的是當用 LINE 打開 LIFF 時，他的大小要多大？照文件中的範例，各自的大小如下：
要注意的是，分享的按鈕只會在「Full」這個 Size 出現。
Endpoint URL
這邊是指當使用者點擊了 LIFF 的連結，實際上 LIFF 是開啟了哪個頁面？
比方我們填的是 Google 的首頁網址，那當使用者點擊了 LIFF 的網址後，打開的就會是 Google 的頁面。
這邊可以填寫的網址只能是 https 開頭的。
我們這邊就點這篇最後會有的範例頁網址：
https://letswritetw.github.io/letswrite-liff-init/Scopes
這邊指的是我們想要取哪些資料？
因為後續會示範拿使用者資料，因此 profile、openid 二個都打勾。
在選項的下方有一個「View all」，點開來會看見「chat_message.write」，這項是如果要用到主動幫使用者發訊息的 sendMessages 函式時，這邊就必須打勾，不然 sendMessages 就無法使用。
如果是要照著本篇練習，這項也要打勾，後面會寫到怎麼用 sendMessage。
Bot link feature
這邊一樣有三個選項可以選：On (Normal)、On (Aggressive)、Off。
這項指的是當使用者要登入我們建立的 LIFF 時，要怎麼推薦他加入我們的 LINE@。
以下是官方的圖片說明：
Scan QR
這邊是指要不要使用 LIFF 的打開 QR code 掃描器功能，本篇後面也會寫到這項功能，因此也打勾。
LIFF 建立完成
建立好後，在後台 LIFF 中就會看見我們剛剛建出來的 LIFF：
我們會先看到一個「shareTargetPicker」，這項功能就是主動讓使用者發送我們指定的訊息給他的好友，後面也會示範這功能，因此要打勾。
接著列表的部份，LIFF ID 這項我們之後在寫 JavaScript 時會用到，要記下來。
LIFF URL，就是這個 LIFF 的網址了，在 LINE 上點這個網址，就會啟動 LIFF。那這個網址實際會開啟的網址，就是我們在建立時填寫的 Endpoint URL。
LIFF init
在開始寫 LIFF 的程式時，第一步要先 init，初始化。init 後才可以開始使用 LIFF 的各項函式。
首先頁面上要先引用 LIFF SDK：
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
這行的 CDN 網址會回傳最新版的 LIFF SDK v2 版。
頁面引用好 SDK 後，接著是寫 JS 來 Init：
liffID 就是上一段在後台中看到的 LIFF ID，替換以後就可以使用。
因為 init 一定要先執行，所以是用 Promise，之後要執行的其他功能都要寫在 then 裡。
LIFF 功能：取得基本環境資訊
LIFF 可以取得一些使用者的環境資訊，條列如下：
- 頁面中的語系（lang）
- LIFF SDK 的版本
- 目前 LIFF 是否是在 LINE App 中開啟
- 使用者有沒有登入 LINE 帳號
- 使用者的作業系統：web、android、ios
- 使用者用的 LINE App 版本
取得資訊的程式碼如下：
LIFF 功能：登入、登出
登入、登出 LINE 的功能只能在外部瀏覽器時有作用。
要用登入、登出功能，首先必須要指定登入以後要轉到哪個網址？
假設我們在使用者登入後，要進到的網址是：
https://www.xxxxxxx.com.tw首先我們要先到 LINE Developers 的後台，在我們的 channel 設定頁中，點擊「LINE Login」的選單：
Callback URL 就是要填入我們登入後要進到的網址，這邊是 LINE 要確認我們是這個 channel 的管理者，可以在這邊加入指定的連結，才不會說被別人發現了我們的 ID 後，拿我們的 LIFF 來做登入動作竊取個資。
點擊「Edit」，接著把我們登入後的網址填寫進去，有多個的話就是每個網址各自一行：
填寫完後按下「Update」，就填寫完成。
最後就是執行登入、登出的程式碼。
redirectUri 就是要填我們登入後的網址，必須跟我們在後台設的 callback URL 相同才行。
LIFF 功能：取得使用者資料
在取資料這邊，首先要先寫官方文件的注意事項：
Do not track a user with cookies, localStorage, or sessionStorage or link LINE user information with external session information without getting the user’s consent. While you can use cookies, localStorage, or sessionStorage with the LIFF app, their use may be restricted in the future.
（未經用戶同意，請勿使用 cookie，localStorage 或 sessionStorage 跟踪用戶或將 LINE 用戶信息與外部會話信息鏈接。雖然您可以通過 LIFF 應用程序使用 cookie，localStorage 或 sessionStorage，但將來可能會限制它們的使用。）
Development guidelines
LIFF 有三個 functions 可以取得使用者的資料，可以取到的資料都不一樣。
取得使用者類型
不太知道 context 怎麼翻譯比較好，這邊先寫做類型。
getContext 使用者不用登入也可以執行，他取得的是使用者在 LIFF 上目前的狀態，執行的程式碼如下：
liff.getContext();
回應的值有以下：
type: utou 一對一、group 群組、room 多人聊天室、external 外部瀏覽器、none 不屬於前面四種，如 Wallet tab。viewType：compact、tall、full。目前視窗的大小。userId、groupId、roomId：不同的 type 會有不同的 ID。availability.shareTargetPicker.permission：能不能使用 shareTargetPicker 功能。availability.shareTargetPicker.minVer：使用 shareTargetPicker 功能的最低版本是多少。
取得使用者公開資料
使用者必須登入才能使用。
取回來的資料有四個：userId、暱稱、大頭照的圖片路徑、狀態消息。
除了 userId，暱稱、大頭照基本上沒加好友也看得到，因此這裡翻譯成公開資料。
執行的程式碼如下：
liff.getProfile()
取回來的值會是 JSON，像這樣：
{
"userId": "U4af4980629...",
"displayName": "Brown",
"pictureUrl": "https://profile.line-scdn.net/abcdefghijklmn",
"statusMessage": "Hello, LINE!"
}取得使用者 email
之前在〈用Google Apps Script寫一個LINE登入功能：下篇 – 三大步驟〉這篇中寫了一大堆程式才取得的 email，用 LIFF 就一行搞定。
在寫程式之前，必須要先在後台開啟可以取得使用者 email 的設定。
一樣在 LINE Developers 的後台，第一個「Basic settings」的頁籤，頁面往下滑滑到快底部的區塊，有一個「Email address permission」：
點擊「Apply」，會看見展開了一個表單要填寫，基本上因為 email 是個資的一部份，就是在提醒說不要拿來亂用。
表單都填寫完後點「Submit」，會看見原本寫著「Unapplied」的地方變成了「Applied」，就代表可以取得使用者的 email。
但，可以取得不代表一定能取得，在使用者登入 LINE 帳號時，「電子郵件帳號」那邊是可以自由點選要不要許可的，如果使用者不許可，一樣取不到 email。
當 Email address permission 為 Applied 時，我們要再進入 LIFF 的設定，Scopes 的部份會看見多了一個「email*」的選項，這邊也要打勾。
這邊也提醒大家，LINE 的詐騙案件還蠻常見的，上個月才收到朋友傳了一個很明顯是用下載貼圖來詐騙的頁面。記得不是真正的官方活動，「電子郵件帳號」這邊的許可不要打勾，打勾了對方就可以取得 email。
另外這邊也先說，如果不是真正的官方活動，「傳送訊息至聊天室」這邊的許可也不要打勾，你勾了 LIFF 就可以用你的帳號來傳息，也可以讓你傳訊息給你指定的好友。
這篇真是學習兼勸世呀，好文章不分享嗎？
取得使用者 email 的程式碼：
var user = liff.getDecodedIDToken(); var email = user.email;
email 就是使用者的 email 了。
三個取得使用者資料的程式碼
把上面三個取得資料的程式碼整理一下：
LIFF 功能：傳訊息
LIFF 的傳訊息功能有二個：
sendMessages：傳給打開這個 LIFF 的當下群組、好友、機器人、LINE@。shareTargetPicker：傳給指定的好友。
不論是這二個的哪一個，使用者都必須要登入 LINE 帳號才能使用。
sendMessages
這個傳訊息功能，後台的「chat_message.write」必須要打勾才能使用。
在外部瀏覽器無法使用此功能，要用 LINE App 內開啟 LIFF 才能用。
使用者在登入 LINE 帳號時，「傳送訊息至聊天室」這項必須要是「許可」的才能使用。
shareTargetPicker
這個傳訊息功能，後台的「shareTargetPicker」必須要打勾才能使用。
使用者在登入 LINE 帳號時，「傳送訊息至聊天室」這項必須要是「許可」的才能使用。
這項功能的介紹可以看官方的文章：Share Target Picker 已經公開，透過 LIFF 來分享訊息將更加的便利
看文章說明可以知道，這項功能是為了縮短使用者傳訊息的時間，不用每個字都手打，直接點擊設定好的按鈕就可以發送。
程式碼
這二項傳訊息的 function 如下：
實際使用的部份，可以在最後一段的範例中使用。
LIFF 功能：連結
LIFF 跟連結相關的功能有二個：開啟指定的連結、取得當下的連結。
開啟指定連結
這個主要是在用 LINE App 打開 LIFF 時用的，一般我們在 LINE 裡開啟一個頁面，如果頁面裡面有超連結，即便設了 target="_blank"，點下去的時候還是會在 LINE 裡打開，而無法用瀏覽器打開。
開啟指定的連結就可以設定是不是要用外部瀏覽器開。
程式碼如下：
取得當下的連結
我們在用 LIFF 時有設 Endpoint URL，用取得當下連結的函式時，回傳的網址不會是 Endpoint URL 的網址，而是 LIFF 的網址。
除了取得當下網址，LIFF 也可以改變網址，例如對當下的網址加上參數。
程式碼如下：
LIFF 功能：打開 QR Code 掃描器
這段其實算是備用，因為目前文件上有寫 IOS 的 LINE 在 9.19.0 以上的版本無法使用，所以 August 其實沒有實際測試過，只是目前像是用登入電腦版時、用 LINE Pay 時，都會開啟 LINE 的掃 QR Code 功能，以後 LINE 會很常用到吧？總有一天 IOS 會支援的。
掃描器的功能只有在 LINE App 開啟 LIFF 時才能使用。
另外 LIFF 的後台也必須開通功能，就是我們在建立 LIFF 時看到的「Scan QR」，有打勾就可以使用了。
回傳的值會是字串，但因為 August 沒實測過這功能，因此也不知道回傳的字串是會寫些什麼。
程式碼如下：
LIFF 功能：關閉 LIFF
我們可能會想：「關閉？不就按 X 就好了？」
之所以會有關閉的 function，是因為有些服務會是要程式主動關閉的，比方傳完訊息後為了讓使用者能看到，就寫 sendMessage 之後自動關閉，或是需要使用者另外打開什麼，就勢必要先關掉當下的 LIFF。
關閉 LIFF 的功能只能在 LINE App 開啟 LIFF 的狀況下才有作用。
LIFF 轉成公開
如果要讓 LIFF 可以讓其他人使用，就要轉成公開。
進到 LINE Developers 的後台，進到我們創建的 LIFF，會看見名稱那邊有一個「Developing」的按鈕：
按下去以後，會出現提示，說一旦轉公開就回不了頭，要回頭只能砍掉重練：
按下「Publish」就會轉成公開了，狀態上也會顯示成 Publish：
範例、原始碼
本篇筆記的功能，原始碼整理在 Github 上，也生成 Github Page 當範例頁。
原始碼：
https://github.com/letswritetw/letswrite-liff-init
範例：
https://letswritetw.page.link/liff-demo
範例的部份，要自行建立一個 LIFF 並填入 LIFF ID 後才能使用所有功能。
請問使用你的範例檔，要怎麼修改成連進去範例網頁之後，跳過輸入liffID的按鈕，然後跑出資訊呢？
範例的code是某個按鈕被點擊後執行，如果想要直接執行，就把click裡面執行的code拉出來放就行。
不好意思，因為我不太熟html跟javascript之間的使用方法，如果沒錯的話document.getElementById(‘xxx’).value是需要一個物件才能去取得的嗎? 我目前就卡在不知道怎麼讓他們直接執行出來…，另外我該怎麼把這些資料傳給php的變數呢?
像是如果是要取使用者資料，就可以略過Demo裡的click事件，直接寫：
liff才是 LIFF 中原有的功能。要傳給後端的話，一般是用post把收到的資料傳過去。
另外我用範例檔把redirectUri跟callback URL都設定一樣的網址為甚麼按登入還是顯示400error呢
1 確認一下網址是不是「https://」開頭？
2 如果是在liff的頁面中使用登入，登入後回到原頁，liff 的 Endpoint URL 跟 LINE login 的 Callback URL 是否相同？
網路一堆LINE LIFF教學中, 這篇寫得最好最清楚, 感謝
謝謝🙂
想請教一下,Line的登入後取得使用者資訊,能取得電話號碼嗎?
可以的話是有什麼API可以利用?或者要怎麼取得?
不行的話是目前LINE API的限制嗎?
無法喔，文件裡沒有看到取得電話號的部份。
剛剛有試用DEMO但是都沒辦法跑！！
第一個 LIFF ID 要填，然後按確認並啟動。
有填了，但是一樣沒有辦法跑
而且是按鈕都沒反應，是不是我從GITHUB抓的程式碼有問題？還是應該要怎麼處理呢？
我漏寫了按下按鈕後的回應，有空再補。
LIFF ID填完後下按鈕，然後看能不能執行登入，登入後再按取得使用者資料看有沒有出現。
按鈕都沒有反應，GITHUB 的程式碼也是如此 ~
就是按下區沒有東西 !
寫得真好，非常清楚