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

行動版 for , 瀏覽人次: 144  , SSL Connection

• 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會需要費用嗎？
  答：不用

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

  

  聯絡方式，請前往 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