前言

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萬封之前都是免費的

真的是很方便很實用

若這邊教學有幫助到你的話~請多多分享轉發出去給更多的人知道

謝謝大家的觀看