Logging In With YUI and CakePHP AuthComponent

Jan14

In my last post, I discussed the YUI imYUILogin widget that I created. In this post, I will demonstrate how to log in ajaxally using the imYUILogin widget with CakePHP and the AuthComponent. I’m assuming that you have already read the Simple ACL Controlled Application and have the AuthComponent configured correctly. I’m also assuming that you are familiar with the Yahoo User Interface Library.

Download the imYUILogin Widget

First you need to download the imYUILogin widget from imAjaxWidgets on Google Code. This is the repository where I store all of my plugins and widgets. Place the imYUILogin.js file under webroot/js/intrig/imYUILogin/. Create folders as necessary.

AppController

First we need to modify the AppController (app/appcontroller.php). We need to remove the login redirect statement because this will be handled by the widget:

^?View Code PHP

// remove this line
$this->Auth->loginRedirect = array('controller' => 'posts', 'action' => 'add');

The Layout

I created a default layout that will be used throughout my project. I named it default_yui.

^?View Code PHP

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title><?php echo $title_for_layout ?></title>
		<?php 
		if (isset($mainCSS)) {
			echo $html->css($mainCSS);
		} 
		if (isset($loginCSS)) {
			echo $html->css($loginCSS);
		}
		if (isset($yahooapisCSS)) {
			echo $html->css($yahooapisCSS);
		} 
		?>
		<?= $scripts_for_layout ?>
	</head>
	<body class="yui-skin-sam">
		<?php $session->flash('auth'); ?>
		<?php $session->flash(); ?>
		<?php echo $content_for_layout; ?>
	</body>
</html>

This is a generic layout that loads loads certain CSS files only if the variable exists:

^?View Code PHP

if (isset($mainCSS)) {
	echo $html->css($mainCSS);
}

We’ll be loading these from the controlller.

The Login Form

Open the login.ctp file and remove all the content. Add the following:

^?View Code PHP

<?php 
$javascript->link(array('http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/button/button-min.js&2.8.0r4/build/json/json-min.js', 'intrig/imYUILogin/imYUILogin', 'widget_init/login_init'), false);
?>
<div id="imYUILogin">
<div class="hd">Please Login</div>
<div class="bd">
	<div id="loginResp"></div>
	<?php
	e($form->create('User', array('id' => 'UserLoginForm', 'url' => array('controller' => 'users', 'action' =>'login'))));
	e($form->input('User.username', array('id' => 'username')));
	e($form->input('User.password', array('id' => 'password')));
	e($form->end());
	?>	
</form>
</div>
</div>

First we are loading the YUI files from the Yahoo CDN. We are also loading the imYUILogin widget and the widget initialization file (widget_init/login_init).

^?View Code PHP

$javascript->link(array('http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/button/button-min.js&2.8.0r4/build/json/json-min.js', 'intrig/imYUILogin/imYUILogin', 'widget_init/login_init'), false);

Note: Read the A YUI Login Widget post to find out to load the imYUILogin widget using the YUI Loader Utility.

Next I create the form using CakePHP’s FormHelper. You must give your form, username and password fields an id.

CSS Files

I’m going to load the YUI CSS files from Yahoo CDN using the YUI 2 Dependency Configurator, but there are some stylings that are specific to the login form that we need to create.

Create a file named login.css and place it under the webroot/css/ folder.

^?View Code CSS

#imYUILogin {
     display:none;
}
label { 
     display:block;
     float:left;
     width:90px;
     margin-top:5px;
     clear:left; 
}
#loginResp { 
     margin:5px;
     display:none;
     color:#FF0000; 
     text-align:right;
}
input {
     margin-top:5px;
}

