用Google Apps Script寫一個LINE登入功能:上篇 – 前置作業

用Google Apps Script寫一個LINE登入功能:上篇 - 前置作業

為什麼要LINE登入?為了電子報訂閱人數

如果常來Let’s Write的朋友,又是眼尖的朋友,會發現本站訂閱電子報換成掃QR code的方式啦~

訂閱電子報換成掃QR code的方式
訂閱電子報換成掃QR code的方式

事情是這樣的,從GA報表上會看到輸入email那欄確實有focus的事件,但訂閱人數就是一直沒起來,不確定是卡在訂閱的方式麻煩,還是因為確認的步驗比較長讓思考時間變長,提高了放棄機率。

剛好最近難得有一點空閒,看了一下LINE登入的文件,就想說不然直接換用LINE登入的方式來訂閱電子報,用手機掃完按個許可就可以完成訂閱,步驟簡單了很多。

LINE登入會拿到的資料

雖然下一篇會寫到,但還是在這篇先宣告一下。

LINE登入的API,會拿到的資料跟LINE bot有一點點不同,整理如下:

可取得的資料LINE登入LINE機器人
每位使用者派一個獨立IDvv
LINE名稱vv
LINE狀態消息v
LINE大頭照vv
登入LINE的emailv

email的部份,要在後台做申請,要截圖告知你打算把按鈕放在哪?email會用在什麼地方?另外使用者本身也可以確認要不要提供email給你,如果不想給就把勾給取消就行。

補充 對LINE機器人有興趣的朋友,可以參考以下2篇:
用LINE bot api建立line@圖文選單
用line push messaging api推播每日氣象預報

那如果是不想提供email,但又想要簡單訂閱的朋友們,因為這次要寫LINE登入,Let’s Write這邊也申請了一個LINE官方帳號,每月目前有500則免費訊息發送,如果有新文章Augustus會從官方帳號發送訊息,好友這邊加:

加入好友


LINE登入並取得資料的三大步驟

讓使用者用LINE帳號登入,並取得公開資料,總共有3個步驟,呼2個API,Augustus整理一份流程圖如下:

 LINE登入並取得資料的三大步驟(點圖開新視窗)
LINE登入並取得資料的三大步驟(點圖開新視窗)

三大步驟就是:

  1. 產出一個讓使用者點擊的LINE網址
  2. 拿LINE網址回傳的授權碼,呼API取得token
  3. 拿token呼API取得使用者的公開資料

在進到下一篇三大步驟之前,先來寫前置作業的部份。三大步驟的程式碼就等下一篇再來詳細介紹。

下一篇連結在這:

用Google Apps Script寫一個LINE登入功能:下篇 – 三大步驟


前置作業:3個必備事物

要讓使用者用LINE登入,在寫程式之前有3個必備的:LINE帳號*1、LINE channel*1、Google Apps Script的檔案*1。

LINE帳號

LINE帳號每個人都有了。

Google Apps Script檔案

Google Apps Script是寫後端用的,前端呼API時常常會遇到要跨網域的問題,因此把呼API的步驟改寫在Google Apps Script(以下簡稱GAS),就可以順利要回資料了。GAS的筆記文請看這篇:

Google Apps Script 基本使用:跨網域AJAX、接Firebase

LINE Channel

LINE channel要到這邊申請:LINE Developer

要先建一個provider,才能在provider下新增一個channel。這段在「用LINE bot api建立line@圖文選單」這篇中的前幾段都有圖文說明,就不再多寫。

要注意的是,在建channel時,記得要選的是LINE login:

channel要選LINE Login

App types的部份選「Web app」:

App types的部份選「Web app」
App types的部份選「Web app」

LINE Login後台設定部份

Basic settings

建完channel後,後台看到的樣子如下:

Basic settings的後台頁面(點圖開新視窗)
Basic settings的後台頁面(點圖開新視窗)

Channel IDChannel secret,這兩個值要記下來,之後呼API時會用到。

如果想要取得的資料包含email,在「OpenID Connect」的「Email address permission」這,要按下Apply,然後傳上使用的載圖,當「Unapplied」變成「Applied」時,才代表可以取得email。

