Code deployment adk - Docs

ParametersVAPTCHA

Validation process

Create a VAPTCHA unit and obtainVID and Key 。Click create.
Deploy https://v-cn.vaptcha.com/v3.js to your page.
Initialize VAPTCHA SDK to the your page.Web。
After completing the VAPTCHA test, the user gets the token, and submits it to your server together with the form data.
After the server gets the token, verify the validity of the tokenthrough our verification interface.Confirm validation.

Web side deployment

Configuration and interface documentation required for web client to deploy vaptcha.

Compatibility

Compatibility with IE8 + (IE8 and above), chrome, Firefox, Safari, opera, mainstream mobile browsers, embedded WebView on IOS and Android.

Installation

Preparation： Create the VAPTCHA unit and obtain the VID.

Deploy SDK:


<script src="https://t.vaptcha.com/v3.js"></script>

Complete instance

Click Mode：


x
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DEMO - Click mode</title>
    <style>
        .VAPTCHA-init-main {
            display: table;
            width: 100%;
            height: 100%;
            background-color: #eeeeee;
        }

				
        .VAPTCHA-init-loading {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

				
        .VAPTCHA-init-loading>a {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: none;
        }

				
        .VAPTCHA-init-loading .VAPTCHA-text {
            font-family: sans-serif;
            font-size: 12px;
            color: #cccccc;
            vertical-align: middle;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="https://v-cn.vaptcha.com/v3.js"></script>
</head>

				
<body>

				
    <!-- The recommended height of the button is between 36px and 46px  -->
    <div id="VAPTCHAContainer" style="width: 300px;height: 36px;">
        <!-- The following code is a preloaded animation for reference only -->
        <div class="VAPTCHA-init-main">
            <div class="VAPTCHA-init-loading">
                <a href="/" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px"
                        height="60px" viewBox="0 0 24 30"
                        style="enable-background: new 0 0 50 50; width: 14px; height: 14px; vertical-align: middle"
                        xml:space="preserve">
                        <rect x="0" y="9.22656" width="4" height="12.5469" fill="#CCCCCC">
                            <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s"
                                repeatCount="indefinite"></animate>
                            <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s"
                                repeatCount="indefinite"></animate>
                        </rect>
                        <rect x="10" y="5.22656" width="4" height="20.5469" fill="#CCCCCC">
                            <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s"
                                repeatCount="indefinite"></animate>
                            <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s"
                                repeatCount="indefinite"></animate>
                        </rect>
                        <rect x="20" y="8.77344" width="4" height="13.4531" fill="#CCCCCC">
                            <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s"
                                repeatCount="indefinite"></animate>
                            <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s"
                                repeatCount="indefinite"></animate>
                        </rect>
                    </svg>
                </a>
                <span class="VAPTCHA-text">Vaptcha Initializing...</span>
            </div>
        </div>
    </div>

				
    <script>
        vaptcha({
            vid: 'ID of VAPTCHA unit',
            mode: 'click',
            scene: 0,
            container: '#VAPTCHAContainer',
            area: 'auto',
        }).then(function (VAPTCHAObj) {
            // Save the VAPTCHA instance to a local variable
            obj = VAPTCHAObj;

				
            // Render VAPTCHA component
            VAPTCHAObj.render();

				
            // Verification succeeded, Continue
            VAPTCHAObj.listen('pass', function () {
                serverToken = VAPTCHAObj.getServerToken();
                var data = {
                    server: serverToken.server,
                    token: serverToken.token,
                }

				
                // Click login button to submit data to server, The following pseudo code is for reference only.
                $.post('/login', data, function (r) {
                    if (r.code == 200) {
                        console.log('Login successful')
                    } else {
                        console.log('Login failed')

				
                        // Wrong password, reset VAPTCHA.
                        VAPTCHAObj.reset()
                    }
                })
            })
        })
    </script>
</body>

				
</html>

Examples：

Invisible Mode：


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DEMO - Invisible mode</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://v-cn.vaptcha.com/v3.js"></script>
    </head>

				
    <body>
        <button id="login-button">Invisible mode</button>
        
        <script>
            vaptcha({
                vid: 'ID of VAPTCHA unit',
                mode: 'invisible',
                scene: 0,
                area: 'auto',
            }).then(function (VAPTCHAObj) {
                // Save the VAPTCHA instance to a local variable
                obj = VAPTCHAObj;
                
                // Verification succeeded, Continue
                VAPTCHAObj.listen('pass', function () {
                    serverToken = VAPTCHAObj.getServerToken();
                    var data = {
                        server: serverToken.server,
                        token: serverToken.token,
                    }

				
                    // Click login button to submit data to server, The following pseudo code is for reference only.
                    $.post('/login', data, function (r) {
                        if (r.code == 200) {
                            console.log('Login successful')
                        } else {
                            console.log('Login failed')

				
                            // Wrong password, reset VAPTCHA.
                            VAPTCHAObj.reset()
                        }
                    })
                })

				
                // After the instance initialization is completed, the user clicks the login button to perform VAPTCHA.
                $('#login-button').on('click', function () {
                    obj.validate();
                })
            })
        </script>
    </body>
</html>

Important： please execute the initialization function when the page is loaded and trigger the validate()method through the button. Do not execute the initialization function in the click event of the button, otherwise it will lead to failure of normal verification on the mobile terminal.

Embedded Mode：


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DEMO-Embedded mode</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://v-cn.vaptcha.com/v3.js"></script>
    </head>

				
    <body>
        <div id="VAPTCHAContainer" style="width: 400px; height: 230px;"></div>

				
        <script>
            vaptcha({
                vid: 'ID of VAPTCHA unit',
                mode: 'embedded',
                scene: 0,
                container: '#VAPTCHAContainer',
                area: 'auto',
            }).then(function (VAPTCHAObj) {
                // Save the VAPTCHA instance to a local variable
                obj = VAPTCHAObj;
                
                // Render VAPTCHA component
                VAPTCHAObj.render();

				
                // Verification succeeded, Continue
                VAPTCHAObj.listen('pass', function () {
                    serverToken = VAPTCHAObj.getServerToken();
                    var data = {
                        server: serverToken.server,
                        token: serverToken.token,
                    }

				
                    // Click login button to submit data to server, The following pseudo code is for reference only.
                    $.post('/login', data, function (r) {
                        if (r.code == 200) {
                            console.log('Login successful')
                        } else {
                            console.log('Login failed')

				
                            // Wrong password, reset VAPTCHA.
                            VAPTCHAObj.reset()
                        }
                    })
                })
            })
        </script>
    </body>

				
</html>

Parameters

Common parameters

Required parameters

Parameter	Type	Description
vid	string	VAPTCHA unit `VID`
mode	string	Optional values `click`,`invisible`,`embedded`
scene	int	Scenario of initiating verification request, Default value:0

Optional parameters

Parameter	Type	Fault	Description
lang	string	`auto`	available value,`auto`,`zh-CN`,`en`,`zh-TW`,`jp`
area	string	`cn`	VAPTCHA node area. The default value is auto. The optional values are auto,sea,Na,CN

Type parameter

Appropriate type	Parameter	Type	Require	Fault	Description
Click mode, Embedded mode	container	`string` or `HTMLElement`	Y	None	None
Click mode	style	`string`	N	`dark`	Button style,`dark`,`light`
Click mode	color	`string`	N	`#57ABFF`	Button color
Embedded mode	guide	`bool`	N	`false`	Whether to display the operation prompt text at the bottom of the picture, default not display

API method

`render`

For Click Mode only. Perform the initialization operation and insert the button or picture into the container in the configuration parameters. The sample code is as follows：


xxxxxxxxxx
window
    .vaptcha({
        //Configuration parameter omitted
    })
    .then(function (vaptchaObj) {
        vaptchaObj.render() //Execute this method ,  generate VAPTCHA
    })

`listen`

For monitoring verification events. The supported events are as follows:

pass event, triggered when verification is passed


xxxxxxxxxx
window
    .vaptcha({
        //Configuration parameter omitted
    })
    .then(function (vaptchaObj) {
        vaptchaObj.listen('pass', function () {
            // Verification succeeds, proceed to login
        })
        vaptchaObj.render() //Execute this method ,  generate VAPTCHA
    })

close event, triggered when the verification pop-up window is closed


xxxxxxxxxx
window
    .vaptcha({
        //Configuration parameter omitted
    })
    .then(function (vaptchaObj) {
        vaptchaObj.listen('close', function () {
            //Trigger when the pop-up window is closed
        })
        vaptchaObj.render() //Execute this method ,  generate VAPTCHA
    })

`validate`

For Invisible mode only. The developer decides when to call this method for verification, such as calling this method when the form is submitted.

Usage: After the initialization of the VAPTCHA instance, the user clicks the login button to execute the validate() method to perform the verification. When the verification succeeds, the verification pass event is triggered.


xxxxxxxxxx
window
    .vaptcha({
        vid: '*******',
        type: 'invisible',
        //Other configuration parameters omitted
    })
    .then(function (vaptchaObj) {
        obj = vaptchaObj //Save the VAPTCHA verification instance to a local variable
        // Bind the event to the button after VAPTCHA is loaded
        // Call the pseudo code of the validate() method and bind the call of this method to the'click' event.
        // In actual development, it needs to be changed to an appropriate calling method.
        vaptchaObj.listen('pass', function () {

				
            serverToken=vaptchaObj.getServerToken()

				
             // Pass. Continue to execute the code
            var data = {
                server:serverToken.server,
                token: serverToken.token,
            }
            $.post('login', data, function (r) {
                if (r.code !== 200) {
                    console.log('Login failed')
                    vaptchaObj.reset() //Reset VAPTCHA 
                }
            })
        })
        $('#login-button').on('click', function () {
            vaptchaObj.validate()
        })
        $('#reset').on('click', function () {
            vaptchaObj.reset()
        })
    })

`getServerToken`

The token is validate for 3 minutes, and then interface returns to empty. It is recommended that users tell whether the VAPTCHA verification has passed or not based on whether the token is empty.
For all modes, and it is recommended to use this interface to obtain verification results. To obtain the verification result, return server and token. Since the token can only be used once, the token will be empty after calling the getServerToken interface to obtain the token.

Recommended usage:


xxxxxxxxxx
var serverToken = vaptchaObj.getServerToken()
var data = {
    username: '',
    password: '',
    token: serverToken.token,
    server: serverToken.server,
}

				
if (data.token === '') {
    alert('Please complete VAPTCHA test')
} else {
    $.post('login', data, function (r) {})
}

`renderTokenInput`

If you initiate a request by submitting the form directly, it is recommended to use this function to add server, token values to the form

This function is used to add two input tags named vaptcha_server,vaptcha_token to the form, as follows


xxxxxxxxxx
<input name="vaptcha_server" value="https://*.vaptcha.net/verify" />
<input name="vaptcha_token" value="************" />

The function receives a parameter as the container for storing theinputtag.The default value is thecontainecontainer in the parameter configuration, it is required when using the invisible mode. Theinputwill be added to the configured container, and the parameter type is selectoror Element.

Sample code:


xxxxxxxxxx
window
    .vaptcha({
        // Configuration parameter omitted
    })
    .then(function (vaptchaObj) {
        vaptchaObj.renderTokenInput('.login-form') //Add input tags to the form
        vaptchaObj.render() //Execute this method ,  generate VAPTCHA
    })

`reset`

For all modes. VAPTCHA reset operation, for example, it can be called when login fails.

Sample code:


xxxxxxxxxx
$.post('login', data, function (r) {
    if (r.code !== 200) {
        console.log('Login failed!')
        _obj.reset() //Reset VAPTCHA 
    }
})

iOS-HTML5 deployment

DEMO: https://github.com/vaptcha/VAPTCHA-iOS-v3.git

notice: Please download the ios.html and v3.js from the folder /www in DEMO and replace with your resource address.

n the .h file of your iOS App project, import the framework's dependent libraries and if compatibility issues occur when using third-party components, please use the native webview component.


xxxxxxxxxx
 #import <WebKit/WebKit.h>

Add webviewto you (where human-machine verification is required) and set thewebviewto be invisible.


xxxxxxxxxx
self.webView.alpha = 0

Add the jsmessageHandlerin theuserContentControllerproperty of thewebView ``configuration，nameis "signal";


xxxxxxxxxx
 [_webView.configuration.userContentController addScriptMessageHandler:self.handlerHelper name:@"signal"];

When needed, display thewebviewand load the business page and configure the parametersvid、langaccording to the format


xxxxxxxxxx
self.webView.alpha = 1;
// Config your ios.html resource address,e.g.: https://xxx.com/yyy/ios.html
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"Your URL?vid=5b4d9c33a485e50410192331&scene=0&lang=zh-CN&area=cn"]]];

