Jump to content
  • Sky
  • Blueberry
  • Slate
  • Blackcurrant
  • Watermelon
  • Strawberry
  • Orange
  • Banana
  • Apple
  • Emerald
  • Chocolate
  • Charcoal
Miguel92

Seleccionar a gusto Recaptcha v2/v3

Recommended Posts

Lo que se hará es agregar las opciones para que se pueda elegir entre el recaptcha v2 y el recaptcha v3.

 

1 - Ejecutar estas consultas

ALTER TABLE `w_configuracion` ADD `c_recaptcha` int(1) NOT NULL DEFAULT '0';
ALTER TABLE `w_configuracion` ADD `pkey3` varchar(55) NOT NULL;
ALTER TABLE `w_configuracion` ADD `skey3` varchar(55) NOT NULL;

 

2 - Buscar en inc/class/c.registro.php

/** reCAPTCHA **/
        $recaptcha = 'https://www.google.com/recaptcha/api/siteverify?secret=' . $tsCore->settings['skey'] . '&response=' . $tsData['user_captcha'] . '&remoteip=' . $tsCore->getIP();

y la reemplazamos por

/** reCAPTCHA **/
        if($tsCore->settings['c_recaptcha'] == 0) {
            $R_KEY = $tsCore->settings['skey'];
        } else {
            $R_KEY = $tsCore->settings['skey3'];
        }
        $recaptcha = 'https://www.google.com/recaptcha/api/siteverify?secret=' . $R_KEY . '&response=' . $tsData['user_captcha'] . '&remoteip=' . $tsCore->getIP();

 

3 - En config.inc.php que se encuentra en la raíz buscamos y la borramos

define('RC_PUK',"6LcXvL0SAAAAAPJkBrro96lnXGZ56TBRExEmVM3L"); // public key recaptcha
define('RC_PIK',"6LcXvL0SAAAAAEg1zizOxJPTjlD0ZtbbzubF2NjE"); // private key recaptcha

 

4 - En header.php buscamos

    // Mensajes
    $smarty->assign('tsMPs',$tsMP->mensajes);

y debajo pegamos

    if($tsCore->settings['c_recaptcha'] == 0) {
        define('RC_PUK',$tsCore->settings['pkey']);
        define('RC_PIK',$tsCore->settings['skey']);
    } else {
        define('RC_PUK',$tsCore->settings['pkey3']);
        define('RC_PIK',$tsCore->settings['skey3']);
    }

 

5 - Luego buscan en templates/sections/main_header.tpl

</head>
<body>
<!--JAVASCRIPT-->

y arriba agregan esto

{if !$tsUser->is_member && $tsConfig.c_recaptcha == 1}
  <script src="https://www.google.com/recaptcha/api.js?render={RC_PUK}"></script>
{/if}

 

6 - Luego buscan en js/registro.js

            /* Terminos */
            case 'terminos':
                var value = $(el).is(':checked');

y arriba agregan

            /* ReCaptcha V3 */
            case 'recaptcha_response_field':
               this.datos['g-recaptcha-response'] = $('#RegistroForm #recaptchaResponse').val();
            break;

y un poco más abajo buscan

var rnum = h.substring(0, strpos(h, ':'));
                    if (rnum != '1' || rnum != '2') {
                        registro.datos['g-recaptcha-response'] = '';
                        grecaptcha.reset();
                    }

y lo reemplazan por

if(SelectR == 0){
                    var rnum = h.substring(0, strpos(h, ':'));
                    if (rnum != '1' || rnum != '2') {
                        registro.datos['g-recaptcha-response'] = '';
                        grecaptcha.reset();
                    }
               }

 

7 - Luego buscan en t.php_files/p.registro.form.tpl (en el caso del mod de registro buscan en t.registro.tpl)

        <div class="form-group">
            <label>Confirme humanidad:</label>
            <div class="g-recaptcha" data-sitekey="{$tsConfig.pkey}"></div>
            <div class="help"><span><em></em></span></div>
        </div>

