吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 4159|回复: 117
上一主题 下一主题
收起左侧

[其他原创] 利用Cloudflare Workers部署挪车页面

    [复制链接]
跳转到指定楼层
楼主
bgwu666 发表于 2024-11-12 17:57 回帖奖励

前言

论坛中刷到有人利用Cloudflare Workers部署挪车页面,看到有人不会部署,遂写此文,分享一下如何部署到Cloudflare Workers并绑定域名。

前期准备

  • 已经托管到Cloudflare的域名一个
  • 挪车源代码
  • WXPusher的AppTokenUIDs

若未注册Cloudflare,未托管域名到Cloudflare,请移步完成上述操作后再阅读本教程。

提供一个Cloudflare托管阿里云域名的教程(仅供参考):https://blog.csdn.net/zhyl8157121/article/details/100551592

部署流程

WxPuhser

  1. 访问WxPusher官网,微信扫码登录
  2. 单击「应用管理」,「应用信息」,应用名字填写movecar,联系方式填写手机号,推送内容随便写,这里填写挪车

image-20241112172836932

  1. 单击左侧「appToken」,未创建应用可能显示创建appToken等字样,创建后这里仅显示重置appToken,创建后记录下AppToken
  2. 单击左侧「用户管理」、「用户列表」,记录下个人UID

image-20241112173103996

Cloudflare Workers

  1. 访问Cloudlare并登录。
  2. 单击「Workers 和 Pages」,「创建」

image-20241112165513293

  1. 单击「创建Worker」
    image-20241112165611685

  2. 为Worker命名,我这里填写movecar,单击页面下方「部署」

image-20241112165805708

  1. 单击「编辑代码」

image-20241112165901508

  1. 将提前准备好的挪车页面代码粘贴进去,替换好WXPusher相关的值,单击右上地址栏右面的「预览」

image-20241112170239557

这里附上源代码:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const phone = '18888888888' // 车主的手机号
  const wxpusherAppToken = 'AT_vAxWMmK123UyvrBZszr123fWeGqW1e17' // Wxpusher APP Token
  const wxpusherUIDs = ['UID_x5dZ9X3P123VOE3ttPvfX12341xU'] // 车主的UIDs  , 'UID_d0pycYubbK6d766GNDo5deknw4i4'  

  const htmlContent = `
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>通知车主挪车</title>
        <style>
          * { box-sizing: border-box; margin: 0; padding: 0; }
          body { font-family: Arial, sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; background: #f0f2f5; color: #333; }
          .container { text-align: center; padding: 20px; width: 100%; max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); background: #fff; }
          h1 { font-size: 24px; margin-bottom: 20px; color: #007bff; }
          p { margin-bottom: 20px; font-size: 16px; color: #555; }
          button { 
            width: 100%; 
            padding: 15px; 
            margin: 10px 0; 
            font-size: 18px; 
            font-weight: bold; 
            color: #fff; 
            border: none; 
            border-radius: 6px; 
            cursor: pointer; 
            transition: background 0.3s; 
          }
          .notify-btn { background: #28a745; }
          .notify-btn:hover { background: #218838; }
          .call-btn { background: #17a2b8; }
          .call-btn:hover { background: #138496; }
        </style>
      </head>
      <body>
        <div class="container">
          <h1>通知车主挪车</h1>
          <p>如需通知车主,请点击以下按钮</p>
          <button class="notify-btn" onclick="notifyOwner()">通知车主挪车</button>
          <button class="call-btn" onclick="callOwner()">拨打车主电话</button>
        </div>

        <script>
          // 调用 Wxpusher API 来发送挪车通知
          function notifyOwner() {
            fetch("https://wxpusher.zjiecode.com/api/send/message", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                appToken: "${wxpusherAppToken}",
                content: "您好,有人需要您挪车,请及时处理。",
                contentType: 1,
                uids: ${JSON.stringify(wxpusherUIDs)}
              })
            })
            .then(response => response.json())
            .then(data => {
              if (data.code === 1000) {
                alert("通知已发送!");
              } else {
                alert("通知发送失败,请稍后重试。");
              }
            })
            .catch(error => {
              console.error("Error sending notification:", error);
              alert("通知发送出错,请检查网络连接。");
            });
          }

          // 拨打车主电话
          function callOwner() {
            window.location.href = "tel:${phone}";
          }
        </script>
      </body>
    </html>
  `

  return new Response(htmlContent, {
    headers: { 'Content-Type': 'text/html;charset=UTF-8' },
  })
}
  1. 单击「通知车主挪车」,测试是否正常推送消息。

image-20241112170352346

image-20241112170417085

  1. 单击右上「部署」,等待部署完成
  2. 回到Cloudflare主页,单击托管的「域名」

image-20241112170626925

  1. 单击左侧「DNS」

image-20241112170740394

  1. 单击「添加记录」,类型选择A,名称随意(该名称为二级域名),IPV4随意填写,这里名称我填写movecar,IPV4填写2.2.2.2,填写完成单击「保存」

image-20241112171051194

  1. 单击左侧「Workers 路由」,「添加路由」,路由填写刚才设置的二级域名,Worker选择刚才创建的Worker,这里我的路由填写movecar.**.com,Worker选择movecar,单击「保存」

image-20241112171439121

  1. 保存成功后,尝试访问设定好的域名,单击「通知车主挪车」,测试是否正常发送

