This tutorial expounds upon my previous two tutorials and provides a practical use-case of the plugins: User Authentication. As compared to the other tutorials regarding this specific topic, there is very little that has to be done (in code). Unlike, the other tutorials in this series, I will be making some clear decisions as to the Javascript, and utilizing jQuery for the AJAX. This is simply to keep the code extremely light. Before embarking on this tutorial, it is advisable that you read the two linked below, as it uses their code and techniques.
Relevant Tutorials
Summarizing the Procedure
Since we have already performed the steps performed in the first two tutorials, we will actually have very little legwork for this project. It takes about 15 minutes from start to finish. Unlike the other tutorials, we will simply be making a two documents, and a template. It will be demonstrated quite quickly what changes (very few) have to be made to enable this on your own installation.
Creating the Login AJAX Resource
Simply make a new Resource in the root of your 'web' Context. Name it "AJAX Login". Set the template to "Site Alias" from the second tutorial. Give it an alias of "login". Make it a container (for ease). In its content, place your [ [Login] ] call. (You may copy it from any of your templates or chunks.) Click Save.
Note: For demonstration, you might want to set it with as many contexts as you can.
Refresh your cache! Now, right-click the Login and choose View Resource. We just want to make sure that it works. Now, feel free to try from any of your subdomain Contexts. (I still have yet to confirm/deny Babel Contexts)
Creating the New Template
1. Copy any one of your Templates that uses the Login Snippet.
2. Add jQuery to your HTML Head. You may use the one from the CDN (Its quite fast)
<script src="h.t.t.p.://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
The editor keeps malforming my code above, so it has been altered... Remove the periods from the h.t.t.p.
3. Replace the Login Snippet call
(completely) with the following code:
<!-- This is where your Login will show up -->
<div id="AjaxLogin" class="box"></div>
<script type="text/javascript">
$(document).ready(function()
{
$.ajax({
type:"GET",
url:"/login/",
success:function(data)
{
$("#AjaxLogin").html(data);
},
error:function(XMLHttpRequest, textStatus, errorThrown)
{
$("#AjaxLogin").html(errorThrown + ": " + this.url);
},
dataType:"html"
});
});
</script>
Just make a dummy page with dummy content like the "ipsum lorem" excerpt. Set it to your new template. It doesn't matter where you make it. Once you save it, try to "View Resource" it. It should show your AJAX Login page. If it doesn't, you should see a cute little error telling you why. If you don't, then you're not returning the data (even though it is finding it.
Adjusting the Login Chunks
If you got here, it's finding it, but clicking the Login button is not really useful (or requires a full refresh). That's easily solved!!
Adjustng the Login Chunk
Make a Back-up of your Login Chunk (not the Snippet). Now, open your Chunk and add this attribute to your cute little login submit button element... Take careful notice of the #AjaxLogin. If you changed the name of the id above, you'll have to fix it twice here. Also, note the .loginLoginForm. This needs to be whatever the CSS Selector would be for your form. (Mine is #Login to make it easy for me). The one provided is the default.
onclick="$.ajax({ type:'POST', url:'/[[~[[*id]]]]', data:$('.loginLoginForm').serialize(), success:function(data){$('#AjaxLogin').html(data);}, error:function(error){$('#AjaxLogin').html(error);}, dataType:'html'});return false;"
Alternatively, you could place the code in a function and call it instead. Just don't forget the "return false;" after the function call.
Adjustng the Logout Chunk
Add this code to your Logout Chunk's logout button. Again, notice the #AjaxLogin.
onclick="$.get('[[+logoutUrl]]',function(data){$('#AjaxLogin').html(data);},'html');return false;"
Hopefully, you remembered to save both of these. Now, open that Dummy page we made. You shouldn't get a 404, unless you typed the URL wrong. If you get a 503, then you need to set the 'allow_forward_across_contexts' System Setting to "Yes".
In Conclusion
You just served Ajax Style Login without compromising security to your entire website without having to change much. We can do so with or without redirection (and even supply a redirection URL through an AJAX call, though this is NOT recommended). While it was pretty simple, there are some considerations.
This example utilizes Login's security model, so if there are vunerabilities (which I'm not aware of any), you just accepted them site-wide. It does not degrade gracefully. To do this, you might place a link to a Login Page in your #AjaxLogin div. This will get overwritten by the jQuery GET if JavaScript is turned on. Because it uses your already in place Chunks, your CSS should still apply. The only difference is that your Login elements are in an extra div.
Further Extensions
You could add an event to the $.ajax calls to notify the rest of the page of a Login or Logout, so it could get/remove other components or redirect, if needed. This same model is being used on my site to supply:
- Authentication from http.://domain.tld
- Inline Help and Tooltips from http.://help.domain.tld
- Tags and Tooltips(and their Info) from http.://tags.domain.tld
- Specialized Intro Text and Tooltips from various sub-domains.
Hope this helps!
[ed. note: fuzzicallogic last edited this post 14 years, 1 month ago.]
