畢生追求為之懶

[PHP]Firebase phone auth 使用教學

Michael -

前言

還記得之前寫過一篇 [PHP]Account Kit 使用教學 文章來教導怎麼利用 Facebook 提供的服務來驗證手機號碼

很可惜的是，寫完那篇文章後沒有多久

Facebook 發佈了要停止 Account Kit 的消息

很無奈~只能繼續找尋類似的服務

最後在社團 程式人雜誌 -- 公益出版 內的網友提供了建議

也就是今天這篇文章的主題

Firebase 是 Google 旗下的服務，功能非常強大

甚至可以單靠 Firebase 就能創建一個功能非常完整的後端應用

在一定額度內都是免費使用，挺適合小專案來開發

這次要使用的是其中的一項登入功能

Step 1

登入 Google 帳號後進入 Firebase首頁

選擇建立專案

輸入專案名稱

如果想要有分析報表的話可以啟用


等待一會兒

專案建立完成

Step 2

接下來要開啟登入項目

選擇左邊的 開發 -> Authentication

選擇登入方式

除了手機之外也有很多種登入方式，非常方便

選擇電信業者，啟用後儲存

將頁面往下拉到已授權網域，將需要用到的網域名稱加入

否則被別人刷配額那就不太好了

Step 3

之後回到首頁新增一個應用程式，因為這次要使用的是網頁

所以點下網頁的圖案

輸入應用程式名稱，因為不需要託管，所以不打勾

之後會產生一組設定檔，裡面包括 API Key，請先複製下來

這時候可能會有疑惑，這麼公開 Key 好嗎?

雖然我們在上一步有設定授權網域，但 Key 也是可以設定使用限制的

打開 Google Cloud

選擇好專案後，開啟左邊的選單，選擇 API和服務 -> 憑證

開啟列表頁後，找到同樣的 API Key 後點下旁邊的鉛筆圖案

就可以在金鑰限制的地方限制存取原則

比如某個網域才能使用

Step 4

事前準備完成了，接下來就開始進入程式碼環節

大概流程為

  1. 建立頁面讓使用者輸入電話號碼
  2. 利用 Firebase JS SDK 寄送驗證碼到使用者手機
  3. 使用者將驗證碼輸入後進行驗證
  4. 後端利用 Firebase SDK 進行手機號碼查詢

因為是測試用，所以就隨便弄兩個按鈕一個輸入框

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>
<body>
	<button id="button_1" onclick="send()">SEND</button>
	<br />
	<input type="text" id="input_1">
	<br />
	<button onclick="go()">GO</button>

	<!-- 需要的SDK -->
	<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js"></script>

	<script>
		/* Firebase 設定檔 */
		var firebaseConfig = {
			apiKey: "",
			authDomain: "",
			databaseURL: "",
			projectId: "",
			storageBucket: "",
			messagingSenderId: "",
			appId: ""
		};

		/* 初始化 */
		firebase.initializeApp(firebaseConfig);

		/* 設定語系，這邊使用裝置的預設語系 */
		firebase.auth().useDeviceLanguage();

		/* 建立 reCAPTCHA 驗證(這是強制需要)，帶入發送按鈕的ID */
		window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('button_1', {
			'size': 'invisible',
			'callback': function(response) {
				onSignInSubmit();
			}
		});

		function send() {
			var phoneNumber = '含國碼的手機號碼 Ex. +886912345678';
			var appVerifier = window.recaptchaVerifier;

			firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier).then(function (confirmationResult) {
				/* 發送成功 */
				window.confirmationResult = confirmationResult;
			}).catch(function (error) {
				/* 發送失敗 */
				console.log(error);
				/* 重置驗證 */
				grecaptcha.reset(window.recaptchaWidgetId);
			});
		}

		function go() {
			var code = document.getElementById('input_1').value;
			/* 檢查驗證碼 */
			confirmationResult.confirm(code).then(function (result) {
				/* 驗證成功 */
				var user = result.user;
				console.log(user);
			}).catch(function (error) {
				/* 驗證失敗 */
				console.log(error);
			});
		}
	</script>
</body>
</html>

按下 SEND 後手機會收到一封驗證碼的簡訊

在頁面上輸入驗證碼後送出，若成功將會收到使用者的資訊

但目前沒有找到相對應的欄位資訊，所以回傳的資料應該沒什麼作用

若有讀者手上有相關資料請通知我

Step 5

前端的使用者跑完這整個流程之後，後端的部分應該要怎麼去驗證呢?

首先回到 Firebase 的專案設定，選擇服務帳戶

點選下方的 產生新的私密金鑰

按下 產生金鑰 後會下載一個 JSON 檔案，這份檔案將可以操作 Firebase

請務必收好

這邊比較可惜的是， Firebase 並沒有提供官方的 SDK

所以需要安裝第三方的 SDK，安裝步驟請參閱網頁

驗證的方式也很簡單

<?php
	require __DIR__.'/vendor/autoload.php';

	use Kreait\Firebase\Factory;
	
	$firebase = (new Factory) -> withServiceAccount('金鑰檔案路徑') -> create();

	$auth = $firebase->getAuth();

	try {
		$user = $auth->getUserByPhoneNumber('手機號碼(含國碼)');

		print_r($user);

	} catch (Exception $e) {
		echo $e->getMessage();
	}

如果有成功的話，將可以取到使用者資料

失敗的話會直接拋出例外

結尾

其實這服務與 Account Kit 是一樣的方式

但跟 Facebook 比起來，Firebase 提供了更多的登入選項靈活運用

整合度也是非常不錯，從網站託管到後端程式、資料庫、儲存空間、資料分析

一系列的服務確確實實可以讓開發者不用去顧及太多東西及風險

對於小型公司也能省去需要找太多專業人士的窘境

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

謝謝大家的觀看