y la reemplazan por

{if $tsConfig.c_recaptcha == 0}
        <div class="form-group">
            <label>Confirme humanidad:</label>
            <div class="g-recaptcha" data-sitekey="{RC_PUK}"></div>
            <div class="help"><span><em></em></span></div>
        </div>
        {else}
        <div class="form-group">
            <input type="hidden" name="g-recaptcha-response" id="response" class="g-recaptcha">
            <div class="help"><span><em></em></span></div>
        </div>
        {/if}

luego más abajo buscan

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript">
$.getScript("{$tsConfig.js}/registro.js{literal}", function(){
    registro.change_paso(1);
    mydialog.procesando_fin();
});
</script>
{/literal}

y lo reemplazan por

{if $tsConfig.c_recaptcha == 0}
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
{/if}
<script type="text/javascript">
const SelectR = '{$tsConfig.c_recaptcha}';
$.getScript("{$tsConfig.js}/registro.js{literal}", function(){
    registro.change_paso(1);
    mydialog.procesando_fin();
});
</script>
{/literal}
{if $tsConfig.c_recaptcha == 1}
<script type="text/javascript">
    var keyv3 = '{RC_PUK}';
    grecaptcha.ready(function () {
    grecaptcha.execute(keyv3{literal}', {action: 'homepage'}).then(function (token) {
           var response = document.getElementById('response');
           response.value = token;
       });
    });
    {/literal}
</script>
{/if}

 

8 - Por último en templates/admin_mods/m.admin_configs.tpl y buscan

<dl>
                <dt>
                    <label for="ai_xat">Xat ID:</label>
                    <br /><span>Por defecto puedes agregar un chat de <a href="http://xat.com">Xat</a> para tu web, solo crea tu grupo he ingresa el nombre.</span></dt>
                <dd>
                    <input type="text" id="ai_xat" name="xat" maxlength="20" value="{$tsConfig.xat_id}" /> </dd>
            </dl>

y debajo agregan

<hr />
            <fieldset class="selectRecaptcha">
                <legend>Seleccionar el reCaptcha</legend>
                <span>Puedes elegir entre el Recaptcha v2 o el Recaptcha v3</span>
                <select name="recaptcha" id="recaptcha">
                    <option value="0"{if $tsConfig.c_recaptcha == 0} selected="selected"{/if}>Recaptcha v2</option>
                    <option value="1"{if $tsConfig.c_recaptcha == 1} selected="selected"{/if}>Recaptcha v3</option>
                </select>
                <div id="recaptchav2">
                    <h4>Recaptcha V2</h4>
                    <dl>
                        <dt>
                            <label for="pkey">reCaptcha pública</label>
                            <br /><span>Clave pública de <a href="https://www.google.com/recaptcha/admin">reCatpcha</a>.</span>
                        </dt>
                        <dd><input type="text" id="pkey" name="pkey"{if !$tsConfig.pkey}placeholder="Sin clave" {/if}value="{$tsConfig.pkey}" /></dd>
                    </dl>
                    <dl>
                        <dt>
                            <label for="skey">reCaptcha secreta</label>
                            <br /><span>Clave privada de <a href="https://www.google.com/recaptcha/admin">reCatpcha</a>.</span>
                        </dt>
                        <dd><input type="text" id="skey" name="skey"{if !$tsConfig.skey}placeholder="Sin clave"{/if} value="{$tsConfig.skey}" /></dd>
                    </dl>
                </div>
                <div id="recaptchav3">
                    <h4>Recaptcha V3</h4>
                    <dl>
                        <dt>
                            <label for="pkey3">reCaptcha pública</label>
                            <br /><span>Clave pública de <a href="https://www.google.com/recaptcha/admin">reCatpcha</a>.</span>
                        </dt>
                        <dd><input type="text" id="pkey3" name="pkey3"{if !$tsConfig.pkey3}placeholder="Sin clave" {/if}value="{$tsConfig.pkey3}" /></dd>
                    </dl>
                    <dl>
                        <dt>
                            <label for="skey3">reCaptcha secreta</label>
                            <br /><span>Clave privada de <a href="https://www.google.com/recaptcha/admin">reCatpcha</a>.</span>
                        </dt>
                        <dd><input type="text" id="skey3" name="skey3"{if !$tsConfig.skey3}placeholder="Sin clave"{/if} value="{$tsConfig.skey3}" /></dd>
                    </dl>
                </div>
            </fieldset>
            <hr />

