laravel 【mews/captcha】圖片驗證碼 api接口形式獲取、驗證，不通過sessio

sunnyxd 發布于2019-07-01 10:51 / 2719人閱讀

摘要：首先給出擴展地址前期準備與說明在中使用此擴展，正常的用法是通過來保存與驗證用戶輸入的驗證碼是否正確，但我目前的項目是前后臺徹底分離的。前后臺通過來標識用戶。值是與圖片綁定的數值，之后需傳給后臺驗證。

[mews/captcha]

首先給出擴展GitHub地址：https://github.com/mewebstudi...

前期準備與說明 在laravel 中使用此擴展，正常的用法是通過session來保存與驗證用戶輸入的驗證碼是否正確，但我目前的項目是前后臺徹底分離的。前臺使用vue框架來搭建，后臺用laravel來做api后臺的接口。前后臺通過jwt來標識用戶。所以沒法使用session來使用這個擴展，百度了好久，無用，最終還是在官方論壇找到解決方案，在此貼出方案，以便后來人查閱

在laravel中引入此擴展【我的框架版本laravel5.5】

composer require mews/captcha

找到config/app.php下的providers，添加如下代碼

MewsCaptchaCaptchaServiceProvider::class,

找到config/app.php下的aliases，添加如下代碼

"Captcha" => MewsCaptchaFacadesCaptcha::class,

發布配置文件

php artisan vendor:publish

之后便可以在 config/captcha.php下，配置驗證碼

return [
    "default"   => [
        "length"    => 5,
        "width"     => 120,
        "height"    => 36,
        "quality"   => 90,
    ],
    // ...
];

正文開始 因為正常用session的使用方案比較簡單，在此不贅述。

下面放上通過api來驗證的前后端的關鍵代碼

PHP返回驗證碼

//路由
Route::get("/cp", "AppHttpApiV1LoginLoginController@captcha");
//代碼
public function captcha()
{
   return $this->response->array([
       "status_code" => "200",
       "message" => "created succeed",
       "url" => app("captcha")->create("default", true)
   ]);
}

請求返回如下圖：

 ![請求驗證碼接口返回的數據](https://img-blog.csdn.net/20181022160100203?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VyaWNfQWxpdmU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

說明：這里返回的url.img是base64后的圖片，可直接放入img標簽中的src屬性中。key值是與圖片綁定的數值，之后需傳給后臺驗證。

vue發起請求驗證碼

////html關鍵代碼

    
    
    



    
        
    


////js請求方法
get_cp:() =>
    axios({
      url:host.management + "/cp",
      method: "GET",
    }),
    
////js處理獲取請求后的值
changeCodeImg(){
    api.get_cp().then((result) => {
          if(result.status_code == 200){
              this.imgcode = result.url.img
              this.ruleForm2.key = result.url.key
          }
     })
}

效果如下圖：

vue發起登錄認證驗證

submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        let data = {name: this.ruleForm2.name, password: this.ruleForm2.password , captcha: this.ruleForm2.captcha, key:this.ruleForm2.key}
        api.login(data).then((result) => {
          if (result.status_code === 200) {
            //驗證成功............
          } else {
           //驗證失敗.............
           //重新請求驗證碼
            this.ruleForm2.captcha = "";
            this.changeCodeImg();
          }
        })
      } else {
        console.log("error submit!!");
        return false;
      }
    });
}

PHP關鍵驗證代碼

////路由，這里是dingoApi擴展的寫法
$api->post("login","LoginController@login");
////驗證操作
if (!captcha_api_check($request->captcha, $request->key)){
    return $this->response->array(["status_code" => 400, "message" => "驗證碼不匹配" ]);
 }

這里有兩種方式來驗證，第一種就是上面的這種只通過一個函數的方式，第二種是使用validate來驗證：

$data = $req->all();

$validator = Validator::make($data, [
    "ckey" => "required",
    "captcha" => "required|captcha_api:" . $req->input("ckey")
]);

if ($validator->fails()) {
    return [
        "msg" => "Validation failed",
        "errors" => $validator->messages(),
    ];
} else {
    return [
        "msg" => "Validation passes"
    ];
}

最后通過語句來總結一下整個流程
首先是vue請求圖片接口，接口返回圖片的地址與key值。用戶填寫完后，要把這個key值與用戶填寫的值一同傳給后臺做驗證。就這么簡單。

結束 THE END

云服務器 GPU云服務器圖片驗證碼api接口驗證碼驗證api接口獲取驗證碼接口驗證碼接口api

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/29550.html

laravel開發擴展記錄

摘要：自動代碼擴展開發時遵守的代碼風格是項目開發規范。遵照此規范，在實際操作中，有許多重復，接下來推薦一款專為此規范量身定制的代碼生成器。可以利用此擴展來快速構建項目原型。后續還會為大家帶來一些最新的技術擴展。 whoops 錯誤提示擴展 whoops 是一個非常優秀的 PHP Debug 擴展，它能夠使你在開發中快速定位出錯的位置。laravel默認安裝。showImg(https://s...

fancyLuo 2019-08-02 12:07 評論0 收藏0
laravel開發擴展記錄

摘要：自動代碼擴展開發時遵守的代碼風格是項目開發規范。遵照此規范，在實際操作中，有許多重復，接下來推薦一款專為此規范量身定制的代碼生成器。可以利用此擴展來快速構建項目原型。后續還會為大家帶來一些最新的技術擴展。 whoops 錯誤提示擴展 whoops 是一個非常優秀的 PHP Debug 擴展，它能夠使你在開發中快速定位出錯的位置。laravel默認安裝。showImg(https://s...

魏憲會 2019-07-01 10:59 評論0 收藏0
下載量最高 100 個 Laravel 擴展包推薦

摘要：本文經授權轉自社區，后續更新將以帖子內容和內容為準。說明另一個令人喜歡的地方，是擁有活躍的開發者社區，而活躍的開發者社區帶來的，是繁華的擴展包生態。本文對上打了標簽的擴展包進行整理，截止到現在年月號，有超過個擴展包，以下是下載量最大的個。本文經授權轉自 PHPHub 社區，后續更新將以 PHPHub 帖子內容和 GitHub 內容為準。說明 Laravel 另一個令人喜歡的地方...

Tychio 2019-06-27 14:13 評論0 收藏0
PHP / Laravel API 開發推薦閱讀清單

showImg(https://segmentfault.com/img/bV6aHV?w=1280&h=800); 社區優秀文章 Laravel 5.5+passport 放棄 dingo 開發 API 實戰，讓 API 開發更省心 - 自造車輪。 API 文檔神器 Swagger 介紹及在 PHP 項目中使用 - API 文檔撰寫方案推薦 Laravel API 項目必須使用的 8 個...

shmily 2019-06-28 18:34 評論0 收藏0