image-20241112171638756

以上就是利用Cloudflare Workers部署挪车页面的过程了,码字不易,请多多支持!

选做

  • 加密JS代码防止别人获取你的推送Token等信息

访问在线JavaScript混淆加密,将部署好的代码粘贴进来,单击「混淆」,将混淆后的代码粘贴回Cloudflare Workers代码编辑页面,单击「部署」即可

image-20241112174047764

image-20241112174214060

二维码转换

  1. 访问草料二维码
  2. 输入上面建好的页面网址,单击「生成」,注意:一定要加上https,否则微信有可能会拦截。

image-20241112175434242

  1. 还可以根据自己的喜好进行美化,例如我使用微信配色,让人一眼就知道要用微信扫码挪车。

image-20241112175526935

  1. 打印粘贴就可以了。

写在结尾

对于该挪车程序,有一些个人思考:

  1. 避免访问者无限制地发送,应该在发送次数/时间上做一个限制。
  2. 添加邮件、钉钉、Server酱等常见推送方式,以满足多样化推送需求。
  3. 使用Cloudflare Workers必须添加自定义域名,否则国内大概率访问失败。

免费评分

参与人数 38吾爱币 +46 热心值 +32 收起 理由
JssDream + 1 + 1 谢谢@Thanks!
Looshoop + 1 + 1 感谢发布原创作品,吾爱破解论坛因你更精彩!
lipengsunsky + 1 + 1 谢谢@Thanks!
AntonioM + 1 + 1 我很赞同!
Qinmuyi + 1 + 1 用心讨论,共获提升!
festive5055 + 1 + 1 谢谢@Thanks!
lz132 + 1 谢谢@Thanks!
lyqs + 1 + 1 欢迎分析讨论交流,吾爱破解论坛有你更精彩!
BACHE-FEI + 1 + 1 谢谢@Thanks!
l224 + 1 我很赞同!
dingqh + 1 + 1 真是赛博英雄啊,我自己捣鼓半天没成功,来学习下
heisefuyun + 1 + 1 用心讨论,共获提升!
北海风 + 1 + 1 感谢发布原创作品,吾爱破解论坛因你更精彩!
Valar_Dohearis + 1 赛博活佛
曇天 + 1 + 1 楼主有心了,教会了我这小白,谢谢
ichiban123 + 1 热心回复!
momo0830 + 2 + 1 我很赞同!
agoo + 1 + 1 热心回复!
东门拉风 + 1 + 1 谢谢@Thanks!
o(∩_∩)o + 2 + 1 我很赞同!
panpandawang + 1 热心回复!
DDDear + 2 + 1 我很赞同!
leskady + 1 谢谢@Thanks!
lgc247269 + 1 我很赞同!
O炮酱 + 1 + 1 我很赞同!
wahahehe + 1 我很赞同!
dbvip0803 + 1 + 1 感谢发布原创作品,吾爱破解论坛因你更精彩!
zrjclub + 1 + 1 好东西,改天试试
苏紫方璇 + 7 + 1 欢迎分析讨论交流,吾爱破解论坛有你更精彩!
戈壁独行 + 1 + 1 这么详细,,感谢楼主。。。
shanzhanzhe + 1 + 1 谢谢@Thanks!
BayMax2911 + 1 + 1 非常感谢!!学习了。
愷龍 + 3 + 1 用心讨论,共获提升!
tslace + 1 + 1 我很赞同!
q307616455 + 1 + 1 感谢发布原创作品,吾爱破解论坛因你更精彩!
shadmmd + 1 谢谢@Thanks!
lxfx1 + 1 + 1 用心讨论,共获提升!
naturalAI + 1 + 1 我很赞同!

查看全部评分

本帖被以下淘专辑推荐:

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

推荐
yze 发表于 2024-11-12 18:15
好东西,等买车了部署一个。
推荐
hsmx77 发表于 2024-11-12 22:46
注意:一定要加上https,否则微信有可能会拦截

学到了,之前为这个纠结很久
推荐
leskady 发表于 2024-11-13 16:27
谢谢楼主指导像我们这样的小白,教程很详细,基本一路按教程来,都可以测试成功。
推荐
ligege2000 发表于 2024-11-12 18:38
phone =
const wxpusherAppToken =
const wxpusherUIDs =
这改这三个变量就可以了
推荐
systemannounce 发表于 2024-11-12 18:11
好东西,其实我本人相当反感直接把手机号明文直接留在公共场所,感觉很危险。
如果有个和现在平台隐私号差不多的,提供电话转接服务就好了……
沙发
input666 发表于 2024-11-12 18:02
好帖子学到了 支持一下
3#
995 发表于 2024-11-12 18:08
前期准备少写了一样,得准备一辆车
4#
lizhichen2009 发表于 2024-11-12 18:08
很牛的帖子,但是自己有的地方看不懂
5#
naturalAI 发表于 2024-11-12 18:09
挺方便的,可以保护好手机号
6#
软件我来了 发表于 2024-11-12 18:09
域名被微信拦截,不好搞。
8#
anwen 发表于 2024-11-12 18:15

Cloudflare Workers 绑定了域名估计也够呛吧?部分地区

10#
enping1986 发表于 2024-11-12 18:23
很好的帖子,支持加学习吧,以后可以没事学习一下
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2025-1-7 19:09

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表