最後就是這個channel要正式啟用時,記得「Developing」那邊要按一下,確定轉成「Published」。

LINE Login

後台的頁籤,切到「LINE Login」這項,會看到以下介面:

LINE Login的後台介面(點圖開新視窗)
LINE Login的後台介面(點圖開新視窗)

Linked OA的部份,是可以跟LINE官方帳號做連結,這樣使用者在第一次用LINE登入時,也會一併詢問要不要加入官方帳號為好友。

要注意的是,那個官方帳號必須是你這個帳號所擁有的,而且要是管理者的權限。

另外,這個官方帳號也必須開通Messaging API的功能。

Callback URL,這邊要填的是當使用者用LINE登入後,要請LINE轉去的網址。

之後我們在呼API時,會有一個「redirect uri」的參數要填,這個參數的值要跟Callback URL一樣才行,不然就會報錯。

Callback URL可以填多個,每一個填成一行。

因為本篇筆記是用GAS寫後端呼API,所以Callback URL就是填GAS發佈後產出的網址。

LIFF

後台的最後一個頁籤是「LIFF」,LIFF是「LINE Front-end Framework」的簡寫,把它想像成是一個在LINE的iframe頁面。

LIFF也有自己的API,所以也不是單純的iframe,有些功能是可以使用的,未來有機會會寫一篇筆記文來介紹(老高上身?)

像本站掃QR code的方式登入,QR code就是用LIFF的網址去生成的,這避免了讓channel ID直接露出,另外在用手機掃描時也可以順利登入。

一開始試著拿authorize的網址直接掃,在LINE上一直報400錯誤,直到改掃LIFF的網址才成功。

這邊Demo新增LIFF的部份。

一開始進到LIFF的頁籤會看到這樣:

LIFF的初始介面
LIFF的初始介面

不要猶豫按下「Add」,會看到這樣:

新增LIFF的設定(點圖開新視窗)
新增LIFF的設定(點圖開新視窗)

Size,就是在LINE上打開的高度,直接截圖看比較快:

LIFF的Size差別
圖片來源:Size of the LIFF app view
LIFF的Size差別
圖片來源:Size of the LIFF app view

但在用LINE登入時,實測是這邊的設定不影響,一律都是滿版顯示,像這樣:

LINE登入的LIFF size實測
LINE登入的LIFF size實測

Endpoint URL,就是填要被開啟的網址,就想像成是iframe src。下一篇的第一步,我們會取得讓使用者登入LINE的authorize網址,就把這個網址填在這欄就行。

Scopes,是可以取得的資料,一樣在下一篇的authorize網址那邊也會設定,這邊就先勾openid, profile, email。

Bot link feature,就是如果這個channel有設定跟哪個官方帳號連結時,當使用者第一次登入,LINE詢問要不要加入官方帳號為好友的方式,

Off就是不顯示請使用者加入的選項。

Normal、Aggressive這兩個都是會詢問,差別直接看截圖:

詢問加入官方帳號的方式
圖片來源:Redirect users to the authorization URL
詢問加入官方帳號的方式
圖片來源:Redirect users to the authorization URL

Aggressive是比較侵入式的,選擇哪種就看個人的想法或是行銷人員的意見。

設定完後按下「Add」,就會看見LIFF產出了一個「line://」開頭的網址,拿這個網址做成QR code就行了。


以上,用LINE登入的前置作業就都完成了,下一篇就會開始進入到程式碼的部份:

用Google Apps Script寫一個LINE登入功能:下篇 – 三大步驟

Summary
用Google Apps Script寫一個LINE登入功能:上篇 - 前置作業
Article Name
用Google Apps Script寫一個LINE登入功能:上篇 - 前置作業
Description
本篇大綱:為什麼要LINE登入?為了電子報訂閱人數。LINE登入會拿到的資料。LINE登入並取得資料的三大步驟。前置作業:3個必備事物。LINE Login後台設定部份。如果常來Let’s Write的朋友,又是眼尖的朋友,會發現本站訂閱電子報換成掃QR code的方式啦~
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言