教你写个网页自动签到脚本

Tips:要求有js基础，最起码要敲过代码，hello world不算。。

1.搜寻受害者

就选这个了，
在这里插入图片描述

2.准备阶段

首先打开浏览器的控制台，按F12，选中网络，选中保留日志，就一直开着控制台，不要关
在这里插入图片描述
如果是英文，选择Network，Preserve log，不要关闭控制台

3.抓取数据

3.1：进入到签到的最后一步

最后一步的意思就是如果你执行了最后一步操作，接下来就会提示你签到成功，那一步就叫做最后一步
比如这个网站，如果点击了这个按钮就会展示签到成功，那点击按钮这一步就叫做最后一步
在这里插入图片描述

3.2：清空控制台

点击红圈内的图标清空底下的信息，如果是空的跳过这一步
如果清空了之后时不时会蹦出来一个，这种情况就需要你仔细筛选了
在这里插入图片描述

3.3：开始签到

执行最后一步
在这里插入图片描述

3.4：筛选数据

在你按下按钮的一瞬间，下边会出现一条或多条请求（画细红线的，黑色的是马赛克），从你按下按钮开始出现的第一条开始找
在这里插入图片描述
我按下按钮出现的第一个请求是第三条，add的那一个
点击，看看具体内容（红色的是需要查看的，绿色的是内容）
目前看的是标头，英文的浏览器也是相同的位置

滑到最底下看到了我签到的贴吧的名字，
在这里插入图片描述
如果在这里没找到关键的信息，还可以看这边，预览或者响应，这个请求的返回参数就能看到贴吧名字，因为这是返回参数，有的甚至能直接看到成功之类的消息，或者utf-8编码的中文字符，类似于这种
\u670d\u52a1\u5668\u6253\u778c\u7761\u4e86\uff0c\u518d\u7b7e\u4e00\u6b21\u6572\u9192\u5b83
一般这种签到返回的数据都是json格式的，可以直接看懂
在这里插入图片描述

4.取得链接和参数还有请求类型

4.1：取得链接和参数

在上边已经确定了是哪一条请求，接下来查看它的请求地址
切换到标头选项卡，可以明显的看到URL（英文界面在相同位置）
链接 https://tieba.baidu.com/sign/add
在这里插入图片描述
滑到最底下，如果有类似于下面的图这种的数据也记下来
左边的是键，右边的是值
连接起来
ie=utf-8
kw=2ch
很明显，第三条数据是计算出来的值，但是我们找不到算法，就先不计了，一般情况下缺参数是有很大概率会失败的，但是运气好，成功了
在这里插入图片描述
把链接拼起来
https://tieba.baidu.com/sign/add
这种的链接没有问号(?)，需要在最末尾加个问号(一定要英文问号，所有的标点都是英文字符)
https://tieba.baidu.com/sign/add?
然后添加刚才的键值对，用&分隔
https://tieba.baidu.com/sign/add?ie=utf-8&kw=2ch
好了，链接到这里就拼完了，
Tips:如果你遇到的链接是类似于这种的
https://tieba.baidu.com/sign/add?AAA=&BBB=bb
就是只有键没有值的，可以把键删掉，只有一个键值对不需要&分隔
https://tieba.baidu.com/sign/add?BBB=bb

4.2：获取请求类型

在图上能看到请求方法POST
还有一种是GET
在这里插入图片描述

5.尝试访问

5.0：翻译返回参数

如果返回的参数是带有类似于这种的字符*\u670d\u52a1\u5668\u6253\u778c*
就用下边这段代码，自己比着葫芦画瓢就行
会js应该不至于连控制台都不会用吧。。。

console.log(decodeURI('{"no":1101,"error":"\u4eb2\uff0c\u4f60\u4e4b\u524d\u5df2\u7ecf\u7b7e\u8fc7\u4e86","data":""}'));

浏览器控制台使用
在这里插入图片描述

5.1：GET看完这一步再看下一步

上边说了请求类型，如果是GET，可以尝试把链接直接输入到地址栏，然后回车查看返回值
在这里插入图片描述
返回参数：

翻译成人话就是：{“no”:1012,“error”:“服务器打瞌睡了，再签一次敲醒它”,“data”:""}
意思就是失败了

如果返回的参数是您已经签到过了，一天只能签到一次之类的话，就说明成功了，这个要自己判断
因为上边的请求很明显是POST，在浏览器上输入很大概率是失败的(在浏览器上输入=发送GET请求)，所以我们要用js来发送请求,并且自动签到也是要用js写

5.1：POST直接看这一步

代码

	var xml = new XMLHttpRequest();/** 这里要注意换成自己的内容*/xml.open("请求类型，GET或者POST", "请求地址，就是拼出来的URL");xml.withCredentials = true;xml.send();xml.onload = e => {console.log(e.currentTarget.response);}

复制这段代码，然后把内容换成自己的，然后在控制台打进去
在这里插入图片描述
看到返回值是这个，就算是成功了一大半了
接下来就是等待第二天的到来，如果可以签到多次，那就可以直接看下边的，

6.确认正常签到的返回参数

用贴吧做受害者的好处出现了，可以签到多次，毕竟有那么多吧
新的受害者（划掉）

在这里插入图片描述
你在测试的时候要在你要签到的网站下测试，否则跨源请求会被浏览器阻止
部分返回参数：

在这里插入图片描述
刷新一下页面

