Lamplight API examples - creating your own login page

The example

If you'd like a Lamplight login form somewhere other than the main login page, you can set one up. As a security precaution, login forms require a salt (a hidden, random string sent by the server), to stop automated high volume login attempts. That means you need to request a form from our servers to display on your page - you can't just write it in directly.

This is not part of the publishing API and doesn't need the authentication etc.

Here is a form that we've retrieved using YUI3 and javascript to insert the form into the page. We'll also remove class and id attributes to ensure there's no conflict with the rest of our page. You can obviously use other languages if you'd like to.

The code

Unlike all the other examples, we're not using the php Lamplight_Client class. Instead, we're making a straightforward jsonp call (using the YUI3 library) and then injecting the returned html into the page.

If youre not used to YUI3, this will look a bit odd. the use() call loads the 'jsonp' and 'node' modules from the YAHOO servers and when they're all ready calls the final function argument passed to use(). There are obviously other ways to do this, and these days better ways - YUI is now deprecated. This example is retained as the principle will be the same with other js libraries.

You'll need to include the YUI seed file (currently version 3.3) somewhere in your page.


<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"
    charset="utf-8"></script>

    

You'll then need the following code somewhere else (below the seed file) on the page:


YUI().use('jsonp', 'node', function (Y) {


    // Now make a call to the Lamplight server requesting the simple login form.
    // This will return a string of html with a form and some form elements.
    // The function passed is the callback, called when the server responds

    var url = "https://lamplight.online/en/login/index/style/simple/callback/{callback}";

    Y.jsonp(url, function(resp) {

        // And now manipulate the response.  We create a Node 
        // (like a document fragment) from it
        var fm = Y.Node.create(resp),
            allNodes = fm.all("*");

        // and then remove class and id attributes from all nodes
        allNodes.removeAttribute('class');
        allNodes.removeAttribute('id');


      // and finally insert the form html into our page 
      // (into element with id 'logincontainer')
      Y.one("#logincontainer").setContent(fm);
    });
 
});
    

It would obviously be fairly simple to re-arrange the html returned, add classnames, etc. to suit your site. In fact all you really need is the salt element (which is hidden) - the rest is static.

Note that currently, when you log out of Lamplight you will be returned to the standard Lamplight login page, not the page you log in from. If this is a big issue please get in touch with us.