Android開(kāi)發(fā)騰訊驗(yàn)證碼遇到的坑
我司為響應(yīng)有關(guān)部門的號(hào)召，要求新注冊(cè)的用戶必須提供手機(jī)號(hào)驗(yàn)證。又為了防范有不懷好意之人故意盜刷短信，我司決定接入驗(yàn)證碼。經(jīng)前端同事調(diào)研之后，決定接入騰訊驗(yàn)證碼。接入過(guò)程中還是踩了一些坑，為此特地寫(xiě)這篇文章 致騰訊令人作嘔的開(kāi)發(fā)文檔 。
騰訊驗(yàn)證碼開(kāi)發(fā)指引
我們是Android端開(kāi)發(fā)，服務(wù)器端的開(kāi)發(fā)就交給后端同事吧。移動(dòng)端的開(kāi)發(fā)只需要從我們的后臺(tái)請(qǐng)求一個(gè)url就可以。
移動(dòng)端開(kāi)發(fā)首先請(qǐng)閱讀APP開(kāi)發(fā)指引，接著閱讀不同移動(dòng)平臺(tái)的API文檔。Android開(kāi)發(fā)者直接閱讀Android客戶端API就好了。
騰訊驗(yàn)證碼的基本使用
基本使用方法可按照Android客戶端API文檔描述的流程操作。這里我們?cè)僦貜?fù)一遍：
1.接入要求
Android系統(tǒng)2.3以上
2.在AndroidManifest.xml中聲明網(wǎng)絡(luò)權(quán)限
<uses-permission android:name="android.permission.INTERNET" />
3.在AndroidManifest.xml中注冊(cè)VerifyActivity
<activity android:name="com.token.verifysdk.VerifyActivity"/>
4.向我們的后臺(tái)發(fā)請(qǐng)求獲取jsurl（參考服務(wù)端開(kāi)發(fā)獲取驗(yàn)證碼JSURL的接口）
5.獲取到j(luò)surl后調(diào)用接口 VerifyCoder.getVerifyCoder().startVerifyActivityForResult(Context context,String jsurl,int requestCode) 并重寫(xiě) onActivityResult 來(lái)接收是否驗(yàn)證成功的通知。
/*
* 參數(shù)說(shuō)明：
* context 調(diào)用驗(yàn)證碼時(shí)當(dāng)前界面的上下文，
* 用于(Activity) context).startActivityForResult，
* 請(qǐng)勿使用application的上下文
* jsurl 驗(yàn)證碼的js鏈接，從我們后臺(tái)獲取
* requestCode 對(duì)應(yīng)onActivityResult的requestCode，可自定義
*/
VerifyCoder.getVerifyCoder().startVerifyActivityForResult(Context context,String jsurl,int requestCode)
//onActivityResult實(shí)現(xiàn)實(shí)例：
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == 1) {//此處對(duì)應(yīng)startVerifyActivityForResult的參數(shù)值
if(resultCode==Activity.RESULT_OK){
Log.e("onActivityResult", "verifysucc");
Toast.makeText(MainActivity.this, "驗(yàn)證成功",2000).show();
}
else{
Toast.makeText(MainActivity.this, "未驗(yàn)證成功",2000).show();
}
}
}
6.如需混淆，添加如下腳本
<arg value="-libraryjars ${lib}/VerifySDK.jar"/>
<arg value="-keep public class com.token.verifysdk{*; }" />
Android客戶端API 在收尾處還提到了其他接口說(shuō)明：
public static VerifyCoder getVerifyCoder() //獲取單例 public void release() //重置參數(shù)，釋放資源 public void setShowtitle(boolean showtitle) //是否顯示驗(yàn)證碼頁(yè)面標(biāo)題欄 public void setJson(String json) //用于擴(kuò)展參數(shù)，如實(shí)現(xiàn)自定義樣式等 public WebView getWebView(Context context,String jsurl,VerifyListener listener) //獲取驗(yàn)證碼WebView
如果你按照官方文檔描述信息一路走下來(lái)，最終的效果是這樣的：
真想說(shuō)一句：你長(zhǎng)成這樣，你們的麻花藤粑粑知道嗎? 估計(jì)有點(diǎn)審美的程序員都不能容忍自己開(kāi)發(fā)的APP里出現(xiàn)如此Low逼的頁(yè)面。自給自足，豐衣足食。還是我們自己來(lái)吧。
進(jìn)階篇
下載VerifyCodeSdk。SDK 的內(nèi)容如下：
ndroidSDK ├── VerifyDemo │ ├── AndroidManifest.xml │ ├── assets │ ├── bin │ ├── gen │ ├── ic_launcher-web.png │ ├── libs │ ├── lint.xml │ ├── proguard-project.txt │ ├── project.properties │ ├── res │ └── src └── VerifySDK.jar
一個(gè)示例項(xiàng)目和一個(gè)jar包。示例項(xiàng)目就別看了，基本就是開(kāi)發(fā)文檔的翻版，沒(méi)有什么有用的信息。把jar包引入我們的項(xiàng)目可以看到內(nèi)容及其簡(jiǎn)單，只有兩個(gè)文件： VerifyActivity.java 和 VerifyCoder.java 。
閱讀源碼外加Debug后得出以下結(jié)論：
可以借助VerifyCoder為騰訊驗(yàn)證碼的頁(yè)面做一些定制化。方法如下：
VerifyActivity就是騰訊驗(yàn)證碼頁(yè)面，顯示的內(nèi)容來(lái)自調(diào)用 VerifyCoder.getWebView 返回的WebView。最后將驗(yàn)證結(jié)果返回給啟動(dòng)VerifyActivity的頁(yè)面。
實(shí)現(xiàn)對(duì)話框式的騰訊驗(yàn)證碼
騰訊驗(yàn)證碼SDK里只有這兩個(gè)類，并沒(méi)有為開(kāi)發(fā)者提供對(duì)話框形式的UI。為此只能我們自己來(lái)了。當(dāng)然也沒(méi)那么困難，但為什么騰訊不幫我們做好呢。
我們定義一個(gè)DialogFragment: TencentVerifyCoderDialogFragment ，代碼是模仿 VerifyActivity 寫(xiě)的。讀者可以自行實(shí)現(xiàn)，需要源碼的讀者請(qǐng)移步到 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() {
}
}
效果如下：
定制騰訊驗(yàn)證碼的擴(kuò)展參數(shù)
個(gè)人認(rèn)為這是開(kāi)發(fā)文檔里最最坑的部分，沒(méi)有之一。開(kāi)發(fā)文檔里也介紹了如果想擴(kuò)展參數(shù)就需要調(diào)用 VerifyCode.setJson 。JSON字符串這里就不用多說(shuō)了吧，我剛開(kāi)始的時(shí)候是這么調(diào)用的：
// 設(shè)置樣式和語(yǔ)言
String json = "{\"type\": \"popup\",\"lang\": 2052}";
verifyCoder.setJson(json);
// 顯示騰訊驗(yàn)證碼對(duì)話框
TencentVerifyCoderDialogFragment.newInstance(url).show(getFragmentManager(), "tencent_verify_coder");
我覺(jué)得寫(xiě)的沒(méi)錯(cuò)，寫(xiě)這個(gè)文檔的工程師卻偏偏給我們這些苦逼碼農(nóng)開(kāi)個(gè)玩笑，工程師何必為難碼農(nóng)啊。最后還是從源碼中找到了答案，上面提到過(guò)VerifyCoder.getWebView加載的網(wǎng)頁(yè)來(lái)自VerifyCoder.getContent。那么我們把VerifyCoder.getContent返回的內(nèi)容打印出來(lái)看看：
<html>
<head lang="zh-CN">
<title>驗(yàn)證碼</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⟨=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>
想必讀者應(yīng)該知道錯(cuò)在哪了吧，說(shuō)好的JSON呢？去掉大括號(hào)，我們就可以自由自在的修改樣式了。關(guān)于如何修改驗(yàn)證碼樣式，Android客戶端API里也是只字未提，不是所有的Android程序員都懂前端。。。修改驗(yàn)證碼樣式請(qǐng)移步H5網(wǎng)頁(yè)API查看 javascript 接口說(shuō)明 小節(jié)。
我把驗(yàn)證碼的樣式改成了彈窗式，正確設(shè)置樣式的代碼如下：
VerifyCoder verifyCoder = VerifyCoder.getVerifyCoder(); // 設(shè)置樣式和語(yǔ)言 String json = "\"type\":\"popup\", \"lang\":" + (isZnCn ? 2052 : 1033); verifyCoder.setJson(json); TencentVerifyCoderDialogFragment.newInstance(url).show(getFragmentManager(), "tencent_verify_coder");
效果如下：
總結(jié)
以上所述是小編給大家介紹的Android開(kāi)發(fā)騰訊驗(yàn)證碼遇到的坑，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- iOS Crash常規(guī)跟蹤方法及Bugly集成運(yùn)用詳細(xì)介紹
- Android 使用騰訊X5瀏覽器上傳圖片的示例
- Android 通過(guò)騰訊TBS實(shí)現(xiàn)文件預(yù)覽功能
- Android基于騰訊云實(shí)時(shí)音視頻仿微信視頻通話最小化懸浮
- Android集成騰訊X5實(shí)現(xiàn)文檔瀏覽功能
- Android自定義View仿騰訊TIM下拉刷新View
- Android在項(xiàng)目中接入騰訊TBS瀏覽器WebView的教程與注意的地方
- Android實(shí)現(xiàn)視頻播放--騰訊瀏覽服務(wù)（TBS）功能
- 騰訊、百度、華為、搜狗和滴滴Android面試題匯總
- Android如何快速集成騰訊Bugly
相關(guān)文章
這篇文章主要介紹了android圖片圓角、圖片去色處理示例,需要的朋友可以參考下2014-05-05
Android WebViewClient 的 `shouldOverrideUrlLoa
這篇文章主要介紹了Android WebViewClient 的 shouldOverrideUrlLoading方法,了解并正確實(shí)現(xiàn) WebViewClient 中的 shouldOverrideUrlLoading 方法對(duì)于在你的 Android 應(yīng)用中提供順暢且安全的瀏覽體驗(yàn)至關(guān)重要,需要的朋友可以參考下2024-07-07
Android framework ATMS啟動(dòng)流程
這篇文章主要為大家介紹了Android framework ATMS啟動(dòng)流程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
本文主要總結(jié)下Android平臺(tái)下幾種推送方案的基本情況以及優(yōu)缺點(diǎn)，具有一定的參考作用，下面跟著小編一起來(lái)看下吧2017-01-01
Android進(jìn)階手寫(xiě)IPC通信框架告別繁瑣AIDL
這篇文章主要為大家介紹了Android進(jìn)階手寫(xiě)IPC通信框架告別繁瑣AIDL實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Android自定義View實(shí)現(xiàn)縱向跑馬燈效果詳解
對(duì)于跑馬燈效果在我們?nèi)粘Ｊ褂玫腶pp中還是很常見(jiàn)的，比如外賣app的商家公告就使用了此效果，但是它是橫向滾動(dòng)的，橫向滾動(dòng)多適用于單條信息；但凡涉及到多條信息的滾動(dòng)展示，用縱向滾動(dòng)效果會(huì)有更好的用戶體驗(yàn)，今天我們通過(guò)自定義View來(lái)看看如何實(shí)現(xiàn)縱向跑馬燈效果。2016-11-11
這篇文章主要為大家介紹了Android?資源加載使用偽代碼示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Android實(shí)現(xiàn)圖片左右滑動(dòng)效果
現(xiàn)在滑動(dòng)效果用的比較多，尤其是在手機(jī)端上面，本文介紹了Android實(shí)現(xiàn)圖片左右滑動(dòng)效果，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。2016-10-10
android layout 按比例布局的代碼，需要的朋友可以參考一下2013-03-03
這篇文章主要為大家詳細(xì)介紹了Android調(diào)用外置攝像頭的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03