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

sunnyxd 發(fā)布于2019-07-01 10:51 / 2705人閱讀

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

[mews/captcha]

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

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

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

composer require mews/captcha

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

MewsCaptchaCaptchaServiceProvider::class,

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

"Captcha" => MewsCaptchaFacadesCaptcha::class,

發(fā)布配置文件

php artisan vendor:publish

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

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

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

下面放上通過api來驗證的前后端的關(guān)鍵代碼

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)
   ]);
}

請求返回如下圖：

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

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

vue發(fā)起請求驗證碼

////html關(guān)鍵代碼

    
    
    



    
        
    


////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發(fā)起登錄認(rèn)證驗證

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關(guān)鍵驗證代碼

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

這里有兩種方式來驗證，第一種就是上面的這種只通過一個函數(shù)的方式，第二種是使用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"
    ];
}

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

結(jié)束 THE END

GPU云服務(wù)器云服務(wù)器圖片驗證碼api接口驗證碼驗證api接口獲取驗證碼接口驗證碼接口api

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/29550.html

發(fā)表評論

登陸后可評論

0條評論

sunnyxd

男|高級講師

我要關(guān)注我要私信

TA的文章

文本溢出顯示省略號

閱讀 3490·2019-08-30 15:53
曾經(jīng)面試踩過的坑，都在這里了～

閱讀 3406·2019-08-29 16:54
自制簡單的range（Vue）

閱讀 2190·2019-08-29 16:41
uni-app項目展示屏幕文字滾動效果

閱讀 2397·2019-08-23 16:10
淺談JavaScript代碼預(yù)解析 + 示例詳解

閱讀 3377·2019-08-23 15:04
使用 Solid 私有化存儲 IPFS 文件哈希值

閱讀 1342·2019-08-23 13:58
JavaScript六種非常經(jīng)典的對象繼承方式

閱讀 347·2019-08-23 11:40
HTML5 新特性

閱讀 2452·2019-08-23 10:26

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

laravel開發(fā)擴(kuò)展記錄

laravel開發(fā)擴(kuò)展記錄

**下載量最高 100 個 Laravel 擴(kuò)展包推薦**

**PHP / Laravel API 開發(fā)推薦閱讀清單**

發(fā)表評論

0條評論

sunnyxd

男|高級講師

TA的文章

文本溢出顯示省略號

曾經(jīng)面試踩過的坑，都在這里了～

自制簡單的range（Vue）

uni-app項目展示屏幕文字滾動效果

淺談JavaScript代碼預(yù)解析 + 示例詳解

使用 Solid 私有化存儲 IPFS 文件哈希值

JavaScript六種非常經(jīng)典的對象繼承方式

HTML5 新特性

最新活動