WordPress OTP手機簡訊認證 每月1萬筆免費簡訊
這一篇大叔要來案例教學 ，這個案例是客戶需要為wordpress網站增加 註冊登入手機簡訊驗證功能
輸入手機號碼然後發簡訊認證碼方式來註冊或登入網站
又稱動態密碼或單次有效密碼，是讓電腦系統或手機等其他數位裝置上只能使用一次的密碼，有效期為只有一次登錄註冊或交易
Digits外掛費用
大叔是透過這款付費的外掛 Digits ，購買的費用大概是810加上一點刷上手續費的話總共是860~870元
Google Firebase每月提供 1萬筆的免費簡訊來讓你使用，如果超過一萬筆的話也有付費的方案
但大叔是建議如果超過一萬筆的話就改用台灣的簡訊商來發送，會比較便宜
如果是以台灣的簡訊公司，費用大概是1通簡訊0.8元，最低消費好像要買兩萬元
如果一開始業務量沒那麼大，就可以考慮先用大叔的這個方法，之後業務量大了再來換台灣的簡訊公司
那麼我們就開始設定吧!!
先去這個網站購買外掛費用是29元美金，折合台幣大約是810元，然後會有一個9美金的一年延長服務，服務的內容是幫助處理使用上的問題
這個部份就看個人需不需要，接著把產品加入購物車
下一步會跳出一個己經加入購物車的小視，直接點選結帳
下一頁要你新增帳號資料，輸入姓名跟email資料，然後下一步
接著會要你輸入登入的帳號跟密碼，密碼的部份要你輸入8 個字以上，混合使用字母數字和符號不能用姓名或用戶名
全部輸入完後點選建立帳號
下一步是要你輸入帳單資料，有紅星的欄位是必填欄位，英文地址可以去中華郵政查一下，全部輸入好之後繼續下一步
下一頁我們選擇付款方式，一般是用信用卡付款所以點選信用卡，然後輸入信用卡的資料，最後點選付款
下一步就會跳出付款成功的訊息，下面有一個下載的按鈕就可以點選下載
選擇你要儲存的位置儲存就可以了，接著可以到帳戶頁面看一下有你的帳戶資料，我們看一下download這裡
這裡有你買的產品資料，也可以再次下載
接著來到wordpress的後台，點選外掛>>然後安裝外掛>>跳到下一頁選畫頁上方的上傳外掛，把剛下載的外掛上傳到wordpress
上傳完成後啓動
接著會跳到digits外掛頁面
操作到這裡我們先離開wordpress，我們跳去Firebase網站去申請免費簡訊
在 Firebase網站看右上可以切換語言，如果大家看到這裡是英文，可以先切換中文，點選畫面上的get started
下一步會要你登入google帳號，登入後再下一個畫面點選建立專案
然我們輸入一個專案名稱，比如輸入 free sms，跳到下一頁直接繼續
下一頁會說明 將啟用GOOgle Analytics 功能，直接點選繼續
這一頁會要你選擇google 帳號，選好後按建立專案，然後畫面會開始建立專案
之後專案準備就緒後點選繼續
跳到下一頁控制台，我們看一下右邊的工具列，點選第一個 Authentication
下一頁點選開始使用
再跳到下一頁選擇電信業者這一項
然後跳出來的視窗點選啟用，在同一頁面向下滾動，看到授權網域部分，點選新增網域
然後輸入網址
點選工具列最上方，專案總覽旁的小齒輪，然後點選專案設定
下一頁看到下面的”您的應用程式”，點選網頁的這項
跳到下一頁，輸入網站名稱或是專案名稱，輸入好後點選註冊應用程式
跳到下一頁直接點最下方的前往主控台
到這裡就設定好了，先不要關掉這一頁待會還要用到，我們回到wordpress
這一頁，SMS Gateway 選擇firebase
下一個Firebase Config，這裡面要填的資料要去剛剛的firebase複制，所以我們再回到 firebase頁面
看到SDK 設定和配置這裡，選擇設定這一項，然後把程式碼複制起來
回到wordpress，貼在 Firebase Config欄位，然後儲存
第一項用戶名稱生成這裡有四個選擇，有email、隨機數字、手機號碼跟名字
大叔是建議可以用email默認為用戶預設的名字
下一個手機號碼格式選擇local，下一個是啟用wp-login.php 整數化這一項保持預設
下一個是開啟忘記密碼，這個關閉因為是手機號碼驗證
下一個是使用 Digits的表單來作為忘記密碼的表單，這一項關閉
下一個是使用較強密碼這一項也關閉，因為密碼用簡訊所以強密碼用不到
下一個 Default User Role選擇customer顧客
下一個是登入或註冊成功的話，顯示成功的訊息，大叔是選擇關閉
接著看到 OTP SMS
第一項 Default Country Code，在欄位輸入886就會出現台灣可選，下一個直接看 OTP Resend Time，這個是重發簡訊時間改成60秒
下一部份 WooCommerce Settings
把第一項WooCommerce 帳戶頁面重定向到 Digits 登錄頁面這個關掉
下一個創建客戶按鈕這一項關掉
下一個是帳單訊息必填有三個選項、手機號碼跟email、手機號碼、Email，這裡大叔是選第一個手機號碼跟email都必填
下一個是使用用戶信息自動填入 WooCommerce 計費欄位，這個不需要把它關閉
下一項重新定向頁面，是把原本woocommerce預設的這些頁面，重新連結到新設定的頁面，這個地方大叔是選擇
用woocommerce原本的頁面就好，所以這裡就不去做多餘的設定，最後Advanced這裡都保持預設就好
最後儲存
第一個 Login Fields，把Username關閉、Email關閉、把Password 關閉、Captcha 驗證碼關閉
Remember Me 選擇no只保留手機號碼跟OTP這兩個，這樣會員登入只要輸入手機號碼並且用簡訊認證
下一個Registration Fields 註冊
第一個name是指外國人的first name，這個我們不需要所以選擇no
第二個username，是我們網站的使用者註冊名稱，大叔是選擇必填
第三個email也是必填
第四個手機也是必填
最後密碼欄位也不需要，因為是簡訊認證
接著Add Field，點下去會跳出可以讓你增加欄位，轉換一下中文就知道這些欄位的用途
但是大叔建議註冊欄位不用填寫太多，這樣才可以快速註冊
最後設定好之後儲存
這一頁是對應前面GENERAL頁面，WooCommerce Settings這一項
“Redirect WooCommerce account page to Digits login page”
有開啟這個功能的話，style 這裡你可以設定登入註冊的表格，點選Select Preset會跳出幾種表格給你選擇
然後 FORM TYPE這裡只有兩種可以選，再下來是 Page這裡就是可以調整顏色的地方，可以依照需求調整
Modal這裡也是一樣可以讓你調整顏色
只要把欄位裡的英文翻成中文就好
簡碼或是短碼
這一頁是如果你有另外設定登錄/註冊表格頁面的話那欄位裡的簡碼就可以貼在這些另外設定的表格裡了
到這裡簡訊登入註冊就完成了，這是一個簡易的利用手機註冊的程式，讓你的網站可以利用手機註冊及登入
大家可以動手操作看看，也可以到大叔的YOUTUBE頻道去看完整的影片教學
不務正業的廣告行銷人，認為網頁設計跟廣告行銷一樣都需要無限的創意
從事廣告行銷及網頁設計至今二十幾年，2009年接觸Wordpress就一頭鑽進
希望把所學到Wordpress知識跟經驗教授給大家。
