小程序接入
小程序接入
当前验证码以 Webview + H5 的形式接入,需要手动在项目中创建 Webview 页面
1. 资源下载
下载资源,下载地址,保存文件至项目 ,保存的路径下文以 "path/to/baiducloud-bioc-captcha" 代替
- 若使用 原生小程序 接入,参考第2章节;
- 若使用 uni-app 框架接入,参考第3章节。
2. 原生小程序接入
- 适用 百度小程序、微信小程序、支付宝小程序。
2.1 步骤1:创建 captcha-webview 验证码页面
在 pages 文件夹下,创建 captcha-webview 页面
2.2 步骤2:app.json 声明验证码页面路径
在app.json中声明页面,pages/captcha-webview/captcha-webview,后续调起验证码时作为 webviewPath 参数传入
1{
2 "pages": [
3 // ... 此处地址为后续使用 getTokenFromWebview 函数调起验证码时传入的 webviewPath 参数
4 "pages/captcha-webview/captcha-webview"
5 // ...
6 ]
7}
2.3 步骤3:编写页面JS代码
编写 captcha-webview 页面代码,代码如下
1// 文件:pages/captcha-webview/captcha-webview.js
2import {createWebviewPageOptions} from 'path/to/baiducloud-bioc-captcha';
3
4Page(createWebviewPageOptions());
2.4 步骤4:编写页面模板代码
百度小程序
1<!-- 文件:pages/captcha-webview/captcha-webview.swan -->
2<web-view src="{{src}}" bindmessage="postMessage"></web-view>
微信小程序
1<!-- 文件:pages/captcha-webview/captcha-webview.wxml -->
2<web-view src="{{src}}" bindmessage="postMessage"></web-view>
支付宝小程序
1<!-- 文件:pages/captcha-webview/captcha-webview.axml -->
2<web-view src="{{src}}" onMessage="postMessage"></web-view>
2.5 步骤5:调起验证码
参考第 5 章节;
3. uni-app 形式接入
- 适用 微信小程序、支付宝小程序。
- 备注:当前验证码在 uni-app 框架编译的代码无法在百度小程序上正常运行;若源码为 uni-app 形式,对于百度小程序的验证码调起,请使用 2原生小程序形式进行接入和调起;
3.1 步骤1:创建 captcha-webview 验证码页面
在 src/pages 文件夹下,创建 captcha-webview/captcha-webview.vue 页面
3.2 步骤2:pages.json 声明验证码页面路径
编辑 src/pages.json,声明刚创建的 captcha-webview 页面
1{
2 // ...
3 "pages": [
4 {
5 "path": "pages/captcha-webview/captcha-webview",
6 "style": {
7 "navigationBarTitleText": "安全验证码"
8 }
9 }
10 ],
11 // ...
12}
3.3 步骤3:编写页面JS&页面模板代码
- 若为uni-app,参考页面代码,仅支持微信小程序、支付宝小程序,
- 暂不支持百度小程序,百度小程序**请使用 2原生小程序形式进行接入和调起;**
1<!-- src/pages/captcha-webview/captcha-webview.vue -->
2<template>
3 <web-view :src="src" @message="postMessage"></web-view>
4</template>
5<script>
6import {createWebviewUniAppComponent} from 'path/to/baiducloud-bioc-captcha';
7export default createWebviewUniAppComponent();
8</script>
3.4 步骤4:调起验证码
参考第 5 章节;
4. 配置验证码业务域名白名单
由于验证码是通过webview打开,需要配置webview的域名访问白名单,同时也需要设置为request请求白名单
1sec-captcha-cloud.baidu.com
2sec-captcha-cloud-1.baidu.com
5. 调起验证码
调起验证码时,传入该页面作为 webviewPath,该例子为 /pages/captcha-webview/captcha-webview
1import * as BiocCaptcha from 'path/to/baiducloud-bioc-captcha';
2
3const ak = 'xxx'; // 在控制台获取
4
5Page({
6 // ...
7
8 getCaptchaVerifyToken() {
9 BiocCaptcha.getTokenFromWebview({
10 webviewPath: '/pages/captcha-webview/captcha-webview', // 注意:要在webviewPath前添加反斜杠,否则跳转会失败
11 ak: 'xxx'
12 }).then(token => {
13 console.log('验证完成', token);
14 }).catch(e => {
15 if (typeof e === 'undefined') {
16 console.log('验证码取消');
17 }
18 });
19 },
20
21 // ...
22});
BiocCaptcha.getTokenFromWebview会跳转至webview页面,验证完成后会使用swan.navigateBack()进行回跳,期间会依次触发当前页面的onHide和onShow事件,请注意逻辑控制
6. 验证码凭证
当验证码验证完成后,获取到验证码TOKEN,数据格式如下:
1export type Token = {
2 pass: boolean; // 验证码通过情况
3 stk: string; // 安全验证码token数据
4 v: string; // 版本号
5};
客户端验证通过拿到 stk 后,业务服务端需调用 verifystk 接口完成二次校验,详见《服务端接入》。
7. JSAPI
7.1 BiocCaptcha.getTokenFromWebview
跳转至webview中进行验证码验证,验证完成后进行回跳
1import * as BiocCaptcha from 'path/to/baiducloud-bioc-captcha';
2
3const options = {
4 ak: 'xxx' // 在控制台获取
5};
6
7// 创建验证码
8BiocCaptcha.getTokenFromWebview({
9 ak: 'xxx'
10}).then(token => {
11 console.log('验证完成', token);
12}).catch(e => {
13 if (typeof e === 'undefined') {
14 console.log('验证码取消');
15 }
16});
options参数说明
| 参数名 | 类型 | 是否必填 | 重要性 | 描述 |
|---|---|---|---|---|
| ak | string | 是 | 必填 | 用户app key |
| timeout | number | 否 | 静态资源加载超时时间,默认8s | |
| ctype | string | 否 | 验证码类型,支持b_track_match 轨迹滑块匹配、b_click 数字点选、b_word_click 文字点选、b_track_draw 轨迹绘制(与 Web/H5 端 ctype 取值一致) |
|
| required | boolean | 否 | 强制用户完成验证,当用户点击取消按钮时,会重新跳转至验证码页面。默认false | |
| webviewPath | string | 否 | 自定义跳转的小程序地址(需要在小程序app.json里配置),默认为动态库内置地址 | |
| subid | string | 否 | 子渠道号 | |
| backurl | string | 否 | 验证码完成后的跳转URL,默认为上一页 | |
| ext | string | 否 | 业务额外数据 | |
| biocOrigin | string | 否 | 服务器源 |
评价此篇文章
