From b014148c315645c4bb0ba4087f6481b75c1e709f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=96=9F=E9=85=8C=20=E9=B5=AC=E5=85=84?= Date: Fri, 15 Nov 2024 08:23:32 +0800 Subject: [PATCH] Upgraded to Recaptcha v3 --- botanjs/src/Astro/Blog/Components/Comment.js | 114 +++---------------- botanjs/src/Astro/Blog/Layout/MainFrame.js | 76 ++++++------- botanjs/src/externs/_3rdParty_.Recaptcha.js | 9 +- 3 files changed, 51 insertions(+), 148 deletions(-) diff --git a/botanjs/src/Astro/Blog/Components/Comment.js b/botanjs/src/Astro/Blog/Components/Comment.js index 8c84620..463fa66 100644 --- a/botanjs/src/Astro/Blog/Components/Comment.js +++ b/botanjs/src/Astro/Blog/Components/Comment.js @@ -30,6 +30,7 @@ /** @type {_3rdParty_.Recaptcha} */ var Recaptcha; + var RECAPTCHA_SITE_KEY = null; /** @type {_AstConf_.UserInfo} */ var currentUser = Conf.get( "UserInfo" ); @@ -84,7 +85,6 @@ // If nameField exists, we assume logged in , loggedIn = !nameField - , contentHadHaveText = false , commentInput = function () { @@ -137,7 +137,6 @@ if( rf && rf.hasChildNodes() ) { // if capcha opened - closeCaptcha(); hideSubmit(); Cycle.delay( function() { closeInputPanel( reviveInputpanel.bind( c_reply.parentNode.parentNode ) ) @@ -188,7 +187,6 @@ // Create capcha if(!fieldReady && contentHaveText && nameHaveText) { - createCaptcha(); // show submit button showSubmit(); fieldReady = true; @@ -243,12 +241,13 @@ if( getFieldsValidated( p ) ) { popBubble(); - captcha_wrapper.readOnly = true; - - closeCaptcha(); - // Post the data, bind obj to Handler - postData( Config.processor, p, commentSuccess.bind(p), commentFailed ); - + Recaptcha.execute( RECAPTCHA_SITE_KEY, { "action": "submit" } ) + .then(function( token ) + { + p[ "token" ] = token; + // Post the data, bind obj to Handler + postData( Config.processor, p, commentSuccess.bind(p), commentFailed ); + }); } else { @@ -340,7 +339,6 @@ if(obj.reload) { // reload the recaptcha - createCaptcha(); Cycle.delay(showSubmit, 1500); // Wrong answer. @@ -368,7 +366,6 @@ else { // reload the recaptcha - createCaptcha(); Cycle.delay(showSubmit, 1500); Cycle.delay(function (){cBubble.blurp();}, 500); @@ -390,7 +387,7 @@ , captchaKey = new EventKey("KeyDown", function(e) { if(e.keyCode == 13) submitComment(); }) - , _showSubmit = function () + , showSubmit = function () { // prevent multiple prop assign if( !submit_button.hasListener( submitKey ) ) @@ -402,7 +399,7 @@ submit_button.addEventListener( submitKey ); } - , _hideSubmit = function () + , hideSubmit = function () { // prevent multiple prop assign if( submit_button.hasListener( submitKey ) ) @@ -414,21 +411,6 @@ submit_button.removeEventListener( submitKey ); } - , showSubmit = loggedIn - ? /* Overload */ _showSubmit - : /* Overload */ function () - { - _showSubmit(); - captcha_wrapper.addEventListener(captchaKey); - } - , hideSubmit = loggedIn - ? /* Overload */ _hideSubmit - : /* Overload */ function () - { - _hideSubmit(); - captcha_wrapper.removeEventListener(captchaKey); - } - , __createContentText = function( text ) { var e = wrapc( "c_text", text ); @@ -514,54 +496,9 @@ }.bind(c_stack), 600); } - //// Captcha - , createCaptcha = loggedIn - ? function() {} - : function () - { - // Remove capcha - Dand.id( "recaptcha_field", true ).clear(); - try - { - Recaptcha.render( "recaptcha_field", { - "theme": "light" - , "sitekey": Config.siteKey - } ); - } - catch( ex ) { } - - openCaptcha(); - } - - , openCaptcha = loggedIn - ? function() {} - :function () - { - var rf = Dand.id( "recaptcha_field" ); - - var k = function () { - return ( 0 < this.a.clientHeight ); - }.bind({ a: rf }); - - Trigger.register( - k , function() { - captcha_wrapper.style.height = rf.clientHeight + "px"; - } - , 50 ); - } - - , closeCaptcha = loggedIn - ? function() {} - :function () - { - captcha_wrapper.style.height = "0"; - } - - - // Validation , fields = loggedIn ? ["content"] : [ "content", "name", "email", "website", "email_notify" ] - , _getFieldsValidated = function (obj) + , getFieldsValidated = function (obj) { var name, field, falsefield, f; @@ -631,29 +568,6 @@ return true; } - , getFieldsValidated = loggedIn - ? /* Overload */ _getFieldsValidated - : /* Overload */ function(obj) - { - var f = Dand.id("false_capcha"); - f.style.height = 0; - // get the response field - if(!( obj["recaptcha_response_field"] = Recaptcha.getResponse().trim() )) - { - Cycle.delay( - function() - { - this.innerHTML = "You need to prove that you are a human"; - this.style.height = elmH; - }.bind(f) - , 500 ); - } - // get the challenge field - // else obj["recaptcha_challenge_field"] = Recaptcha.get_challenge(); - - return _getFieldsValidated(obj); - } - , showReplyButton = function () { this.style.width = "1.2em"; @@ -708,6 +622,7 @@ var limit = 5; var i = 0; var reUUID = Perf.uuid; + RECAPTCHA_SITE_KEY = Dand.id( "recaptcha-js" ).src.split( "?render=" )[1]; Cycle.perma( reUUID, function() { @@ -717,7 +632,7 @@ if( mesg.length ) mesg[0].style.display = "block"; } - if( Recaptcha = window["grecaptcha"] ) + if(( Recaptcha = window["grecaptcha"] )) { Cycle.permaRemove( reUUID ); debug.Info( "Recaptcha instance is up" ); @@ -725,6 +640,9 @@ } , 500 ); } + + Cycle.next( nameInput ); + Cycle.next( commentInput ); }; Bootstrap.regInit( init ); diff --git a/botanjs/src/Astro/Blog/Layout/MainFrame.js b/botanjs/src/Astro/Blog/Layout/MainFrame.js index d5ef45a..1dffd6d 100644 --- a/botanjs/src/Astro/Blog/Layout/MainFrame.js +++ b/botanjs/src/Astro/Blog/Layout/MainFrame.js @@ -158,6 +158,7 @@ /** @type {_3rdParty_.Recaptcha} */ var Recaptcha; + var RECAPTCHA_SITE_KEY = null; if( !cBubble ) { @@ -168,36 +169,35 @@ var i = 0; var errMesg = Dand.id( "contact-errmesg" ); - var submitMessage = function( action, name, email, mesg ) + var submitMessage = function( action, data ) { - postData( action, { - "name": name, "email": email, "mesg": mesg - , "recaptcha_response_field": Recaptcha.getResponse().trim() - } - , function ( e ) { - doCollapse(); + postData( + action, data + , function ( e ) { + doCollapse(); - if( e.status ) - { - // pop message - cBubble.setColor( "cornflowerblue" ); - Cycle.next( function () { cBubble.pop( "Message sent" ); } ); + if( e.status ) + { + // pop message + cBubble.setColor( "cornflowerblue" ); + Cycle.next( function () { cBubble.pop( "Message sent" ); } ); - // blurp after 1 sec - Cycle.delay( function () { cBubble.blurp(); }, 3500 ); + // blurp after 1 sec + Cycle.delay( function () { cBubble.blurp(); }, 3500 ); + } } - } - , function( err ) - { - errMesg.innerHTML = "Error occurred"; - - if( !err.status ) + , function( err ) { - errMesg.innerHTML = err[ "mesg" ]; - } + errMesg.innerHTML = "Error occurred"; - errMesg.removeAttribute( "data-disabled" ); - } ); + if( !err.status ) + { + errMesg.innerHTML = err[ "mesg" ]; + } + + errMesg.removeAttribute( "data-disabled" ); + } + ); }; mesgform.addEventListener( "Submit", function( e ) { @@ -223,24 +223,16 @@ return; } - submitMessage( action, name, email, mesg ); - - } ); - - var CaptchaReady = function() - { - captcha.clear(); - try - { - Recaptcha.render( "contact-recaptcha", { - "theme": "light", "sitekey": sitekey + Recaptcha.execute( RECAPTCHA_SITE_KEY, { "action": "submit" } ) + .then(function( token ) { + submitMessage( action, { + "name": name + , "email": email + , "mesg": mesg + , "token": token + }); } ); - } - catch( ex ) - { - debug.Error( ex ); - } - }; + } ); Cycle.perma( reUUID, function() @@ -253,8 +245,8 @@ if( Recaptcha = window["grecaptcha"] ) { + RECAPTCHA_SITE_KEY = Dand.id( "recaptcha-js" ).src.split( "?render=" )[1]; Cycle.permaRemove( reUUID ); - CaptchaReady(); } } , 500 ); diff --git a/botanjs/src/externs/_3rdParty_.Recaptcha.js b/botanjs/src/externs/_3rdParty_.Recaptcha.js index e4c340c..14c2bcb 100644 --- a/botanjs/src/externs/_3rdParty_.Recaptcha.js +++ b/botanjs/src/externs/_3rdParty_.Recaptcha.js @@ -1,12 +1,5 @@ /** @constructor */ _3rdParty_.Recaptcha = function() {}; -/** @type {Number} */ -_3rdParty_.Recaptcha.timer_id; - /** @type {Function} */ -_3rdParty_.render; -/** @type {Function} */ -_3rdParty_.reset; -/** @type {Function} */ -_3rdParty_.getResponse; +_3rdParty_.execute;