Difference between revisions of "NATS5 Join Page CAPTCHA"
| (15 intermediate revisions by 3 users not shown) | |||
| Line 8: | Line 8: | ||
=== Image with Letters === | === Image with Letters === | ||
| − | To setup the classic CAPTCHA on your join forms, please add the following code to your join template(s) (if not present already) within the main form. | + | To setup the classic CAPTCHA on your join forms, please add the following code to your join template(s) (if not present already) within the main form (between the <form>...</form> tags). |
<br /> | <br /> | ||
Basic | Basic | ||
<pre> | <pre> | ||
| − | {if !empty($vars.captcha_required) || !empty($errors.captcha)} | + | {if ((!empty($vars.captcha_required) || !empty($errors.captcha)) && ($config.MEMBER_SIGNUP_CAPTCHA_STYLE == 1))} |
<tr> | <tr> | ||
<td colspan="2" style="border:none; text-align: center"> | <td colspan="2" style="border:none; text-align: center"> | ||
| Line 19: | Line 19: | ||
<strong>Please fill in the text from the image</strong><br /> | <strong>Please fill in the text from the image</strong><br /> | ||
<input class="join_input" type="text" name="signup[captcha:1]" /> | <input class="join_input" type="text" name="signup[captcha:1]" /> | ||
| − | |||
{if !empty($errors.captcha)} | {if !empty($errors.captcha)} | ||
<br /> | <br /> | ||
| Line 31: | Line 30: | ||
Stylish | Stylish | ||
<pre> | <pre> | ||
| − | {if !empty($vars.captcha_required) || !empty($errors.captcha)} | + | {if ((!empty($vars.captcha_required) || !empty($errors.captcha)) && ($config.MEMBER_SIGNUP_CAPTCHA_STYLE == 1))} |
<fieldset> | <fieldset> | ||
| − | <legend> | + | <legend>Verification</legend> |
<div class="form_input"> | <div class="form_input"> | ||
{if !empty($errors.captcha)}<div class="join_error">{$errors.captcha}</div>{/if} | {if !empty($errors.captcha)}<div class="join_error">{$errors.captcha}</div>{/if} | ||
<img src="/captcha_image.php?width=300&height=90" width="300" height="90" /><br /> | <img src="/captcha_image.php?width=300&height=90" width="300" height="90" /><br /> | ||
| − | <label class="memberinfo"> | + | <label class="memberinfo">Verify Text:</label> |
<input class="join_input" type="text" name="signup[captcha:1]" /> | <input class="join_input" type="text" name="signup[captcha:1]" /> | ||
</div> | </div> | ||
| Line 57: | Line 56: | ||
Please add the following code to your join template(s) (if not present already) between the <head>...</head> tags | Please add the following code to your join template(s) (if not present already) between the <head>...</head> tags | ||
<pre> | <pre> | ||
| − | {if (!empty($vars.captcha_required))}<script src="https://www.google.com/recaptcha/api.js" async defer></script>{/if} | + | {if (!empty($vars.captcha_required) && ($config.MEMBER_SIGNUP_CAPTCHA_STYLE == 2))}<script src="https://www.google.com/recaptcha/api.js" async defer></script>{/if} |
| + | </pre> | ||
| + | |||
| + | Please add the following code to your join template(s) (if not present already) within the main form (between the <form>...</form> tags). | ||
| + | <pre> | ||
| + | {if ((!empty($vars.captcha_required) || !empty($errors.captcha)) && ($config.MEMBER_SIGNUP_CAPTCHA_STYLE == 2))} | ||
| + | <fieldset> | ||
| + | <legend>Verification</legend> | ||
| + | <div class="option-padding"> | ||
| + | {if !empty($errors.captcha)}<div class="join_error">{$errors.captcha}</div>{/if} | ||
| + | <div class="g-recaptcha" style="width: 304px; margin: 0 auto" data-sitekey="{$config.MEMBER_SIGNUP_GOOGLE_RECAPTCHA_KEY}"></div> | ||
| + | </div> | ||
| + | </fieldset> | ||
| + | {/if} | ||
| + | </pre> | ||
| + | |||
| + | ==== NATS Special Options ==== | ||
| + | To use Google reCAPTCHA v2 with any special options, you will need to add additional jquery code to your $(document).ready() function.<br> | ||
| + | This example is designed so only one recaptcha field is required on your template, and have the recaptcha work for both normal join option form & special option form. | ||
| + | |||
| + | <pre> | ||
| + | {literal} | ||
| + | $("#specialSignupform").submit(function(){ | ||
| + | var g_recaptcha = $('#signupform [name=g-recaptcha-response]').val(); | ||
| + | $('#specialSignupform').append("<input type='hidden' name='g-recaptcha-response' value='" + g_recaptcha + "'>"); | ||
| + | }); | ||
| + | {/literal} | ||
| + | </pre> | ||
| + | |||
| + | |||
| + | |||
| + | This will also require updating your template's forms to include an id:<br> | ||
| + | normal form section from (if not already set): | ||
| + | <pre> | ||
| + | <body> | ||
| + | <div id="container"> | ||
| + | <div id="form"> | ||
| + | <form action="signup.php"> | ||
| + | </pre> | ||
| + | |||
| + | To: | ||
| + | <pre> | ||
| + | <body> | ||
| + | <div id="container"> | ||
| + | <div id="form"> | ||
| + | <form id="signupform" action="signup.php"> | ||
| + | </pre> | ||
| + | |||
| + | special option form section (if not already set): | ||
| + | <pre> | ||
| + | {if $have_special_options} | ||
| + | <br> | ||
| + | <form action="signup.php" method="POST"> | ||
</pre> | </pre> | ||
| − | + | ||
| + | To: | ||
| + | <pre> | ||
| + | {if $have_special_options} | ||
| + | <br> | ||
| + | <form id="specialSignupform" action="signup.php" method="POST"> | ||
| + | </pre> | ||
| + | |||
== Enabling Options == | == Enabling Options == | ||
You have a few different options to require CAPTCHA on your join form. | You have a few different options to require CAPTCHA on your join form. | ||
* You can turn on the 'Member Signup Use Captcha' setting on the configuration -> surfer page in the signup form section. Enabling this setting will require CAPTCHA verification for all join pages for all sites and tours. If this setting is enabled, it will override all of the options below. | * You can turn on the 'Member Signup Use Captcha' setting on the configuration -> surfer page in the signup form section. Enabling this setting will require CAPTCHA verification for all join pages for all sites and tours. If this setting is enabled, it will override all of the options below. | ||
| − | * You can turn on the 'Member CAPTCHA' setting on sites -> site management -> <select site> -> tours -> <select tour> page. Enabing this setting will require CAPTCHA verification for all join pages for the given site and tour. Please note | + | * You can turn on the 'Member CAPTCHA' setting on sites -> site management -> <select site> -> tours -> <select tour> page. Enabing this setting will require CAPTCHA verification for all join pages for the given site and tour. Please note that additional site tours do not inherit this setting. If this setting is enabled, it will override the final option below. |
* You can set the values for the 'Member Retry Captcha' (X) and the 'Member Retry Captcha Hours' (Y) on the configuration surfer page in the signup form section. Enabling this setting will require CAPTCHA verification for all join pages for all tours of the given site and the given ip address once there are X (or more) never joined member records that were created within Y hours. | * You can set the values for the 'Member Retry Captcha' (X) and the 'Member Retry Captcha Hours' (Y) on the configuration surfer page in the signup form section. Enabling this setting will require CAPTCHA verification for all join pages for all tours of the given site and the given ip address once there are X (or more) never joined member records that were created within Y hours. | ||
Latest revision as of 13:58, 21 April 2023
General
You only need to setup CAPTCHA on your join template(s), not your gateway template(s), unless you are using the gateway one step feature. This is ths case regardless of the CAPTCHA style you decide to use.
Styles
Currently NATS supports 2 different styles of CAPTCHA on your join templates. You can change the style by setting the 'Member Signup Captcha Style' value on the configuration -> surfer page in the signup form section. The current default is 'Image with Letters' for retroactive support. If you are setting CAPTCHA on your joim templates for the first time, we recommend using the 'Google reCAPCHA V2' option.
Image with Letters
To setup the classic CAPTCHA on your join forms, please add the following code to your join template(s) (if not present already) within the main form (between the <form>...</form> tags).
Basic
{if ((!empty($vars.captcha_required) || !empty($errors.captcha)) && ($config.MEMBER_SIGNUP_CAPTCHA_STYLE == 1))}
<tr>
<td colspan="2" style="border:none; text-align: center">
<img src="/captcha_image.php?width=300&height=90" width="300" height="90" /><br />
<strong>Please fill in the text from the image</strong><br />
<input class="join_input" type="text" name="signup[captcha:1]" />
{if !empty($errors.captcha)}
<br />
<span>{$errors.captcha}</span>
{/if}
</td>
</tr>
{/if}
Stylish
{if ((!empty($vars.captcha_required) || !empty($errors.captcha)) && ($config.MEMBER_SIGNUP_CAPTCHA_STYLE == 1))}
<fieldset>
<legend>Verification</legend>
<div class="form_input">
{if !empty($errors.captcha)}<div class="join_error">{$errors.captcha}</div>{/if}
<img src="/captcha_image.php?width=300&height=90" width="300" height="90" /><br />
<label class="memberinfo">Verify Text:</label>
<input class="join_input" type="text" name="signup[captcha:1]" />
</div>
</fieldset>
{/if}
You can customize the size of the CAPTCHA by changing the width and height parameters in the <img> tag. Please note that you will need to change the values in the src atrribuite (the url width and height variables) as well as the width and height attributes of the <img> tag.
By default, NATS will store the CAPTCHA value in the ses_captcha session variable. You can change the name of the session variable by adding the following form field to your join template.
<input type="hidden" name="captcha_key" value="some_text">
Given this example, NATS will use the ses_captcha_some_text session variable to store the CAPTCHA value.
Google reCAPTCHA V2
To setup the Google reCAPTCHA V2 on your join forms, please first obtain a site key and a secret key from Google. Once you have these values, please go to the configuration -> surfer page, scroll down to the signup form section and enter these 2 values into the 'Member Signup Google Recaptcha Key' and the 'Member Signup Google Recaptcha Secret' fields respectively.
Please add the following code to your join template(s) (if not present already) between the <head>...</head> tags
{if (!empty($vars.captcha_required) && ($config.MEMBER_SIGNUP_CAPTCHA_STYLE == 2))}<script src="https://www.google.com/recaptcha/api.js" async defer></script>{/if}
Please add the following code to your join template(s) (if not present already) within the main form (between the <form>...</form> tags).
{if ((!empty($vars.captcha_required) || !empty($errors.captcha)) && ($config.MEMBER_SIGNUP_CAPTCHA_STYLE == 2))}
<fieldset>
<legend>Verification</legend>
<div class="option-padding">
{if !empty($errors.captcha)}<div class="join_error">{$errors.captcha}</div>{/if}
<div class="g-recaptcha" style="width: 304px; margin: 0 auto" data-sitekey="{$config.MEMBER_SIGNUP_GOOGLE_RECAPTCHA_KEY}"></div>
</div>
</fieldset>
{/if}
NATS Special Options
To use Google reCAPTCHA v2 with any special options, you will need to add additional jquery code to your $(document).ready() function.
This example is designed so only one recaptcha field is required on your template, and have the recaptcha work for both normal join option form & special option form.
{literal}
$("#specialSignupform").submit(function(){
var g_recaptcha = $('#signupform [name=g-recaptcha-response]').val();
$('#specialSignupform').append("<input type='hidden' name='g-recaptcha-response' value='" + g_recaptcha + "'>");
});
{/literal}
This will also require updating your template's forms to include an id:
normal form section from (if not already set):
<body> <div id="container"> <div id="form"> <form action="signup.php">
To:
<body> <div id="container"> <div id="form"> <form id="signupform" action="signup.php">
special option form section (if not already set):
{if $have_special_options}
<br>
<form action="signup.php" method="POST">
To:
{if $have_special_options}
<br>
<form id="specialSignupform" action="signup.php" method="POST">
Enabling Options
You have a few different options to require CAPTCHA on your join form.
- You can turn on the 'Member Signup Use Captcha' setting on the configuration -> surfer page in the signup form section. Enabling this setting will require CAPTCHA verification for all join pages for all sites and tours. If this setting is enabled, it will override all of the options below.
- You can turn on the 'Member CAPTCHA' setting on sites -> site management -> <select site> -> tours -> <select tour> page. Enabing this setting will require CAPTCHA verification for all join pages for the given site and tour. Please note that additional site tours do not inherit this setting. If this setting is enabled, it will override the final option below.
- You can set the values for the 'Member Retry Captcha' (X) and the 'Member Retry Captcha Hours' (Y) on the configuration surfer page in the signup form section. Enabling this setting will require CAPTCHA verification for all join pages for all tours of the given site and the given ip address once there are X (or more) never joined member records that were created within Y hours.
