https://github.com/shubhamranjan/vue-hcaptcha
https://github.com/shubhamranjan/vue-hcaptcha
hacktoberfest hcaptcha recaptcha typescript vue vuejs vuejs3
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/shubhamranjan/vue-hcaptcha
- Owner: shubhamranjan
- License: mit
- Created: 2021-08-19T07:33:43.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-12-14T19:30:05.000Z (almost 3 years ago)
- Last Synced: 2025-01-16T20:49:43.364Z (9 months ago)
- Topics: hacktoberfest, hcaptcha, recaptcha, typescript, vue, vuejs, vuejs3
- Language: TypeScript
- Homepage:
- Size: 2.56 MB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# hCaptcha
# Note
~~This library was created to meet urgent needs during a time when the official library did not support vue 3. Now that it does support, this project is deprecated.~~
~~Please consider using the [official lib](https://www.npmjs.com/package/@hcaptcha/vue3-hcaptcha) instead~~
This library will be maintained and supported until the official library has proper support for vue3 + TS
A hCaptcha library for vuejs 3+.
[](https://www.npmjs.com/package/@shubhamranjan/vue-hcaptcha)
[](https://www.npmjs.com/package/@shubhamranjan/vue-hcaptcha)
## Installation
You can install this library via npm with:
```
npm i @shubhamranjan/vue-hcaptcha --save
```
or via yarn:
```
yarn add @shubhamranjan/vue-hcaptcha
```
Basic Usage
```xml
import { defineComponent } from "vue";
import { hcaptcha } from "@shubhamranjan/vue-hcaptcha";
export default defineComponent({
name: "ServeDev",
components: {
hcaptcha,
},
methods: {
doSomething(response: string, responseKey: string): void {
console.log(response, responseKey);
},
},
});
```
### Component Details
#### Props
|Name|Values/Type|Required|Default|Description|
|---|---|---|---|---|
|`sitekey`|String|**Yes**|`-`|Your sitekey. Please visit [hCaptcha](https://www.hcaptcha.com) and sign up to get a sitekey.|
|`size`|String (normal, compact, invisible)|No|`normal`|This specifies the "size" of the checkbox. hCaptcha allows you to decide how big the component will appear on render. Defaults to normal.|
|`theme`|String (light, dark)|No|`light`|hCaptcha supports both a light and dark theme. If no theme is set, the API will default to light.|
|`tabindex`|Integer|No|`0`|Set the tabindex of the widget and popup. When appropriate, this can make navigation of your site more intuitive.|
|`language`|String (ISO 639-2 code)|No|`auto`|hCaptcha auto-detects language via the user's browser. This overrides that to set a default UI language.|
|`reCaptchaCompat`|Boolean|No|`true`|Disable drop-in replacement for reCAPTCHA with `false` to prevent hCaptcha from injecting into window.grecaptcha.|
|`challengeContainer`|String|No|`-`|A custom element ID to render the hCaptcha challenge.|
|`rqdata`|String|No|-|See Enterprise docs.|
|`sentry`|Boolean|No|-|See Enterprise docs.|
|`apiEndpoint`|String|No|-|See Enterprise docs.|
|`endpoint`|String|No|-|See Enterprise docs.|
|`reportapi`|String|No|-|See Enterprise docs.|
|`assethost`|String|No|-|See Enterprise docs.|
|`imghost`|String|No|-|See Enterprise docs.|
#### Emitted Events
|Event|Params|Description|
|---|---|---|
|`error`|`err`|When an error occurs. Component will reset immediately after an error.|
|`verify`|`token, eKey`|When challenge is completed. The `token` and an `eKey` are passed along.|
|`expired`|-|When the current token expires.|
|`challengeExpired`|-|When the unfinished challenge expires.|
|`opened`|-|When the challenge is opened.|
|`closed`|-|When the challenge is closed.|
|`reset`|-|When the challenge is reset.|
|`rendered`|-|When the challenge is rendered.|
|`executed`|-|When the challenge is executed.|
### FAQ
#### How can I get a sitekey?
Sign up at [hCaptcha](https://www.hcaptcha.com) to get your sitekey. Check [documentation](https://docs.hcaptcha.com/api#getapikey) for more information.
#### What is hCaptcha?
[hCaptcha](https://www.hcaptcha.com) is a drop-in replacement for reCAPTCHA that earns websites money and helps companies get their data labeled.
#### Are features like bot scores and No-CAPTCHA/passive mode also available?
Yes, in the enterprise version: see [hCaptcha Enterprise (BotStop)](https://www.botstop.com) for details.
### Demo
To run the demo:
1. clone this repo `git clone https://github.com/shubhamranjan/vue-hcaptcha.git`
2. run ```yarn serve```
* it will start the demo app on localhost:8080
* open your console to see the demo app emitting events