Obtain verification data throughWKScriptMessageHandlerprotocol callback method:


xxxxxxxxxx
 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
         if ([message.name isEqualToString:@"signal"]) {
             //Destroy webView
             [_webView removeFromSuperview];
             _webView = nil;
             //Parse the return result
             id body = message.body;
             NSLog(@"%@",body);
             if ([body isKindOfClass:NSString.class]) {
                 NSString *jsonString = body;
                 NSDictionary *resultDic = [NSJSONSerialization JSONObjectWithData:[jsonString dataUsingEncoding:NSUTF8StringEncoding] options:0 error:nil];
                 if (resultDic) {
                     if ([resultDic[@"signal"] isEqualToString:@"pass"]) {
                         _passed = YES;
                     }else if ([resultDic[@"signal"] isEqualToString:@"cancel"]) {
                         _passed = NO;
                     }else if ([resultDic[@"signal"] isEqualToString:@"error"]) {
                         _passed = NO;
                     }
                 }
                 //
                 NSString *sinal = resultDic[@"signal"];
                 NSString *data = resultDic[@"data"];
                 //
                 self.alertController = [UIAlertController alertControllerWithTitle:sinal message:data preferredStyle:UIAlertControllerStyleAlert];
                 [self.alertController addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

				
                 }]];
                 [self presentViewController:self.alertController animated:YES completion:nil];
             }
         }
 }