y por último en el mismo archivo agregar

<script>{literal}
var rv3 = '{/literal}{$tsConfig.c_recaptcha}{literal}';
(rv3 == '1') ? $('#recaptchav2').hide() : $('#recaptchav3').hide();

$("select[name=recaptcha]").change(function(){
    var reCaptcha = $(this).val();
    (reCaptcha == '1') ? $('#recaptchav2').slideUp(),$('#recaptchav3').slideDown() : $('#recaptchav2').slideDown(),$('#recaptchav3').slideUp();
});
{/literal}</script>

 

Y creo que eso sería todo, cualquier problema avisen!

Edited by Miguel92
  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

  • Similar Content

    • By Miguel92
      [SnackBar] Toaster para tu theme
       
      Bueno como dice el titulo es un complemento que puede ir a cualquier theme sin importar que formato, frameworks,etc tenga.
      Si quieren saber del tema o conocer el complemento visiten snackbarjs
       
      Ejemplo como les puede quedar:
      1 - INICIANDO SESIÓN CON UN USUARIO QUE NO EXISTE
      2 - INICIANDO SESIÓN CON CONTRASEÑA ERRONEA

       
      3 - CUANDO AGREGAS UN POST A FAVORITOS
      4 - CUANDO YA TIENES EL POST EN FAVORITOS

       
      ¿Que es lo que hace?
       - Simplemente da una mejor forma de verlo y además queda bonito. (Se que no todos tenemos la misma opinion)
       - Reemplaza el tipico mensaje estatico que tiene por defecto.
       
      ¿Solo sirve con los .tpl?
       - Por suerte no hace falta que sea solamente en los js y ni en los .tpl, se pueden agregar tanquilamente en los archivos php.
       
      ¿Es mucho lo que hay que modificar?
       - Hay que reemplazar donde se de una notificación estatica, como se los demostre en las imagenes fuerón agregados en los archivos c.posts.php y c.user.php
       
      ¿Se le puede cambiar de estilos?
      - Si tranquilamente no hay problema.
       
    • By Miguel92
      Hola, este es un mod/mini-mod/complemento que aplica un background solo en el perfil... he tratado de hacerlo con home, fotos, tops, etc. desde la cuenta, en teoría lo que quería hacer es que los usuarios eligieran las imágenes que querían poner para las secciones ya mencionadas, pero solo logré para el perfil... Si el mod ya existía pido perdón, porque no lo he visto
       
      1) Ejecutar esta consulta
      ALTER TABLE `u_perfil` ADD `p_fondo` VARCHAR(200) NOT NULL;  2) Ir a c.cuenta.php y buscar 
      function loadHeadInfo($user_id){         global $tsUser, $tsCore;         // INFORMACION GENERAL y dentro de esta función buscamos 
      p.p_socials, p.p_empresa, y agregar a lado de esto
      p.p_fondo,  Luego buscar más abajo
      }         // COMPROBAR PORCENTAJE         $total = array(5,8,9,8,9); // CAMPOS EN CADA CATEGORIA         $tid = $save - 1; y arriba agregamos
                  case 9:                 // IN DB                 $perfilData = array(                     'fondo' => $tsCore->setSecure($_POST['fondo']), //Este es para el perfil                 );             break;  
      3) Vamos a estilos.css y en body dentro de las llaves {...} agregaremos esto
          background-position: center center;     background-repeat: no-repeat;     background-attachment: fixed;     background-size: cover;  
      4) Luego buscar tuTheme/templates/t.cuenta.tpl y debajo de 
      <li><a onclick="cuenta.chgtab(this)">Cambiar Nick</a></li> agregamos
      <li><a onclick="cuenta.chgtab(this)">Fondo</a></li> un poco más abajo debajo de
      {include file='modules/m.cuenta_nick.tpl'} agregamos
      {include file='modules/m.cuenta_fondo.tpl'}  
      5) Crearemos el archivo m.cuenta_fondo.tpl y la colocaremos en modules
      <div class="content-tabs fondo" style="display:none">     <fieldset>     <div class="alert-cuenta cuenta-9"></div>              <div class="field" style="padding: 5px 0">             <label for="fondo" style="display: inline-block;">Fondo del Perfil:</label>             <input type="text" value="{$tsPerfil.p_fondo}" maxlength="200" name="fondo" id="fondo" class="text cuenta-save-9" style="width:65%; display: inline-block;">         </div>    </fieldset>                   <div class="buttons">             <input type="button" value="Guardar" onclick="cuenta.save(9)" class="mBtn btnOk"/>         </div>                                      <div class="clearfix"></div> </div>  
      6) Último paso vamos a templates/sections/main_header.tpl y buscamos
      </head> <body> y arriba agregamos
      {literal} <style>     body {         background-image: url({/literal}{$tsInfo.p_fondo}{literal});     } </style> {/literal} RESULTADO FINAL:

       
       
      Para evitar las puntas blancas busquen en estilos.css
       /****** Bordes Redondos ******/  debajo agregan ↓ ↓ ↓ 
      .rtop { border-radius: 11px 11px 0 0; } .rbott { border-radius: 0 0 11px 11px; }  y listo quedará más lindo
      Para el fondo con opaco → ir a sections/main_header.tpl y buscar <body> debajo pegamos
      <div id="background_transparent"></div> y en estilo.css debajo de body { ... } pegamos
      Fondo 1
      #background_transparent {     background-color: rgba(255,255,255,.6);     position: fixed;     height: 100%;     top: 0;     width: 100%;     z-index: -1; } Fondo 2
      #background_transparent {     background-color: rgba(0,0,0,.8);     position: fixed;     height: 100%;     top: 0;     width: 100%;     z-index: -1; } Fondo1                                                           Fondo2

    • By Miguel92
      [Mini-Mod] Aumentar/Disminuir texto! V.2
      Versión más simplificada...
       
      Hace lo mismo que la V.1 pero esta cuenta solamente con 2 opciones

       
      Descargaremos estas 2 imágenes, y la guardan en la carpeta de images 
       
      Imagen 1 → la guardan como disminuir.png
      Imagen 2 → la guardan como aumentar.png
       
      1) Vamos a sections/main_footer.tpl y arriba de </body> pegamos esto
      <div class="aumendim">   <a href="#" id="increaseFont"><img src="{$tsConfig.images}/aumentar.png" alt=""></a>   <a href="#" id="decreaseFont"><img src="{$tsConfig.images}/disminuir.png" alt=""></a>  </div>  {literal} <style>   .aumendim {     float: left;     position: fixed;     bottom: 20px;     left: 20px;   }   .aumendim a {     padding: 5px;   } </style> {/literal} <script src="{$tsConfig.js}/mix.js" type="text/javascript"></script>  
      2) Luego descargamos este archivo mix.js y lo guardamos en la carpeta tu_theme/js y listo
    • By Miguel92
      Bueno este es un pedido para @unfernacho sobre: Pedido MOD Agrandar tamaño de la letra a gusto
       
       
      No es lo que yo buscaba pero es lo más parecido, para ver que funciona lo podes ver en → Demo32 ←, Espero que sea lo que buscabas

       
      Son 4 botones:
      * El ojo: Muestra/Oculta las opciones
      * El Medio Blanco/Medio Negro: Es el contraste (*opcional*)
      * El A+: Es para aumentar la fuente
      * El A-: Es para disminuir!
       
      Lo único que hacemos es ir a sections/footer.tpl y arriba de </body> pegamos esto
      <link rel="stylesheet" href="{$tsConfig.css}/mix.css">   <div class="acess-container">     <div id="jbbutton" class="balloon" title="Accessibility">       <span class="balloontext">Accesibilidad</span>       <img src="{$tsConfig.images}/accesibilidad.png">     </div>     <div id="acess-icons">       <div class="acess-icon balloon" title="Contraste">         <span class="balloontext">Contraste</span>         <img id="contrast" src="{$tsConfig.images}/contraste.png"/>       </div>       <div class="acess-icon balloon" title="Aumentar Fuente">         <span class="balloontext">Aumentar Fuente</span>         <img id="increaseFont" src="{$tsConfig.images}/aumentar.png"/>       </div>       <div class="acess-icon balloon" title="Diminuir Fuente">         <span class="balloontext">Diminuir Fuente</span>         <img id="decreaseFont" src="{$tsConfig.images}/disminuir.png"/>       </div>     </div>   </div> <script src="{$tsConfig.js}/mix.js" type="text/javascript"></script> Luego descargas esto: MiniMod_Aumentar_Diminuir_Fuente.rar y lo descomprimes en la carpeta de tu theme...
       
      Cualquier problema me avisas!
    • By Miguel92
      Hola les traigo este complemento que algunos les puede servir en el caso que la contraseña sea larga y se hayan equivocado escribiéndola, con esto puedes ver lo que estas escribiendo, sirve más para el LOGIN que para el registro...Todavía no lo he hecho...
       
      Asi se verá

       
      No se preocupen para que tipo de theme funciona, porque no va por eso ya que no usa ningún tipo de estilo, ahora en el caso que sea como el mio que usa bootstrap les diré que deben agregar ya que cuando se selecciona la opción de mostrar la contraseña el input[type] cambia de password a text, de todas formas es para cualquier theme...
       
      Vean que funciona en demo32 para verificar que es correcto!
      User: Demo
      Pass: demouser
       
      Empecemos:
      1) Buscamos en el archivo js/funciones.js y lo agregan arriba o abajo donde quieran
      /** Mostrar contraseña **/ /* Complemento de Miguel92 */ $(document).ready( function(){    $('#vermipass').attr('checked', false);    $('#vermipass').click(function(){       name = $('#password').attr('name');       value = $('#password').attr('value');       if($(this).attr('checked'))       {          html = '<input type="text" class="ilogin" name="'+ name + '" value="' + value + '" id="password"/>';          $('#password').after(html).remove();       }       else       {          html = '<input type="password" class="ilogin" name="'+ name + '" value="' + value + '" id="password"/>';          $('#password').after(html).remove();       }    }); }); 2) Buscamos en el archivo en mi caso section/plus/login.tpl y ustedes si es default buscan en sections/head_menu.tpl y buscan
      <label>Contraseña</label>                             <input type="password" class="ilogin" id="password" name="pass" maxlength="64"> y debajo le agregan
      <label>Contraseña</label>                             <input type="password" class="ilogin" id="password" name="pass" maxlength="64">                                     <div style="text-align: center; display: block; font-size: 11px; color: #888;">                                             <input type="checkbox" id="vermipass"/> <label for="vermipass">Mostrarme la contraseña</label>                                      </div>  
      Bien ahora en el caso que hayan implementado bootstrap le cambian
      class="ilogin" por
      class="form-control" y eso sería todo, espero que se haya entendido bien...
       
      Es valido:
      * Todos los themes
      * Las versiones 1.1 y 1.2.* del script
      * Las versiones de bootstrap
      No he encontrado ningún topic parecido o igual!
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Patrocinador



  • ×