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)進行登入 在顯示「使用以下帳號登入」的確認畫面中,點擊登入按鈕進行登入
Screenshot_20180824-113509_Samsung Internet

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

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

LINE LOGIN 常見問題 (FAQ):

▶原來的網站會知道我LINE的帳號密碼嗎?
答:不會

▶我的朋友會知道我登入過哪些網站嗎?
答:不會

▶使用者可以解除登入過的網站嗎?
答:可以,到LINE APP內的設定->我的帳號->連動中的應用程式,即可看到列表紀錄!解除後日後仍可以再次登入網站,但會再看到一次授予哪些權限的畫面!

▶使用者同意用LINE帳號登入後,原來的網站會得到哪些個人資訊?
答:依據原來的網站要求的資料多寡而定,基本上能得到登入者的大頭照、顯示名稱、電子郵件、狀態訊息等

▶我不懂程式,可以為自己的網站加上LINE LOGIN嗎?
答:需要會寫程式的技術人員幫忙

▶網站如果要使用LINE LOGIN會需要費用嗎?
答:不用

如需我們的工程師幫您代工實作,請聯絡我們進行報價:

合作與連絡

聯絡方式,請前往 https://www.anson.com.tw/#contact

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

簡易流程是這樣的:

//顯示警告訊息並導向
function js_go($msg="", $url="") {
    echo "<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">n";
     echo "<script language=javascript>n";
     if ($msg) echo "alert("".$msg."");n";
     if ($url)
        echo "location.href='".$url."';n";
     else
        echo "location.href='".$_SERVER['PHP_SELF']."';n";
     echo "</script>n";
     exit;
 }

$code = $_GET['code'];
if(!empty($code)){
    
            $state = $_GET['state'];
            if($state!='xxxxxxx'){
                js_go("error occured: state is wrong!", "https://www.xxxx.com.tw/);
                exit;
            }

            $service_url = 'https://api.line.me/oauth2/v2.1/token';
            $ch = curl_init();
            curl_setopt($ch, CURLOPT_URL,$service_url);
            curl_setopt($ch, CURLOPT_POST, 1);
            curl_setopt($ch, CURLOPT_POSTFIELDS,
                        "grant_type=authorization_code&code=$code&redirect_uri=https://www.xxxxx.com.tw/response.php&client_id=xxxxxx&client_secret=xxxxxxxxxxxxxx");
            curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/x-www-form-urlencoded'));
            
            // receive server response ...
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            
            $server_output = curl_exec($ch);
            $decoded = json_decode($server_output);
            
            curl_close ($ch);
            
            if (isset($decoded->response->status) && $decoded->response->status == 'ERROR') {
                js_go("error occured:".$decoded->response->errormessage, "https://www.xxxx.com.tw/);
                exit;
            }
            
           
            $decode_jwt = (json_decode(base64_decode(str_replace('_', '/', str_replace('-','+',explode('.', $decoded->id_token)[1])))));
            
 
            $login_user_email = $decode_jwt->email;  //取得登入用戶的電子郵件
            $_SESSION['login_user_email'] = $login_user_email;  //可先寫入session,之後可寫入會員資料庫...


        if(!empty($decoded->access_token)){

            $url = "https://api.line.me/v2/profile";
            $curl = curl_init($url);
            curl_setopt($curl, CURLOPT_URL, $url);
            curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
            
            $headers = array(
               "Accept: application/json",
               "Authorization: Bearer {$decoded->access_token}",
            );
            curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
            //for debug only!
            curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
            curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
            
            $resp = curl_exec($curl);
            $decoded2 = json_decode($resp);
            curl_close($curl);
		    
                    js_go("{$decoded2->displayName}您好,您已經登入!", "https://www.xxxx.com.tw");
                    exit;
   		
        }else{
            js_go("error occured:access_token gone!請再試一次!", "https://www.xxxxx.com.tw/);
            exit;
        }

}else{
    js_go("很遺憾您未能同意登入!請再試一次!", "https://www.xxxxx.com.tw/);
    exit;
}

如需我們的工程師幫您代工實作,請聯絡我們進行報價:

合作與連絡

聯絡方式,請前往 https://www.anson.com.tw/#contact


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

用LINE分享給朋友:

延伸閱讀:北部新冠快篩站預約與等候結果

延伸閱讀:疫情嚴重時少出門必備工具

延伸閱讀:口罩有縫隙! 美國CDC教你knot and tuck改良自己的口罩

延伸閱讀:居家工作 網路攝影機 幫忙看門/看小孩

延伸閱讀:「公費疫苗可選廠牌」哪種廠牌好? 要投保疫苗險嗎?

延伸閱讀:WFH在家工作 急需傳真不用跑便利商店

延伸閱讀:WFH在家工作時時關心疫情 – 小米盒子(追劇看新聞)

延伸閱讀:勞工紓困貸款 貸了有何影響?

延伸閱讀:打不到新冠肺炎(COVID-19)疫苗? 先打肺炎鏈球菌疫苗?

延伸閱讀:COVID-19新冠肺炎 居家快篩試劑,保護自己保護家人

延伸閱讀:必須在長輩手機上設定的 緊急聯絡人與緊急醫療資訊 (快樂缺氧怎麼辦?!) 

延伸閱讀:打不到新冠肺炎(COVID-19)疫苗? 先打肺炎鏈球菌疫苗?

延伸閱讀:必須在長輩手機上設定的 緊急聯絡人與緊急醫療資訊 (快樂缺氧怎麼辦?!) 

延伸閱讀:打了新冠肺炎(COVID-19)疫苗 副作用 (親身經歷)