Telerik RadCaptcha in Windows Azure using Windows Azure Caching

Jared Johnson, 23 April 2012

After migrating a Sitefinity site that was using Telerik’s RadCaptcha to Azure, I noticed that occasionally the captcha just displayed a grey box. This was because by default the captcha image is stored in the server cache, but with multiple instances in Azure the server the browser is connected to could be switched out at any time to a server that doesn’t have the image in its cache.

To fix this the RadCaptcha can be configured to store the image in the session instead. To set this change the ImageStorageLocation property to “Session” ie ImageStorageLocation=”Session” in the XAML for the RadCaptcha or (captchaID). ImageStorageLocation = CaptchaImageStorage.Session; in the cs file.

Then the handler must be registered in the following way in the web.config:

<configuration>
<system.web>
<httpHandlers>
<add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResourceSession" verb="*" validate="false" />
</httpHandlers>
</system.web>
<system.webServer>
<handlers>
<add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResourceSession" />
</handlers>
</system.webServer>
</configuration>

To store the session data we are going to use Azure’s caching service. To use this add the following assemblies as a reference to your project:

Microsoft.ApplicationServer.Caching.Client.dll
Microsoft.ApplicationServer.Caching.Core.dll
Microsoft.WindowsFabric.Common.dll
Microsoft.WindowsFabric.Data.Common.dll
Microsoft.Web.DistributedCache.dll.
These can be found at C:\Program Files\Windows Azure SDK\v1.6\Cache\ref\

Then create the cache service using the Azure Management Portal, when your cache has been created click the View Client Configuration button in the ribbon, this will open the Client Configuration Window.
Telerik RadCaptcha in Windows Azure using Windows Azure Caching

This will give you the XML code to copy into your web.config file. Copy the dataCacheClients section into the configSections of the web.config file, if it does not have a configSections section then create one.

<configSections>

<section name="dataCacheClients"

type="Microsoft.ApplicationServer.Caching.DataCacheClientsSection,

Microsoft.ApplicationServer.Caching.Core"

allowLocation="true"

allowDefinition="Everywhere"/>

</configSections>

Copy the dataCacheClient section, you can choose the default or ssl code provided.

<!-- Cache exposes two endpoints: one simple and other SSL endpoint. Choose the appropriate endpoint depending on your security needs. -->

<dataCacheClients>

<dataCacheClient name="default">

<hosts>

<host name="MyCacheNamespace.cache.windows.net" cachePort="22233" />

</hosts>

<securityProperties mode="Message">

<messageSecurity

authorizationInfo="Your authorization token will be here.">

</messageSecurity>

</securityProperties>

</dataCacheClient>

</dataCacheClients>

Then you can add the sessionState section

<!-- If session state needs to be saved in AppFabric Caching service, add the following to web.config inside system.web. If SSL is required, then change dataCacheClientName to "SslEndpoint". -->

<sessionState mode="Custom" customProvider="AppFabricCacheSessionStoreProvider">

<providers>

<add name="AppFabricCacheSessionStoreProvider"

type="Microsoft.Web.DistributedCache.DistributedCacheSessionStateStoreProvider, Microsoft.Web.DistributedCache"

cacheName="default"

useBlobMode="true"

dataCacheClientName="default" />

</providers>

</sessionState>

Your site should now be properly configured to use the Azure cache to store the session data, and the captchas grey squares a thing of the past.

Telerik RadCaptcha in Windows Azure using Windows Azure Caching

Jared Johnson, 23 April 2012

Category List

Filter by Author