[PHP]Account Kit 使用教學
前言
Account Kit 是由 Facebook 所提供的服務
原意是可以讓開發者不需要去處理帳號與密碼的問題
也可以把此服務當作驗證手機或是Email來使用
剩下詳細的部分可以到 AccountKit 總覽去理解
此篇文章主要部分是紀錄如何申請使用該服務
Step 1
使用此服務必須先使用 Facebook 的開發者帳號
開啟 Facebook Developers 網址
點選右上方的開始使用，選擇一些選項
接下來點下 建立首款應用程式
輸入 應用程式名稱 及 電子信箱
建立成功後就會到該應用程式的頁面
上方應用程式編號之後會用到
Setp 2
接下來在新增產品下面找到 Account Kit 並點下設定
操作完成後注意左方的應用程式中加入了 Account Kit，一樣點下設定
直接按下開始使用，會進入 Account Kit 的設定頁面
因為此篇文章示範的環境是 手機號碼 + Web，所以除了右上角的選項開啟之外，其他的關閉
Account Kit 應用程式密鑰之後會使用到
之後往下滑動找到網頁登入設定，在伺服器網域中填上會使用到的網域名稱
若想找個小空間來試驗的話，可以參考 [PHP]免費虛擬空間申請教學 這篇文章，會提供免費的https網域
輸入完畢後，儲存
Step 3
接下來按照範例來寫程式吧
index.php
<!DOCTYPE html>
<html>
<head>
<title>Account Kit Test</title>
<script src="https://sdk.accountkit.com/zh_TW/sdk.js"></script>
</head>
<body>
<input value="+886" id="country_code" />
<input placeholder="phone number" id="phone_number" value=""/>
<button onclick="smsLogin();">Login via SMS</button>
<form id="login_success" method="post" action="/bk.php">
<input id="csrf" type="hidden" name="csrf" />
<input id="code" type="hidden" name="code" />
</form>
<script>
// initialize Account Kit with CSRF protection
AccountKit_OnInteractive = function(){
AccountKit.init({
appId: "{應用程式編號}",
state: "{CSRF 值}", // 若使用的後端需要這個值可以傳入
version:"v1.1", // 版本號，與 Account Kit 設定頁相符
fbAppEventsEnabled: true, // 是否紀錄 Log
// debug: true, 顯示詳細的錯誤資訊
// redirect: "https://" 電子郵件才會用到的跳轉地址，需要與 Account Kit 設定頁的網域相符
});
};
// login callback
function loginCallback(response) {
if (response.status === "PARTIALLY_AUTHENTICATED") {
document.getElementById("code").value = response.code;
document.getElementById("csrf").value = response.state;
document.getElementById("login_success").submit();
} else if (response.status === "NOT_AUTHENTICATED") {
// handle authentication failure
} else if (response.status === "BAD_PARAMS") {
// handle bad parameters
}
}
// phone form submission handler
function smsLogin() {
var countryCode = document.getElementById("country_code").value;
var phoneNumber = document.getElementById("phone_number").value;
AccountKit.login(
'PHONE',
{
countryCode: countryCode,
phoneNumber: phoneNumber
}, // will use default values if not specified
loginCallback
);
}
</script>
</body>
</html>
bk.php
<?php
// Initialize variables
$app_id = '909797776085994';
$secret = '89c084689ded7f740920b8b12d4a2138';
$version = 'v1.1';
// Method to send Get request to url
function doCurl($url) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$data = json_decode(curl_exec($ch), true);
curl_close($ch);
return $data;
}
$token_exchange_url = "https://graph.accountkit.com/$version/access_token?grant_type=authorization_code&code=$_POST[code]&access_token=AA|$app_id|$secret";
$data = doCurl($token_exchange_url);
$user_id = $data['id'];
$user_access_token = $data['access_token'];
$refresh_interval = $data['token_refresh_interval_sec'];
// Get Account Kit information
$me_endpoint_url = "https://graph.accountkit.com/$version/me?access_token=$user_access_token";
$data = doCurl($me_endpoint_url);
$phone = isset($data['phone']) ? $data['phone']['number'] : '';
$email = isset($data['email']) ? $data['email']['address'] : '';
?>
<!DOCTYPE html>
<html>
<head>
<title>Account Kit PHP</title>
</head>
<body>
<div>User ID: <?php echo $user_id; ?></div>
<div>Phone Number: <?php echo $phone; ?></div>
<div>Email: <?php echo $email; ?></div>
<div>Access Token: <?php echo $user_access_token; ?></div>
<div>Refresh Interval: <?php echo $refresh_interval; ?></div>
</body>
</html>
Step 4
首先首頁的樣子會有一個 國碼 及 電話號碼的輸入框
若只想要讓台灣的電話使用的話，就直接寫死 +886
點下 Login via SMS 後會跳出小視窗，可以選擇使用 簡訊 還是 WhatsApp
選擇簡訊後，會收到一封這樣子的內容
簡訊內容的部分不開放修改，只能選擇一些範本
回到小視窗輸入簡訊收到的驗證碼
就可以取得用戶的 電話號碼 及 User ID
結尾
利用這樣子的服務，不僅可以簡單快速的提供註冊功能
另一方面，在原有的註冊功能上驗證用戶的手機號碼也是蠻常使用的方式
使用者不需要有 Facebook 帳號也可以使用這樣的服務
而且目前 Account Kit 在沒超過 10萬 封之前都是免費的
真的是很方便很實用
若這邊教學有幫助到你的話~請多多分享轉發出去給更多的人知道
謝謝大家的觀看