Externí login do webmailu #RoundCube pomocí #JQuery

Tento fragment zdrojového kódu v Javascriptu/JQuery umožňuje přihlásit se do lokální kopie moderního, Ajaxového webmailu RoundCube [roundcube.net] přímo z vaší úvodní webové stránky (nebo z jiného místa ve stejné doméně). Finta spočívá v poskytnutí správné hodnoty "tokenu" během přihlášení. Jediným zbývajícím omezením je zákaz cross-site skriptování ve všech velkých browserech.

Tuto informaci zveřejňuji hlavně protože když jsem na webu hledal řešení tohoto problému, tak jsem narazil na významné množství lidí, kteří se ptali na to samé, aniž by dostali od kohokoliv použitelnou odpověď - ve skutečnosti, některé z poskytnutých rad byly zavádějící. Bude zajímavé monitorovat gůglenost tohoto článku. Domnívám se, že integraci hotových free/open-source řešení do existujících webových stránek a aplikací dnes pod tlakem uživatelské přítulnosti velkých portálů a sociálních sítí řeší hodně webmasterů.

Aby uvedený kód fungoval korektně, tak musí být webmail RoundCube přístupné současně přes protokoly http:// i https:// a musí být instalován na stejné doméně, z které k němu chcete přistupovat (např. domácí stránky vaší firmy). (V případě potřeby můžete omezit nešifrovaný http:// přístup k aplikaci Roundcube pouze na požadovanou akci ?_action=logout pomocí jednoduché rewrite condition/rule v konfiguraci Apache). Samotný javascriptový kód ukazuje sílu syntaxe JQuery selektorů i v případě práce s HTML kódem poskytným 3. stranou, který nemáte pod kontrolou (Roundcube logout stránka).

This Javascript/JQuery code fragment enables login to localy installed copy of modern, Ajax-based RoundCube [roundcube.net] webmail directly from your main web page (or any other place in the same domain). The trick is in providing correct "token" value when logging-in. Only remaining restriction is ban of cross-site scripting in all major browsers.

I publish this information mainly because when I was searching web for solution of this problem, I have found substantial number of people asking the same question, without receiving useful answer from anyone - actually, some of the advices were misleading. It will be interesting to monitor Google-impact of this article. I guess, that many webmasters are working on integration of off-the-shelf free/open-source solutions into existing web pages and application - being pressed by user-friendly approach of social networks and major portals.

In order for this code to work correctly, Roundcube webmail must be accessible using both http:// and https:// protoclols and it must be installed in the same domain as the web page, from which you want to access it (e.g. your company homepage). (Optionaly, you can restrict unencrypted http:// access to Roundcube application just to required action ?_action=logout using simple rewrite condition/rule in Apache configuration). The javascript code itself demonstrates power of JQuery selector syntax - even when working with 3rd party HTML code which you do not control (Roundcube logout page).

<script type="text/javascript" src="JQUERY-URL"></script>
<script type="text/javascript">
$("#loginbutton").click(function()
{ 
 $("#loginbutton").hide();
 $("#formcontent").load("/roundcube/?_action=logout", function()
 {
  $("#stolentoken").val($('#formcontent :input[name="_token"]').val());
  $("#loginform").submit();
 });
});
</script>

<form id="loginform" name="mailform" action="https://HOMEPAGE-URL/roundcube/" method="post">
<input type="hidden" name="_token" id="stolentoken" value="" />
<input type="hidden" name="_action" value="login" />
<input type="hidden" name="_timezone" id="rcmlogintz" value="_default_" />
<label for="rcmloginuser">Username</label>
<input name="_user" id="rcmloginuser" type="text"/>
<label for="rcmloginpwd">Password</label>
<input name="_pass" id="rcmloginpwd" type="password" />
<input id="loginbutton" type="button" value="Login (SSL)" />
</form>