成功！

7.封装js并放入油猴

7.1：油猴

https://greasyfork.org/zh-CN
做到这一步的，没用过也应该听说过油猴这个东西
安装我就不说了，点击添加新脚本，

在这里插入图片描述
把里边的东西都删掉，使用下边的代码，在最后面，看完7.2再弄

7.2：封装js

下边代码第28行你自己修改请求地址和请求方式

代码里23行，34行
23 if (GM_getValue(‘CSDNsignInfo’) != new Date().getDay())
34 GM_setValue(‘CSDNsignInfo’, new Date().getDay());
这两句是防止每次打开这个网站都进行一次签到,每天只签到一次，前提是你运行脚本
这两句的意思可以去这个网站看一下
https://jixunmoe.github.io/gmDevBook/#/doc/tutorial/meta

第31行的作用是吧json字符串转换成对象，转换完成后就可以直接使用对象
目前脚本是直接把返回的内容显示出来，你可以把它修改修改
例如返回的json是这种的
{“no”:1101,“error”:"\u4eb2\uff0c\u4f60\u4e4b\u524d\u5df2\u7ecf\u7b7e\u8fc7\u4e86",“data”:""}
转换成对象就变成了下图，应该看得清吧。。
在这里插入图片描述
下边代码里的response就和a是一样的
只需要把
showTips(response, textPosition);
换成
showTips(response.error, textPosition);
就能只显示错误信息了，
然后其他的自己改吧改吧就完事了
代码

// ==UserScript==
// @name         脚本的名字
// @namespace    https://xxxx.com  如果你有个人网站就填在这里
// @version      0.1  版本号
// @description  脚本功能的解释
// @author       脚本作者名字
// @match        需要匹配的网址，就是你要签到的网址
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==/*** 修改提示的位置(textPosition)* 0右下角* 1左下角* 2左上角* 3右上角*/
var textPosition = 0;
//下边的不要动
if (GM_getValue('CSDNsignInfo') != new Date().getDay())signInfo();function signInfo() {var xml = new XMLHttpRequest();xml.open("GET", "https://xxxx.com");xml.withCredentials = true;xml.send();xml.onload = e => {var response = JSON.parse(e.currentTarget.response);showTips(response, textPosition);GM_setValue('CSDNsignInfo', new Date().getDay());console.log(response);}
}/*** showTips方法与anim是一个小小的提示框模组*//*** code from hsmyldk* position* 0右下角* 1左下角* 2左上角* 3右上角* @param {提示文本} text * @param {文本位置} position * @param {边框颜色} color*/
function showTips(text, position, color) {if (color == null) color = '#00c8f5';if (position == null) position = 0;var Msg = document.createElement('div');Msg.id = "hsmyldk_signInBox";Msg.height = '50px';Msg.width = '300px';Msg.innerHTML = text;var styleText = 'z-index: 1000;background-color: #fff;height: 40px;width: 200px;position: fixed;border-top: 2px solid ' + color + ';border-bottom: 2px solid ' + color + ';text-align: center;font-weight: bold;font-size: 16px;' + (text.length > 10 ? 'line-height: 20px;' : 'line-height: 40px;');switch (position) {case 1:{styleText += 'padding-right: 5px;left: -210px;bottom: 230px;border-radius:0 18px 18px 0;border-right: 2px solid ' + color + ';';break;}case 2:{styleText += 'padding-right: 5px;left: -210px;top: 230px;border-radius:0 18px 18px 0;border-right: 2px solid ' + color + ';';break;}case 3:{styleText += 'padding-left: 5px;right: -210px;top: 230px;border-radius: 18px 0 0 18px;border-left: 2px solid ' + color + ';';break;}default:{styleText += 'padding-left: 5px;right: -210px;bottom: 230px;border-radius: 18px 0 0 18px;border-left: 2px solid ' + color + ';';}}Msg.style = styleText;document.body.appendChild(Msg);anim(document.getElementById('hsmyldk_signInBox'), false);
}/*** code from hsmyldk* @param {动画元素} item */
function anim(item) {/*** LorR* true 左* false 右*/var LorR = false;var direction = true;var i = item.style.right;if (i == null || i == NaN || i.length == 0) {i = item.style.left;LorR = true;}if (i == null || i == NaN || i.length == 0) {console.log('你有问题');return;}try {if (LorR) {$(item).animate({ left: '0px' }, 500);setTimeout(() => {$(item).animate({ left: '-210px' }, 500);}, 5500);} else {$(item).animate({ right: '0px' }, 500);setTimeout(() => {$(item).animate({ right: '-210px' }, 500);}, 5500);}return;} catch (error) {console.log('不支持jQuery')console.log(e);}i = parseInt(i.substring(0, i.length - 2));var o = i;var width = item.style.width;width = parseInt(width.substring(0, width.length - 2)) + 20;/*** o* 如果>0就让它=0,i--* 如果=0就让它<0,i--* 如果<0就让它=0,i++*/if (i < 0) direction = false;var interval = setInterval(() => {if (LorR) {item.style.left = (direction ? --i : ++i) + 'px';} else {item.style.right = (direction ? --i : ++i) + 'px';}if (o == 0) {if (Math.abs(i) == width) {if (interval != null) clearInterval(interval);item.remove();}} else {if (i == 0) {if (interval != null) clearInterval(interval);setTimeout(() => {anim(item);}, 5000);}}}, 1);
}