Adding Google no-captcha reCAPTCHA Validation To Your Microsoft Exchange 2010 Outlook Web App Forms-Based Authentication Logon Page

[ 21 ] Comments
Share

In this article, I will describe how to add the new no-captcha recaptcha widget to your Outlook Web App 2010 Forms-based Authentication page. I am not entirely sure that it makes it any more secure, but many people are nevertheless interested in doing it, so here goes…

If you want to try it yourself, you’ll need to go to the reCAPTCHA site, and get a Public key and a Private key for your web site. These will be used in the code that we add to the FBA logon page. I am not sure if older keys (generated for the original version of recaptcha) are still compatible. My first experiment with this suggests that they might not be. Remember when you create the key that you must use the public name for your OWA site, and then use that name in your URL when doing your testing. You can’t generate a key for one server name, and then use a different one in your URL – recaptcha will complain.

ReCAPTCHA validates user input by posting it to the Google reCAPTCHA validator. We need to create an XMLHTTPRequest requester (using JavaScript) to POST the user input to Google. The first problem I encountered was that XMLHTTPRequest refuses to POST data to a different site other than the one you’ve loaded the current page from. This, apparently, is thanks to a security policy called the Same Origin Policy. This means we need to create an additional page on our own server to act as a proxy, and do the POSTing for us. This extra page returns a success or fail code to the FBA page, telling it whether to proceed with the logon, or not. It turns out that this has the added benefit of us not having to put our private key in the source for the FBA page (which would make it no longer really private).

So, first we create this additional ‘proxy’ page on our server. I put it in my C:\Program Files\Microsoft\Exchange Server\V14\ClientAccess\Owa\auth folder (along with the existing FBA files). I called it Recaptcha.aspx, and it has the following contents (created in Notepad). Note that you should use your own reCAPTCHA PRIVATE key where it says “6Le8H…”.

<% @ Page AspCompat=True Language = "VB" %>
<%
' Put your own private key in the next line
Dim strPrivateKey As String = "6Le8H....."
Dim strResponse = Request("response")
Dim objWinHTTP As Object
objWinHTTP = Server.CreateObject("WinHTTP.WinHTTPRequest.5.1")
objWinHTTP.Open("POST", "https://www.google.com/recaptcha/api/siteverify", False)
objWinHTTP.SetRequestHeader("Content-type", "application/x-www-form-urlencoded")
Dim strData As String = "secret=" & strPrivateKey & _
  "&response=" & strResponse
objWinHTTP.Send(strData)
Dim strResponseText = objWinHTTP.ResponseText
Response.Write(strResponseText)
%>

Next, make a backup of the logon.aspx file in the same folder, because we now need to open, and amend, it using Notepad. First, find the <form> tag by searching (using CTRL-F) for text “<form”. When you find it, change its action attribute to an empty string, like this (I’m only showing the first part of the line):

<form action="" method="POST" name="logonForm" ENCTYPE=

Then, search for the text basicExplanationContent. You should find it in a block like this:

                <td><%=basicExplanationContent %></td>
            </tr>
            <% } %>
        </table>
    </td>
</tr>
<% } %>
<tr><td><hr></td></tr>

Immediately after that last line, insert the following code. Again, note that instead of 6Le8H…, you should insert your own reCAPTCHA PUBLIC key:

