添加签到验证码

app/Http/Controllers/Api/TrafficController.php

@@ -4,6 +4,8 @@
 
 use App\Http\Controllers\Controller;
 use App\Support\WHMCS;
+use GuzzleHttp\Client;
+use GuzzleHttp\Exception\GuzzleException;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Cache;
 
@@ -103,7 +105,7 @@ public function free()
         ]);
     }
 
-    public function sign()
+    public function sign(Request $request)
     {
         $user = auth()->user();
 
@@ -115,6 +117,22 @@ public function sign()
             return $this->error('您已经签到过了，请明天再来吧。');
         }
 
+        $recaptcha = $request->post("recaptcha");
+        $http = new Client;
+        try {
+            $check = $http->post("https://www.recaptcha.net/recaptcha/api/siteverify", [
+                'form_params' => [
+                    "secret" => config("captcha.secret"),
+                    "response" => $recaptcha,
+                ],
+//                'verify' => false,
+            ])->getBody();
+        } catch (GuzzleException $e) {
+            return $this->error("与验证码 API 通信失败");
+        }
+
+        $check = json_decode($check);
+        if ($check->success) {
             // 随机 config('settings.sign.min') 到 config('settings.sign.max')
             $traffic = rand(config('settings.sign.min'), config('settings.sign.max'));
 
@@ -129,5 +147,8 @@ public function sign()
                 'traffic' => $traffic,
                 'last_sign_at' => now()->toDateTimeString(),
             ]);
+        } else {
+            return $this->error("验证码校验失败");
+        }
     }
 }

config/captcha.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+    "secret" => env("RECAPTCHA_SECRET"),
+];

package.json

@@ -18,6 +18,7 @@
         "humanize-plus": "^1.8.2",
         "vue": "^3.2.36",
         "vue-axios": "^3.5.2",
+        "vue-recaptcha": "2.0.3",
         "vue-router": "^4.0.13"
     }
 }

resources/js/views/Sign.vue

@@ -6,7 +6,13 @@
             <p>当前流量: {{ traffic.traffic }}GB</p>
             <div v-if="traffic.is_signed">今日已签到</div>
             <div v-else>
-                <button class="btn btn-primary" @click="sign">试试手气</button>
+                <p>完成验证码以签到</p>
+                <vue-recaptcha
+                    sitekey="6Lex40QnAAAAADQcwqLHWquxs23I6nG-HqPk-ZGV"
+                    loadRecaptchaScript
+                    recaptchaHost="www.recaptcha.net"
+                    @verify="sign"
+                />
             </div>
         </div>
     </div>
@@ -14,6 +20,7 @@
 
 <script setup>
 import { ref } from "vue";
+import { VueRecaptcha } from 'vue-recaptcha';
 
 import http from "../plugins/http";
 
@@ -27,8 +34,10 @@ http.get("user")
         traffic.value.traffic = res.data.traffic;
     })
 
-function sign() {
-    http.post("traffic")
+function sign(captcha_token) {
+    http.post("traffic", {
+        "recaptcha": captcha_token
+    })
         .then((res) => {
             traffic.value = res.data;
 

yarn.lock

@@ -474,6 +474,18 @@ vue-axios@^3.5.2:
   resolved "https://registry.npmmirror.com/vue-axios/-/vue-axios-3.5.2.tgz#28637524cca550a9e97197e85a41930ec63604d5"
   integrity sha512-GP+dct7UlAWkl1qoP3ppw0z6jcSua5/IrMpjB5O8bh089iIiJ+hdxPYH2NPEpajlYgkW5EVMP95ttXWdas1O0g==
 
+vue-demi@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
+
+vue-recaptcha@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/vue-recaptcha/-/vue-recaptcha-2.0.3.tgz#7e035d4302cff921d53d320e237ed1912985d922"
+  integrity sha512-Rz0kLIETUgmOrp7CxFvaFE65DkhKdWu4pteWOTt2i+yTajTHPqtyOW6DqTg0BvALWTm+WUvWVV7k5XXFijQnBw==
+  dependencies:
+    vue-demi "^0.13.11"
+
 vue-router@^4.0.13:
   version "4.0.13"
   resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.13.tgz#47f06e2f8ff6120bfff3c27ade1356cc9de7d870"