|
1 | | -<!-- default badges list --> |
2 | | - |
3 | | -[](https://supportcenter.devexpress.com/ticket/details/T1298864) |
4 | | -[](https://docs.devexpress.com/GeneralInformation/403183) |
5 | | -[](#does-this-example-address-your-development-requirementsobjectives) |
6 | | -<!-- default badges end --> |
7 | | -# DevExpress Blazor - How to add the Google reCAPTCHA tool to a project and use it with DevExpress Editors |
8 | | - |
9 | | -This example demonstrates how to implement Google reCAPTCHA with the Blazor DevExpress components. |
10 | | - |
11 | | - |
12 | | - |
13 | | -## Implementation Details |
14 | | - |
15 | | -1. Register your website with the [Google reCAPTCHA](https://www.google.com/recaptcha/admin/create) service to obtain a site key and secret key. |
16 | | -2. Create a reusable [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) that loads the Google reCAPTCHA API and renders the captcha widget using JavaScript interop. |
17 | | -3. Handle the success and expiration callbacks in the [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) to verify the captcha response with Google’s verification service. |
18 | | -4. Insert the captcha widget into your form layout and pass the site key and secret key as parameters. |
19 | | -5. Bind the component’s success and expiration events to local flags to track the captcha status. |
20 | | - |
21 | | -Note: The solution reads the site key and secret key from environment variables: `RECAPTCHA_SITE_KEY` and `RECAPTCHA_SECRET_KEY`. If these variables are not set, the application throws an exception to clearly indicate the missing configuration. |
22 | | -You can adapt the implementation to retrieve the keys from other sources, such as appsettings.json or directly from the configuration file, based on your project requirements. |
23 | | - |
24 | | -## Files to Review |
25 | | - |
26 | | -- [ReCaptchaComponent.razor](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) |
27 | | -- [Index.razor](./CS/ReCaptcha/Components/Pages/Index.razor) |
28 | | - |
29 | | -## Documentation |
30 | | - |
31 | | -- [reCAPTCHA Documentation](https://developers.google.com/recaptcha/intro) |
32 | | - |
33 | | -## Does this example address your development requirements/objectives? |
34 | | - |
35 | | -[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=use-recaptcha-with-devexpress-blazor&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=use-recaptcha-with-devexpress-blazor&~~~was_helpful=no) |
36 | | - |
37 | | -(you will be redirected to DevExpress.com to submit your response) |
38 | | -<!-- feedback end --> |
39 | | -<!-- feedback --> |
40 | | -## Does this example address your development requirements/objectives? |
41 | | - |
42 | | -[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=use-recaptcha-with-devexpress-blazor&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=use-recaptcha-with-devexpress-blazor&~~~was_helpful=no) |
43 | | - |
44 | | -(you will be redirected to DevExpress.com to submit your response) |
45 | | -<!-- feedback end --> |
| 1 | +<!-- default badges list --> |
| 2 | + |
| 3 | +[](https://supportcenter.devexpress.com/ticket/details/T1298864) |
| 4 | +[](https://docs.devexpress.com/GeneralInformation/403183) |
| 5 | +[](#does-this-example-address-your-development-requirementsobjectives) |
| 6 | +<!-- default badges end --> |
| 7 | +# DevExpress Blazor - How to add the Google reCAPTCHA tool to a project and use it with DevExpress Editors |
| 8 | + |
| 9 | +This example demonstrates how to implement Google reCAPTCHA with the Blazor DevExpress components. |
| 10 | + |
| 11 | + |
| 12 | + |
| 13 | +## Implementation Details |
| 14 | + |
| 15 | +1. Register your website with the [Google reCAPTCHA](https://www.google.com/recaptcha/admin/create) service to obtain a site key and secret key. |
| 16 | +2. Create a reusable [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) that loads the Google reCAPTCHA API and renders the captcha widget using JavaScript interop. |
| 17 | +3. Handle the success and expiration callbacks in the [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) to verify the captcha response with Google’s verification service. |
| 18 | +4. Insert the captcha widget into your form layout and pass the site key and secret key as parameters. |
| 19 | +5. Bind the component’s success and expiration events to local flags to track the captcha status. |
| 20 | + |
| 21 | +Note: The solution reads the site key and secret key from environment variables: `RECAPTCHA_SITE_KEY` and `RECAPTCHA_SECRET_KEY`. If these variables are not set, the application throws an exception to clearly indicate the missing configuration. |
| 22 | +You can adapt the implementation to retrieve the keys from other sources, such as appsettings.json or directly from the configuration file, based on your project requirements. |
| 23 | + |
| 24 | +## Files to Review |
| 25 | + |
| 26 | +- [ReCaptchaComponent.razor](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) |
| 27 | +- [Index.razor](./CS/ReCaptcha/Components/Pages/Index.razor) |
| 28 | + |
| 29 | +## Documentation |
| 30 | + |
| 31 | +- [reCAPTCHA Documentation](https://developers.google.com/recaptcha/intro) |
| 32 | + |
| 33 | +## Does this example address your development requirements/objectives? |
| 34 | + |
| 35 | +[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=use-recaptcha-with-devexpress-blazor&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=use-recaptcha-with-devexpress-blazor&~~~was_helpful=no) |
| 36 | + |
| 37 | +(you will be redirected to DevExpress.com to submit your response) |
| 38 | +<!-- feedback end --> |
| 39 | +<!-- feedback --> |
| 40 | +## Does this example address your development requirements/objectives? |
| 41 | + |
| 42 | +[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=use-recaptcha-with-devexpress-blazor&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=use-recaptcha-with-devexpress-blazor&~~~was_helpful=no) |
| 43 | + |
| 44 | +(you will be redirected to DevExpress.com to submit your response) |
| 45 | +<!-- feedback end --> |
0 commit comments