Benutzer php captcha in vuejs Komponente

Question

In Laravel 5.4.20 und VueJS. Ich möchte ein einfaches Code-Captcha in meiner modalen Komponente verwenden (ich möchte nicht reCaptcha verwenden). Wie kann ich das machen?

I Mewebstudio sind Sicherheits wie diese bin mit:

Route::any('captcha-test', function() 
{ 
    if (Request::getMethod() == 'POST') 
    { 
     $rules = ['captcha' => 'required|captcha']; 
     $validator = Validator::make(Input::all(), $rules); 
     if ($validator->fails()) 
     { 
      echo '<p style="color: #ff0000;">Incorrect!</p>'; 
     } 
     else 
     { 
      echo '<p style="color: #00ff30;">Matched :)</p>'; 
     } 
    } 

    $form = '<form method="post" action="captcha-test">'; 
    $form .= '<input type="hidden" name="_token" value="' . csrf_token() . '">'; 
    $form .= '<p>' . captcha_img() . '</p>'; 
    $form .= '<p><input type="text" name="captcha"></p>'; 
    $form .= '<p><button type="submit" name="check">Check</button></p>'; 
    $form .= '</form>'; 
    return $form; 
}); 

Aber es nur in PHP-Dokumenten arbeiten (Ich brauche in Vue-Komponente).

Answer 1

Um das zu erreichen, Ihre route wird so aussehen:

Route::post('captcha-test', function() { 
    $validator = Validator::make(Input::all(), [ 
     'captcha' => 'required|captcha' 
    ])->validate(); 

    return response(['status' => 'ok'], 200); 
}); 

und Ihre Vue Komponente, wie folgt aus:

Vue.component('captcha', { 
 
    props: ['image'], 
 
    
 
    data: function() { 
 
    return { 
 
     form: { 
 
     captcha: null 
 
     }, 
 
     isWorking: false 
 
    } 
 
    }, 
 
    
 
    methods: { 
 
    check: function() { 
 
     var self = this 
 
     self.isWorking = true 
 
     
 
     axios.post('/captcha-test', { 
 
     captcha: self.form.captcha 
 
     }) 
 
     .then(function (response) { 
 
     // valid captcha... 
 
     console.log(response); 
 
     
 
     // reset the form 
 
     self.form.captcha = null 
 
     // now, is not working 
 
     self.isWorking = false 
 
     }) 
 
     .catch(function (err) { 
 
     // invalid captch.. 
 
     console.log(err); 
 
     
 
     // reset the form 
 
     self.form.captcha = null 
 
     // now, is not working 
 
     self.isWorking = false 
 
     }); 
 
    } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app' 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css" rel="stylesheet"/> 
 

 

 
<div id="app" class="section"> 
 

 
    <captcha image="<img src='https://c22blog.files.wordpress.com/2010/10/input-black.gif' style='width: 150px;'>" inline-template> 
 
    <div class="box"> 
 
     <div v-html="image"></div> 
 

 
     <form @submit.prevent="check"> 
 
     <div class="field"> 
 
      <div class="control"> 
 
      <input class="input" type="text" placeholder="Captcha" v-model="form.captcha" required> 
 
      </div> 
 
     </div> 
 

 
     <div class="field"> 
 
      <div class="control"> 
 
      <button type="submit" class="button is-primary" :class="{'is-loading': isWorking}" :disabled="isWorking">Check</button> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </captcha> 
 
    
 
</div>