These are basic styles and can be configured to your liking. The only style that is required is that the form container (#imYUILogin) must be set to display: none.

Initializing the imYUILogin Widget

I created a separate file to initialize the widget. I created a folder under webroot/js/ named widget_init. I store all of my widget initialization scripts.

Create a file named login_init.js and place it under the widget_init folder. In this example, I am setting up the imYUILogin with the Dialog option (read more about the options in the A YUI Login Widget post.

^?View Code JAVASCRIPT

(function(){		
	var Event = YAHOO.util.Event;
	Event.onDOMReady(function(){
		var imYUILogin = new YAHOO.INTRIG.imYUILogin('UserLoginForm', {
			urls: {submit: 'login', success: 'http://yourdomain.com/cake/requestors/add'},
			container: {id: 'imYUILogin', type: 'dialog'},
			container_position: 'fixed',
                        container_width: '175px',
			loginResponseID: 'loginResp',
                        fields: "username,password"
			}); 	
		});
})();

When the user attempts to log in, the form will be submitted to the login method of the users_controller. Upon successful login, the user will be redirected to the add method of the requestors_controller.

^?View Code JAVASCRIPT

urls: {submit: 'login', success: 'http://yourdomain.com/cake/requestors/add'}

Obviously, you would redirect your user to the appropriate location in your application.

The Users Controller

Now open the users controller. First make sure that you have the necessary helpers and components.

^?View Code PHP

var $helpers = array('Html', 'Form', 'Javascript');
var $components = array('RequestHandler');

The RequestHandler is needed for Ajax requests.

Now we’re going to change the login method:

^?View Code PHP

function login() {
        // When the login method is first called, the login form is opened
        // so this first if statement will be skipped. 
	if ($this->RequestHandler->isAjax()) {
                // see <a href="http://grasshopperpebbles.com/pebblet/cakephp-and-ajax-missing-view/" target="_blank">CakePHP and Ajax</a>
		$this->autoRender = false;
		Configure::write( 'debug', 0);
	}
        // if data is posted by the imYUILogin widget
	if (!empty($this->data)) {
                // log in using the AuthComponent's login method
                // the method will return 1 for a successful login and 0 if login fails
                // see <a href="http://book.cakephp.org/view/247/AuthComponent-Methods" target="_blank">AuthComponent Methods</a>
		$loggedIn = $this->Auth->login($this->data); 
		if ($loggedIn == 1) {
                        // if login is successful, send 'continue' to the imYUILogin widget
                        // this tells the widget to redirect the user to the location specified by
                        // the urls.success option:
                        // urls: {submit: 'login', success: '/requestors/add'}
			echo '{"type": "continue"}';
		} else {
			echo '{"type": "message", "label": "login failed"}';
		}
	} else {	
                // do this when the form is first opened.
		$title = Configure::read('Settings.site_title');
		$this->set("loginCSS", "login");
		$this->set("yahooapisCSS", "http://yui.yahooapis.com/combo?2.8.0/build/fonts/fonts-min.css&2.8.0/build/assets/skins/sam/skin.css");
                // set the default layout
		$this->layout = 'default_yui';
	}
}

One thing to note here. Notice that I am setting CSS variables so that the layout will load them:

^?View Code PHP

$this->set("loginCSS", "login");
$this->set("yahooapisCSS", "http://yui.yahooapis.com/combo?2.8.0/build/fonts/fonts-min.css&2.8.0/build/assets/skins/sam/skin.css");

If you recall, we created conditional statements in the layout file that will load CSS files if a variable is present.

^?View Code PHP

if (isset($loginCSS)) {
	echo $html->css($loginCSS);
}
if (isset($yahooapisCSS)) {
	echo $html->css($yahooapisCSS);
}

Now open your browser and navigate to your login page:

http://yourdomain.com/cake/users/login

You should see the imYUILogin widget. That’s about it. You can now use YUI and the AuthComponent to log in to CakePHP. Enjoy.

GrasshopperPebbles.com

Download the imYUILogin Widget

AppController

The Layout

The Login Form

CSS Files

Initializing the imYUILogin Widget

The Users Controller

Profile cancel