Let LINE users easily log in and connect to your app !
每當我們在網站或是APP內要結帳或是登入時,總需要一道輸入帳號密碼的手續,為了簡化與方便使用者,所以有使用第三方帳號登入的機制,像是使用 FB 或是 GOOGLE 的帳號登入,就可以節省不少時間,也可以避免顧客跑單啊。
台灣用LINE的人太多了,歐美地區反而沒有那麼多人用LINE,到美國去,大家還是用MESSENGER 、WhatsApp、iMessage 比較多~
如果是台灣在地服務的網站,建議要有LINE登入機制,降低使用者加入門檻。
LINE的野心很大,服務包山包海,LINE也有提供LINE Login,是免費的登入機制,以下為不同瀏覽器所導引而呈現出不同的輸入帳密畫面,帳號密碼在原網站是得不到的,如果是APP內登入,還可以自動登入,連輸入帳密都不用!
內建 LINE Login 功能的應用程式中,可以使用以下任一種身份驗證方法登入。
身份驗證方法 說明 自動登入 用戶無需操作即可登入。不會顯示 LINE Login 畫面和確認畫面 以電子郵件地址登入 在 LINE Login 畫面中,輸入電子郵件地址和密碼進行登入 掃瞄 QR Code 登入 利用智慧型手機版的 LINE QR Code 讀取功能,掃瞄 LINE Login 畫面中顯示的 QR Code 進行登入 透過單一登入功能(SSO)進行登入 在顯示「使用以下帳號登入」的確認畫面中,點擊登入按鈕進行登入
備註:登入的帳號,LINE APP內需有勾選 允許自其他裝置登入,勾選位置在LINE APP內的設定->我的帳號->允許自其他裝置登入。
只要是你登入過的網站或APP,都可以在 LINE APP內看到紀錄,並可以取消連動,到LINE APP內的設定->我的帳號->連動中的應用程式,即可看到列表紀錄!真的是凡走過必留下痕跡喔~
LINE LOGIN 常見問題 (FAQ):
▶原來的網站會知道我LINE的帳號密碼嗎? 答:不會
▶我的朋友會知道我登入過哪些網站嗎? 答:不會
▶使用者可以解除登入過的網站嗎? 答:可以,到LINE APP內的設定->我的帳號->連動中的應用程式,即可看到列表紀錄!解除後日後仍可以再次登入網站,但會再看到一次授予哪些權限的畫面!
▶使用者同意用LINE帳號登入後,原來的網站會得到哪些個人資訊? 答:依據原來的網站要求的資料多寡而定,基本上能得到登入者的大頭照、顯示名稱、電子郵件、狀態訊息等
▶我不懂程式,可以為自己的網站加上LINE LOGIN嗎? 答:需要會寫程式的技術人員幫忙
▶網站如果要使用LINE LOGIN會需要費用嗎? 答:不用
如需我們的工程師幫您代工實作,請聯絡我們進行報價:
Getting started with LINE Login 技術實作說明:請點 此前往官方技術文件
以下為技術細節,可由技術人員觀看囉~
首先你需要一個登入畫面,放上一個LINE LOGIN的按鈕,類似這樣:
如果需要取得用戶的EMAIL, scope需要加上email:
<div class="login-page">
<div class="form">
<img src="line_login.png" alt="LINE LOGIN" height="44" width="279">
<button onclick="LineAuth()" class="button2">前往用LINE登入</button>
</div>
</div>
<script>
function LineAuth() {
var URL = 'https://access.line.me/oauth2/v2.1/authorize?';
URL += 'response_type=code';
URL += '&client_id=xxxxxxxx';
URL += '&redirect_uri=https://www.xxxxx.com.tw/response.php';
URL += '&state=xxxxxxx';
URL += '&scope=profile%20openid%20email';
window.location.href = URL;
}
</script>
我們需要另一個畫面,是用戶從LINE那邊登入成功後導回的頁面,假設是:response.php
簡易流程是這樣的:
詳細範例程式碼請到此網址觀看:
https://www.anson.com.tw/2022/anson-post-776.html