[LINE bot 好好玩 30 天玩轉 LINE API] 第 20 天:玩完訊息還有登入啊!

2020 11th 鐵人賽 LINE

本文同步刊載於 iT 邦幫忙第11屆鐵人賽:[LINE bot 好好玩 30 天玩轉 LINE API] 第 20 天:LINE Login 介紹與 Postman 測試

前言

相信大家有看過,滿多人開始使用 LINE 當成 Login 的一個介面,其實在台灣市場來說應該是一個不錯的運用,在台灣你可能沒有 Facebook,可能沒有 Instgram,但一定有 LINE,所以!串接這個服務是一個很不錯的方向。
在 LINE 上面實作 Login 方法並不特別,就是使用大家耳熟能詳的 OAuth,串接起來很快,今天就來說明一下他怎麼運作吧!

申請 LINE Login

在開始之前我們還是要先申請一下 LINE Login,可以把它放在我們 Message API 的同一個 Provider,這樣還可以讓我們的 Bot 跟 LINE Login 做一個綁定的動作,我們按下 Create new channel

https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191005/201177011wkKCBXPbx.png?w=640&ssl=1

填入必填資訊後按下 Confirm

https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191005/20117701fP88EnE9Sq.png?w=640&ssl=1

再確認一次資料後按下 Create,記得下面的 LINE Developers Agreement,閱讀之後打勾,這樣就完成創建拉!

LINE Login API 測試

一樣打開我們的 Postman,這次我們先看一下 Authorization,裡面有一個 OAuth 2.0,點一下右邊的 Get New Access Token

這時候打開我們剛剛創建好的 LINE Login 取得一下 Channel IDChannel secret

https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191005/20117701rFyCHR4Dmv.png?w=640&ssl=1

Callback URL 填入 http://localhost
Auth URL 填入 https://access.line.me/oauth2/v2.1/authorize
Access Token URL 填入 https://api.line.me/oauth2/v2.1/tokenScope
Scope 填入 openid profile
State 填入 一個想要填的資訊(在實務上會用它來讓 Server 辨識他是誰)

https://i0.wp.com/ithelp.ithome.com.tw/upload/images/20191005/201177012dHh5Voafr.png?w=640&ssl=1

然後按下 Request Token

這時候會發現一件事情,怎麼失敗了,這是因為我們的 Callback URL 沒有加入白名單的關係,我們返回剛剛申請的頁面第二頁的 App settings 填入剛剛輸入的 Callback URL

https://i0.wp.com/ithelp.ithome.com.tw/upload/images/20191005/20117701fkw7Jo2Gfb.png?w=640&ssl=1

再次按下 Request Token 就會發現它正常拉 ~

https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191005/20117701f4qZ8BvLgW.png?w=640&ssl=1

出現了 LINE 登入頁面了,輸入帳號密碼後登入系統
登入後我們會想要使用者的一些資料,我們把剛剛的 Token 結果往下拉一點,會看到一個叫做 id_token 的東西,他是一個 jwt token,我們可以用線上工具把它解出來,就會看到結果了!
線上工具可以直接使用 https://jwt.io/ 來達成這件事情

https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191005/20117701DzHZuy6rx1.png?w=640&ssl=1

可以在上面看到我們可以擁有幾項資訊,sub (line user id)、name 與 picture,基本上應該很夠用拉 ~
有需要的朋友就可以直接實作進去拉 ~