用cloudflare部署一个属于自己的验证码接口

大家好，这是我cfblog的第一个技术文章，废话不多说，进入正题

首先呢，我们要部署一个cloudflare的验证码接口的话要有自己的域名，并且在cloudflare解析，这里不多讲，网上的话都有很多教程

我要在cloudflare的worker栏中创建一个worker，创建成功后点击编辑代码
将下面github中的代码复制进去
https://github.com/zyhsck/cfCaptcha/blob/main/worker.js

为了防止验证码被破解，所以的话我这里就把后端加密了，放心加密后也是能正常运行的

代码复制进去后，点击部署，提示部署成功后，我们回到在cloudflare菜单的菜单

在cloudflare菜单的数据和存储库-KV中创建一个kv数据库，名称随机，再回到worker中，设置-绑定-添加中选择你创建的数据库，注意！！！，接下来的变量名称要填TOKENS！！！然后确认

这是js代码，关键的部分加密了，但是配置部分我有留着，你可以下载下来修改其中的配置
https://cdn.jsdelivr.net/gh/zyhsck/cfCaptcha@main/CF-Captcha.js

在文件中的config中captchaUrl和verifyUrl中的https://yourworkersurl.workers.dev要更换成你部署的cloudflare worker域名，注意⚠️后面的/captcha和/verify不能改动！！不然无法接收的发送请求

successCallback和failureCallback是验证成功和验证失败后执行的函数，你要自己在函数中写执行的代码

最后是html部分的代码

<div id="captcha" class="slider-container">
        <div class="slider-bg">
            <div class="slider-block" id="sliderBlock"></div>
        </div>

        <div class="slider-btn" id="sliderBtn">点击开始验证</div>
    </div>

将这个代码放置你网页中，位置任意，这个代码是验证区的html，效果如图

他的css是在js中配置的，你想要修改的话在上面的js脚本中修改

以下是示例:

<body>
<div id="captcha" class="slider-container">
        <div class="slider-bg">
            <div class="slider-block" id="sliderBlock"></div>
        </div>

        <div class="slider-btn" id="sliderBtn">点击开始验证</div>
    </div>
</body>
 <script src="https://cdn.jsdelivr.net/gh/zyhsck/cfCaptcha@main/CF-Captcha.js"></script＞

TIPS：
如果在控制台中显示跨域请求被拦截的话，请使用代理服务器发送
最好找chatgpt寻求帮助，我是请AI写了一个cloudflare的代理服务器来帮助转发请求的，你也可以来私信站主（bilibili）

最后的最后，距离新年只有不到10天了，祝大家新年快乐！！