{"id":13745876,"url":"https://github.com/aureatelabs/vsf-google-recaptcha","last_synced_at":"2025-05-09T06:31:09.960Z","repository":{"id":148241879,"uuid":"182237375","full_name":"aureatelabs/vsf-google-recaptcha","owner":"aureatelabs","description":"Google Invisible reCAPTCHA v3 extension for Vue Storefront to preventing bot form submission","archived":false,"fork":false,"pushed_at":"2020-06-22T09:42:12.000Z","size":445,"stargazers_count":21,"open_issues_count":4,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-05-22T17:33:15.088Z","etag":null,"topics":["google-recaptcha","magento2","pwa","vsf-google-recaptcha","vue-storefront","vuejs","vuestorefront"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aureatelabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-04-19T09:13:18.000Z","updated_at":"2022-02-26T22:20:42.000Z","dependencies_parsed_at":"2023-05-19T12:30:46.021Z","dependency_job_id":null,"html_url":"https://github.com/aureatelabs/vsf-google-recaptcha","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aureatelabs%2Fvsf-google-recaptcha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aureatelabs%2Fvsf-google-recaptcha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aureatelabs%2Fvsf-google-recaptcha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aureatelabs%2Fvsf-google-recaptcha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aureatelabs","download_url":"https://codeload.github.com/aureatelabs/vsf-google-recaptcha/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253206064,"owners_count":21871158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-recaptcha","magento2","pwa","vsf-google-recaptcha","vue-storefront","vuejs","vuestorefront"],"created_at":"2024-08-03T06:00:39.959Z","updated_at":"2025-05-09T06:31:09.506Z","avatar_url":"https://github.com/aureatelabs.png","language":"TypeScript","funding_links":[],"categories":["Resources for Vue Storefront 1"],"sub_categories":["Official Resources - v1"],"readme":"# Vue Storefront Google Invisible reCAPTCHA extension\n[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/)\n\u003e This extension helps to prevent bot form submission using Google reCAPTCHA service\n\n**Note:** Google reCAPTCHA registration required (It's a free) to use this extension into your vue-storefront website.\n\nGoogle reCAPTCHA is for the protect the spamming your any submiting form and idea about to do some other stuff authentication to prevent this.\n\n![Demo](docs/preview.png)\n\nGoogle reCAPTCHA documentation: https://developers.google.com/recaptcha/intro\n\n## Installation:\n\n### 1. Clone the repository\n\nClone the vsf-google-recaptcha repository into your VSF installation.\n```shell\n$ git clone git@github.com:aureatelabs/vsf-google-recaptcha.git vue-storefront/src/modules/google-recaptcha\n```\n### 2. Add the extension config to your local VSF configuration file.\nAdd the following JSON config snippet into your desired config, eg. `config/local.json`\n```json\n\"googleRecaptcha\" : {\n   \"tokens\" : {\n       \"site_key\": \"\u003cYOUR_CAPTCHA_SITE_KEY\u003e\",\n       \"secret_key\": \"\u003cYOUR_CAPTCHA_SECRET_KEY\u003e\"\n   },\n   \"endpoint\": \"/api/ext/google-recaptcha/is-verify\",\n   \"is_active\": false\n}\n```\nReplace the `site_key` \u0026 `secret_key` parameter with the site key \u0026 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.\n\nValid site_key example: `\"site_key\": \"6Lcn_Z0UAAAAAN4LdRSfM5eNd3LJ-xPfUtnV6Lud\"`\nValid secret_key example: `\"secret_key\": \"6Lcn_Z0UAAAAACodWP8oU9wcdVKatvQVBqklWA9c\"`\n### 3. Register the Google reCAPTCHA extension\nOpen 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.\n```js\nimport { GoogleRecaptcha } from './google-recaptcha'\n...\nexport const registerModules: VueStorefrontModule[] = [\n...\nGoogleRecaptcha\n...\n]\n```\n### 4. How to call captcha method\nIn your theme template file you can directly call store action and immediate next you can check captcha is verified or not\n```js\nthis.$store.dispatch('googleRecaptcha/isVerifiedCaptcha')\nif (!this.$store.state.googleRecaptcha.is_verified) {\n    //captcha is not verified\n}\n```\n\n### 5. Now, Clone google reCAPTCHA API extension to your local vue-storefront-api\nCopy extension to your /path/to/vue-storefront-api/src/api/extensions/\n```shell\n$ cp -f ./API/google-recaptcha /path/to/vue-storefront-api/src/api/extensions/\n```\n\n### 6. Add the extension config to your local VSF API's configuration file\nAdd the following JSON config snippet into your desired config, eg. `config/local.json`\n```json\n\"googleRecaptcha\" : {\n  \"tokens\" : {\n      \"secret_key\": \"\u003cYOUR_CAPTCHA_SECRET_KEY\u003e\"\n  },\n  \"score_match\": {\n    \"enable\": false,\n    \"low_score\": 0.9\n  }\n}\n```\nReplace 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`.\n\nValid secret_key example: `\"secret_key\": \"6Lcn_Z0UAAAAACodWP8oU9wcdVKatvQVBqklWA9c\"`\n\nSample response of api call `/api/ext/google-recaptcha/is-verify`\n```\n{ success: false, error: 'Invalid captcha found.' }\n```\n\n### 7. Enjoy!\nThats 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\n\n## Customization\n\n### Replacing the Google captcha Script.\nIf 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.\n\n## License\nThis project is licensed under the [MIT License](https://github.com/aureatelabs/vsf-google-recaptcha/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faureatelabs%2Fvsf-google-recaptcha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faureatelabs%2Fvsf-google-recaptcha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faureatelabs%2Fvsf-google-recaptcha/lists"}