I have done a few secure zones so I thought I would share my experiences and post them as a best practice. If anyone has some other or better options please feel free.
When you set up a secure zone it asks for a landing page. This landing page needs to be in the secure zone so your login form needs to be on a separate page not in your secure zone. Let’s say our secure zone folder is /secure and our landing page is /main so our path is /secure/main. Lets put our login form on /login.
Let’s start off with the basic login form from the component menu.
<form action="/public/api/members/login" method="POST"> <label for="email">Email</label> <input type="text" name="Email"> <label for="password">Password</label> <input type="password" name="Password"> {% if request.request_data.is_mobile == 1 %} <div class ="captcha-holder"> <div class="g-recaptcha" data-size="compact" data-sitekey="6Lf2cGcUAAAAABbL4aDrclASNZx9S3uaI9EvpvlI"></div> </div> {% else %} <div class =" captcha-holder"> <div class="g-recaptcha" data-sitekey="6Lf2cGcUAAAAABbL4aDrclASNZx9S3uaI9EvpvlI"></div> </div> {% endif %} <input type="submit" value="Login"> <a href="/request-reset-password">Forgot Password</a> </form>
When you use this form to log in if looks like nothing happens. Actually, it changes the url and adds “?login=sucess” so your URL becomes…
To get the form go to your secure zone landing page you can add a redirect like
<input type="hidden" name="redirectURL" value="/secure/main">`
That’s the basics now let’s look at some issues and address them.
Issue 1 - Bookmarked page.
Users will bookmark your login page so they can log in in the future. If they didn’t log off or it hasn’t been 24 hours since logging in and they go to the login page it will look like they need to login again. To fix this we add the following code to the head of the /login page under the SEO tab.
{% if request.is_logged == 'true' %}<meta http-equiv="refresh" content="0;url=/secure/main" />{% endif %}
This will look to see if the user is logged in or not and if they are, redirect them to the landing page. This is not instant even with the refresh set to 0. So I add this code to the login form.
{% if request.is_logged == 'true' %} // Welcome or loading message // {% else %} // Form contnet here // {% endif %}
You can add any message that is appropriate for your site. You can also change the refresh to a different value if you want the message to be visible longer.
Issue 2 - Multiple Secure Zones
if you have multiple secure zones and for the most part the user will only be assigned to one secure zone you can do the following.
- Remove the redirect in your form.
- Replace the redirect in the head of the page under the SEO tab to…
{% if request.currentmember.securezones[0].id == '1' %} <meta http-equiv="refresh" content="0;URL='/secure/main'" /> {% elsif request.currentmember.securezones[0].id == '2' %} <meta http-equiv="refresh" content="0;URL='/secure2/main'" /> {% elsif request.currentmember.securezones[0].id == '3' %} <meta http-equiv="refresh" content="0;URL='/secure3/main'" /> {% endif %}
Note we are using an if statement to redirect each secure zone to its landing page. You will need to find the IIDnumber of your secure zones. You can find the ID number by going to the secure zone settings in the admin and look at the URL. There will be a number, for example
/admin/secure-zones/2/details
This will do two things. One redirects on login and two, redirect if the user goes to the login page and is already logged in.
NOTE: that if the user has access to more than one secure zone they will be logged in to the first one they have access to. So if the user has access to zone 1 and 3 they will always be logged in to zone 1 with this setup.
Issue 3 - Safari browser
So if you use the Safari browser on either macOS or iOS and you save your passwords you will notice a very annoying behavior. When you select your saved user id and password it automatically submits the form. This comes back as a failure because we didn’t click on the reCaptcha. Initially, I tried to set up the form so that if you use Safari it would place the reCaptcha on top of the form. I wasn’t able to accomplish this and I felt it looked wrong and users would still enter their email and password first. So I went another way and hide the email and password fields until the reCaptcha is validated. To do this I added
data-callback=“imNotARobot”
to the reCaptcha lines.
I put the form fields and submit button in a div for the show/hide
<div id="formapproved" style="display:none"> //form content// </div>
then added the following script to the form
<script type="text/javascript"> var imNotARobot = function(response) { // console.info("Button was clicked"); if(response=='')document.getElementById('formapproved').style.display="none"; else document.getElementById('formapproved').style.display="block"; }; </script>
Here is the complete form with the above added
{% if request.is_logged == 'true' %} <p>Welcome or Loading message.</p> {% else %} <h1>title</h1> <br> <form id="login" action="/public/api/members/login" method="POST"> <input type="hidden" name="redirectURL" value="/prep-page/main"> {% if request.request_data.is_mobile == 1 %} <div class ="captcha-holder"> <div class="g-recaptcha" data-size="compact" data-callback="imNotARobot" data-sitekey="6Lf2cGcUAAAAABbL4aDrclASNZx9S3uaI9EvpvlI"></div> </div> {% else %} <div class =" captcha-holder"> <div class="g-recaptcha" data-callback="imNotARobot" data-sitekey="6Lf2cGcUAAAAABbL4aDrclASNZx9S3uaI9EvpvlI"></div> </div> {% endif %} <br> <div id="formapproved" style="display:none"> <label for="email">Email</label> <br> <input type="text" name="Email"> <br> <label for="password">Password</label> <br> <input type="password" name="Password"> <br> <input type="submit" value="Login"> <a href="/request-reset-password">Forgot Password</a> </div> </form> {% endif %} <script type="text/javascript"> var imNotARobot = function(response) { // console.info("Button was clicked"); if(response=='')document.getElementById('formapproved').style.display="none"; else document.getElementById('formapproved').style.display="block"; }; </script>
Issue 4 - Unauthorized
If a user dials directly to a secure page or bookmarks a secure page they will be presented with an “Unauthorized” message if they are not logged in. This also happens when they are auto-logged off after 24 hours they refresh or navigate to another secure zone page. This is actually a 401 page. Let’s go to Settings / System Pages / 401 and make some adjustments to this page. I basically change this page to the login page by adding the same login form we created for the login page. Usually I change the title to “Login Required” but you can do what you want.
Issue 5 - 401 Page redirect
If a user logs in via the 401 page they want to go to one of two places. The page they tried to dial directly or from a bookmark, or the page they tried to navigate to when they thought they were still logged in. You can accomplish this with the following redirect
<input type="hidden" name="redirectURL" value="{{request.request_url.href | split: 443 | last }}">
If you use {{request.request_data.refferer}} it doesn’t work if you dial direct. So I tried {{request.request_url.href}} but that didn’t work either because the URL looks like this
“href”: “https://website.com/401?401;https://website.com:443/secure/content?”,
So I split at the 443 and using last we get /secure/content? and that then redirects to the correct page.
Issue 6 - User access to multiple secure zones.
In Issue 2 we covered multiple secure zones but that was meant for users that are only assigned to 1 zone. One option is to allow access to the zone they want is with a form select drop-down menu. Then direct every option to the appropriate secure zone landing page. Once selected and entered it will force a 401 and provide the login. You can also have them log in from the login page and then provide Landing page options based on their secure zone access.
UPDATE: So I messed around with Issue 6 multiple secure zones access and this is what I think works best. Create a login page and redirect it to a selection page or making a selection visible on the login page once logged in. The reason I would have them log in first is because then we can present them with only the secure zone options that they have access too. Now there may be times where you want to present them all the options first like to sell access to other zones.
So here is the code to work with for making a selection after they log in.
{% for zone in request.currentmember.securezones %}
{% if zone.id == 0 %}
Link or content here href=“/secure/main”>Secure Zone
{% endif %}
{% endfor %}
As you can see we have to create a for loop to see all the zones they have access to. If we use the same code as in Issue 2 it will stop at the first zone it finds and then it will only provide one option.
Here is a dropdown menu option.
<select> {% for zone in request.currentmember.securezones %} {% if zone.id == 0 %} <option value="/secure/main">Secure Zone</option> {% elsif zone.id == 1 %} <option value="/secure/main 2">Secure Zone 2</option> {% elsif zone.id == 2 %} <option value="/secure/main 3">Secure Zone 3</option> {% elsif zone.id == 3 %} <option value="/secure/main 4">Secure Zone 4</option> {% endif %} {% endfor %} </select>
At this time (v5.9.5) you can’t get the zone URL with the liquid {{request}} only the name that means you have to hard code the landing page URLs. You could call the name with {{zone.name}} Adding <select onChange="window.document.location.href=this.options[this.selectedIndex].value;"> will trigger the redirect once a selection is made.
Here is a video showing all the above in action.
