ใช้งาน Line Login กันดีกว่า !!

Line by Keptcode.com

สารบัญ

เข้าเว็บไซต์ Line Developer กันก่อนเลย !!

https://developers.line.biz/en/

เข้าสู่ระบบด้วย Line บัญชีของเรา

หน้าเว็บ Line Developer เมนู Provider

สร้าง Provider ใหม่

เราสามารถตั้งชื่อ Provider ของตัวเอง ตัวอย่างชื่อ "KEPTCODE" คือชื่อ Provider ของเรา

เลือกเมนู LINE Login Channel

เลือก Type เป็น LINE Login

เลือก Reqion, Country เป็น Thailand

กรอกรายละเอียด และ เลือก Type ที่เราจะใช้งาน

กรอก E-Mail ของเรา

กรอก URL ที่เป็น Policy, Terms ของเว็บ

ติ๊กเลือก "ยอมรับ" ข้อตกลง และ กดปุ่ม "Create"

สร้าง Channel สำหรับ Line Login สำเร็จ

อย่าลืมกด "Apply" หากต้องดึง "E-Mail" มาใช้ด้วยนะ

เพิ่ม URL สำหรับ Callback หลังจาก Login สำเร็จ

โค้ด Javascript สำหรับ Login อย่างง่าย ๆ

Path: [skeleton]\line-login\login.html

Language: Javascript

const lineChannelID = 111112222233333
const lineResponseType = 'code'
const lineRedirectUrl = 'http://example.com/line/login'

const lineState = 'keptcode_login'
const lineScope = 'profile openid email'

const lineLoginUrl = `https://access.line.me/oauth2/v2.1/authorize?response_type=${lineResponseType}&client_id=${lineChannelID}&redirect_uri=${encodeURIComponent(lineRedirectUrl)}&state=${lineState}&scope=${encodeURIComponent(lineScope)}`

window.location.replace(lineLoginUrl)

โค้ด PHP สำหรับ Login อย่างง่าย ๆ

Path: [skeleton]\line-login\login.php

Language: PHP

$lineChannelID = 111112222233333;
$lineResponseType = 'code';
$lineRedirectUrl = 'http://example.com/line/login';
$lineAuthorizeUrl = 'https://access.line.me/oauth2/v2.1/authorize';

$lineState = 'keptcode_login';
$lineScope = 'profile openid email';

$lineLoginUrl = sprintf(
  '%s?response_type=%s&client_id=%s&redirect_uri=%s&state=%s&scope=%s', 
  $lineAuthorizeUrl, 
  $lineResponseType,
  $lineChannelID,
  urlencode($lineRedirectUrl),
  urlencode($lineState),
  urlencode($lineScope),
);

echo '<script type="text/javascript"> window.location.replace("' . $lineLoginUrl . '"); </script>';

โค้ด Javascript สำหรับดึง Access Token อย่างง่าย ๆ

Path: [skeleton]\line-login\access-token.html

Language: Javascript

const lineChannelID = 111112222233333
const lineChannelSecret = '2d153d26e0dfdd7861d73c03d0'
const lineRedirectUrl = 'http://example.com/line/login'

const searchParams = new URLSearchParams(window.location.search)

console.log('Code:', searchParams.get('code'))
console.log('State:', searchParams.get('state'))

if (searchParams.get('state') == 'keptcode_login') {

  const xhttp = new XMLHttpRequest()

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      const res = JSON.parse(this.responseText)
      // console.log('Response:', res)
      window.location.replace(lineRedirectUrl + '?id_token=' + res.id_token + '&state=get_profile')
    }
  }

  const payload = new URLSearchParams()

  payload.append('code', searchParams.get('code'))
  payload.append('grant_type', 'authorization_code')
  payload.append('redirect_uri', lineRedirectUrl)
  payload.append('client_id', lineChannelID)
  payload.append('client_secret', lineChannelSecret)

  xhttp.open('POST', 'https://api.line.me/oauth2/v2.1/token', true)
  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')

  xhttp.send(payload)

}

/* ==============================================
 * ### Response ###
 * ==============================================
 * {
 *   'access_token' : 'eyJhbGciOiJIUzI1NiJ9', 
 *   'token_type' : 'Bearer',
 *   'refresh_token' : '4a446ddgPd5jQNddkA7Vcf',
 *   'expires_in' : 1721561633,
 *   'scope' : 'openid profile',
 *   'id_token' : 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9',
 * }
 */

โค้ด PHP สำหรับดึง Access Token อย่างง่าย ๆ

Path: [skeleton]\line-login\access-token.php

Language: PHP

$lineChannelID = 111112222233333;
$lineChannelSecret = '6ed0df0bd78616dd4ffb73c032d0';
$lineRedirectUrl = 'http://example.com/line/login';