The return ofbodyattribute of the above messageis a string. The string shows information such as whether the verification is passed. It is necessary to implement the follow-up operations of user verification pass, fail or cancel here. The specific fields are:


xxxxxxxxxx
  {
  "signal":"pass",
   "data":{
       "server":"https://*.vaptcha.net/verify",
       "token":"*****"
       }
 }

				
 {
  "signal":"cancel",
   "data":""
 }
 
 {
  "signal":"error",
   "data”:""
 }

ios.html


xxxxxxxxxx
<body>
    <script>
        window.vaptchatimeout = setTimeout(() => {
            var data = {
                signal: 'error',
                data: 'error',
            };
            window.webkit.messageHandlers.signal.postMessage(JSON.stringify(data));
        }, 5 * 1000);
    </script>
    <!-- Config your v3.js resource address,e.g.: https://xxx.com/yyy/v3.js -->
    <script src="/v3.js"></script>
    <script>
        var qs = getQueryString();
        var vobj;
        if (qs != []) {
            var vid = qs['vid'];
            var lang = qs['lang'];
            var scene = qs['scene'] || 0;
            var area = qs['area'] || 'cn';

				
            vaptcha({
                vid: vid,
                type: 'invisible',
                lang: lang,
                scene: scene,
                area: area,
            }).then(function (obj) {
                obj.listen('pass', function () {
                    var data = {
                        signal: 'pass',
                        data: obj.getServerToken(),
                    };
                    window.webkit.messageHandlers.signal.postMessage(JSON.stringify(data));
                });
                obj.listen('close', function () {
                    var data = {
                        signal: 'cancel',
                        data: '',
                    };
                    window.webkit.messageHandlers.signal.postMessage(JSON.stringify(data));
                });
                clearTimeout(window.vaptchatimeout);
                obj.validate();
            });
        }

				
        function getQueryString() {
            var qs = location.search.substr(1),
                args = {},
                items = qs.length ? qs.split('&') : [],
                item = null,
                len = items.length;

				
            for (var i = 0; i < len; i++) {
                item = items[i].split('=');
                var name = decodeURIComponent(item[0]),
                    value = decodeURIComponent(item[1]);
                if (name) {
                    args[name] = value;
                }
            }
            return args;
        }
    </script>
