记录在使用 Google Recaptcha 中遇到的一些坑

因为在某一个项目中需要使用验证码(登陆注册之类的),又不想自己摸(太麻烦啦),于是就想着用 Google reCAPTCHA,想着这样就可以摸鱼之类的。(在此处 十分感谢一位神秘网友的支持,提高了我90%的办事效率。(原本只有10%这样子))

首先,你需要确定自己要用哪种方式来验证

Google reCAPTCHA 目前有两种验证方式,其中 v2 又有三种方式。

先说说 v3 ,这玩意说高级是挺高级,他验证所用的方式是通过用户的ip,浏览器啥的balabala的玩意给你一个评分,然后需要开发人员根据评分的大小来判断其是否是机器人,从而进行进一步的操作。举个例子,如果评分小于 0.5 ,基本就可以判定其是机器人,然后需要给用户进行电子邮箱的验证、手机短信验证码的验证等等。这种方法感觉让开发人员要做更多的工作,而且在使用的时候右下角还会有一个悬浮窗自豪地对世界说:

本网站 由 reCAPTCHA 提供保护

当然你是谷粉的话这不算什么,可能还觉得有点好看,但我在使用的时候这玩意破坏了样式,然后让整个网站布局变得莫名其妙(

所以果果在这里果断推荐 v2。v2 的话分为复选框形式和一个“不可见”形式。按照我不负责任的推测,我估摸不可见应该是在点击登录按钮的时候进行验证并弹出一个验证框(。?)所谓所见即所得,在实际的开发过程中,果果选用的是复选框形式。

申请 API Key

你可以在 https://www.google.com/recaptcha/admin/create 申请获得。填写 信息确保准确无误后,阅读并勾选 接受“reCAPTCHA 服务条款” 并提交。(由于是进行本地测试,所以域名你也可以填 localhost)

reCAPTCHA 注册成功界面

这里 reCAPTCHA 的原理是 先在浏览器端进行验证,验证成功后会返回一个token, 然后你就可以拿着这个 token 去请求 google reCAPTCHA 服务器,他就会给你返回成功或者失败。实际的东西在文档里写得很清楚,这里就简单提一下

编者注

由于 Google reCAPTCHA 服务器在国内无法访问,实际开发时建议使用 www.recaptcha.net 替换。

前端

果果在大佬的指点下,使用了 Vue (WebPack) 进行前端的开发(然后后面就疯狂推荐 react...)

在 Vue UI 安装 vue-recaptcha 依赖后,疯狂引入一波。

由于果果这里只有部分页面需要引入,然后又不想全局引入,于是用了一种脏方法来引入外部 js(如果有更好的方法欢迎大家留言QAQ,我也觉得这种方法真的好蠢(

let recaptcha = document.createElement("script");

recaptcha.src = "https://www.recaptcha.net/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit";

recaptcha.async = true;

recaptcha.defer = true;

document.body.appendChild(recaptcha);

并在所需页面写入

import VueRecaptcha from 'vue-recaptcha';

components: { VueRecaptcha },

<vue-recaptcha ref="recaptcha" :loadRecaptchaScript="true" @verify="recaptchaVerified" @expired="recaptchaExpired" sitekey="之前申请的 client key"></vue-recaptcha>

@verify 那一块就是验证成功的回调函数啦,@expired 同理。一般来说,@verify 用来存那个 Token ,@expired 就 this.$refs.recaptcha.reset(); 一键安排重置。

然后注意在 data 开一个空变量用于存储 reCAPTCHA 返回的 TOKEN。

在所需部分 写下 HTML 元素。

然后这个验证还是不跟着布局走,没办法, 那向左偏就向左偏吧(

在用户点击登录的时候,记得判断一下 token 是否为空,为空的话让他去验证一下就行啦~

在发送登陆请求的时候,记得把 reCAPTCHA 返回的 token 结果一并提交上去哦(否则这次的人机身份验证将毫无意义(严肃))

后端

后端的操作其实就很简单了,直接向 reCAPTCHA 的 API 发送一个 post 请求,secret上带上刚才申请的 server key,response 就发送刚刚前端发来的 token,然后就会获得下面的一串神秘字符(其实这些玩意也是文档就有,自己查一下就行了)

总的来说,reCAPTCHA 作为一款验证系统,感觉还是挺友好的, (v3除外(来自果果的怨念) 省了很多做验证码的事,也省了被研究如何破解的心思

【闷声备大份】巧用 Coding 等 Git 备份 Blog

好久没写blog了,随便写一点。翻别人的blog,都是一些很高端的玩意儿

其实我在想这个标题的时候犹豫了很久,因为
1.png

想想好像是,于是
2.png

如果文章有错误疏漏之处,欢迎指正。

江来出了啥差错,我可是付不起泽任的,识得唔识得!

好不容易堆出一堆没啥用的东西。

这个教程仅面向于有服务器SSH,Git权限的玩家

其实这玩意儿没啥技术含量(

前戏

首先你需要一个 Coding 或其他 Git 账号,如何注册?

然后你得创建一个新项目。

create.png

create2.png

库注意选择私有,项目名称有名称格式要求。

配置

你大可在服务器上直接跑 ssh & git ,有则会返回类似这样的东西

➜  ~ ssh
usage: ssh [-1246AaCfGgKkMNnqsTtVvXxYy] [-b bind_address] [-c cipher_spec]
           [-D [bind_address:]port] [-E log_file] [-e escape_char]
           [-F configfile] [-I pkcs11] [-i identity_file]
           [-J [[email protected]]host[:port]] [-L address] [-l login_name] [-m mac_spec]
           [-O ctl_cmd] [-o option] [-p port] [-Q query_option] [-R address]
           [-S ctl_path] [-W host:port] [-w local_tun[:remote_tun]]
           [[email protected]]hostname [command]
➜  ~ git
usage: git [--version] [--help] [-C ] [-c name=value]
           [--exec-path[=]] [--html-path] [--man-path] [--info-path]
           [-p | --paginate | --no-pager] [--no-replace-objects] [--bare]
           [--git-dir=] [--work-tree=] [--namespace=]
            []

如果 ssh: command not found / git: command not found
你就选择原谅他/她。
如果你用 Redhat Linux,执行:sudo yum install openssh / sudo yum install git
如果你用 Ubuntu Linux,执行:sudo apt-get install openssh / sudo apt-get install git
如果你用 Arch Linux,执行:sudo pacman -S openssh / sudo pacman -S git
并且 y 。

然后你大可输入 ssh-keygen -t rsa,大概会出现下面的东西,连续enter三次就好了)

➜  ~ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/root/.ssh/id_rsa): 
Created directory '/root/.ssh'.
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /root/.ssh/id_rsa.
Your public key has been saved in /root/.ssh/id_rsa.pub.
The key fingerprint is:
**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:** 
The key's randomart image is:
+--[ RSA 2048]----+
| .....o.B+.      |
|..o ...=.o .     |
| .Eo . o. o      |
|    .  ..+ o     |
|      o S * .    |
|       o . .     |
|                 |
|                 |
|                 |
+-----------------+
➜  ~ 

然后 ~/.ssh/ 就会出现 id_rsa 和 id_rsa.pub 俩玩意儿。

回到coding,点击设置,部署公钥,新建公钥

key.png

输入 cat ~/.ssh/id_rsa.pub ,把得到的东西粘贴到这,注意授予推送权限。

1

确定以后可以看到这玩意儿。

key2.png

输入 [email protected] 如果返回

Coding.net Tips : [Hello! You've connected to Coding.net via SSH. This is a deploy key.

就成功了,首次连接需要接受她的原谅,她会问你:

Are you sure you want to continue connecting (yes/no)? 

你愿意接受我的原谅吗?输入 yes 即可。

否则返回检查步骤是否出错。

将 YourName 与 YourEmail 替换后执行

git config --global user.name "YourName"
git config --global user.email "YourEmail"

接着 cd 到文件目录执行(目录有文件请先备份,出了差错...)

git init

大概会返回

Initialized empty Git repository in '文件目录'/.git

git.png

然后到这里复制到类似 [email protected]:xxx/How-to-Cross-Dressing.git 的东西,将你复制到的与下面 [email protected]:xxx/How-to-Cross-Dressing.git 替换

执行

git remote add origin [email protected]:xxx/How-to-Cross-Dressing.git

首次备份,执行

git add .
git commit -m "First Push."
git push origin master

返回

Counting objects: 3, done.
Writing objects: 100% (3/3), 231 bytes, done.
Total 3 (delta 0), reused 0 (delta 0)
To [email protected]:xxx/How-to-Cross-Dressing.git
 * [new branch]      master -> master

refresh.png

回到 Coding 刷新后即可看到新提交。

后戏

你需要一个 Crontab 来支持他运作。 > 如何宀女装

创建一个 sh 文件到任意位置,如 /home/a.sh 写入

cd 之前的git所在目录
git add -A .
git commit -m "$(date)"
git push origin master

输入 crontab -e ,写入

*/5 * * * * sh /home/a.sh

此处 /5 为每5分钟执行一次,你也可以按照crontab标准更改。

大功告成!

再次提醒。
江来出了啥差错,我可是付不起泽任的,识得唔识得!