WordPress OTP手機簡訊認證 每月1萬筆免費簡訊

WordPress OTP手機簡訊認證 每月1萬筆免費簡訊

WordPress OTP手機簡訊認證 每月1萬筆免費簡訊

這一篇大叔要來案例教學 ,這個案例是客戶需要為wordpress網站增加 註冊登入手機簡訊驗證功能 

輸入手機號碼然後發簡訊認證碼方式來註冊或登入網站 

什麼是OTP一次性密碼 

又稱動態密碼或單次有效密碼,是讓電腦系統或手機等其他數位裝置上只能使用一次的密碼,有效期為只有一次登錄註冊或交易

Digits外掛費用

大叔是透過這款付費的外掛 Digits ,購買的費用大概是810加上一點刷上手續費的話總共是860~870元

Google Firebase的費用

Google Firebase每月提供 1萬筆的免費簡訊來讓你使用,如果超過一萬筆的話也有付費的方案

但大叔是建議如果超過一萬筆的話就改用台灣的簡訊商來發送,會比較便宜

Firebase費用表

台灣的簡訊收費

如果是以台灣的簡訊公司,費用大概是1通簡訊0.8元,最低消費好像要買兩萬元

如果一開始業務量沒那麼大,就可以考慮先用大叔的這個方法,之後業務量大了再來換台灣的簡訊公司

那麼我們就開始設定吧!!

購買 Digits 外掛

先去這個網站購買外掛費用是29元美金折合台幣大約是810元,然後會有一個9美金的一年延長服務服務的內容是幫助處理使用上的問題

這個部份就看個人需不需要接著把產品加入購物車

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

 

下一步會跳出一個己經加入購物車的小視直接點選結帳

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

下一頁要你新增帳號資料輸入姓名跟email資料然後下一步

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

接著會要你輸入登入的帳號跟密碼密碼的部份要你輸入8 個字以上混合使用字母數字和符號不能用姓名或用戶名

全部輸入完後點選建立帳號

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

下一步是要你輸入帳單資料有紅星的欄位是必填欄位英文地址可以去中華郵政查一下全部輸入好之後繼續下一步

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

下一頁我們選擇付款方式一般是用信用卡付款所以點選信用卡然後輸入信用卡的資料最後點選付款

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

下一步就會跳出付款成功的訊息下面有一個下載的按鈕就可以點選下載

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

選擇你要儲存的位置儲存就可以了接著可以到帳戶頁面看一下有你的帳戶資料我們看一下download這裡

這裡有你買的產品資料也可以再次下載

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

接著來到wordpress的後台點選外掛>>然後安裝外掛>>跳到下一頁選畫頁上方的上傳外掛把剛下載的外掛上傳到wordpress

上傳完成後啓動

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

接著會跳到digits外掛頁面

操作到這裡我們先離開wordpress我們跳去Firebase網站去申請免費簡訊

設定Firebase

Firebase網站看右上可以切換語言如果大家看到這裡是英文可以先切換中文點選畫面上的get started

下一步會要你登入google帳號登入後再下一個畫面點選建立專案

然我們輸入一個專案名稱比如輸入 free sms跳到下一頁直接繼續

下一頁會說明 將啟用GOOgle Analytics 功能,直接點選繼續

這一頁會要你選擇google 帳號選好後按建立專案然後畫面會開始建立專案

之後專案準備就緒後點選繼續

跳到下一頁控制台我們看一下右邊的工具列點選第一個 Authentication

下一頁點選開始使用

再跳到下一頁選擇電信業者這一項

然後跳出來的視窗點選啟用在同一頁面向下滾動看到授權網域部分點選新增網域

然後輸入網址

點選工具列最上方專案總覽旁的小齒輪然後點選專案設定

下一頁看到下面的”您的應用程式”點選網頁的這項

跳到下一頁輸入網站名稱或是專案名稱輸入好後點選註冊應用程式

跳到下一頁直接點最下方的前往主控台

到這裡就設定好了先不要關掉這一頁待會還要用到我們回到wordpress

Dgits 詳細設定

GATEWAY

這一頁SMS Gateway 選擇firebase

下一個Firebase Config這裡面要填的資料要去剛剛的firebase複制所以我們再回到 firebase頁面

看到SDK 設定和配置這裡選擇設定這一項然後把程式碼複制起來

回到wordpress貼在 Firebase Config欄位然後儲存

GENERAL

第一項用戶名稱生成這裡有四個選擇有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點下去會跳出可以讓你增加欄位轉換一下中文就知道這些欄位的用途

但是大叔建議註冊欄位不用填寫太多這樣才可以快速註冊

最後設定好之後儲存

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

Style

這一頁是對應前面GENERAL頁面WooCommerce Settings這一項

“Redirect WooCommerce account page to Digits login page”

有開啟這個功能的話style 這裡你可以設定登入註冊的表格點選Select Preset會跳出幾種表格給你選擇

然後 FORM TYPE這裡只有兩種可以選再下來是 Page這裡就是可以調整顏色的地方可以依照需求調整

Modal這裡也是一樣可以讓你調整顏色

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

TRANSLATIONS

只要把欄位裡的英文翻成中文就好

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

SHORTCODES

簡碼或是短碼

這一頁是如果你有另外設定登錄/註冊表格頁面的話那欄位裡的簡碼就可以貼在這些另外設定的表格裡了

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

設定完成後的頁面

Wordpress OTP手機簡訊認證 每月1萬筆免費簡訊

結論

到這裡簡訊登入註冊就完成了這是一個簡易的利用手機註冊的程式讓你的網站可以利用手機註冊及登入

大家可以動手操作看看,也可以到大叔的YOUTUBE頻道去看完整的影片教學

Woocommerce 教學 : 功能全面解析完整版