LINE Login – LINE 提供的免費登入機制 (技術說明/FAQ常見問題)

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 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、LINE)：