Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
ember-h-captcha
Advanced tools
Readme
hCaptcha addon for Emberjs.
You need to generate a valid Site Key / Secret Key pair on hCaptcha site.
Then, you need to set your Site Key in the ENV
var on your config/environment.js
file, like this:
var ENV = {
// ...
};
ENV['ember-h-captcha'] = {
jsUrl: 'https://hcaptcha.com/1/api.js', // default
sitekey: 'your-site-key',
hl: 'tr', // Ex: Turkish
};
Add the component to your template like this:
<HCaptcha @onSuccess={{fn this.onCaptchaResolved}} />
then in your component or controller 's actions:
@action
onCaptchaResolved(response) {
this.model.set('response', response);
// You should then save your model and the server would validate response
// ...
}
You know, after some time the hCaptcha response expires; hCaptcha
's default behavior is to invoke the reset method. But, if you want to perform custom behavior instead (e.g. transitioning to another route) you can pass your custom action via the onExpired
property, like this:
<HCaptcha
@onSuccess={{fn this.onCaptchaResolved}}
@onExpired={{fn this.onCaptchaExpired}}
/>
then in your component or controller 's actions:
@action
onCaptchaExpired() {
// your custom logic here
}
You might want to arbitrarily trigger hCaptcha reset. For example, if your form submission fails for errors on other fields, you might want to force user to solve a new hCaptcha challenge.
To do that, first you'll need to grab a reference to hCaptcha
component in your template, like this:
<HCaptcha
@onSuccess={{fn this.onCaptchaResolved}}
@onRender={{fn (mut this.hCaptcha)}}
/>
then you'll be able to invoke reset()
method on hCaptcha
property anywhere in your component or controller 's code, like this:
this.hCaptcha.reset();
You might want to pass a callback function that will be called after the hCaptcha renders on the page. onRender callback also returns component instance. This is great for things like loading spinners. To do so, you can do something like this:
<HCaptcha
@onSuccess={{fn this.onCaptchaResolved}}
@onRender={{fn this.onCaptchaRendered}}
/>
then in your component or controller 's actions:
@action
onCaptchaResolved() {
// ...
}
@action
onCaptchaRendered(instance) {
// your custom onRender logic
}
You might want to pass a callback function that will be called after the error occured. To do so, you can do something like this:
<HCaptcha
@onSuccess={{fn this.onCaptchaResolved}}
@onError={{fn this.onCaptchaError}}
/>
then in your component or controller 's actions:
@action
onCaptchaResolved() {
// ...
}
@action
onCaptchaError(error) {
// Warn user
}
You can pass hCaptcha
the following properties:
sitekey
theme
size
tabIndex
Their meaning is described on this official doc.
var ENV = {
// ...
};
ENV['ember-h-captcha'] = {
jsUrl: 'https://hcaptcha.com/1/api.js', // default
sitekey: 'your-site-key',
hl: 'tr', // Locale Code - Ex: tr: Turkish
};
Most of the README file taken from the ember-g-recaptcha. hCaptcha mostly compatible with Google reCaptcha.
ember-hCaptcha is released under the MIT License.
FAQs
Ember addon for hCaptcha.
The npm package ember-h-captcha receives a total of 77 weekly downloads. As such, ember-h-captcha popularity was classified as not popular.
We found that ember-h-captcha demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.