ISSUE

2021


LINE Login – LINE 提供的免費登入機制  




Let LINE users easily log in and connect to your app !

每當我們在網站或是APP內要結帳或是登入時,總需要一道輸入帳號密碼的手續,為了簡化與方便使用者,所以有使用第三方帳號登入的機制,像是使用 FB 或是 GOOGLE 的帳號登入,就可以節省不少時間,也可以避免顧客跑單啊~ (拜託PM不要再叫我介接一堆第三方登入了…)

 

根據尼爾森媒體( Nielsen )的調查, 12-65 歲的台灣民眾,有將近 91% ,也就是將近 1,700 萬人都在使用 LINE 。至於全球,則有以下宣告數據:

line-login-thumb0-en
上圖引用自官網

台灣用LINE的人太多了,歐美地區反而沒有那麼多人用LINE,到美國去,大家還是用MESSENGER 、WhatsApp、iMessage 比較多~

至於在中國,很抱歉,LINE是不通行的!請用QQ、微信、Wechat吧 ~ BYE BYE

LINE的野心很大,服務包山包海,LINE也有提供LINE Login,是免費的登入機制,以下為不同瀏覽器所導引而呈現出不同的輸入帳密畫面,帳號密碼在原網站是得不到的,如果是APP內登入,還可以自動登入,連輸入帳密都不用!

Screenshot_20180824-113509_Samsung Internet

備註:登入的帳號,LINE APP內需有勾選 允許自其他裝置登入,勾選位置在LINE APP內的設定->我的帳號->允許自其他裝置登入

只要是你登入過的網站或APP,都可以在 LINE APP內看到紀錄,並可以取消連動,到LINE APP內的設定->我的帳號->連動中的應用程式,即可看到列表紀錄!真的是凡走過必留下痕跡喔~

下面是比較技術性的說明,適合技術人員閱讀。


如何申請LINE Login呢?

1. Creating a channel,到這邊看詳細說明:點我前往

要先準備一個App icon來代表你,Under 3MB; JPEG/PNG/GIF/BMP。
Channel ID就是你的唯一識別ID。
Channel secret 要保存好。
App type 有分:LINE Login (WEB) 或 LINE Login (NATIVE_APP)。
如果要取得登入者的Email , 在OpenID Connect下的Email,需上傳截圖。(Agree to the application terms and upload a screen shot of the screen that explains to the user why you need to obtain their email address and what you will use it for.)
Callback URL是登入者登入後導回的網址,如有多個,輸入時要換行再輸入!(Max: 400 lines) 。

設定過程不會太久,且設定完幾分鐘就可使用。

 

2. 在自己的頁面上放一個 LINE 登入按鈕
login-button-en-56a6ccdd.png
上圖引用自此,請前往觀看設計規範
將用戶導入到此API,按鈕的連結網址會像是這樣:

https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=xxxxx&redirect_uri=xxxxx&state=xxxxx&scope=openid%20email%20profile

要特別注意scope的參數,如果想要取得用戶的 Email,需要同時帶入openid和email ! 並且以%20分隔。

https://access.line.me/oauth2/v2.1/authorize

SCOPES

  • profile: Permission to get the user’s profile information.
  • openid: Used to retrieve an ID token. For more information
  • email: Permission to get the user’s email address. openid must be specified at the same time.

如果用戶成功登入,LINE會導回Callback URL,並在網址上自動帶回 code:

http://xxxx.com?code=xxxx&state=93873836f8a54ee8b4d5998a2823f515

code很重要!只能用一次!並有十分鐘效期,我們要用它來呼叫另一支API:  https://api.line.me/oauth2/v2.1/token 以便取得 access token要取得access token,我們才能終極取得用戶的 profile資料!

請下載這個免費軟體 POSTMAN 來協助你測試與除錯,點下圖前往下載:
Image 27.png


3. 用POST方法呼叫 https://api.line.me/oauth2/v2.1/token,在POSTMAN中,我們可以看到需帶入以下參數:

Image 28.png

如果成功呼叫,會回傳JSON response.

{
    "access_token": "bNl4YEFPI/hjFWhTqexp4MuEw5YPs...",
    "expires_in": 2592000,
    "id_token": "eyJhbGciOiJIUzI1NiJ9...",
    "refresh_token": "Aa1FdeggRhTnPNNpxr8p",
    "scope": "profile",
    "token_type": "Bearer"
}

自此,這邊回傳的Access token,效期可長達30天!30天內都可以持這個Access token免死金牌,向LINE取得用戶Profile資料。

你也可以另外呼叫GET https://api.line.me/oauth2/v2.1/verify,來驗證Access token免死金牌的有效性。技術人員可以看詳細的 Social API v2.1 reference


4. Getting user profiles (向LINE取得用戶Profile資料)

用GET方法呼叫 https://api.line.me/v2/profile,在POSTMAN中,我們可以看到需帶入以下參數:

Image 30.png

可以取得 (回傳) 哪些資料呢?
可以取得 userId 來跟你自己的平台做 mapping !
可以取得displayName,就是用戶在 LINE顯示的名稱
可以取得pictureUrl,就是用戶在 LINE顯示的大頭照片
可以取得statusMessage,就是用戶在 LINE顯示的ˋ狀態文字,如果他沒有狀態文字就不會回傳此項!

如果成功呼叫,會回傳JSON response.

{
  "userId":"U4af4980629...",
  "displayName":"Brown",
  "pictureUrl":"https://example.com/abcdefghijklmn",
  "statusMessage":"Hello, LINE!"
}
以上就是基本的流程,技術人員可以看詳細的 Social API v2.1 reference,就麻煩移駕前往官方文件研究囉~ 


前往討論區 這篇文章的網址 (可分享到FB、PTT、Mobile01):

小編推薦/優惠活動: 小編推薦/優惠活動:
申辦星展卡贈500元 申辦玉山卡贈300元


您也許對這文章有興趣:

您也許對這文章有興趣:

數位高利活儲帳戶 (渣打/花旗/華南/台新)
數位高利活儲帳戶 (渣打/花旗/華南/台新)

Line 使用常見問題
發錯的LINE訊息可以收回或刪除嗎?

 
其它文章: 前往瀏覽目錄
本篇文章的行動版網頁: 切換到行動版本
返回頂端

Copyright © 2008-2021 Anson | Secured by SSL Connection SSL

威力彩線上電腦選號(真正電腦選)
你的解答書-抽籤問事
台灣各家銀行信用卡0800免付費電話 客服電話 智能客服
保費繳別計算器