</body>

Android-HTML5

DEMO: https://github.com/vaptcha/VAPTCHA-Android-v3.git

notice: Please download the android.html and v3.js from the folder /www in DEMO and replace with your resource address.

set the permissions for network connection permissions In the configuration file:AndroidManifest.xml


xxxxxxxxxx
<uses-permission android:name="android.permission.INTERNET" />

Add webviewto the layout file (where VAPTCHA is required), set thewebviewto hidden（android:visibility="invisible"）, and set it tovisiblewhen in use.


xxxxxxxxxx
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        tools:context=".MainActivity"
    >
        <TextView
            android:id="@+id/btn"
            android:layout_width="match_parent"
            android:layout_height="44dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:background="@drawable/topcolor_22dp"
            android:gravity="center"
            android:text="log in"
            android:textColor="#ffffff"
            android:textSize="18dp"
        />
    </RelativeLayout>
    <WebView
        android:id="@+id/webview"
        android:visibility="invisible"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    />
</FrameLayout>

SetWebViewin theactivityfile.


xxxxxxxxxx
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

				
    private TextView btn;
    private WebView webview;
    public static final String PASS = "pass";
    public static final String CANCEL = "cancel";
    public static final String ERROR = "error";
    public String src;

				
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        //set webview
        setVaptcha();
    }

				
    private void setVaptcha() {
        webview.setBackgroundColor(Color.TRANSPARENT);
        webview.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
        webview.getSettings().setUseWideViewPort(true);
        webview.getSettings().setLoadWithOverviewMode(true);
        webview.getSettings().setDomStorageEnabled(true);
        webview.getSettings().setDatabaseEnabled(true);
        webview.getSettings().setAppCacheEnabled(true);
        webview.getSettings().setAllowFileAccess(true);
        webview.getSettings().setSupportMultipleWindows(true);
        webview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        webview.getSettings().setLoadsImagesAutomatically(true);
        webview.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
        
        CookieManager instance = CookieManager.getInstance();
        instance.setAcceptCookie(true);
        instance.setAcceptThirdPartyCookies(webview,true);
        // Instead of using the default browser, directly use the WebView component to load the page.
        // There may be compatibility problems when using third-party components. Please use the native WebView component.
        webview.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                if (Build.VERSION.SDK_INT < 21) {
                    CookieSyncManager.getInstance().sync();
                } else {
                    CookieManager.getInstance().flush();
                }

				
                super.onPageFinished(view, url);
            }

				
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }

				

				
        });
        // Allows the WebView component to load JavaScript.
        webview.getSettings().setJavaScriptEnabled(true);
        // Build a bridge between JavaScript and java interface.
        webview.addJavascriptInterface(new vaptchaInterface(), "vaptchaInterface");
    }

				
    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            CookieSyncManager.getInstance().sync();
        } else {
            CookieManager.getInstance().flush();
        }
    }
    @Override
    protected void onPause() {
        super.onPause();
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            CookieSyncManager.getInstance().sync();
        } else {
            CookieManager.getInstance().flush();
        }
    }

				
    public class vaptchaInterface {
        @JavascriptInterface
        public void signal(String json) {
            //json{signal:"",data:{server:"https://*.vaptcha.net/verify",token:"****"}}
            //signal: pass ；cancel
            try {
                final JSONObject jsonObject = new JSONObject(json);
                String signal = jsonObject.getString("signal");
                final String data = jsonObject.getString("data");
                if (PASS.equals(signal)) {//Pass
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            Toast.makeText(MainActivity.this, "Pass:" + data, Toast.LENGTH_SHORT).show();
                            webview.loadUrl("");
                            webview.setVisibility(View.GONE);
                        }
                    });
                } else if (CANCEL.equals(signal)) {//Cancel
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            Toast.makeText(MainActivity.this, "Cancel:" + data, Toast.LENGTH_SHORT).show();
                            webview.loadUrl("");
                            webview.setVisibility(View.GONE);
                        }
                    });
                } else if (ERROR.equals(signal)) {
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            Toast.makeText(MainActivity.this, "Error：" + data, Toast.LENGTH_SHORT).show();
                            webview.loadUrl("");
                            webview.setVisibility(View.GONE);

				
                        }
                    });
                } else {//Status parameters returned by other HTML pages

				

				
                }
            } catch (JSONException e) {
                e.printStackTrace();
            }
        }
    }

				
    private void initView() {
        btn = (TextView) findViewById(R.id.btn);
        btn.setOnClickListener(this);
        webview = (WebView) findViewById(R.id.webview);
    }

				
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn:
                // Load APP page
                src = "Your URL"; // Config your android.html resource address,e.g.: https://xxx.com/yyy/android.html
                webview.loadUrl(src + "?vid=5b4d9c33a485e50410192331&scene=0&lang=zh-CN&area=cn");
                webview.setVisibility(View.VISIBLE);
                break;
            default:
                break;
        }
    }
}

