Android開發採坑篇之騰訊驗證碼

時間 2019-11-17

原文原文鏈接

通知：我在發現騰訊驗證碼的Android文檔不完整以後，就跟騰訊那邊反饋了這個問題，沒想到騰訊很快接納了個人建議。目前線上文檔尚未及時更新。請閱讀這篇文章的小夥伴在調研騰訊驗證碼的時候以Android-SDK下載爲準。javascript

我司爲響應有關部門的號召，要求新註冊的用戶必須提供手機號驗證。又爲了防範有不懷好意之人故意盜刷短信，我司決定接入驗證碼。經前端同事調研以後，決定接入騰訊驗證碼。接入過程當中仍是踩了一些坑，爲此特意寫這篇文章致騰訊使人做嘔的開發文檔。html

騰訊驗證碼開發指引

咱們是Android端開發，服務器端的開發就交給後端同事吧。移動端的開發只須要從咱們的後臺請求一個url就能夠。前端

移動端開發首先請閱讀APP開發指引，接着閱讀不一樣移動平臺的API文檔。Android開發者直接閱讀Android客戶端API就行了。java

騰訊驗證碼的基本使用

基本使用方法可按照Android客戶端API文檔描述的流程操做。這裏咱們再重複一遍：android

接入要求git

Android系統2.3以上程序員

在AndroidManifest.xml中聲明網絡權限github

<uses-permission android:name="android.permission.INTERNET" />
複製代碼

在AndroidManifest.xml中註冊VerifyActivityweb

<activity android:name="com.token.verifysdk.VerifyActivity"/>  
複製代碼

向咱們的後臺發請求獲取jsurl（參考服務端開發獲取驗證碼JSURL的接口）json

獲取到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");
複製代碼

效果以下：