Skip to content

Commit 2ed5b21

Browse files
Update README.md
1 parent 7ca4829 commit 2ed5b21

File tree

1 file changed

+22
-34
lines changed

1 file changed

+22
-34
lines changed

README.md

Lines changed: 22 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
1-
# Vue Storefront Google Recaptcha module
2-
[Google Recaptcha](https://developers.google.com/recaptcha) integration for [vue-storefront](https://github.com/aureatelabs/vsf-google-recaptcha), by [Aureate Labs Pvt. Ltd.](https://aureatelabs.com/).
3-
<br />Google Recaptcha registration required (It's a free)
4-
<br /><br />
5-
Google recaptcha is for the protect the spamming your any submiting form and idea about to do some other stuff authentication to prevent this.
6-
<br /><br />
7-
![Demo](docs/preview.png)
8-
<br/>
1+
# Vue Storefront Google Invisible reCAPTCHA extension
2+
[Google Invisible reCAPTCHA v3](https://developers.google.com/recaptcha) integration for [vue-storefront](https://github.com/aureatelabs/vsf-google-recaptcha), by [Aureate Labs](https://aureatelabs.com/)
3+
> This extension helps to prevent bot form submission using Google reCAPTCHA service
4+
5+
**Note:** Google reCAPTCHA registration required (It's a free) to use this extension into your vue-storefront website.
96

10-
Google recaptcha module for Vue Storefront️
7+
Google reCAPTCHA is for the protect the spamming your any submiting form and idea about to do some other stuff authentication to prevent this.
118

12-
> Google recaptcha documentation: https://developers.google.com/recaptcha/intro
9+
![Demo](docs/preview.png)
1310

14-
<br/>
11+
Google reCAPTCHA documentation: https://developers.google.com/recaptcha/intro
1512

1613
## Installation:
1714

@@ -21,8 +18,7 @@ Clone the vsf-google-recaptcha repository into your VSF installation.
2118
```shell
2219
$ git clone git@github.com:aureatelabs/vsf-google-recaptcha.git vue-storefront/src/modules/google-recaptcha
2320
```
24-
25-
### 2. Add the module config to your local VSF configuration file.
21+
### 2. Add the extension config to your local VSF configuration file.
2622
Add the following JSON config snippet into your desired config, eg. `config/local.json`
2723
```json
2824
"googleRecaptcha" : {
@@ -33,15 +29,12 @@ Add the following JSON config snippet into your desired config, eg. `config/loca
3329
"is_active": false
3430
}
3531
```
36-
Replace the `site_key` & `secret_key` parameter with the site key & secret key provided by Google recaptcha registration time. You can find your Captcha Site Key here: https://www.google.com/recaptcha/admin/. Setting `is_active` to `false` will disable the google recaptcha module at runtime.
37-
<br />
32+
Replace the `site_key` & `secret_key` parameter with the site key & secret key provided by Google reCAPTCHA registration time. You can find your Captcha Site Key here: https://www.google.com/recaptcha/admin/. Setting `is_active` to `false` will disable the google reCAPTCHA extension at runtime.
33+
3834
Valid site_key example: `"site_key": "6Lcn_Z0UAAAAAN4LdRSfM5eNd3LJ-xPfUtnV6Lud"`
39-
<br />
4035
Valid secret_key example: `"secret_key": "6Lcn_Z0UAAAAACodWP8oU9wcdVKatvQVBqklWA9c"`
41-
42-
### 3. Register the Google Recaptcha module
43-
Open up your `../vue-storefront/src/modules/index.ts` and add the following code. Adding it inside this file the registers the module so it can be used in your Vue Storefront.
44-
<br />
36+
### 3. Register the Google reCAPTCHA extension
37+
Open up your `../vue-storefront/src/modules/index.ts` and add the following code. Adding it inside this file the registers the extension so it can be used in your Vue Storefront.
4538
```js
4639
import { GoogleRecaptcha } from './google-recaptcha'
4740
...
@@ -51,25 +44,22 @@ GoogleRecaptcha
5144
...
5245
]
5346
```
54-
5547
### 4. How to call captcha method
5648
In your theme template file you can directly call store action and immediate next you can check captcha is verified or not
57-
<br />
5849
```js
5950
this.$store.dispatch('googleRecaptcha/isVerifiedCaptcha')
6051
if (!this.$store.state.googleRecaptcha.is_verified) {
6152
//captcha is not verified
6253
}
6354
```
6455

65-
### 5. Now, Clone google Recaptcha API extension to your local vue-storefront-api
56+
### 5. Now, Clone google reCAPTCHA API extension to your local vue-storefront-api
6657
Copy extension to your /path/to/vue-storefront-api/src/api/extensions/
67-
<br />
6858
```shell
6959
$ cp -f ./API/google-recaptcha /path/to/vue-storefront-api/src/api/extensions/
7060
```
7161

72-
### 6. Add the module config to your local VSF API's configuration file
62+
### 6. Add the extension config to your local VSF API's configuration file
7363
Add the following JSON config snippet into your desired config, eg. `config/local.json`
7464
```json
7565
"googleRecaptcha" : {
@@ -82,11 +72,11 @@ Add the following JSON config snippet into your desired config, eg. `config/loca
8272
}
8373
}
8474
```
85-
Replace the `secret_key` parameter with the secret key provided by Google recaptcha registration time. You can find your Captcha Site Key here: https://www.google.com/recaptcha/admin/. Setting `enable` to `true` will check the captcha base on the score response from the google captcha api. To disable score match simple set value to `false`. Possible values for `low_score` is `0.0` to `0.9`.
86-
<br />
75+
Replace the `secret_key` parameter with the secret key provided by Google reCAPTCHA registration time. You can find your Captcha Site Key here: https://www.google.com/recaptcha/admin/. Setting `enable` to `true` will check the captcha base on the score response from the google captcha api. To disable score match simple set value to `false`. Possible values for `low_score` is `0.0` to `0.9`.
76+
8777
Valid secret_key example: `"secret_key": "6Lcn_Z0UAAAAACodWP8oU9wcdVKatvQVBqklWA9c"`
88-
<br />
89-
sample response of api call `/api/ext/google-recaptcha/is-verify`
78+
79+
Sample response of api call `/api/ext/google-recaptcha/is-verify`
9080
```
9181
{ success: false, error: 'Invalid captcha found.' }
9282
```
@@ -95,11 +85,9 @@ sample response of api call `/api/ext/google-recaptcha/is-verify`
9585
Thats it! It's easy, plug and play! If you haven't got an Register captcha already, you can create one here, there is free tier that you can use to get started: https://www.google.com/recaptcha/admin/create
9686

9787
## Customization
98-
### Replacing the Google captcha Script.
99-
If you need to change the Intercom script that is loaded on the page, open up the `./google-recaptcha/hooks/afterRegistration.ts` file. On line 35 you'll find the script provided from Google Recaptcha, you can swap this out or extend it as required.
10088

89+
### Replacing the Google captcha Script.
90+
If you need to change the Intercom script that is loaded on the page, open up the `./google-recaptcha/hooks/afterRegistration.ts` file. On line 35 you'll find the script provided from Google reCAPTCHA, you can swap this out or extend it as required.
10191

10292
## License
103-
104-
<br/>
105-
This project is licensed under the MIT License.
93+
This project is licensed under the [MIT License](https://github.com/aureatelabs/vsf-google-recaptcha/blob/master/LICENSE)

0 commit comments

Comments
 (0)