Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sctg-development/turnstile-vue3
A Vue3 wrapper for Cloudflare Turnstile, providing a seamless integration of the Turnstile widget into your Vue3 application.
https://github.com/sctg-development/turnstile-vue3
Last synced: 7 days ago
JSON representation
A Vue3 wrapper for Cloudflare Turnstile, providing a seamless integration of the Turnstile widget into your Vue3 application.
- Host: GitHub
- URL: https://github.com/sctg-development/turnstile-vue3
- Owner: sctg-development
- License: agpl-3.0
- Created: 2024-10-30T18:07:14.000Z (15 days ago)
- Default Branch: main
- Last Pushed: 2024-10-30T18:46:47.000Z (15 days ago)
- Last Synced: 2024-10-30T19:33:17.273Z (15 days ago)
- Language: Vue
- Size: 31.3 KB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://badge.fury.io/js/@sctg%2Fturnstile-vue3)
[](https://www.gnu.org/licenses/agpl-3.0)
[](https://github.com/sctg-development/turnstile-vue3/actions/workflows/publish-npm.yml)
# Turnstile Vue3 Component
A Vue3 component for integrating Cloudflare Turnstile into your application.
## Star the project
**If you appreciate my work, please consider giving it a star! 🤩 or a** [](https://github.com/sponsors/sctg-development)
## Installation
To install the Turnstile Vue3 component, run the following command:
```bash
npm install @sctg/turnstile-vue3
```
## Usage
Here is an example of how to use the Turnstile Vue3 component in your Vue3 application using the Composition API:
```html
import { Turnstile } from '@sctg/turnstile-vue3';
const siteKey = 'YOUR_SITE_KEY';
const handleSuccess = (token: string) => {
// Verify the token on your server using the verifyCaptcha function
fetch('/api/verify-captcha', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ token }),
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));
};
```
## Verify Captcha on Server
You can verify the captcha token on your server using the verifyCaptcha function:
```javascript
import express from 'express';
import { verifyCaptcha } from '@sctg/turnstile-vue3';
const app = express();
app.use(express.json());
app.post('/api/verify-captcha', (req, res) => {
const { token } = req.body;
const turnstileSecret = 'YOUR_TURNSTILE_SECRET';
verifyCaptcha(turnstileSecret, token, req.ip)
.then((data) => {
if (data.success) {
res.json({ message: 'Captcha verified successfully' });
} else {
res.status(401).json({ message: 'Invalid captcha' });
}
})
.catch((error) => {
res.status(500).json({ message: 'Error verifying captcha' });
});
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});
```
## Cloudflare Worker Sample
Here is an example of how to use the verifyCaptcha function in a Cloudflare worker:
```javascript
import { verifyCaptcha } from '@sctg/turnstile-vue3';
addEventListener('fetch', (event) => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
const { url, method } = request;
if (method === 'POST' && url.pathname === '/verify-captcha') {
const { token } = await request.json();
const turnstileSecret = 'YOUR_TURNSTILE_SECRET';
try {
const data = await verifyCaptcha(turnstileSecret, token, request.ip);
if (data.success) {
return new Response('Captcha verified successfully', { status: 200 });
} else {
return new Response('Invalid captcha', { status: 401 });
}
} catch (error) {
return new Response('Error verifying captcha', { status: 500 });
}
}
return new Response('Method not allowed', { status: 405 });
}
```
### API
The `Turnstile` component has the following props:
* `siteKey`: The site key for your Turnstile account.
* `modelValue`: The initial value for the Turnstile token.
* `resetInterval`: The interval (in milliseconds) before the Turnstile is reset. Default is 295000 (5 minutes).
* `size`: The size of the Turnstile widget. Can be one of the following:
* `normal`: The default size.
* `flexible`: A flexible size that adapts to the container.
* `compact`: A compact size that is smaller than the default size.
* `theme`: The theme of the Turnstile widget. Can be one of the following:
* `light`: A light theme.
* `dark`: A dark theme.
* `auto`: Automatically detects the theme based on the surrounding environment.
* `language`: The language of the Turnstile widget. Can be one of the following:
* `auto`: Automatically detects the language based on the surrounding environment.
* A valid language code (e.g., `en`, `fr`, `es`, etc.).
* `action`: The action that the Turnstile widget is verifying. Can be any string.
* `appearance`: The appearance of the Turnstile widget. Can be one of the following:
* `always`: Always shows the Turnstile widget.
* `execute`: Shows the Turnstile widget only when the user interacts with the element.
* `interaction-only`: Shows the Turnstile widget only when the user interacts with the element, and hides it when the interaction is completed.
* `renderOnMount`: Whether to render the Turnstile widget when the component is mounted. Default is `true`.
* `v-model`: A two-way binding for the Turnstile token.
The `Turnstile` component emits the following events:
* `update:modelValue`: Updates the `modelValue` prop with the new Turnstile token.
* `complete`: Emitted when the Turnstile challenge is completed successfully.
* `error`: Emitted when an error occurs.
* `unsupported`: Emitted when the Turnstile widget is not supported.
* `expired`: Emitted when the Turnstile widget has expired.
* `before-interactive`: Emitted when the Turnstile widget is about to become interactive.
* `after-interactive`: Emitted when the Turnstile widget becomes interactive.
## License
This project is licensed under the AGPLv3 license.
## Contributing
Contributions to this library are welcome! Please open an issue or submit a pull request for any changes you'd like to make.
## Disclaimer
This library is not affiliated with Cloudflare. It's just a convenient wrapper around the Turnstile API.