First callsetVaptcha()to setwebview, and then call the following methods where VAPTCHA is required


xxxxxxxxxx
webview.setVisibility(View.VISIBLE);
src = "Your URL"; // Config your android.html resource address,e.g.: https://xxx.com/yyy/android.html
webview.loadUrl(src + "?vid=5b4d9c33a485e50410192331&scene=0&lang=zh-CN&area=cn");

Display thewebviewload the business logic page and configure the parameters vid、langaccording to the format.

Set webviewto transparent and turn off hardware acceleration


xxxxxxxxxx
  webview.setBackgroundColor(Color.TRANSPARENT);
  webview.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

When building a bridge for JavaScript calling java interface, the parameter name passed is fixed asvaptchaInterface


xxxxxxxxxx
 webview.addJavascriptInterface(new vaptchaInterface(), "vaptchaInterface");

				
 public  class  vaptchaInterface {
     @JavascriptInterface        public void signal(String json) {
     }
 }

The method with the fixed name（signal）needs to be implemented in the interface. The string parameters here return the information such as whether the verification passes and the user clicks close. The subsequent operations of user verification pass, fail or cancel need to be implemented here. The specific fields are


xxxxxxxxxx
 {
  "signal":"pass",
   "data":{
       "server":"https://*.vaptcha.net/verify",
       "token":"*****"
       }
 }

				
 {
  "signal":"cancel",
   "data":""
 }

				
 {
  "signal":"error",
   "data”:""
 }

