Notice: AFTER I found that the Android document of Tencent verification code was not complete, I reported this problem to Tencent, but Tencent quickly accepted my suggestion. The online documentation has not been updated in time. Please read this article in the investigation of Tencent verification code when the Android-SDK download prevail.

In response to the call of relevant departments, our company requires newly registered users to provide mobile phone number verification. And in order to prevent malicious people deliberately stolen brush SMS, I decided to access verification code. After the front-end colleagues research, decided to access Tencent verification code. Access process or stepped on some pits, for this purpose specially write this article to Tencent disgusting development documents.

Tencent verification code development guidelines

We are Android side development, server side development to the backend colleagues. Mobile development only needs to request a URL from our background.

For mobile development, please first read the APP development guidelines, and then read the API documentation for different mobile platforms. Android developers can simply read the Android client API.

Tencent verification code basic use

You can follow the flow described in the Android CLIENT API document to use the device. Here we repeat:

  1. Access requirements

    Android 2.3 or above

  2. Declare network permissions in androidmanifest.xml

    <uses-permission android:name="android.permission.INTERNET" />
Copy the code

  3. Register VerifyActivity in androidmanifest.xml

    <activity android:name="com.token.verifysdk.VerifyActivity"/>  
Copy the code

  4. Send a request to our backend for JSURL (refer to the server development interface for obtaining the verification code JSURL)

  5. After get jsurl call interface VerifyCoder. GetVerifyCoder () startVerifyActivityForResult (Context Context, String jsurl, int requestCode) and rewrite OnActivityResult to receive notification of validation success.

    /* * Parameter description: StartActivityForResult. * Do not use the application context. * JSURl captcha js link. Get * requestCode corresponding to onActivityResult requestCode from our background, you can customize */
VerifyCoder.getVerifyCoder().startVerifyActivityForResult(Context context,String jsurl,int requestCode)
//onActivityResult
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
     if (requestCode == 1) {/ / the corresponding startVerifyActivityForResult parameter values
         if(resultCode==Activity.RESULT_OK){
             Log.e("onActivityResult"."verifysucc");
             Toast.makeText(MainActivity.this."Verification successful".2000).show();
         }
         else{
             Toast.makeText(MainActivity.this."Failed to verify".2000).show(); }}}Copy the code

  6. For confusion, add the following script

    <arg value="-libraryjars ${lib}/VerifySDK.jar"/>
<arg value="-keep public class com.token.verifysdk{*; }" />
Copy the code

The Android client API also mentions other interfaces at the end:

public static VerifyCoder getVerifyCoder(a)      // Get the singleton
public void release(a)                           // Reset parameters to release resources
public void setShowtitle(boolean showtitle)     // Whether to display the captcha page title bar
public void setJson(String json)                // Used to extend parameters, such as implementing custom styles
public WebView getWebView(Context context,String jsurl,VerifyListener listener) // Get the WebView
Copy the code

If you follow the official documentation all the way down, the end result is this:

Really want to say: you look like this, your hemp rattan baba know? It is estimated that some aesthetic programmers can not tolerate their development of APP appear so Low pages. Be self-sufficient and have enough food and clothing. Maybe we should do it ourselves.

Advanced article

Download VerifyCodeSdk. The SDK is as follows:

NdroidSDK ├─ VerifyDemo │ ├─ AndroidManifest.xml │ ├── Assets │ ├─ bin │ ├─ gen │ ├─ IC_Launcher -web │ ├─ ├─ SRC ├─ ├─ class.txt │ ├─ class.txt │ ├─ class.txtCopy the code

A sample project and a JAR package. Forget about the sample project, which is basically a copy of the development document with no useful information. When we introduce the JAR package into our project, we can see that the content is extremely simple, with only two files: VerifyActivity.java and verifycoder.java.

After reading the source code plus Debug, draw the following conclusions:

You can use VerifyCoder to do some customization for the Tencent verification code page. The method is as follows:

The method name instructions
isShowtitle() Show title or not
setShowtitle(boolean) Sets whether the title is displayed
getJson() Get extended parameters
setJon(String) Used to extend parameters, such as implementing custom styles
getVerifyCoder() Access to the singleton
release() Reset parameters to release resources
startVerifyActivityForResult(Context, String, int) Start the VerifyActivity
getWebView(Context, String, VerifyCoder.VerifyListener) Create a WebView instance
getContent(String) WebView loaded Tencent verification code page

VerifyActivity is a Tencent verification code page that displays content from the WebView returned by calling VerifyCoder. GetWebView. Finally, the validation results are returned to the page where VerifyActivity is started.

Dialog – type Tencent verification code

There are only these two classes in Tencent’s VERIFICATION code SDK, and there is no UI in the form of dialog for developers. So we have to do it ourselves. Of course it’s not that difficult, but why doesn’t Tencent do it for us?

We define a DialogFragment: TencentVerifyCoderDialogFragment, the code is written by imitating VerifyActivity. Readers can achieve by oneself, need to please click to TencentVerifyCoderDialogFragment. The source readers Java.

Using TencentVerifyCoderDialogFragment code is as follows:

/ / display TencentVerifyCoderDialogFragment
TencentVerifyCoderDialogFragment.newInstance(url).show(getFragmentManager(), "tencent_verify_coder");

/ / TencentVerifyCoderDialogFragment Activity interaction with the host
public class MainActivity extends AppCompatActivity implements TencentVerifyCoderDialogFragment.OnTencentVerifyCoderListener {
    @Override
    public void onVerifySucc(String ticket, String randstr) {}@Override
    public void onVerifyFail(a) {}}Copy the code

The effect is as follows:

Customize the extended parameters of Tencent verification code

Personally, I think this is the worst part of the development document. The development documentation also states that you need to call verifycode.setjson if you want to extend the parameters. I don’t need to say much about JSON strings, but I started calling them like this:

// Set the style and language
String json = "{\"type\": \"popup\",\"lang\": 2052}";
verifyCoder.setJson(json);
// Display Tencent verification code dialog box
TencentVerifyCoderDialogFragment.newInstance(url).show(getFragmentManager(), "tencent_verify_coder");
Copy the code

I think write right, write this document engineer but it happened to us these helpless pain code farmers open a joke, engineers why difficult code farmers ah. VerifyCoder. GetWebView loads web pages from VerifyCoder. GetContent. So let’s print out the content returned by verifycoder.getContent:

<html>
    <head lang="zh-CN">
        <title>Verification code</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=x7mPS8V3qb3QKelO oU_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>
Copy the code

Readers should know what went wrong. What about JSON? By removing the curly braces, we are free to modify the style as we wish. There’s also nothing in the Android client API about how to modify captcha styles, and not all Android programmers understand the front end… To modify the captcha style, go to H5 Web API to see the javascript interface description section.

I changed the style of the captcha to popover, and the code to set the correct style is as follows:

VerifyCoder verifyCoder = VerifyCoder.getVerifyCoder();
// Set the style and language
String json = "\"type\":\"popup\", \"lang\":" + (isZnCn ? 2052 : 1033);
verifyCoder.setJson(json);
TencentVerifyCoderDialogFragment.newInstance(url).show(getFragmentManager(), "tencent_verify_coder");
Copy the code

The effect is as follows: