通知：我在發現騰訊驗證碼的Android文件不完整之後，就跟騰訊那邊反饋了這個問題，沒想到騰訊很快接納了我的建議。目前線上文件還沒有及時更新。請閱讀這篇文章的小夥伴在調研騰訊驗證碼的時候以Android-SDK下載為準。
我司為響應有關部門的號召，要求新註冊的使用者必須提供手機號驗證。又為了防範有不懷好意之人故意盜刷簡訊，我司決定接入驗證碼。經前端同事調研之後，決定接入騰訊驗證碼。接入過程中還是踩了一些坑，為此特地寫這篇文章致騰訊令人作嘔的開發文件。
騰訊驗證碼開發指引
我們是Android端開發，伺服器端的開發就交給後端同事吧。移動端的開發只需要從我們的後臺請求一個url就可以。
移動端開發首先請閱讀APP開發指引，接著閱讀不同移動平臺的API文件。Android開發者直接閱讀Android客戶端API就好了。
騰訊驗證碼的基本使用
基本使用方法可按照Android客戶端API文件描述的流程操作。這裡我們再重複一遍：
-
接入要求
Android系統2.3以上
-
在AndroidManifest.xml中宣告網路許可權
<uses-permission android:name="android.permission.INTERNET" /> 複製程式碼 -
在AndroidManifest.xml中註冊VerifyActivity
<activity android:name="com.token.verifysdk.VerifyActivity"/> 複製程式碼 -
向我們的後臺發請求獲取jsurl（參考服務端開發獲取驗證碼JSURL的介面）
-
獲取到jsurl後呼叫介面
VerifyCoder.getVerifyCoder().startVerifyActivityForResult(Context context,String jsurl,int requestCode)並重寫onActivityResult來接收是否驗證成功的通知。/* * 引數說明： * context 呼叫驗證碼時當前介面的上下文， * 用於(Activity) context).startActivityForResult， * 請勿使用application的上下文 * jsurl 驗證碼的js連結，從我們後臺獲取 * requestCode 對應onActivityResult的requestCode，可自定義 */ VerifyCoder.getVerifyCoder().startVerifyActivityForResult(Context context,String jsurl,int requestCode) //onActivityResult實現例項： @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == 1) {//此處對應startVerifyActivityForResult的引數值 if(resultCode==Activity.RESULT_OK){ Log.e("onActivityResult", "verifysucc"); Toast.makeText(MainActivity.this, "驗證成功",2000).show(); } else{ Toast.makeText(MainActivity.this, "未驗證成功",2000).show(); } } } 複製程式碼 -
如需混淆，新增如下指令碼
<arg value="-libraryjars ${lib}/VerifySDK.jar"/> <arg value="-keep public class com.token.verifysdk{*; }" /> 複製程式碼
Android客戶端API 在收尾處還提到了其他介面說明：
public static VerifyCoder getVerifyCoder() //獲取單例
public void release() //重置引數，釋放資源
public void setShowtitle(boolean showtitle) //是否顯示驗證碼頁面標題欄
public void setJson(String json) //用於擴充套件引數，如實現自定義樣式等
public WebView getWebView(Context context,String jsurl,VerifyListener listener) //獲取驗證碼WebView
複製程式碼如果你按照官方文件描述資訊一路走下來，最終的效果是這樣的：
真想說一句：你長成這樣，你們的麻花藤粑粑知道嗎? 估計有點審美的程式設計師都不能容忍自己開發的APP裡出現如此Low逼的頁面。自給自足，豐衣足食。還是我們自己來吧。
進階篇
下載VerifyCodeSdk。SDK 的內容如下：
ndroidSDK
├── VerifyDemo
│ ├── AndroidManifest.xml
│ ├── assets
│ ├── bin
│ ├── gen
│ ├── ic_launcher-web.png
│ ├── libs
│ ├── lint.xml
│ ├── proguard-project.txt
│ ├── project.properties
│ ├── res
│ └── src
└── VerifySDK.jar
複製程式碼一個示例專案和一個jar包。示例專案就別看了，基本就是開發文件的翻版，沒有什麼有用的資訊。把jar包引入我們的專案可以看到內容及其簡單，只有兩個檔案：VerifyActivity.java 和 VerifyCoder.java。
閱讀原始碼外加Debug後得出以下結論：
可以藉助VerifyCoder為騰訊驗證碼的頁面做一些定製化。方法如下：
| 方法名 | 說明 |
|---|---|
| isShowtitle() | 是否顯示標題 |
| setShowtitle(boolean) | 設定是否顯示標題 |
| getJson() | 獲取擴充套件引數 |
| setJon(String) | 用於擴充套件引數，如實現自定義樣式等 |
| getVerifyCoder() | 獲取單例 |
| release() | 重置引數，釋放資源 |
| startVerifyActivityForResult(Context, String, int) | 啟動VerifyActivity |
| getWebView(Context, String, VerifyCoder.VerifyListener) | 建立一個WebView例項 |
| getContent(String) | WebView載入的騰訊驗證碼頁面 |
VerifyActivity就是騰訊驗證碼頁面，顯示的內容來自呼叫 VerifyCoder.getWebView返回的WebView。最後將驗證結果返回給啟動VerifyActivity的頁面。
實現對話方塊式的騰訊驗證碼
騰訊驗證碼SDK裡只有這兩個類，並沒有為開發者提供對話方塊形式的UI。為此只能我們自己來了。當然也沒那麼困難，但為什麼騰訊不幫我們做好呢。
我們定義一個DialogFragment: TencentVerifyCoderDialogFragment，程式碼是模仿 VerifyActivity寫的。讀者可以自行實現，需要原始碼的讀者請移步到TencentVerifyCoderDialogFragment.java 。
使用TencentVerifyCoderDialogFragment的程式碼如下：
// 顯示TencentVerifyCoderDialogFragment
TencentVerifyCoderDialogFragment.newInstance(url).show(getFragmentManager(), "tencent_verify_coder");
// TencentVerifyCoderDialogFragment與宿主Activity互動
public class MainActivity extends AppCompatActivity implements TencentVerifyCoderDialogFragment.OnTencentVerifyCoderListener {
@Override
public void onVerifySucc(String ticket, String randstr) {
}
@Override
public void onVerifyFail() {
}
}
複製程式碼效果如下：
定製騰訊驗證碼的擴充套件引數
個人認為這是開發文件裡最最坑的部分，沒有之一。開發文件裡也介紹瞭如果想擴充套件引數就需要呼叫VerifyCode.setJson。JSON字串這裡就不用多說了吧，我剛開始的時候是這麼呼叫的：
// 設定樣式和語言
String json = "{\"type\": \"popup\",\"lang\": 2052}";
verifyCoder.setJson(json);
// 顯示騰訊驗證碼對話方塊
TencentVerifyCoderDialogFragment.newInstance(url).show(getFragmentManager(), "tencent_verify_coder");
複製程式碼我覺得寫的沒錯，寫這個文件的工程師卻偏偏給我們這些苦逼碼農開個玩笑，工程師何必為難碼農啊。最後還是從原始碼中找到了答案，上面提到過VerifyCoder.getWebView載入的網頁來自VerifyCoder.getContent。那麼我們把VerifyCoder.getContent返回的內容列印出來看看：
<html>
<head lang="zh-CN">
<title>驗證碼</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="address=no; email=no">
</head>
<body></body>
</html>
<script src="https://captcha.guard.qcloud.com/template/TCapIframeApi.js?appid=1252162611&clientype=2&lang=2052&asig=x7mPS8V3qb3QKelOoU_OiyYsOlLuOsRqu2WbNKdwB4pi77sXqyPa5EfmG8QPYTRtE9r2Mf4G6MGD12WNu1pzAGwJgWzPkDvx"></script>
<script type="text/javascript">
function CapCallBack(resultJson)
{
prompt(JSON.stringify(resultJson));
}
var CapArgs = {
"showHeader":false,
{"type": "popup","lang": 2052},
"callback": CapCallBack
}
window.onload=function(){capInit(document.body,CapArgs);}
</script>
複製程式碼想必讀者應該知道錯在哪了吧，說好的JSON呢？去掉大括號，我們就可以自由自在的修改樣式了。關於如何修改驗證碼樣式，Android客戶端API裡也是隻字未提，不是所有的Android程式設計師都懂前端。。。修改驗證碼樣式請移步H5網頁API檢視 javascript 介面說明小節。
我把驗證碼的樣式改成了彈窗式，正確設定樣式的程式碼如下：
VerifyCoder verifyCoder = VerifyCoder.getVerifyCoder();
// 設定樣式和語言
String json = "\"type\":\"popup\", \"lang\":" + (isZnCn ? 2052 : 1033);
verifyCoder.setJson(json);
TencentVerifyCoderDialogFragment.newInstance(url).show(getFragmentManager(), "tencent_verify_coder");
複製程式碼效果如下：
