Skip to content

Commit 2fc9bb7

Browse files
RyanDaDengRyanDaDeng
committed
updated vue document
1 parent ababede commit 2fc9bb7

File tree

1 file changed

+188
-55
lines changed

1 file changed

+188
-55
lines changed

‎README.md

Lines changed: 188 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@ I will be super happy if you think this package is good and also star me. ^.^
2121

2222
PS: For Vue component, it will be polished in the near future, however, the basic version works fine, feel free to create ticket if you encounter any issues.
2323

24+
# Table of Contents
25+
1. [Facade Usage](#facade-usage)
26+
2. [Blade Usage](#blade-basic-usage)
27+
3. [Vue Usage](#vue-usage)
28+
4. [Validation](#validation-class)
29+
5. [Advanced Usage](#advanced-usage)
30+
2431
# DEMO
2532

2633
## Invisible - hidden
@@ -108,8 +115,61 @@ $ php artisan vendor:publish --provider="TimeHunter\LaravelGoogleReCaptchaV3\Pro
108115
After installation, you should see a googlerecaptchav3.php in your app/config folder, and vue component under js/components/googlerecaptchav3 folder.
109116

110117

111-
## Basic Usage
112-
#### Setting up your Google reCAPTCHA details in config file
118+
## Facade Usage <a name="facade-usage" />
119+
120+
You can directly use registered facade service by calling the following methods.
121+
122+
- setAction() is optional only if you want to verify if the action is matched.
123+
- verifyResponse() which accepts the token value from your form. This returns Google reCAPTCHA Response object.
124+
- setScore() is optional only if you want to manually verify the score.
125+
126+
``` php
127+
GoogleReCaptchaV3::setAction($action)->verifyResponse($value,$ip = null);
128+
```
129+
130+
Example Usage
131+
132+
``` php
133+
GoogleReCaptchaV3::verifyResponse($value,$ip)->getMessage();
134+
GoogleReCaptchaV3::verifyResponse($value)->isSuccess();
135+
GoogleReCaptchaV3::verifyResponse($value)->toArray();
136+
```
137+
138+
139+
``` php
140+
GoogleReCaptchaV3::verifyResponse($request->input('g-recaptcha-response'), $request->getClientIp())->getMessage()
141+
```
142+
143+
144+
``` php
145+
GoogleReCaptchaV3::setAction($action)->verifyResponse($value)->isSuccess();
146+
```
147+
148+
If you manually assign a value to setScore($score), the code will fully skip your config file and force to check the score.
149+
150+
``` php
151+
GoogleReCaptchaV3::setScore($score)->setAction($action)->verifyResponse($request->input('g-recaptcha-response'), $request->getClientIp())->getMessage()
152+
```
153+
154+
155+
156+
## Validation Class (Only support Laravel >= 5.5) <a name="validation-class" />
157+
158+
You can use provided Validation object to verify your reCAPTCHA.
159+
160+
``` php
161+
use TimeHunter\LaravelGoogleReCaptchaV3\Validations\GoogleReCaptchaV3ValidationRule;
162+
$rule = [
163+
'g-recaptcha-response' => [new GoogleReCaptchaV3ValidationRule('action_name')]
164+
];
165+
```
166+
167+
- $actionName: if its NULL, the package won't verify action with google response.
168+
169+
170+
171+
## Blade Usage <a name="blade-basic-usage" />
172+
### Setting up your Google reCAPTCHA details in config file
113173

114174
Please register all details in config for host_name, site_key, secret_key and site_verify_url.
115175

@@ -132,9 +192,9 @@ For score comparision, all actions should be registered in googlerecaptchav3 con
132192

133193
For more details please check comments in config file.
134194

135-
#### Display reCAPTCHA v3
195+
### Display reCAPTCHA v3
136196

137-
##### Blade
197+
#### Blade
138198
Include div with an ID inside your form, e.g.
139199

140200
``` html
@@ -152,7 +212,7 @@ Include Template script in your bottom/header of your page, params should follow
152212
]) !!}
153213
```
154214

155-
##### Example Usage
215+
#### Example Usage
156216

157217
``` html
158218

@@ -179,7 +239,7 @@ Include Template script in your bottom/header of your page, params should follow
179239

180240
The backend request will receive a value for 'g-recaptcha-response', please take a look at Sample Use Case and Facade usage sections.
181241

182-
## Badge Display
242+
### Badge Display
183243

184244
If your settings were not reflected, please run php artisan config:cache to clear cache.
185245

@@ -219,54 +279,7 @@ Custom
219279
2. Do Styling/CSS on its div element
220280

221281

222-
## Validation Class (Only support Laravel >= 5.5)
223-
224-
You can use provided Validation object to verify your reCAPTCHA.
225-
226-
``` php
227-
use TimeHunter\LaravelGoogleReCaptchaV3\Validations\GoogleReCaptchaV3ValidationRule;
228-
$rule = [
229-
'g-recaptcha-response' => [new GoogleReCaptchaV3ValidationRule('action_name')]
230-
];
231-
```
232-
233-
- $actionName: if its NULL, the package won't verify action with google response.
234-
235-
## Facade Usage
236-
237-
You can also directly use registered service by calling the following method.
238-
- setAction() is optional only if you want to verify if the action is matched.
239-
- verifyResponse() which accepts the token value from your form. This returns Google reCAPTCHA Response object.
240-
241-
``` php
242-
GoogleReCaptchaV3::setAction($action)->verifyResponse($value,$ip = null);
243-
```
244-
245-
Example Usage
246-
247-
``` php
248-
GoogleReCaptchaV3::verifyResponse($value,$ip)->getMessage();
249-
GoogleReCaptchaV3::verifyResponse($value)->isSuccess();
250-
GoogleReCaptchaV3::verifyResponse($value)->toArray();
251-
```
252-
253-
254-
``` php
255-
GoogleReCaptchaV3::verifyResponse($request->input('g-recaptcha-response'), $request->getClientIp())->getMessage()
256-
```
257-
258-
259-
``` php
260-
GoogleReCaptchaV3::setAction($action)->verifyResponse($value)->isSuccess();
261-
```
262-
263-
If you manually assign a value to setScore($score), the code will fully skip your config file and force to check the score.
264-
265-
``` php
266-
GoogleReCaptchaV3::setScore($score)->setAction($action)->verifyResponse($request->input('g-recaptcha-response'), $request->getClientIp())->getMessage()
267-
```
268-
269-
## Sample Use Case
282+
### Blade Use Case
270283

271284
Register your action in config, also enable score and set up your own site key and secret key:
272285
``` php
@@ -324,7 +337,127 @@ Create your form in index.blade.php:
324337

325338
Go to /index and click submit button on contact us form and you should see an error message that 'Score does not meet the treshhold' because the threshold >2. You can play around the controller to see all outcomes. Importantly, you need to wait the script to be loaded before clicking the submit button.
326339

327-
## Advanced Usage
340+
### Vue Usage <a name="vue-usage" />
341+
342+
The package provides a lightweight vue component. You need to publish the vue component before playing around it.
343+
344+
##### Step 1 Publish vue component:
345+
```sh
346+
$ php artisan vendor:publish --provider="TimeHunter\LaravelGoogleReCaptchaV3\Providers\GoogleReCaptchaV3ServiceProvider" --tag=googlerecaptchav3.vuejs
347+
```
348+
349+
The file will be created under js/components/googlerecaptchav3/GoogleReCaptchaV3.vue, you have full control and modification ability on this file.
350+
351+
352+
##### Step 2 Import vue component and Register reCAPTCHA v3 SiteKey
353+
354+
The Blade way is no longer useful if you use Vue, so we need to manage to assign site key by ourselves. The component supports props below:
355+
356+
Supported: siteKey, elementId, inline and action, check the original file to see the details.
357+
358+
````vue
359+
<google-re-captcha-v3
360+
:siteKey="this.siteKey"
361+
:elementId="'contact_us_id'"
362+
:inline="true"
363+
:action="'contact_us'">
364+
</google-re-captcha-v3>
365+
366+
````
367+
368+
369+
There are two ways you can bind reCAPTCHA v3 to the component, in the following example, you need to import GoogleReCaptchaV3 component first and then pass site key into the component.
370+
371+
###### Use prop
372+
373+
````vue
374+
<template>
375+
<div>
376+
<form method="POST" action="/verify">
377+
<div>
378+
<label for="exampleInputEmail1">Email address</label>
379+
<input type="email" id="exampleInputEmail1"
380+
aria-describedby="emailHelp"
381+
placeholder="Enter email">
382+
</div>
383+
<div>
384+
<label for="exampleInputPassword1">Password</label>
385+
<input type="password" id="exampleInputPassword1"
386+
placeholder="Password">
387+
</div>
388+
<div>
389+
<div id="contact_us_id"></div>
390+
</div>
391+
392+
<button type="submit">Submit</button>
393+
</form>
394+
<google-re-captcha-v3
395+
:siteKey="this.siteKey"
396+
:elementId="'contact_us_id'"
397+
:inline="true"
398+
:action="'contact_us'">
399+
400+
</google-re-captcha-v3>
401+
</div>
402+
403+
</template>
404+
<script>
405+
import GoogleReCaptchaV3 from '../components/googlerecaptchav3/GoogleReCaptchaV3'; // location might be diff to your case, ensure that your location is right
406+
407+
export default {
408+
components: {
409+
GoogleReCaptchaV3
410+
},
411+
data() {
412+
return {
413+
siteKey: 'YOUR_SITE_KEY', // provide your site key here
414+
}
415+
},
416+
created() {
417+
418+
},
419+
computed: {},
420+
mounted() {
421+
422+
},
423+
watch: {},
424+
methods: {}
425+
}
426+
</script>
427+
428+
````
429+
430+
###### Add site key directly into GoogleReCaptchaV3 component
431+
432+
Alternatively, I believe most of cases your site key will never be changed, so you could just modify the original published component to have sitekey hard-coded in.
433+
434+
For instance, open published file and find code below:
435+
````vue
436+
....
437+
props: {
438+
siteKey: {
439+
type: String,
440+
required: true
441+
},
442+
.....
443+
},
444+
....
445+
446+
````
447+
448+
Remove it from prop and add it in data():
449+
450+
````vue
451+
data() {
452+
return {
453+
siteKey: "YOUR_KEY_HERE",
454+
....
455+
}
456+
},
457+
````
458+
459+
460+
## Advanced Usage <a name="advanced-usage" />
328461

329462
#### Custom implementation on Config
330463

0 commit comments

Comments
 (0)