Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
reCAPTCHA
npm i --save-dev @artifact-project/recaptchaFeatures
- API
🛠 - Multi language
🇷🇺 🇺🇸 🇨🇳 - Support mock for testing
🔬 - Events
💡 & Analytics📊 (support⚡️ @perf-tools/keeper) - Components
- React (ready to use)
- Server side render
- Dynamic properties
- Vue (in progress, help wanted)
- WebComponent (in progress, help wanted)
- React (ready to use)
Usage
// As API
import { renderReCaptchaWidget } from '@artifact-project/recaptcha';
const widget = renderReCaptchaWidget({
el: document.getElementById('captcha-box'),
params: { // https://developers.google.com/recaptcha/docs/display#render_param
sitekey: 'XXXX',
theme: 'dark',
},
handle(type, code, error) {
console.log('type:', type); // Enum('change', 'expired', 'error')
console.log('code:', code); // 'XXXX' or null
},
// Events
onchallengeshow() {},
onchallengehide() {},
onstartattempt(attempt) {
console.log('attempt.start:', attempt); // {state: 'start', start: 132314124, duration: 0};
},
onattempt(attempt) {
console.log('attempt.resolved:', attempt); // {state: 'verified', start: 132314124, duration: 325325};
},
});
// As React Compomnent
import { ReCaptcha } from '@artifact-project/recaptcha/react';
const captcha = (
<ReCaptcha
sitekey={'XXXX'}
loading={<span>⏳Loading...</span>}
onReady={() => console.log('reCAPTCHA is ready')}
onChange={(code) => console.log('reCAPTCHA code:', code)}
onExpired={(code) => { /* ... */ }}
onError={(err) => { /* ... */ }}
onChallengeShow={() => { /* ... */ }}
onChallengeHide={() => { /* ... */ }}
onStartAttempt={(attempt) => { /* ... */ }}
onAttempt={(attempt) => { /* ... */ }}
/>
);Advanced API
import {
installReCaptchaSDK,
renderReCaptchaWidget,
} from '@artifact-project/recaptcha';
installReCaptchaSDK().then(() => {
console.log('reCAPTCHA SDK —> loaded');
});
renderReCaptchaWidget({ ... }).ready.then(widget => {
console.log('reCAPTCHA SDK —> loaded');
console.log('reCAPTCHA Widget —> rendered');
})Enterprise recaptcha
Чтобы подключить enterprise версию рекаптчи, необходимо передать isEnterprise флаг.
// As API
import { renderReCaptchaWidget } from '@artifact-project/recaptcha';
const widget = renderReCaptchaWidget({
params: {
sitekey: 'XXXX',
theme: 'dark',
isEnterprise: true
},
...
});
// As React Compomnent
import { ReCaptcha } from '@artifact-project/recaptcha/react';
const captcha = (
<ReCaptcha
sitekey={'XXXX'}
isEnterprise
/>
);Testing / Mock
React component
import { ReCaptcha, ReCaptchaContextMock } from '@artifact-project/recaptcha/react';
const captchaWithMock = (
<ReCaptchaContextMock.Provider value={{
code: 'xx123xx',
ctrlProps: {'data-qa': 'recaptcha-btn'},
okProps: {'data-qa': 'recaptcha-successfully'},
}}>
<ReCaptcha
sitekey={'XXXX'}
onChange={(code) => {
console.log('reCAPTCHA code:', code); // always: 'xx123xx'
}}
/>
</ReCaptchaContextMock.Provider>
);Analytics
import { renderReCaptchaWidget } from '@artifact-project/recaptcha';
import { createReCaptchaAnalytics } from '@artifact-project/recaptcha/analytics';
const analytics = createReCaptchaAnalytics('LoginPage');
renderReCaptchaWidget({
el: document.getElementById('captcha-box'),
params: { /*...*/ },
...analytics.mixin('native'), // added `on`-props
});
document.getElementById('login-form').addEventListener('submit', () => {
const stats = analytics.get();
sendToMyAnalytics(analytics.name, stats);
analytics.clear();
// ...
});Using with ⚡️ @perf-tools/keeper
import { system as systemKepper } from '@perf-tools/keeper';
import { createReCaptchaAnalytics } from '@artifact-project/recaptcha/analytics';
const analytics = createReCaptchaAnalytics('Login', {
keeper: systemKepper,
});
// ... bla-bla-bla