android.html


xxxxxxxxxx
<body>
    <script>
        window.vaptchatimeout = setTimeout(() => {
            var data = {
                signal: 'error',
                data: 'error',
            };
            window.vaptchaInterface.signal(JSON.stringify(data));
        }, 5 * 1000);
    </script>
    <script src="./v3.js"></script> <!-- Config your v3.js resource address,e.g.: https://xxx.com/yyy/v3.js -->
    <script>
        var qs = getQueryString();
        var vobj;
        if (qs != []) {
            var vid = qs['vid'];
            var lang = qs['lang'];
            var scene = qs['scene'] || 0;
            var area = qs['area'] || 'cn';

				
            vaptcha({
                vid: vid,
                type: 'invisible',
                lang: lang,
                scene: scene,
                area: area,
            }).then(function (obj) {
                obj.listen('pass', function () {
                    var data = {
                        signal: 'pass',
                        data: obj.getServerToken(),
                    };
                    window.vaptchaInterface.signal(JSON.stringify(data));
                });
                obj.listen('close', function () {
                    var data = {
                        signal: 'cancel',
                        data: '',
                    };
                    window.vaptchaInterface.signal(JSON.stringify(data));
                });
                clearTimeout(window.vaptchatimeout);
                obj.validate();
            });
        }

				
        function getQueryString() {
            var qs = location.search.substr(1),
                args = {},
                items = qs.length ? qs.split('&') : [],
                item = null,
                len = items.length;

				
            for (var i = 0; i < len; i++) {
                item = items[i].split('=');
                var name = decodeURIComponent(item[0]),
                    value = decodeURIComponent(item[1]);
                if (name) {
                    args[name] = value;
                }
            }
            return args;
        }
    </script>
