[PHP]Firebase phone auth 使用教學
前言
還記得之前寫過一篇 [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
事前準備完成了，接下來就開始進入程式碼環節
大概流程為
- 建立頁面讓使用者輸入電話號碼
- 利用 Firebase JS SDK 寄送驗證碼到使用者手機
- 使用者將驗證碼輸入後進行驗證
- 後端利用 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 提供了更多的登入選項靈活運用
整合度也是非常不錯，從網站託管到後端程式、資料庫、儲存空間、資料分析
一系列的服務確確實實可以讓開發者不用去顧及太多東西及風險
對於小型公司也能省去需要找太多專業人士的窘境
若這邊教學有幫助到你的話~請多多分享轉發出去給更多的人知道
謝謝大家的觀看