From 592e758b24a122cb6e7d40ea7638b3c9ed670b1e Mon Sep 17 00:00:00 2001 From: Elena Khamlyuk Date: Thu, 21 Aug 2025 16:51:29 +0300 Subject: [PATCH 1/5] update readme --- README.md | 29 +++++++++-------------------- Sample.png | Bin 8854 -> 0 bytes result.png | Bin 0 -> 8638 bytes 3 files changed, 9 insertions(+), 20 deletions(-) delete mode 100644 Sample.png create mode 100644 result.png diff --git a/README.md b/README.md index 03b35c3..dbe0b6d 100644 --- a/README.md +++ b/README.md @@ -4,38 +4,27 @@ [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) -# DevExpress Blazor - How to add the Google reCAPTCHA tool to a project and use it with DevExpress Editors +# DevExpress Blazor Data Editors - Incorporate Google reCAPTCHA tool -This example demonstrates how to implement Google reCAPTCHA with the Blazor DevExpress components. +This example incorporates Google reCAPTCHA into DevExpress Data Editors. Refer to official Google documentation for detailed information on this component: [reCAPTCHA - Developer's Guide](https://developers.google.com/recaptcha/intro). -![Sample](./Sample.png) +![Sample](./result.png) ## Implementation Details -1. Register your website with the [Google reCAPTCHA](https://www.google.com/recaptcha/admin/create) service to obtain a site key and secret key. -2. Create a reusable [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) that loads the Google reCAPTCHA API and renders the captcha widget using JavaScript interop. -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. -4. Insert the captcha widget into your form layout and pass the site key and secret key as parameters. -5. Bind the component’s success and expiration events to local flags to track the captcha status. +1. Register your website in the [Google reCAPTCHA](https://www.google.com/recaptcha/admin/create) service to obtain site and secret keys. +2. Create a reusable [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) that loads Google reCAPTCHA APIs and renders the widget via JavaScript interop. +3. Handle success and expiration callbacks in the [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) to verify the captcha response with the Google verification service. +4. Add a [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) to a Form Layout component. Bind site and secret keys to the component. +5. Bind captcha success and expiration events to a flag variable to track the captcha status. -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. -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. +Note: This solution obtains keys from the following environment variables: `RECAPTCHA_SITE_KEY` and `RECAPTCHA_SECRET_KEY`. If these variables are not set, the application throws an exception to indicate missing configuration. Based on your requirements, you can adapt our implementation to retrieve keys from other sources, such as _appsettings.json_ or a configuration file. ## Files to Review - [ReCaptchaComponent.razor](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) - [Index.razor](./CS/ReCaptcha/Components/Pages/Index.razor) -## Documentation - -- [reCAPTCHA Documentation](https://developers.google.com/recaptcha/intro) - -## Does this example address your development requirements/objectives? - -[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=use-recaptcha-with-devexpress-blazor&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=use-recaptcha-with-devexpress-blazor&~~~was_helpful=no) - -(you will be redirected to DevExpress.com to submit your response) - ## Does this example address your development requirements/objectives? diff --git a/Sample.png b/Sample.png deleted file mode 100644 index 2719f4c9696cef81b435e95822fd01b662635dd7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8854 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 diff --git a/result.png b/result.png new file mode 100644 index 0000000000000000000000000000000000000000..2003aa67b19619e11ce6dcb9f44448ddec86b5f9 GIT binary patch literal 8638 zcmdUVby!tx_a=ydGzXCmIY_6Xbg6)}poDaTba#o=0i>l%rKGz{ICO~AIl!UwMWj5W z)I7ZNo8R@$d^6w7A9G!E%^xSOz4x>Cde&O^z3%5(J3>wM1ra_CJ_ZH`k%GL;D+~$qZI5O?2vFq625X~98UHw6`0+^sw0gipv6ahSX@Fz#b0 z$UN2X%G{av_0pL7d~&d-%$vxh?ZOrW8+kCN-u*7_v2F-+S^N9Qe6GmDGrUZpYX_r^==JNNM zFxiHQFC<43!_ALpZ7XI%&Z-cGzV=E10qsFB7z{73pa5fO@cT2dL ze2Ey+FboKL8jJ&BVA$O*fWZ#MuCA_RWMqu1-mvpYP1p->rB7Jc*tr>2b8$kU5(Gp< z`Bh^xJ077E7A`IGZ^}gNp-`jHDVw&nC%*oJkuca6d!~#`w;Q=C6lyAp&jx`!qz_Gm z!BS)Xo=%_baxD*6c4OmrBOMfP-3vV1iPZ=tBPC}cmPn)}DP>CM>@L3k8^mj*V6{(E z4j31!?W-E|OJ6lhbn8r4Aiqz-sq%x78?`Cwv}e4_kWtKf%tLkOjm)@3t+tHJ@IW8j zC-hw~PX?cA;Y!`m^dnasfr@}!U{Rl6z=*Zmv5TdHjz=e{KAxVC^zlRuAA4JLY0UF* z`taKg7VZKv)1rQCa0SmoP31rKhT@$C~PD74-EUf2=uLvkdqHDpF$(R6E;jQxs>7T=1$ zWyst%V;QN1%;fQ3^npN{{*-s2GYcv=CKV8e8b7zzxwFvPh+Q3=nI?n7X2mxd*}d7n z5;JX3jlk9U3yzgA*lFr0n~c{3|HLzHv#n%mb5D`m+TXID;jYr}NI9ChR`{rAyiml4KjMR^sK19!1M(XFlGaM7zLWvk45Av+z6@zrZ(hpCs+ie3qQ`0X4BP03wJw0U&1rTcLt!>r_*dc9F zQj*_q1>S&wtGxVtcRkf*w=|I4m8hMywY5r@b*{;&sk3GUDD+YeK;d~fvBmCOQ%Gp& z-&bO@zRVt88%X@y4BO;#k$;-_KTY6&;_<(q(Z9QVQ^X+X{|avN9CE@+{@<7tPyq<0L}uEgI}Cqs&BhGEDGaTEWB0SmJ77 z^o8{`>;va}Am#sPF-kl#1E=_y?Z4|5>^bSzy6b6)yVkpTnOF)~jUWm&*ju1|ZRsf` zrgj$!3@d9lV1imhGDMF)gjKTp;^=MEj+SS@v&Xa-T;Fq)4j8B|WX9B7lgk5;Wc}|E zZf!5|Kd}1$3>3VHQ#L(29_P)};I8SYonD(A$@ic%4OkL{{{GJ(x%9h$B)$v3{+H9c)(}j>noY=?ORw_cmxD2;^K5AQ;|72j8|7a zrCHS8>yG)w#gV^9TEs;MF0JF!1`GTOuvC#Z6p70 z+3@da3b8{PZ`hJhgrtbdC((r>MM1Sb>|b|@uc?W+`y|Nt-P3K#oj@A;cE|ILH8w^F z?cKq@ChxF*h-Q*xy)7kG(xvDl3p9#E^&9RFk)qEXOxV|>KWD$Y#s8rk>*tT%+}bzK zye|2kzDw#n@L_}G>YT0hV)iKwZAQx+atBdN^u>uR-mrScZcf~ff8v$RJ{;Ta zuP5%y7otTfwAJU=bDaKhpC;qtYjKTBeXruVI4=Ax<3f#3IZu|Y22{Zc zh_0r*)q5kq#63D+^k8?IKS{4TpL&fXTlT)}$qAs>j(R$9P~%ry_(5fFYSrb;q;vl^ zus=b9zbSwtQzlO@%w&J2inaLr4BrCc*eW%UhlH4qNw_~}aj!vbmk{^9s3=X#yy|$I zOm9qkP!*h{YNakQv-oX?^wh0WOnQgGsmCtXK(WRct2U)d&tSY2zT|ORqXA~o-)1P zM^rECL*s847!K5F-OR~k0U5LyZtZdw4X7rQ{`;o6iXzSh*zihYDhl4r-9o+0+kV1H zerDhI&c#zPz(ZzI(dUv{19hG|+k~5y+vmVT&T;FT#A^(<$7uk}3c0nix7Y-~NKn%xC$3;=N)Xms^aPD5++}teMoIbG0zOdjm zqAPbK%2#DFx7M@i`ZRIG)>OWgo(OXr;3xc!2u96^jE#R-b_lCaq9wfl!={IVN?B>> zEQzrcfza$j1>=4CTAR)mc77D#Dvnm0kt#dwHn;#nH4~J;M-9Sm)M6 z;Y?PBl8VZR=G&}8EBr!3-6~UTF0ImicLBfM<#0xXHz|pflvHF?6bF}>_rP+;vGJdk zsNhNDl=IRz%;J)g3R9*04s~Jo-171m>xqK2-C(c1g*IV2;^W=HZ92$(Nw;Y%6n=?pfCOG)XQsj;%Qv9W10LGBb36-5*ma}qOLBw*nZFS*o7rni0m z90X)B_D44*P{MX20g+(Wwq$QA$?R(vs8FrJ0$TA!HDz${6X*@?038H1g}bI73&>*n#C)rR7LE z@3qO^d`rr~YF~}Vj_&9cdUN#Tf@GYZu-;*Qus@y|T={`cB;jPim*g$IZsucaG8PsV z<@CozLxu*ft^#~*hh)yq&eL{+z0tIN?f&P@elK_Iy?+)J0`1(2{w`KqTU+TcFZvQS zJ~1KUv?N`434GcFPJkN&yHd;a8hq+CwX}YpuEv@*psG+i+=i{GKY!W`4i3sID44AF zM%&Fb#((@s4i1!`?maJ;Y(UMIr1`qLyK87@sHv+zH83zp>AYRmvAy{{Yjxt~iMnZ^|9q*uYs?G7lJa^6e zua0<7wB{ZNHF>zLVzh|-!nxn_QR!qd7Q2RM`j8;zXuU^+RXB-_C{M~ z2VQwEc&!qFG-w3QO?zmD6B-(t?JwxKF#P(Zgsg=HOB5xa<-tl1orKTFjSWi*KEvTO z0V{S+&M#o`{r>$e2LD6#FS)rK?Ci!1t=_{KLb2c=4iU{-Xa`XfO{OXvMbvu2iTIJ_ ztao4a=C))Z9+?XybmHC}0)kassZ&f4Hju6$1$w5d%+8J*I#isT_!|}jZr1K}l75Xt zmx&1pUdJ<55s{ImlV8=9v&GXSe2$owAk|MO9T*>-E(+ov_opmr|D>EryaIw6scgcHDfe z`?qoe{%py%@oh=z>gviXE1O@O9)yI1c=@PN1{`Vm>cBA?Q1^v}Q$b-k)`dGl)-bUDg9(eV>J;N5D-8 zBs`F3;wTjAGgIr;z`6^BlCp1q84gy6OJE$J#Xpg|n$7&(`sJ1&mW^i{8GL_E?tgLm ziTgcE47puh(f)^X8&S3zOd|Ph%dOgVQ}xT2FYV(8v@|s3UW>`e6g0H79peW*LZw<< z#Nolq@bJ6jSzJoB!d6h#BYXx;% ze*91~H8T@a`2==~KGoKKyg6mKecG`BhzuVe{|*U>)sIh4GbMbJ!S<0?eU6ALjx;jm z4^vdnGdH(GS)u7!JHc14UNx>K>%pR;;Oj2SZlW!vxn@qF)Q`>0DeLRgSzB9!J*{IO zO}wTnU|qLq6@TEB-_^yY6neL1Z+vcUIGIQ96l6;O4V%5;?(Xd+BPEsA(a}kP`>Cs| zw;mz%$SEjZy?N6=p06b0du&$`!$?Nf^&XqxO`XlX^W&Y|s;c;@679sCoKcXx66=Ou z%h-VP6#e}rY!Rh5Y4$>YHsR=_ePo(m5>9SS?>qT`%j)EC9=JI z1xU!%wZ>C5^Du2UtoZWs5{L_v8_1;cV}`?@ei{igp(>MLPKmNiAxIetMeVSHn!mPY z?$BZn&3zHe%F2op7&t!wou6(9q7M!Z#7~!k z=K`-UZz2M$_nf`nD$F@nHibn*EFbhSZUUldV@S`C@Djdfa2rYx6p9ndq1*Y z{Biv7pF4g3x+Xle<2;LFdd|+laWGu4y=@jDzXvLzVc?~^o$78^v(u7__CWxtAcXIy-Nsd7%i+|{V$Bj>T@3H>JO%ONX|oG-&h-N} zw(#_H8aiU!Sg9-F&d$zK-MYy0y^b6ZD-0J`*O@k7p_?;5d<6EQ_}b-td_<|KskK)> z!bncJGdD&qc`Gg*p666FC8wtLw>B;AOqjv+l@@%qc>o=kXjk;^c+}WTaY|mDnmu~- z$f-&H7bv|;OUA_XqTP+otK#Pp2iqQ#Z-1?*utJpTD5pIN9Up(i;J5#D^iqmM;xNw2zZ)FD zVDMVP^w^p084+5XTjwNmXlOyPM1OKmD?>SUWOaATV6-1ZJMPz2_?Pt^(}s2K&bKse zX8YdMQ40%;IVU(#ia$g5MeVbYes@+5j))fw-XVj7iZ?}0U{w4$*h>RgGx_Vs=Sd{e zQ@8J-pdbS69}pnfFy}(>JdAKTH&$|GvgmbpUmw=~?;$>{GPqB}f)CefU+i8zQGR|t z09Ys5RZWc)9!8Y=`7>tW#6ZocB&z5lPa*LgqK-}vlm%7QUYok#GgdhqndR#EZ1LO5 z&z{{13JS`8Q7e8l`C58g)MsmJ>ozVfp#PU(WsCtxy#SCyf4_Xas0Nhy!KR3}V@_YB<j<3}Y<=46qX7?Rf)u2-Ox9$cO8VU-c!TUlEE z^j1UO4^8ZM=VWJxfjnaH`HKm#=Zyqe`W8e^NeQ&jUZvCWGkspline1Kz$XRO)nwuD z&fn`pn8Mz_A2_z3v4Y)z6#rj@f800CpQG4bYdNVOG@%i)TSSNF?BqJju;=lWu#X;76 zpnCW|;x5~bpS-nFaA7eqz-umte~k@EdVorvmX^k?SN|cL!3W0IagpGS-Y{^<{|yQ| zD7=8f(XAfn5uqATJRBGcI4)C0DFW_64({<>*r@8BYJv`g%0D^~|J+J&%K@JG1O)Fr zE-fz#leYb^8F)AeIyUek7%j#0MUHq@bXHG3Smnc>MUW7lkDV?|KAVHpZvw>I4Ag1VA5P4&G<$ zDb$bOl45v!dxLEqcl-k2CF7bIFQ6fLXUdP=(HJ27U(3qY>roD?`6-4_aq&z5znCO0 zZI_dI&l=}dx%Q(nM|B+?1#4@Lv9YmI{iatEm9}v{s!(J^4BY1jjUZ(;YDY#+?l)NU zJo5kJ2K>#z!(*{Nm}ECwyY;0SK&>z@F9gW+N1nTLs;Crhovs8HB_F$#d568)AKO52 z_#OpVe$P~}v}7Gh;bQ~B2hIPiNf2~!^6rA-2Oc~yFaTCAzX5SYWQlo_(bJD)ins#p zuz%PN zYBT^I%fZdPR^GDv+x@kVitTn+#(_~=*njh z$5*5Ots92qiRxL|W|bFeB~t}lpndq&5)xlh24D}W7!+%!G1@86 zB8ceimE+{(yn~0=X;a7fNqLy-F0=~{|5{%DxwKSSf*ta(3=9Q>fc$}*RvFj*91PO| zw*kTo0$B#V0#m9mp<;5#LG!Wn&(p%xMD4DD(NPj09M7V(q$6N6wSkiEgsh>7-eAzh zrF+Xq&^(I8(U<*S_rdyMERHmU8e28(J18AatWG}} zXJ;mNAC8T+JH&u3^`)fjiJX%Zbk-BxY4<$cPPd?+IFv0h8aD?{(N`{iHx-Tc6@}Xl z4XcETn>Mz@ffHl2yS9D|_&92~j!bxyLAK~CLS9GL^w3V}qusJ)WPD!K9Q~WV-+!IJ zYTbHNdt{y--37AkV2#%g$AZ3QY{r>%V z=si4*d5Sq7*hlhWL+Zg}p?cR*Tz`L4V1QA34r$d1DWCt?JJ)a00mqJMYuDxv2*~(4 z()T|fDBDZIM-BN_F7f3RskKwG z*y<;}5%X$Sq!hdP@?uF5PH}8<<$ig-jfRmHuj#!-P zeOmSIv1hy4&-QAonvP=k`{lE<=;h`P_`K}GJ&P$I@lj{(n{LH;g%Tk}tE*ndesrFT zZ}b10a$H?@w400VZ)~g}@CcoqFMf#yD{z*5DcKy*qSSEl`HQGk*o@SyD_x|vFfM%Y zkk_Ja zU*8>z|MtJ3!nIrf(p�NgOB&hhlFzleK+DKY)&l8R8XAo*MrXyA!bm?scEy^yN1d zWb!-#m7aWvUOp;)sC=O-yzH^ahqPi{_6TGR;K@YR^g4}BQ~d`k=q4yL(vJWxStwQo tNo$r4IQ>80PY6dO8Owq${K_@fxwYHvHwRTk;N1%h1zA;@@@K~H{|mDJ>Qw*$ literal 0 HcmV?d00001 From 5f4848eb2b3304c3da0920e31127355e4de4b966 Mon Sep 17 00:00:00 2001 From: DevExpressExampleBot Date: Thu, 21 Aug 2025 17:55:02 +0400 Subject: [PATCH 2/5] README auto update [skip ci] --- README.md | 70 +++++++++++++++++++++++++++---------------------------- 1 file changed, 34 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index 5d7c928..b4747e9 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,37 @@ - -![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/1015194452/25.1.3%2B) -[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1298864) -[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) -[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) - -# DevExpress Blazor Data Editors - Incorporate Google reCAPTCHA tool - -This example incorporates Google reCAPTCHA into DevExpress Data Editors. Refer to official Google documentation for detailed information on this component: [reCAPTCHA - Developer's Guide](https://developers.google.com/recaptcha/intro). - -![Sample](./result.png) - -## Implementation Details - -1. Register your website in the [Google reCAPTCHA](https://www.google.com/recaptcha/admin/create) service to obtain site and secret keys. -2. Create a reusable [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) that loads Google reCAPTCHA APIs and renders the widget via JavaScript interop. -3. Handle success and expiration callbacks in the [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) to verify the captcha response with the Google verification service. -4. Add a [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) to a Form Layout component. Bind site and secret keys to the component. -5. Bind captcha success and expiration events to a flag variable to track the captcha status. - -Note: This solution obtains keys from the following environment variables: `RECAPTCHA_SITE_KEY` and `RECAPTCHA_SECRET_KEY`. If these variables are not set, the application throws an exception to indicate missing configuration. Based on your requirements, you can adapt our implementation to retrieve keys from other sources, such as _appsettings.json_ or a configuration file. - -## Files to Review - -- [ReCaptchaComponent.razor](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) -- [Index.razor](./CS/ReCaptcha/Components/Pages/Index.razor) - -## Documentation - -- [reCAPTCHA Documentation](https://developers.google.com/recaptcha/intro) - - - + +[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1298864) +[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) +[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) + +# DevExpress Blazor Data Editors - Incorporate Google reCAPTCHA tool + +This example incorporates Google reCAPTCHA into DevExpress Data Editors. Refer to official Google documentation for detailed information on this component: [reCAPTCHA - Developer's Guide](https://developers.google.com/recaptcha/intro). + +![Sample](./result.png) + +## Implementation Details + +1. Register your website in the [Google reCAPTCHA](https://www.google.com/recaptcha/admin/create) service to obtain site and secret keys. +2. Create a reusable [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) that loads Google reCAPTCHA APIs and renders the widget via JavaScript interop. +3. Handle success and expiration callbacks in the [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) to verify the captcha response with the Google verification service. +4. Add a [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) to a Form Layout component. Bind site and secret keys to the component. +5. Bind captcha success and expiration events to a flag variable to track the captcha status. + +Note: This solution obtains keys from the following environment variables: `RECAPTCHA_SITE_KEY` and `RECAPTCHA_SECRET_KEY`. If these variables are not set, the application throws an exception to indicate missing configuration. Based on your requirements, you can adapt our implementation to retrieve keys from other sources, such as _appsettings.json_ or a configuration file. + +## Files to Review + +- [ReCaptchaComponent.razor](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) +- [Index.razor](./CS/ReCaptcha/Components/Pages/Index.razor) + +## Documentation + +- [reCAPTCHA Documentation](https://developers.google.com/recaptcha/intro) + + ## Does this example address your development requirements/objectives? -[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=use-recaptcha-with-devexpress-blazor&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=use-recaptcha-with-devexpress-blazor&~~~was_helpful=no) +[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-data-editors-add-recaptcha&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-data-editors-add-recaptcha&~~~was_helpful=no) -(you will be redirected to DevExpress.com to submit your response) - +(you will be redirected to DevExpress.com to submit your response) + From dd4407b1a0ee90e2805b788b52fcfa50d805d015 Mon Sep 17 00:00:00 2001 From: Elena Khamlyuk <80813840+khamlyuk@users.noreply.github.com> Date: Thu, 21 Aug 2025 16:56:40 +0300 Subject: [PATCH 3/5] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index b4747e9..7a7bc0b 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ This example incorporates Google reCAPTCHA into DevExpress Data Editors. Refer to official Google documentation for detailed information on this component: [reCAPTCHA - Developer's Guide](https://developers.google.com/recaptcha/intro). -![Sample](./result.png) +![Data Editors Along With Captcha](./result.png) ## Implementation Details @@ -29,9 +29,9 @@ Note: This solution obtains keys from the following environment variables: `RECA - [reCAPTCHA Documentation](https://developers.google.com/recaptcha/intro) -## Does this example address your development requirements/objectives? - -[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-data-editors-add-recaptcha&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-data-editors-add-recaptcha&~~~was_helpful=no) - +## Does this example address your development requirements/objectives? + +[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-data-editors-add-recaptcha&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-data-editors-add-recaptcha&~~~was_helpful=no) + (you will be redirected to DevExpress.com to submit your response) From 4507e50711990ff5e20fdc0a10b2587e1c5f3c48 Mon Sep 17 00:00:00 2001 From: DevExpressExampleBot Date: Thu, 21 Aug 2025 18:01:27 +0400 Subject: [PATCH 4/5] README auto update [skip ci] --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 7a7bc0b..8972623 100644 --- a/README.md +++ b/README.md @@ -29,9 +29,9 @@ Note: This solution obtains keys from the following environment variables: `RECA - [reCAPTCHA Documentation](https://developers.google.com/recaptcha/intro) -## Does this example address your development requirements/objectives? - -[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-data-editors-add-recaptcha&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-data-editors-add-recaptcha&~~~was_helpful=no) - +## Does this example address your development requirements/objectives? + +[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-data-editors-add-recaptcha&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-data-editors-add-recaptcha&~~~was_helpful=no) + (you will be redirected to DevExpress.com to submit your response) From 4b3c34cb9a961f0dcc378af45f478dc6fd70aefc Mon Sep 17 00:00:00 2001 From: Elena Khamlyuk <80813840+khamlyuk@users.noreply.github.com> Date: Fri, 22 Aug 2025 08:47:56 +0300 Subject: [PATCH 5/5] Apply suggestions from code review Co-authored-by: Abadzhev --- README.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 8972623..181bb73 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,9 @@ # DevExpress Blazor Data Editors - Incorporate Google reCAPTCHA tool -This example incorporates Google reCAPTCHA into DevExpress Data Editors. Refer to official Google documentation for detailed information on this component: [reCAPTCHA - Developer's Guide](https://developers.google.com/recaptcha/intro). +This example incorporates Google reCAPTCHA into a Blazor Form Layout. The Form Layout contains DevExpress Blazor Data Editors, but no DevExpress-specific implementation is required. Integration steps are the same as they would be for an entry form with any data editor controls. + +Refer to official Google documentation for detailed information on reCAPTCHA: [reCAPTCHA - Developer's Guide](https://developers.google.com/recaptcha/intro). ![Data Editors Along With Captcha](./result.png) @@ -13,11 +15,11 @@ This example incorporates Google reCAPTCHA into DevExpress Data Editors. Refer t 1. Register your website in the [Google reCAPTCHA](https://www.google.com/recaptcha/admin/create) service to obtain site and secret keys. 2. Create a reusable [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) that loads Google reCAPTCHA APIs and renders the widget via JavaScript interop. -3. Handle success and expiration callbacks in the [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) to verify the captcha response with the Google verification service. +3. In [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) implementation, use Google reCAPTCHA API to handle success and expiration callbacks. Verify the captcha response with the Google verification service. 4. Add a [ReCaptchaComponent](./CS/ReCaptcha/Components/ReCaptchaComponent.razor) to a Form Layout component. Bind site and secret keys to the component. -5. Bind captcha success and expiration events to a flag variable to track the captcha status. +5. Handle success and expiration events to modify a flag variable (track the captcha status). -Note: This solution obtains keys from the following environment variables: `RECAPTCHA_SITE_KEY` and `RECAPTCHA_SECRET_KEY`. If these variables are not set, the application throws an exception to indicate missing configuration. Based on your requirements, you can adapt our implementation to retrieve keys from other sources, such as _appsettings.json_ or a configuration file. +Note: This solution obtains keys from the following environment variables: `RECAPTCHA_SITE_KEY` and `RECAPTCHA_SECRET_KEY`. If these variables are not set, the application throws an exception to indicate missing configuration. You can adapt our implementation to retrieve keys from other sources, such as _appsettings.json_ or a configuration file. ## Files to Review @@ -29,9 +31,9 @@ Note: This solution obtains keys from the following environment variables: `RECA - [reCAPTCHA Documentation](https://developers.google.com/recaptcha/intro) -## Does this example address your development requirements/objectives? - -[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-data-editors-add-recaptcha&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-data-editors-add-recaptcha&~~~was_helpful=no) - +## Does this example address your development requirements/objectives? + +[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-data-editors-add-recaptcha&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-data-editors-add-recaptcha&~~~was_helpful=no) + (you will be redirected to DevExpress.com to submit your response)