$lineCodeCallback = '6e0df0bd786164ffb73c032d0';

$client = new \GuzzleHttp\Client();

$resToken = $client->request('POST', 'https://api.line.me/oauth2/v2.1/token', [
  'headers' => [ 'Content-type' => 'application/x-www-form-urlencoded' ],
  'form_params' => [
    'code' => $lineCodeCallback,
    'grant_type' => 'authorization_code',
    'redirect_uri' => $lineRedirectUrl,
    'client_id' => $lineChannelID,
    'client_secret' => $lineChannelSecret,
  ]
]);

if ($resToken->getStatusCode() == 200) {
  echo sprintf(json_decode($resToken->getBody()->getContents()));
}

/* ==============================================
 * ### Response ###
 * ==============================================
 * {
 *   'access_token' => 'eyJhbGciOiJIUzI1NiJ9', 
 *   'token_type' => 'Bearer',
 *   'refresh_token' => '4a446ddgPd5jQNddkA7Vcf',
 *   'expires_in' => 1721561633,
 *   'scope' => 'openid profile',
 *   'id_token' => 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ',
 * }
 */

โค้ด Javascript สำหรับดึง Profile อย่างง่าย ๆ

Path: [skeleton]\line-login\profile.html

Language: Javascript

const lineChannelID = 111112222233333
const lineChannelSecret = '2d153d26e0dfdd7861d73c03d0'
const lineRedirectUrl = 'http://example.com/line/login'
                  
const searchParams = new URLSearchParams(window.location.search)

console.log('ID Token:', searchParams.get('id_token'))
console.log('State:', searchParams.get('state'))

if (searchParams.get('state') == 'get_profile') {

  const xhttp = new XMLHttpRequest()

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      const res = JSON.parse(this.responseText)
      // console.log('Response:', res)
    }
  }

  const payload = new URLSearchParams()

  payload.append('id_token', searchParams.get('id_token'))
  payload.append('client_id', lineChannelID)

  xhttp.open('POST', 'https://api.line.me/oauth2/v2.1/verify', true)
  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')

  xhttp.send(payload)

}

/* ==============================================
 * ### Response ###
 * ==============================================
 * {
 *   'iss' : 'https://access.line.me', // URL
 *   'sub' : 'U0ddff947da56495fee7dfad13a7', // User ID
 *   'aud' : '2005782214', // Channel ID
 *   'exp' : 1721561633, // Expiry Date
 *   'iat' : 1721558033, // ID Token
 *   'amr' : [ 'linesso' ], // linesso: Log in with single sign-on
 *   'name' : 'Line Login', // Display Name
 *   'picture' : 'https://profile.line-scdn.net/0hjOVWrQrENWBrLiEtdiU3',
 *   'email' : 'example@email.com',
 * }
 */

โค้ด PHP สำหรับดึง Profile อย่างง่าย ๆ

Path: [skeleton]\line-login\profile.php

Language: PHP

$lineChannelID = 111112222233333;
$lineIdTokenCallback = '6e0df0bd786164ffb73c032d0';

$client = new \GuzzleHttp\Client();

$resToken = $client->request('POST', 'https://api.line.me/oauth2/v2.1/verify', [
  'headers' => [ 'Content-type' => 'application/x-www-form-urlencoded' ],
  'form_params' => [
    'id_token' => $lineIdTokenCallback,
    'client_id' => $lineChannelID,
  ]
]);

if ($resToken->getStatusCode() == 200) {
  echo sprintf(json_decode($resToken->getBody()->getContents()));
}

/* ==============================================
 * ### Response ###
 * ==============================================
 * {
 *   'iss' => 'https://access.line.me', // URL
 *   'sub' => 'U0ddff947da56495fee7dfad13a7', // User ID
 *   'aud' => '2005782214', // Channel ID
 *   'exp' => 1721561633, // Expiry Date
 *   'iat' => 1721558033, // ID Token
 *   'amr' => [ 'linesso' ], // linesso: Log in with single sign-on
 *   'name' => 'Line Login', // Display Name
 *   'picture' => 'https://profile.line-scdn.net/0hjOVWrQrENWBrLiEtdiU3',
 *   'email' => 'example@email.com',
 * }
 */

Introduction | Line

เก็บโค้ด - เริ่มต้นที่นี่ สร้างสรรค์ได้ทุกที่ ให้ที่นี่ดูแลคุณ

การใช้งาน Line Noti แจ้งเตือน สถานะต่าง ๆ

เก็บโค้ด - เริ่มต้นที่นี่ สร้างสรรค์ได้ทุกที่ ให้ที่นี่ดูแลคุณ