使用C#開發Linebot(30) – 使用LINE Login時取得用戶email
先前我們介紹過了LINE Login這個機制,它可以讓我們的網站像是使用Google帳號做SSO(Single Sign On)一樣,達成單一登入的功能。
一旦完成整合之後,未來你的網站上的用戶,將可以用LINE帳號登入,而不需要記憶太多組帳號密碼。這和透過Google/Microsoft/FB做SSO效果相同,但,整合LINE Login有一個額外的好處,就是你有機會取得用戶的User Id,直接透過Line Bot發(Push)訊息給該用戶。這點是Google/Microsoft SSO無法實現的...
底下這個範例大致展示了如何實現LINE Login的基本功能:
https://github.com/isdaviddong/Line_Login_Example
其中有一個常被開發人員問到的問題。
使用LINE Login的時候,可以透過取得的Access Token得知用戶的User ID(這很好用,只要綁定同一個Prodiver底下的LINE Bot,我們就有機會可以直接Push訊息給用戶)和Display Name、頭像…等資訊。
那可以知道用戶的email嗎?
答案是可以的,我們可以取得用戶的email。
不過有一些前提,也不難,只要你在建立LINE Login Channel的時候,Apply一下Email就可以了:
請在上面這個LINE Login後台Channel的選項中,選擇Submit,接著在跳出來的畫面中:
勾選最上方的兩個同意事項(當然,請先看過內容),然後上傳一個截圖(證明你的Web應用程式或網站有跟用戶說明你會索取用戶的email並且徵求用戶的同意使用),完成後,會發現它就變成applied:
接著,調整一下你的登入轉址程式碼,在scope部分加上openid與email:
//建立OAuth 身分驗證頁面並導入 | |
function AuthWithEmail() { | |
var URL = 'https://access.line.me/oauth2/v2.1/authorize?'; | |
URL += 'response_type=code'; | |
URL += '&client_id=這邊要換成你的client_id'; //TODO:這邊要換成你的client_id | |
URL += '&redirect_uri=http://localhost:17615/callback.aspx'; //TODO:要將此redirect url 填回你的 LineLogin後台設定 | |
URL += '&scope=openid%20profile%20email'; | |
URL += '&state=abcde'; | |
window.location.href = URL; | |
} |
如此一來,你會發現用戶登入時,LINE Login會跟用戶索取email:
當用戶同意,並且成功登入,導回callback URL之後,你可以透過底下這段程式碼,來取得用戶的email:
var JwtSecurityToken = new System.IdentityModel.Tokens.Jwt.JwtSecurityToken(token.id_token); | |
var email = ""; | |
//如果有email | |
if (JwtSecurityToken.Claims.ToList().Find(c => c.Type == "email") != null) | |
email = JwtSecurityToken.Claims.First(c => c.Type == "email").Value; |
搞定~看起來超簡單。
如何完成的?
說明一下背景觀念。
這是因為當我們配置了scope=openid%20profile%20email之後,LINE Login回傳的Token JSON之中,包含了id_token這個資訊(請注意,與access_token不同):
當我們在OAuth轉址URL的scope中指明了openid與email之後,只要用戶同意你取得email,id_token就會跟包含編碼過後的email資訊,我們只需要透過JWT套件取得Claims中的email即可。
這就是上面那段c#程式碼會這麼寫的原因。
相關的資訊可以參考LINE官網:
https://developers.line.biz/en/docs/line-login/web/integrate-line-login/
完整的範例在GitHub上囉,請隨意Clone/Fork不用客氣,記得給一個Star並且follow唷。
https://github.com/isdaviddong/Line_Login_Example
Follow @isdaviddong Star------------------
LineBotSDK:https://www.nuget.org/packages/LineBotSDK
相關課程:http://www.studyhost.tw/NewCourses/LineBot
線上課程:https://www.udemy.com/line-bot/
更多內容,請參考電子書:https://www.pubu.com.tw/ebook/103305
LINE Bot實體書籍:https://www.tenlong.com.tw/products/9789865020354
留言