如何收取簡訊驗證碼,並填寫到驗證碼欄位自動完成簡訊驗證

Maggie Kuo
5 min readOct 17, 2016

--

註冊會員帳號有幾種驗證方式,大部份註冊方式為帳號密碼驗證,今天要來介紹另一種常見的會員驗證方式 — 簡訊驗證,簡訊驗證主要目的為驗證使用者所輸入手機號碼是否屬實,多用在一機一帳號的APP上,例如Line、WeChat。日前曾發生購物網站會員採取貨到超商取款方式,以假名大量下單後棄單,讓購物網蒙受退貨所產生的運輸、包裝等人力物力損失,若改採手機號碼驗證可降低棄單的機率,畢竟使用者多次棄單被取消會員後,欲以其他手機門號註冊也是要成本的 (笑)。

簡訊驗證最簡化的運作流程為註冊會員時 ① 輸入手機號碼 ② 伺服端傳送簡訊驗證碼至user手機 ③ user輸入驗證碼 ,即可完成驗證程序。(實務應用時,請自行考量驗證碼時效及資料正確性)

本測試案例由於無伺服端,故一機分飾二角,由本機發出驗證碼,本機接收簡訊驗證碼後自動填入驗證碼欄位。

一、設計畫面

新增專案 smsVerify,並設計畫面如下圖所示 :

二、送出簡訊驗證碼

按下Button btnSendCode後送出簡訊驗證碼。實務應用上,[傳送簡訊驗證碼] 和 [驗證] 兩個動作會將資訊提交給Server,交由 Server 處理 [傳送簡訊] 和 [檢查驗證碼] 的動作。

⑴ 取得權限

在此,直接從自己的手機傳送簡訊驗證碼,故要先取得傳送和讀取簡訊的權限。

  • 第 5 行:檢查手機號碼是否空白。
  • 第 6–11 行:尚未取得權限,要求使用者授權。
  • 第 13 行:已取得授權,傳送簡訊。
  • 第 5–7 行:檢查是否取得讀取/傳送簡訊授權。
  • 第 8 行:傳送簡訊

⑵ 傳送簡訊

  • 第 3–9 行:發送簡訊,內容(即簡訊驗證碼)為“456799”。

三、收取簡訊驗證

簡訊送出後,我們要透過程式攔截簡訊,想得知是否收到簡訊有兩種方法,監看簡訊資料庫及接收廣播,本文採第一種ContentObserver(內容觀察者)方式,監看SMS資料的變化。ContentObserver是做為APP間交換資料時很重要的一個API,若說Event Listener是監聽事件(元件的動作),那麼ContentObserver就是監聽資料庫的變化,但,可不是所有資料庫都能監聽的到,必須有實作ContentProvider的程式才能提供給外部程式透過ContentObserver監聽資料庫的變化。詳細說明請參考內容供應程式基本概念

⑴ 準備 ContenOberser

新增Java Class SMSContentObserver 繼承 ContentObserver,然後複寫onChange(),監聽到資料的變化所要處理的程式寫在onChange()內,這樣就準備好了一個空的ContentObserver。

⑵ 註冊/反註冊ContentObserver

  • 第 4 行:Telephony.Sms.CONTENT_URI即為簡訊程式提供給外部程式使用的Uri。
  • 第 5 行:先將SMSContentObserver new出來,參數 handler後面會介紹。
  • 第 6 行:註冊內容觀察者smsContentObserver,至於這個觀察者所要觀察的內容(監聽的資料)則是uri。
  • 第 10 行:不再監聽資料時,反註冊smsContentObserver。

當簡訊送出後,在smsSend()最後一行加上registerContentObservers() 開始監看簡訊資料。

⑶ 收到簡訊

收到簡訊後,準備將簡訊內容貼到驗證碼欄位送驗證。接下來的步驟要取得正確的簡訊驗證碼內容。簡訊相關API請參考官方文件

第 3–5 行:每筆簡訊都會收到兩次onChange(),第一次接收到uri為 “content://sms/raw”,此時尚未寫入簡訊內容,故忽略。

  • 第 7–11 行:讀取欄位,Telephony.Sms.Inbox.ADDRESS 為簡訊發送者,Telephony.Sms.Inbox.BODY則是簡訊內容。
  • 第 14 行:讀取簡訊收件匣。
  • 第 18 行:按日期反向(由大到小)排序,只取一筆。
  • 第 21 行:若能指到第一筆代表有資料。
  • 第 26 行:檢查發訊者是不是自己的手機號碼。(此步驟在實務上,應於傳送驗證碼時一並送到伺服器檢查。)
  • 第 27–29 行:將簡訊內容交由handler處理。

⑷ ContentObserver 和 UI 溝通的橋樑 — Handler

SMSContentObserver 要和 UI 溝通須透過 Handler,在MainActivity.java內新增匿名類別handler並複寫handleMessage方法。

  • 第 4 行:取得smsContentObserver回傳的簡訊內容。
  • 第 5 行:將簡訊驗證碼寫入txtVerifyCode欄位。
  • 第 6 行:驗證。

⑸ 驗證

  • 第 2 行:檢查驗證碼是否正確。
  • 第 3 行:若正確則不再繼續監聽簡訊。
  • 第 4–9 行:顯示驗證成功之訊息框。此步驟可直接跳往驗證成功後要顯示給User看的頁面。

這樣,就完成了一個自己發送簡訊驗證碼給自己驗證的程式了

--

--