<tr>
<td>
<script type="text/javascript">
function myClkLgn()
{
  var oReq = new XMLHttpRequest();
  var sResponse = document.getElementById("g-recaptcha-response").value;
  var sData = "response=" + sResponse;
  oReq.open("GET", "/owa/auth/recaptcha.aspx?" + sData, false);
  oReq.send(sData);
  if (oReq.responseText.indexOf("true") != -1)
  {
    document.forms[0].action = "/owa/auth.owa";
    clkLgn();
  }
  else
  {
    alert("Invalid captcha response");
    return false;
  }
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="6Le8H....."></div>
</td>
</tr>

Nearly there, now. Search for the text “clkLgn”. You’ll find it on a line that ends like this:

(Strings.IDs.LogOn) %>" onclick="clkLgn()"

Change it to read

(Strings.IDs.LogOn) %>" onclick="return myClkLgn()"

so that it calls our added code (above) when the user submits the form. Save the file, close Notepad, and that should be it. Your FBA logon page should now look like this:


21 Responses to Adding Google no-captcha reCAPTCHA Validation To Your Microsoft Exchange 2010 Outlook Web App Forms-Based Authentication Logon Page

  1. othman hendy suseno says:

    Hi,

    Im trying to use your guide but got a funky response on my form, some say invalid key, some success validating with google but failed to validate the user against exchange user. do you have the Recaptcha.aspx and logon.aspx for me to test and compare? thanks before for the help.

  2. Manu says:

    In the function “myClkLgn()” has to return “false” after “alert(“Invalid captcha response”);” in the else section.

    Then in the call to the function it has to be:

    onclick=”return myClkLgn()”

  3. diana says:

    Hello,
    The captcha works but when the username and password income returns me to the main page. Help me??

  4. Eric says:

    Having the same problem as diana above. The reCaptcha works, but when you press the “Sign-in” button it just reloads the page and starts over and never forwards to the user mailbox.

    • admin says:

      Hi. I would suggest pressing the F12 key once the logon page has loaded (to see the IE script debugger). See if it highlights any errors as soon as it loads, and then see if any are highlighted after pressing the Sign-In button.

  5. MartinLink says:

    Hey, great guide. For those having issues with the sign-in going through without captcha, make sure you add an extra line on your recaptcha.aspx with the corresponding proxy configuration (and credentials if needed):

    objWinHttp.SetProxy (2,”http://url:port”)
    (optional) objWinHttp.SetCredentials (“username”, “password”, 1)

    The recaptcha.aspx was unable to get to google with the local proxy configurations.

    Cheers

  6. RaulP says:

    Hi,

    Please can you give an example of what proxy configuration can i use.

    Cheers.

    • admin says:

      I’ve never worked with a proxy, so I’m not really in a position to try anything out to find out about it. Do you mean getting it working through onsite TMG, or something like that?

  7. Mauricio says:

    Hello,
    Thanks for the guide.
    We are having the same problem as both, Diana and Eric. The reCaptcha works perfectly, but when you press the “Sign-in” button it just reloads the page and starts over and never forwards to the user mailbox.
    Can you help me?

    • admin says:

      I think the easiest way to find out what’s going wrong is to use a browser’s debugger. For instance, in IE, you press F12 when the login page has loaded. Place a breakpoint at the first line of the function you inserted into the page, and see if execution reaches that point when you try to submit the page.

  8. Jeff says:

    This works great! I have a client with SBS2011 and another with SBS2008 (still) each hosting Exchange, and this works perfectly. Can you integrate this with the Remote Access login page? If so, could you post the code and email me? Will gladly donate.

    Thanks again!

  9. Jeff says:

    Nevermind… figured it out! It’s actually a little easier since the Remote page doesn’t use a form, but rather a simple call. Here you go:

    On an SBS box w/ the Remote Access page already enabled and configured (i.e., for RDP and file access), follow the first steps above–you can re-use the recaptcha.aspx in the owa\auth folder.
    Browse to the folder C:\Program Files\Windows Small Business Server\Bin\WebApp\RemoteAccess\AccountPage

    (1) Make a copy of the Logon.aspx file here, as it will be modified in a similar fashion as that in the owa\auth folder.
    (2) Search for the text OnClientClick=”showCover(); . Immediately after the SECOND occurrence of this (which seems to be where the reCaptcha box looks best in the layout), paste in ALL of the SAME function MyClkLgn() text as above, using your reCaptcha public key. HOWEVER, modify the
    {
    document.forms[0].action = “/owa/auth.owa”;
    clkLgn();
    }
    section to the following
    {
    return showCover();
    }
    (3) Now, search again for and modify the
    OnClientClick=”showCover();
    to the following
    OnClientClick=”return myClkLgn();

    That should do it! :)
    Thanks again!

  10. Al says:

    This works perfectly on web, however when we try to connect via mobile device and submit it simply redirects us to the same page with no changes. Is this supposed to work with mobile?

  11. Al says:

    We’ve tested all major mobile browsers and no luck. (Safari, Chrome, etc.)

    • admin says:

      I’ll have to try it myself over the weekend. I’ve no idea if the Google recaptcha code works with mobile browsers. They also keep changing it occasionally, which doesn’t help :-)




Leave a Reply to RaulP Cancel reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>