# tencentcloud-uniapp-plugin-captcha **Repository Path**: Tencent-Cloud-Plugins/tencentcloud-uniapp-plugin-captcha ## Basic Information - **Project Name**: tencentcloud-uniapp-plugin-captcha - **Description**: 【uni-app】腾讯云验证码插件 - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-11-22 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: captcha **Tags**: None ## README # 腾讯云验证码(CAPTCHA)插件 ## 1. 插件介绍 | 标题 | 名称 | | ----------- | ---------------------------------------------------------------------- | | 中文名称 | 腾讯云验证码插件 | | 英文名称 | tencentcloud-plugin-captcha | | 最新版本 | v1.0.0 (2020.07.15) | | 适用平台 | [DCloud uni-app](https://uniapp.dcloud.net.cn) | | 适用产品 | [腾讯云验证码](https://cloud.tencent.com/product/captcha) | | GitHub 项目 | [tencentcloud-uniapp-plugin-captcha](https://github.com/Tencent-Cloud-Plugins/tencentcloud-uniapp-plugin-captcha) | | 主创团队 | 腾讯云中小企业产品中心(SMB Product Center of Tencent Cloud) | 一款帮助开发者在 uni-app 项目开发中快捷使用腾讯云验证码产品功能的插件。 ## 2. 功能特性 - 支持印刷体、手写体及定制化场景的图片文字识别服务,有效提升信息录入效率 ## 3. 安装指引 本插件需要调用 uniCloud 云函数,而使用云函数的前提是: - 使用 DCloud 官方开发工具 HBuilderX 2.7+; - 已注册 DCloud 开发者账号并通过实名认证; - 开通了 uniCloud 并创建一个腾讯云的服务空间; ### 3.1. 新建或打开已有项目 1. 打开 HBuilderX 开发工具; 1. 新建或打开一个 uni-app 项目; ### 3.2. 导入云函数 1. 访问 DCloud 插件市场的 [腾讯云插件 - 云函数模板](https://ext.dcloud.net.cn/plugin?id=2139) 详情页; 2. 点击详情页右上角 **使用 HBuilderX 导入插件**,将云函数模板导入到您的项目中; ![](./images/guide/guide-1.png) 3. 在项目中打开 _cloudfunctions/tencentcloud-plugin/config.js_ 文件,将腾讯云的密钥信息配置进去,可以在腾讯云 [API 密钥管理](https://console.cloud.tencent.com/cam/capi) 中获取 SecretId、SecretKey 和 APPID; ![](./images/guide/guide-2.png) 4. 在[uniCloud控制台](https://unicloud.dcloud.net.cn/login)注册HBuild账号并登录,创建[云服务空间](https://uniapp.dcloud.net.cn/uniCloud/concepts/space); ![](./images/guide/guide-3.png) 5. 绑定云函数的云服务空间,将[云函数](https://uniapp.dcloud.net.cn/uniCloud/concepts/cloudfunction) [**上传部署**](https://uniapp.dcloud.net.cn/uniCloud/quickstart?id=rundebug) 到您的[云服务空间](https://uniapp.dcloud.net.cn/uniCloud/concepts/space); ![](./images/guide/guide-4.png) > 如果您之前在使用其它腾讯云产品的 uni-app 插件时已经导入过此云函数模板,则前 4 个步骤可以省略。 > 若导入失败或有其它疑问,请查看 [uniCloud 帮助文档](https://uniapp.dcloud.io/uniCloud/README) 云函数相关章节。 ### 3.3. 导入插件 1. 访问 DCloud 插件市场 [腾讯云验证码(CAPTCHA)插件](https://ext.dcloud.net.cn/plugin?id=2519) 详情页; 1. 点击详情页右上角 **使用 HBuilderX 导入插件** ,将插件导入到您的项目中; 1. 在项目中通过 import 语法将插件提供的方法导入到相关业务组件并使用; > 本插件的默认导入位置是在您项目的“js_sdk”目录下 ## 4. 使用指引 ### 4.1. 插件 API 导图 ![](./images/catpcha-guide.png) ### 4.2. 插件 API 列表 | API 名称 | API 对应方法名 | | ------------------ | --------------------- | | 创建验证码实例 | captchaCreater | | 核查验证码票据结果 | describeCaptchaResult | ### 4.3. 插件使用示例 ```javascript // 验证码插件示例 import { captchaCreater, describeCaptchaResult, } from "@/js_sdk/tencentcloud-plugin-capcha"; export default { methods: { // 触发验证码 showCaptcha: async function() { try { uni.showLoading({ mask: true, }); // 创建验证码实例 const captcha = await captchaCreater((res) => { this.result = res; }); // 显示验证码 captcha.show(); } catch (error) { throw new Error(error); } finally { uni.hideLoading(); } }, // 校验验证码是否成功 checkCaptcha: async function() { try { uni.showLoading({ mask: true, }); // 进行验证码校验 const captcha = await describeCaptchaResult({ captchaType: 9, ticket: this.result.ticket, randstr: this.result.randstr, }); // 得到验证码校验结果 this.checkResult = captcha.result; } catch (error) { throw new Error(error); } finally { uni.hideLoading(); } }, }, }; ``` ### 4.4. 名词解释 服务空间:一个服务空间对应一整套独立的云开发资源,包括数据库、存储空间、云函数等资源。服务空间之间彼此隔离。更多详情请访问 [uniCloud 开发文档](https://uniapp.dcloud.io/uniCloud/concepts/space) 云函数:云函数是运行在云端的 JavaScript 代码,更多详情请见 [uniCloud 云函数文档](https://uniapp.dcloud.io/uniCloud/cf-functions) ## 5. 获取入口 | 插件入口 | 链接 | | --------------- | ---- | | DCloud 插件市场 | [腾讯云验证码(CAPTCHA)插件](https://ext.dcloud.net.cn/plugin?id=2519) | ## 6. GitHub 版本迭代记录 ### 6.1. tencentcloud-uniapp-plugin-captcha v1.0.0 - 完成验证码唤醒和结果校验功能 ## 7. 联系我们    扫码备注“春雨”来联络到我们
![](./images/qrcode.png)