เนื้อหาเป็นส่วนหนึ่งของบทความ Social Login ใน 4 บทความก่อน
หน้า ที่เป็นการใช้งาน Line Google Facebook Twitter ( X )
วิธีการและแนวทางแทบจะเหมือนกันทั้งหมด แต่แค่เปลี่ยนการเรียกใช้งาน
มาเป็นการใช้งานร่วมกับ TikTok เป็นแพลตฟอร์มสำหรับแชร์วิดีโอสั้นๆ
ซึ่งมีความนิยมมากในหลายประเทศทั่วโลก
ทุกๆ แพลตฟอร์มข้างตัน จะมีส่วนของหน้าการพัฒนาเฉพาะ ที่เราต้องทำการ
สมัครสมาชิก เพื่อใช้งาน
สิ่งที่นำเสนอในบทความนี้ จะเป็นการเพิ่มเนื้อหาเฉพาะส่วนที่แตกต่าง เช่น การ
สร้าง App และการกำหนดค่าต่างๆ และโค้ดตัวอย่างหลักที่สำคัญเท่านั้น ส่วน
การประยุกต์อื่นๆ สามารถดูจาก 4 บทความก่อนหน้า เป็นแนวทางได้ เพราะแค่เปลี่ยน
แค่ชื่อและตัวแปรที่เรียกใช้งานเท่านั้น
การสร้าง App ใน Platform TikTok
ไปยังหน้า TikTok Developer
สมัครสมาชิก และใช้งานด้วยบัญชี TikTok ให้เรียบร้อย จากนั้นเข้าสู่ระบบเพื่อดำเนินการต่อ
ทำการเพิ่ม App ใหม่ด้วยการ กดทึ่ปุ่ม Connect an app
* หน้าตาอาจจะเปลี่ยนไป
ในการพัฒนา App เราจะต้องเตรียมข้อมูลต่างให้พร้อมก่อนทำการสมัคร เพื่อไม่ให้เสียเวลา
ดูเนื้อหาเกี่ยวกับการเตรียมความพร้อม ในบทความ
ล็อกอินด้วย Line Facebook Google Twitter อัพเดทปี 2020 ตอนที่ 1 http://niik.in/986
หลักจากเรากดสร้าง App ก็จะมาที่หน้าการตั้งค่าต่างๆ ดังรูป
ค่าหลักที่จะถูกใช้งานคือ Client key กับ Client secret (กดที่รูปตาปิด ถ้าต้องการแสดงข้อมูล)
สองค่านี้ที่จะถูกนำไปใช้ในส่วนของการกำหนดในโค้ด
สำหรับสถานะของ App จะบอกว่า App เราอยู่ในขั้นตอนใด ซึ่ง Staging ข้างต้นก็คือ
กำลังอยู่ในขั้นตอนการปรับแต่งค่าต่างๆ หรือการตั้งค่า เราสามารถบันทุกข้อมูลต่างๆ ได้ทุกเมื่อ แต่
ถ้าต้องการนำไปใช้งาน เราต้องทำการ ส่งไปให้ทาง TikTok พิจารณา จะมีปุ่มว่า Submit to review
ซึ่งก่อนที่เราจะกดปุ่มนี้ เราต้องตรวจสอบข้อมูลที่กรอกให้ถูกต้องก่อน เพื่อไม่ให้เสียเวลา เพราะหลังส่ง
ไปตรวจสอบ เราก็จะต้องรอ อย่างน้อยก็ประมาณ 1 วัน ว่าอนุญาตหรือไม่ มีตรงไหน
ต้องแก้ไข ก่อนถึงจะสามารถใช้งานได้ ซึ่งถ้าส่งแล้ว ผ่านเลย ก็จะเข้าสู่สถานะ Live in production
คือนำไปใช้งานได้เลย หรือกรณียังไม่ผ่าน ก็จะแจ้งกลับมาว่าต้องแก้ตรงไหน ที่เคยเจอก็เช่น คำอธิบาย
ต้องชัดเจนว่าเราจะใช้ App นี้ทำอะไร ต้องมีลิ้งค์หน้า ข้อตกการใช้งาน และ ความเป็นส่วนตัว ( Term
of service / Privacy policy ) ต้องแสดงที่หน้าแรกของเว็บไซต์เรา จะแสดงส่วนไหนก็ได้
และอีกส่วนคือการกำหนด Redirect URI หรืออาจจะเรียกว่า Callback url ที่ต้องเป็นตามรูป
แบบที่ถูกต้อง เหล่านี้เป็นตัน
ตัวอย่างการตั้งค่า
ในการใช้งาน App สำหรับสร้างระบบล็อกอิน เราต้องการเพิ่ม Product เข้ามานั้นคือ
Login Kit ตามรูป
จะแสดงส่วนที่เราต้องการใช้งาน
เพิ่มเสร็จแล้ว กลับมากำหนดในส่วนของ Redirect URI
หากตรวจสอบ และทำทุกอย่างเรียบร้อยแล้วก็กดบันทึก แล้วก็ส่งไปให้ตรวจสอบ ถึงขั้นตอนนี้
ถ้าผ่านการพิจารณา เราก็พร้อมไปทำในส่วนขั้นตอนต่อไป คือการเพิ่มโค้ด
โดยทั่วไปแล้ว ข้อมูลหลักๆ ที่ดึงมาจาก Social ต่างๆ ก็จะมี user id, name , email , picture
และ accessToken สำหรับค่า email นั้นอาจจะไม่มีในทุกแพลตฟอร์ม เช่นใน TikTok ก็จะไม่มี
ข้อมูลในส่วนนี้ แต่รูปแบบการจัดการของเราก็ยังทำให้รองรับไว้
การติดตั้ง PHP Library สำหรับ TikTok
composer require gimucco/tiktok-loginkit:0.6.6
ให้เราอ่านเนื้อหาข้อมูล เพิ่มเติมที่บทความด้านล่างนี้
การใช้งาน PHP Library ดึงข้อมูล Social API อัพเดทปี 2020 ตอนที่ 2 http://niik.in/987
สำหรับการใช้งาน TikTok ให้เราสร้างไฟล์ชื่อ tiktok.php ตามรูปแบบกับลิ้งค์ด้านบน
ไฟล์ tiktok.php (กรณีใช้ session แสดงผล)
<?php
session_start();
require_once('../vendor/autoload.php');
use gimucco\TikTokLoginKit;
class Socialconnect{
private $_TIKTOK_CLIENT;
// $salt สามารถใช้คำสั่ง password_hash("mysslweb",PASSWORD_BCRYPT); สร้างได้
private $_SALT = '$2y$10$cDKiRAzt3zWwiyAu/Nz40Om6yKe1mQZMM4T6yxAlTTI25oIUq9EVm';
// กำหนดค่าที่จะใช้งานในส่วนนี้
private $_CLIENT_ID = "7113xxxxxxxxxx439621";
private $_CLIENT_KEY = "nMSxxxxxxafvLob";
private $_CLIENT_SECRET = "UUB3OxxxxxxxGicKKptayYikz";
private $_CLIENT_CALLBACK = "https://www.mysslweb.com/socialconnect/tiktok";
public function __construct(){
$this->_TIKTOK_CLIENT = $this->tiktok();
}
public function redirect($url){
header("Location:{$url}");
exit;
}
public function tiktok(){
return new TikTokLoginKit\Connector(
$this->_CLIENT_KEY,
$this->_CLIENT_SECRET,
$this->_CLIENT_CALLBACK
);
}
public function connecttiktok(){
$this->redirect($this->_TIKTOK_CLIENT->getRedirect());
}
public function authorizedtiktok($success_url,$error_url){
if(isset($_GET['error'])){
$this->redirect($error_url);
}else{
if (TikTokLoginKit\Connector::receivingResponse()) {
try {
$dataToken = $this->_TIKTOK_CLIENT->verifyCode($_GET[TikTokLoginKit\Connector::CODE_PARAM]);
$accessToken = $dataToken->getAccessToken();
$tiktok_user = $this->_TIKTOK_CLIENT->getUser();
// ค่า ID , name , picture ที่เราสามารถนำไปใช้ได้
$tiktok_userID = $tiktok_user->getOpenID();
$tiktok_userName = $tiktok_user->getDisplayName();
$tiktok_email = null;
$tiktok_userPicture = $tiktok_user->getBestAvatar();
$hashed_token = crypt($tiktok_userID,$this->_SALT);
// เก็บค่าใน seesion ไว้ไปแสดง
$_SESSION['ses_user']['id'] = (isset($tiktok_userID))?$tiktok_userID:null;
$_SESSION['ses_user']['name'] = (isset($tiktok_name))?$tiktok_name:null;
$_SESSION['ses_user']['email'] = (isset($tiktok_email))?$tiktok_email:null;
$_SESSION['ses_user']['picture'] = (isset($tiktok_picture))?$tiktok_picture:null;
} catch (Exception $e) {
$this->redirect($error_url);
}
}else{
$this->redirect($error_url);
}
}
}
}
?>
<?php
$social = new Socialconnect();
if(isset($_GET['action']) && $_GET['action']=="connect"){
$social->connecttiktok();
}else{
$social->authorizedtiktok("../member.php","../login.php");
}
?>
การใช้งาน TikTok ร่วมกับระบบสมาขิก
โค้ดตัวอย่างด้านบน เป็นการทดสอบการดึงข้อมูลมาแสดง โดยอาศัยนำค่ามาไว้ในตัวแปร session
ต่อไปเป็นส่วนของการประยุกต์สร้างระบบสมาชิกเข้ามา เนื้อหาส่วนนี้ ก็จะใช้รูปแบบเดียวกัน
กับบทความตามด้านล่าง
การใช้งาน Social Login ร่วมกับระบบสมาขิก อัพเดทปี 2020 ตอนที่ 3 http://niik.in/988
https://www.ninenik.com/content.php?arti_id=988 via @ninenik
แค่เพิ่มโค้ดในส่วนของการใช้งาน TikTok ซึ่งจะเป็นตัวที่ 5 เลข 5 จะใช้เป็นตำกำหนดประเภทของ
Social type ที่เป็น TikTok ดังนั้นไฟล์ tiktok.php จะปรับเพิ่มเติมเป็นดังนี้
ไฟล์ tiktok.php (กรณีสร้างระบบสมาชิกใหม่ ใช้ร่วมกับฐานข้อมูล)
<?php
session_start();
date_default_timezone_set("Asia/Bangkok");
// โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642
require_once('../dbconnect.php');
require_once('../vendor/autoload.php');
use gimucco\TikTokLoginKit;
require_once('./User.php');
class Socialconnect{
private $_TIKTOK_CLIENT;
// $salt สามารถใช้คำสั่ง password_hash("mysslweb",PASSWORD_BCRYPT); สร้างได้
private $_SALT = '$2y$10$cDKiRAzt3zWwiyAu/Nz40Om6yKe1mQZMM4T6yxAlTTI25oIUq9EVm';
// กำหนดค่าที่จะใช้งานในส่วนนี้
private $_CLIENT_ID = "7113xxxxxxxxxx439621";
private $_CLIENT_KEY = "nMSxxxxxxafvLob";
private $_CLIENT_SECRET = "UUB3OxxxxxxxGicKKptayYikz";
private $_CLIENT_CALLBACK = "https://www.mysslweb.com/socialconnect/tiktok";
private $_DB; // ตัวแปรเชื่อมต่อฐานข้อมูล
public function __construct($mysqli){ // รับ parameter การเชื่อมต่อฐานข้อมูล
$this->_DB = $mysqli;
$this->_TIKTOK_CLIENT = $this->tiktok();
}
public function redirect($url){
header("Location:{$url}");
exit;
}
public function tiktok(){
return new TikTokLoginKit\Connector(
$this->_CLIENT_KEY,
$this->_CLIENT_SECRET,
$this->_CLIENT_CALLBACK
);
}
public function connecttiktok(){
$this->redirect($this->_TIKTOK_CLIENT->getRedirect());
}
public function authorizedtiktok($success_url,$error_url){
if(isset($_GET['error'])){
$this->redirect($error_url);
}else{
if (TikTokLoginKit\Connector::receivingResponse()) {
try {
$dataToken = $this->_TIKTOK_CLIENT->verifyCode($_GET[TikTokLoginKit\Connector::CODE_PARAM]);
$accessToken = $dataToken->getAccessToken();
$tiktok_user = $this->_TIKTOK_CLIENT->getUser();
// ค่า ID , name , picture ที่เราสามารถนำไปใช้ได้
$tiktok_userID = $tiktok_user->getOpenID();
$tiktok_userName = $tiktok_user->getDisplayName();
$tiktok_email = null;
$tiktok_userPicture = $tiktok_user->getBestAvatar();
$hashed_token = crypt($tiktok_userID,$this->_SALT);
// เก็บค่าใน seesion ไว้ไปแสดง
$userData['id'] = (isset($tiktok_userID))?$tiktok_userID:null;
$userData['name'] = (isset($tiktok_userName))?$tiktok_userName:null;
$userData['email'] = (isset($tiktok_email))?$tiktok_email:null;
$userData['picture'] = (isset($tiktok_userPicture))?$tiktok_userPicture:null;
$userData['token'] = (isset($hashed_token))?$hashed_token:null;
if(isset($tiktok_userID) && isset($hashed_token) && isset($accessToken)){
// เรียกใช้งาน User Class กำหนดตัวเลข ชนิดของ ประเภทของ social ที่ใช้งาน
// Line , Google , Facebook และ Twitter จะเป็น 1,2,3 และ 4 ตามลำดับ
$_USER = new User($this->_DB,$userData,5); // 5 คือ TikTok ที่เพิ่มเข้ามา
$_SESSION['ses_user'] = $_USER->login(); // เรียกใช้งานคำสั่งสมัคร และล็อกอิน คืนค่า array ข้อมูลผู้ใช้
$this->redirect($success_url);
}else{
$this->redirect($error_url);
}
} catch (Exception $e) {
$this->redirect($error_url);
}
}else{
$this->redirect($error_url);
}
}
}
}
?>
<?php
$social = new Socialconnect($mysqli); // ส่งการเชื่อมกับฐานข้อมูลเข้าไปใช้งาน
if(isset($_GET['action']) && $_GET['action']=="connect"){
$social->connecttiktok();
}else{
$social->authorizedtiktok("../member.php","../login.php");
}
?>
การเชื่อมบัญชี TikTok กับระบบสมาชิกเดิม
สำหรับกรณีไม่ใช่การสร้างระบบสมาชิกใหม่ แต่เป็นการไปใช้ร่วมกับระบบสมาชิกเดิม แนวทางนี้
ได้อธิบายไว้ในบทความตามลิ้งค์ด้านล่าง
การเชื่อมบัญชี Social กับระบบสมาชิกเดิม อัพเดทปี 2020 ตอนที่ 4 http://niik.in/989
https://www.ninenik.com/content.php?arti_id=989 via @ninenik
ในส่วนนี้ถ้าเพิ่มส่วนของ TikTok เข้ามา เราแทบไม่ต้องแก้ไขอะไรมาก เพียงแค่กำหนดส่วนของ
ตัวแปรที่ระบุประเภทของการเชื่อมต่อเข้าไป เดิมมีแค่ 4 ก็เพิ่มรายการที่ 5 ที่เป็น TikTok เข้าไป
และเพิ่มใส่ส่วนของการยกเลิกการเชื่อมต่อไปในไฟล์ tiktok.php ตามลำดับ
<?php
$platforms = array(
array(
"id" => 1,
"name" => "line",
"text" => "Line",
"icon" => "fab fa-line",
),
array(
"id" => 2,
"name" => "google",
"text" => "Google",
"icon" => "fab fa-google",
),
array(
"id" => 3,
"name" => "facebook",
"text" => "Facebook",
"icon" => "fab fa-facebook",
),
array(
"id" => 4,
"name" => "twitter",
"text" => "Twitter",
"icon" => "fab fa-twitter",
),
array(
"id" => 5,
"name" => "tiktok",
"text" => "TikTok",
"icon" => "fab fa-tiktok",
),
);
?>
กรณีที่เราใช้งานไม่ครบทั้ง 5 แพลตฟอร์ม เราสามารถตัดบางอันออกได้ แต่พยายามให้คงเลข id
เดิมไว้ เช่น สมมติเรามีแค่ 2 ตัวคือ Google กับ TikTok ก็อาจจะใช้เป็น
<?php
$platforms = array(
array(
"id" => 2,
"name" => "google",
"text" => "Google",
"icon" => "fab fa-google",
),
array(
"id" => 5,
"name" => "tiktok",
"text" => "TikTok",
"icon" => "fab fa-tiktok",
),
);
?>
ไฟล์ tiktok.php (เชื่อมต่อกับฐานข้อมูล ระบบสมาชิกเดิม)
<?php
session_start();
date_default_timezone_set("Asia/Bangkok");
// โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642
require_once('../dbconnect.php');
require_once('../vendor/autoload.php');
use gimucco\TikTokLoginKit;
require_once('./User.php');
class Socialconnect{
private $_TIKTOK_CLIENT;
// $salt สามารถใช้คำสั่ง password_hash("mysslweb",PASSWORD_BCRYPT); สร้างได้
private $_SALT = '$2y$10$cDKiRAzt3zWwiyAu/Nz40Om6yKe1mQZMM4T6yxAlTTI25oIUq9EVm';
// กำหนดค่าที่จะใช้งานในส่วนนี้
private $_CLIENT_ID = "7113xxxxxxxxxx439621";
private $_CLIENT_KEY = "nMSxxxxxxafvLob";
private $_CLIENT_SECRET = "UUB3OxxxxxxxGicKKptayYikz";
private $_CLIENT_CALLBACK = "https://www.mysslweb.com/socialconnect/tiktok";
private $_DB; // ตัวแปรเชื่อมต่อฐานข้อมูล
public function __construct($mysqli){ // รับ parameter การเชื่อมต่อฐานข้อมูล
$this->_DB = $mysqli;
$this->_TIKTOK_CLIENT = $this->tiktok();
}
public function redirect($url){
header("Location:{$url}");
exit;
}
public function tiktok(){
return new TikTokLoginKit\Connector(
$this->_CLIENT_KEY,
$this->_CLIENT_SECRET,
$this->_CLIENT_CALLBACK
);
}
public function connecttiktok(){
$this->redirect($this->_TIKTOK_CLIENT->getRedirect());
}
public function disconnecttiktok(){
$_USER = new User($this->_DB,NULL,5);
$_USER->disconnect();
$this->redirect($_SERVER['HTTP_REFERER']);
}
public function authorizedtiktok($success_url,$error_url){
if(isset($_GET['error'])){
$this->redirect($error_url);
}else{
if (TikTokLoginKit\Connector::receivingResponse()) {
try {
$dataToken = $this->_TIKTOK_CLIENT->verifyCode($_GET[TikTokLoginKit\Connector::CODE_PARAM]);
$accessToken = $dataToken->getAccessToken();
$tiktok_user = $this->_TIKTOK_CLIENT->getUser();
// ค่า ID , name , picture ที่เราสามารถนำไปใช้ได้
$tiktok_userID = $tiktok_user->getOpenID();
$tiktok_userName = $tiktok_user->getDisplayName();
$tiktok_email = null;
$tiktok_userPicture = $tiktok_user->getBestAvatar();
$hashed_token = crypt($tiktok_userID,$this->_SALT);
// เก็บค่าใน seesion ไว้ไปแสดง
$userData['id'] = (isset($tiktok_userID))?$tiktok_userID:null;
$userData['name'] = (isset($tiktok_userName))?$tiktok_userName:null;
$userData['email'] = (isset($tiktok_email))?$tiktok_email:null;
$userData['picture'] = (isset($tiktok_userPicture))?$tiktok_userPicture:null;
$userData['token'] = (isset($hashed_token))?$hashed_token:null;
if(isset($tiktok_userID) && isset($hashed_token) && isset($accessToken)){
// เรียกใช้งาน User Class กำหนดตัวเลข ชนิดของ ประเภทของ social ที่ใช้งาน
// Line , Google , Facebook และ Twitter จะเป็น 1,2,3 และ 4 ตามลำดับ
$_USER = new User($this->_DB,$userData,5); // 5 คือ TikTok ที่เพิ่มเข้ามา
$_USER->login(); // เรียกใช้งานคำสั่งสมัคร และล็อกอิน
$this->redirect($success_url);
}else{
$this->redirect($error_url);
}
} catch (Exception $e) {
$this->redirect($error_url);
}
}else{
$this->redirect($error_url);
}
}
}
}
?>
<?php
$social = new Socialconnect($mysqli); // ส่งการเชื่อมกับฐานข้อมูลเข้าไปใช้งาน
if(isset($_GET['action']) && $_GET['action']=="connect"){
$social->connecttiktok();
}elseif(isset($_GET['action']) && $_GET['action']=="disconnect"){
$social->disconnecttiktok();
}else{
$social->authorizedtiktok("../member.php","../login.php");
}
?>
ไฟล์ tiktok.php ข้างตั้นทั้ง 3 รูปแบบ จะเป็นการใช้งานที่แตกต่างกัน กรณีแรกจะใช้การล็อกอิน
แล้วเก็บค่า session อาจจะเพื่อแสดง หรือเป็นเงื่อนไขการเข้าใช้งานก็ได้ ส่วนกรณีที่สองจะเป็นการ
สร้างระบบสมาชิก แบบเชื่อมต่อกับฐานข้อมูล คือรองรับการสร้างสมาชิกใหม่จากการใช้ social login
และสุดท้ายกรณีที่ 3 เป็นการนำไปประยุกต์ร่วมกับระบบสมาชิกเดิมที่เรามีอยู่แล้ว จึงมีการเพิ่มการ
เชื่อมต่อและการยกเลิกการเชื่อมต่อเข้ามาในไฟล์
แนวทางการใช้งาน TikTok ข้างต้น อาจจะไมได้อธิบายละเอียดทุกขั้นตอน แต่ให้เราย้อนดูเนื้อหาของ
แพลตฟอร์มอื่นๆ และปรับแต่งเล็กน้อยก็ใช้งานได้ เพราะมีรูปแบบคล้ายๆ กัน
หวังว่าเนื้อหานี้จะเป็นแนวทางในการนำไปใช้งานต่อๆ ไป
เนื้อหาที่เกี่ยวข้อง