</body>

Addons

Wordpress：https://wordpress.org/plugins/vaptcha/

VUE2： https://www.vaptcha.com/document/vaptcha-vue-click.html

VUE3： https://www.vaptcha.com/document/vaptcha-vue3.html

Back end deployment

Confirm validation

Description of the interface and returned results verified by the serve. 服务端 SDK 地址：https://github.com/vaptcha

Request data

Request url: The server obtained after successful front-end verification, such as HTTPS: / / *. Vaptcha.net/verify.

Note: please add *. Vaptcha.com and *. Vaptcha.net to server whitelists

POST	Description
id	`VID` of VAPTCHA unit
secretkey	`Key` of VAPTCHA unit
scene	Scenario ID of VAPTCHA unit,e.g: 0
token	The `token` obtained by the user after successful front-end verification
ip	Get the user's `remote address`

Response results

Return jsonstring


xxxxxxxxxx
  {
   "success": 1, //Verification result: 1 means pass, 0 means fail
   "score": 60, //Verification score , interval [0, 100]
   "msg": "0,1,2,3" //If the verification fails, it is an error message. If the verification passes but the score is deducted, the deducted item will be displayed
 }

When the verification score is low or there are some points deducted, the webmaster can customize the processing strategy, such as allowing the user to verify the mobile phone, email, etc.

Device validation

API

Register and verify the user's common devices through VAPTCHA ， and register up to 5 devices for each user, which is supported by PC / mobile terminal. It can be used for password free login, security supplementary verification or other scenarios customized by the webmaster.

Note: the VA[TCHA token used in verification can only be used after Confirm Verification

Device query

Query whether the user device has been registered through the user ID and token, and return the login times and the latest login time.

URL：Append /device to theserverparameter obtained after the front-end verification is successful. For example, the front-end server ishttps://*.vaptcha.net/verify, and the final URL ishttps://*.vaptcha.net/verify/device.

Method：GET

Request：

Parameter	Type	Require	Details
id	string	Y	用户唯一 ID，用于关联设备，无需提交用户名、手机号等隐私信息。
token	string	Y	VAPTCHA Token

Response：


xxxxxxxxxx
{
    "code": 200,
    "data": {
        "count": 1, // Login times
        "latestTime": 1620957149 // Last logon time
    },
    "msg": "success"
}

Device registration

Add up to 5 associated devices for the current user. Whether to register devices can be determined by the station master or let vaptcha automatically judge. It is recommended to register only devices with valid identity verification, such as SMS / email verification.

URL: append/deviceto the front-end server parameter.

Method：PUT

Request：

Parameter	Type	Require	Details
id	string	Y	The user ID of the user who registered the device on your website/APP.
token	string	Y	VAPTCHA Token
regedit	int	N	1 registers the current device, and 0 automatically determines whether to register by VAPTCHA

Response：


xxxxxxxxxx
{
    "code": 200,
    "data": null,
    "msg": "success"
}

Exit device

Delete the most recently logged in device of the current user

URL：https://user.vaptcha.com/api/v1/device

Method：DELETE

Request：

Parameter	Type	Require	Details
id	string	Y	The user ID of the user who registered the device on your website/APP.

Response：


xxxxxxxxxx
{
    "code": 200,
    "data": null,
    "msg": "success"
}

Inquiry devices

Get the list of devices that the user has logged in

Request

Parameter	Value
HTTP URL	https://user.vaptcha.com/api/v1/device
HTTP Method	GET

Request parameters

Parameter	Type	Require	Details
id	string	Y	The user ID of the user who registered the device on your website/APP.

Response：


xxxxxxxxxx
{
    "code": 200,
    "data": [{
        "id":"xxxxx",// Device ID
        "count":1,// Login times
        "device":"Windows",// Last login device
        "ip":"127.0.0.1",// Last login IP
        "latestTime":1620000000,// Last login time
    }],
    "msg": "success"
}