CrugeConnector

De Yii Framework en Español
Saltar a: navegación, buscar

CrugeConnector

Por:

Repositorio Oficial: https://bitbucket.org/christiansalazarh/crugeconnector/

Autor: Christian Salazar H <christiansalazarh@gmail.com>

Vista General

CrugeConnector es una extensión para Yii Framework que permite autenticar un usuario usando servicios como Facebook, Google u OpenID en general.

    • CrugeConnector es un componente usado por Cruge, pero esta diseñado de forma totalmente aislada, por tanto puedes usarlo incluso para una simple aplicación básica de Yii que no usa Cruge.**

El funcionamiento de CrugeConnector es muy simple de entender:

1. En tu vista de login insertas una pieza de código muy simple que listara los conectores disponibles, por ejemplo "facebook" y "google", para que tu usuario pueda decidir con cual de ellos querrá iniciar sesion.

2. Cuando el usuario hace click en por ejemplo "google" pues será llevado al website de Google en donde se le preguntara si quiere usar su cuenta de google para iniciar sesion en tu website, cuando el usuario lo permite entonces Google invocará un "callback" en tu aplicación (mas adelante sabras que es un callback y como configurarlo, es muy simple).

3. Tu recibirás una redirección automática a algún action que tu configures en config/main (en la sección de crugeconnector), en este action tu leerás los datos del usuario que intenta visitar tu website y podrás usarlos para iniciar sesion con ellos, incluso para registrar al usuario de forma automática, ya esto depende de tu decisión.

Cómo lucirá tu pantalla de login

Crugeconnector--viewlogin.png

Puedes notar aqui que aparecen dos iconos: Facebook y Google. Estos aparecen porque en tu configuracion (config/main) existen y fueron marcados como 'enabled'=>true.

Por defecto CrugeConnector ofrece dos "clientes" funcionales: Google y Facebook. Trae consigo otro mas llamado "Tester" que tiene como propósito presentar el caso mínimo para que puedas crear tu propio Cliente de conexión en caso de que google y facebook no sean los mas adecuados.

Digamos que ahora quieres agregar Yahoo, pues te guiarás por el cliente "Tester" e implementarás el procedimiento de login que Yahoo requiera. No necesitas modificar en lo absoluto el "core" de crugeconnector para agregar a este nuevo cliente, pues su configuración permite que tu instales ese nuevo cliente en una clase aparte en tu propio proyecto y en config/main solo le informas cual es la ruta.

Que necesitas para insertar estos conectores en tu vista de login.

Solo necesitas editar: /yourapp/protected/views/site/login.php y agregar:

  <?php if(Yii::app()->crugeconnector->hasEnabledClients){ ?>
	<div class='crugeconnector'>
		<span>Tambien puedes iniciar sesión con:</span>
		<ul>
		<?php 
			$cc = Yii::app()->crugeconnector;
			foreach($cc->enabledClients as $key=>$config){
				$image = CHtml::image($cc->getClientDefaultImage($key));
				echo "<li>".CHtml::link($image,
					$cc->getClientLoginUrl($key))."</li>";
			}
		?>
		</ul>
	</div>
<?php } ?>

Como podrás apreciar, incluso los iconos de facebook y google ya vienen por defecto, y con una llamada a Yii::app()->crugeconnector->getClientDefaultImage('facebook'); podrás obtenerla y presentarla, pero, eso depende de tu aplicación y decisión, crugeconnector solo provee el API.

CrugeConnector te provee ademas el metodo getEnabledClients() el cual te da una lista de "keys" (ejemplo, te devuelve un array('facebook','google') informando que estos 'keys' estan marcados como habilitados en config/main.

Con getClientLoginUrl('facebook') puedes obtener la URL requerida para que el usuario haga click sobre ella, eso iniciará el proceso de autenticación remota.


Dónde recibes la respuesta acerca de si un usuario pudo o no inciar sesión y cómo obtengo los datos del usuario ?

De una manera muy simple, a través de un Action que tu defines en tu aplicación. Primero, es necesario que sepas que en la configuración de CrugeConnector en tu archivo de config/main se indica cuales serán los actions de onSuccess y de onError, estos actions serán invocados por CrugeConnector cuando algún cliente (cualquiera, sea facebook, google, tester o cualquier otro que hayas instalado) ha recibido respuesta o error.

Como caso de ejemplo, supongamos que configuramos a CrugeConnector para que responda en:

  
'onSuccess'=>array('site/loginsuccess'),
'onError'=>array('site/loginerror'),

pues bien estos actions pudieran quedar asi:

  public function actionLoginSuccess(){

		$loginData = Yii::app()->crugeconnector->getStoredData();
		// loginData: remote user information in JSON format.

		$info = $loginData;
		$this->renderText('<h1>Welcome!</h1><p>'.$info.'</p>');
	}
	public function actionLoginError($message=''){
		$this->renderText('<h1>Login Error</h1><p>'.$message.'</p>');
	}

La llamada a "Yii::app()->crugeconnector->getStoredData();" es para conocer que datos se obtuvieron en el inicio de sesion remoto. Se supone que el inicio de sesion fue exitoso, porque cruge ha invocado a actionLoginSuccess. Si ocurrio un error, si el usuario denego la aplicación o cualquier otra cosa pues actionLoginError será invocado con un argumento 'message' conteniendo el mensaje de error.


¿ Qué datos me devuelven los Clientes de CrugeConnector ?

Normalmente devuelven datos en forma JSON, pero esto depende de cómo se programó el Cliente, en este caso, tanto el cliente de facebook como el de google fueron programados para devolver lo que el website de google o facebook devuelven tal cual: estos entregan datos en forma JSON, por tanto a ti se te entrega exactamente eso.

En el caso de login exitoso usando Facebook, $loginData podría tener lo siguiente (usando mi usuario como ejemplo):

  
{"id":"192891289810901","name":"Christian Salazar",
"first_name":"Christian","last_name":"Salazar",
"link":"http:\/\/www.facebook.com\/christian.salazar.5243",
"username":"christian.salazar.5243",
"gender":"male",
"email":"christiansalazarh\u0040gmail.com",
"timezone":-4.5,"locale":"es_LA","verified":true,
"updated_time":"2012-11-16T04:19:52+0000"}

En el caso de login exitoso usando google, $loginData podría traer lo siguiente:

  {"contact\/email":"christiansalazarh@gmail.com"}

Por qué los datos que vienen de google son diferentes a los de facebook ?

Todo depende del argumento 'scope' que tu le des a cada Cliente en tu config/main, además de que es finalmente el usuario quien da permiso para que tales o cuales argumentos solicitados por ti sean devueltos a tu aplicación. En el caso de google viene menos información que facebook, pero insisto esto depende de lo que tu pidas en el argumento 'scope' y de los permisos del usuario.

¿ Qué hago con esa cosa JSON ?

JSON es un estándar para enviar información entre servidores, es muy simple de usar, por tanto al recibir esos datos en forma JSON tu puedes acceder a ellos usando $data = CJSON::decode($loginData); (siendo loginData aquella devuelta por: $loginData = Yii::app()->crugeconnector->getStoredData();). Ejemplo: $data['first_name'].

¿ Ok y ahora qué hago con el usuario que he recibido ?

Depende de tu sistema. CrugeConnector no pretende hacerte el negocio, solo ayudarte a que lo hagas, pues tendrás que leer estos datos recibidos, detectar tu mismo si este usuario ya estaba registrado (si no lo estaba, pues puedes pensar en registrarlo de forma automática), o puedes darle acceso a tu aplicación si ya estaba registrado, tal cual hubiese hecho login de la forma tradicional.

Cómo Instalar CrugeConnector

CrugeConnector es una extensión y se instala como un Componente de Yii Framework. Por tanto, hay decargar la extensión desde su repositorio principal, instalarla en tuapplicacion/protected/extensions/crugeconnector y luego editar config/main para indicar los parametros. Luego de eso hay que crear un callback, crear una aplicación de facebook (para el caso de Google no es necesario, solo Facebook lo requiere) y por último configurar tu siteController (u otro controller de tu preferencia) para conectar a crugeConnector a través de este controller y para poder recibir la respuesta de crugeconnector (onSuccess y onError, como te cuenta el Overview).

Obtener CrugeConnector

CrugeConnector se encuentra en este repositorio:

 https://bitbucket.org/christiansalazarh/crugeconnector

1. Asegura que tu aplicación tenga el directorio 'extensions' (por defecto lo traen).

  /yourapplication/protected/extensions/

2. Obtener una copia de CrugeConnector desde el Repositorio Oficial de CrugeConnector, usando una descarga ZIP o mediante el uso de GIT. Es tu decisión:

2.a) ZIP

  descomprimir el zip en /yourapplication/protected/extensions/, 

2.b) GIT

  cd /yourapplication/protected/extensions/
  git clone https://christiansalazarh@bitbucket.org/christiansalazarh/crugeconnector.git

no importa cual sea el caso, lo importante es que quede asi:

  
christian@coco:/www/crugeconnectorapp/protected/extensions/crugeconnector$ tree
├── clients
│   ├── Facebook.php
│   ├── Google.php
│   └── Tester.php
├── components
│   └── LightOpenID.php
├── CrugeBaseClient.php
├── CrugeConnectorAction.php
├── CrugeConnector.php
├── ICrugeClient.php
└── resources
    ├── crugeconnector.css
    ├── facebook.png
    ├── google.png
    └── tester.png

3. Edita tu archivo /tuaplicacion/protected/config/main.php y agrega lo siguiente:

en 'import' agregar:

  'application.extensions.crugeconnector.*',

en 'components':

  
'components'=>array(
		'crugeconnector'=>array(
			'class'=>'ext.crugeconnector.CrugeConnector',
			'hostcontrollername'=>'site',
			'onSuccess'=>array('site/loginsuccess'),
			'onError'=>array('site/loginerror'),
			'clients'=>array(
				'facebook'=>array(
					// required by crugeconnector:
					'enabled'=>true,
					'class'=>'ext.crugeconnector.clients.Facebook',
					'callback'=>'http://ascinformatix.com/app1/facebookcallback.php',
					// required by remote interface:
					'client_id'=>"892839899189819",
					'client_secret'=>"019238203890182983920989018203",
					'scope'=>'email, read_stream',
				),	
				'google'=>array(
					// required by crugeconnector:
					'enabled'=>true,
					'class'=>'ext.crugeconnector.clients.Google',
					'callback'=>'http://ascinformatix.com/app1/googlecallback.php',
					// required by remote interface:
					'hostname'=>'ascinformatix.com',
					'identity'=>'https://www.google.com/accounts/o8/id',
					'scope'=>array('contact/email'),
				),
				'tester'=>array(
					// required by crugeconnector:
					'enabled'=>true,
					'class'=>'ext.crugeconnector.clients.Tester',
					// required by remote interface:
				),
			),
		),

   // bla bla
),

4. Ahora hay que conectar a CrugeConnector con algun controller, por defecto usaremos a

 /tuaplicacion/protected/controllers/siteController.php

en este archivo agregaras al metodo actions() lo siguiente:

  'crugeconnector'=>array('class'=>'CrugeConnectorAction'),
  

ejemplo:

  
	public function actions()
	{
		return array(
			'captcha'=>array(
				'class'=>'CCaptchaAction',
				'backColor'=>0xFFFFFF,
			),
			'page'=>array(
				'class'=>'CViewAction',
			),
			'crugeconnector'=>array('class'=>'CrugeConnectorAction'),
		);
	}

5. En el mismo archivo siteController.php (ver paso 4) agregarás dos actions: (estos actions tienen estos nombres porque en el paso 3 se configuraron asi en la seccion de 'onSuccess' y 'onError').

  
	public function actionLoginSuccess(){

		$loginData = Yii::app()->crugeconnector->getStoredData();
		// loginData: remote user information in JSON format.

		$info = $loginData;
		$this->renderText('<h1>Welcome!</h1><p>'.$info.'</p>');
	}

	public function actionLoginError($message=''){
		$this->renderText('<h1>Login Error</h1><p>'.$message.'</p>');
	}


Y si no quiero usar siteController sino otra ?

1. En la configuracion de crugeconnector deberas ingresar el "nombre" del controller en: 'hostcontrollername'=>'otra', // asumiendo que es: /protected/controllers/OtraController.php

2. Deberás aplicar el paso 4 y 5 (ver instalación) a tu nueva controladora OtraController.php.

3. Deberás modificar tus callbacks. (mas adelante escribiré en detalles sobre el Callback).

Callback

En CrugeConnector un callback es un archivo PHP ubicado en la raíz de tu aplicación web con el objeto de simplificar los argumentos de URL que bien podrían fallar en casos como Facebook al momento de que este website quiera responder con información hacia tu aplicación web.

¿ Cual es la razón de tener un Callback ?

Cuando quieres iniciar sesión en un sitio web remoto como Facebook o Google las cosas no son tan simples como ir al sitio web obtener información del usuario y hacer algo con eso. Debido a los hackers negativos que roban información pues estos sitios web se aseguran de que no haya fantasmas robando información (fantasma es una entidad que se conecta, saca datos y después solo dios sabe quién fue, debido a que quien sacó la información esta detrás de un firewall o un router).

Por tanto, para proteger la información, los sitios como Google o Facebook, incluso otros, piden "llamar de regreso " a tu aplicación web para entregarle la información. El hecho de "llamar de regreso" es lo que da origen al término "Callback".

(En lenguajes como C (no c++) usamos el término callback para pasar funciones que serán llamadas para obtener de ellas una respuesta, en scripts como javascript tambien se usan, php explota si usas un callback, pero ya eso esta cambiando).

¿ Por qué no se le puede pasar a Facebook una URL con argumentos y Listo! ?

Porque explota y no hace nada. Por ejemplo, una URL callback para Facebook como esta fallará con una respuesta de "Bad Request":

  http://ascinformatix.com/app/index.php?r=site/crugeconnector&crugekey=tester&crugemode=login

Por tanto, hay que pasarle a facebook algo sin argumentos, algo como:

  http://ascinformatix.com/app/facebook-callback.php

Y ahora, cómo le damos los argumentos a ese facebook-callback.php ?

Pues internamente dentro de facebook-callback.php como muestra el siguiente ejemplo:

Ejemplo de Callback para un Cliente Facebook

El siguiente callback puede ser usado para proveerle a tu aplicación de Facebook una URL de Retorno sin argumentos, puedes copiar y pegar este codigo en un archivo llamado /facebook-callback.php

Este callback debe estar registrado en config/main asi:

   (obviando los demas parametros por asuntos de claridad)
    'crugeconnector'=>array(
       'facebook'=>array(
          'callback'=>'http://localhost/yourapp/facebook-callback.php'),
    )

  
// ARCHIVO:  /facebook-callback.php
<?php
// USA ESTA URL CUANDO USES URL MANAGER, DEBE FINALIZAR EN: "?"
// $url = "index.php/site/crugeconnector/crugekey/facebook/crugemode/callback?";

// USA ESTA OTRA CUANDO NO TENGAS URL MANAGER ACTIVADO
$url = "index.php?r=/site/crugeconnector&crugekey=facebook&crugemode=callback";

// codigo comun
foreach($_GET as $key=>$val)
    $url .= "&".$key."=".urlencode($val);
header("Location: ".$url);

  

Ejemplo de Callback para un Cliente Google

El siguiente callback puede ser usado para proveerle a Google una URL de Retorno sin usar argumentos, puedes copiar y pegar este codigo en un archivo llamado /google-callback.php

Este callback debe estar registrado en config/main asi:

   (obviando los demas parametros por asuntos de claridad)
    'crugeconnector'=>array(
       'google'=>array(
          'callback'=>'http://localhost/yourapp/google-callback.php'),
    )

  
// ARCHIVO:  /google-callback.php
<?php
// USA ESTA URL CUANDO USES URL MANAGER, DEBE FINALIZAR EN: "?"
// $url = "index.php/site/crugeconnector/crugekey/google/crugemode/callback?";

// USA ESTA OTRA CUANDO NO TENGAS URL MANAGER ACTIVADO
$url = "index.php?r=/site/crugeconnector&crugekey=google&crugemode=callback";

// codigo comun
foreach($_GET as $key=>$val)
    $url .= "&".$key."=".urlencode($val);
header("Location: ".$url);

Ejemplo de Callback para un Cliente Tester

El Tester es un cliente con código mínimo usado para hacer pruebas locales, simulaciones y ademas sirve como demostración para crear nuevos clientes.

Este callback debe estar registrado en config/main asi:

   (obviando los demas parametros por asuntos de claridad)
    'crugeconnector'=>array(
       'tester'=>array(
          'callback'=>'http://localhost/yourapp/tester-callback.php'),
    )

  
// ARCHIVO:  /tester-callback.php
<?php
// USA ESTA URL CUANDO USES URL MANAGER, DEBE FINALIZAR EN: "?"
// $url = "index.php/site/crugeconnector/crugekey/tester/crugemode/callback?";

// USA ESTA OTRA CUANDO NO TENGAS URL MANAGER ACTIVADO
$url = "index.php?r=/site/crugeconnector&crugekey=tester&crugemode=callback";

// codigo comun
foreach($_GET as $key=>$val)
    $url .= "&".$key."=".urlencode($val);
header("Location: ".$url);

¿ Por qué mi callback de Facebook o Google no funcionan ?

Porque seguramente estas trabajando localmente y google o facebook no podrán ver tu callback.

El siguiente callback sera invisible para google o facebook:

 http://localhost/miapp/facebook-callback.php

razon #1:

 "localhost" no existe en internet, solo en tu máquina y google o facebook no saben quien es "localhost".

Usa el callback del tester para probar localmente. corriendo manualmente a http://localhost/miapp/tester-callback.php.

Caso Facebook: crear una aplicación en facebook

Para que el cliente "facebook" funcione es necesario que crees una aplicación en facebook. (para el caso de google no hay que hacer nada)

1. Debes ingresar con tu cuenta de facebook a la siguiente URL:

https://developers.facebook.com/apps/

2. Busca y dale click a "Crear Nueva Aplicación"

3. Dale un nombre a tu aplicación:

Facebookapp-1.png

4. Opciones mínimas que aseguren funcionamiento:

Facebookapp-2.png

  • Acerca de Sandbox Mode: [x] Activado:

Cuando esta activado solo admite a tu propia cuenta al momento de iniciar sesion con CrugeConnector, si otra persona quiere iniciar sesion usando Facebook con tu pantalla de login hecha con CrugeConnector recibirá un mensaje de error.

  • URL del sitio: Esta es la url de tu callback (ver tema Callback), aquella misma URL que configuraste en config/main para el cliente 'facebook'.
  • AppID y App Secret: Son los dos valores que se configuran en config/main para el cliente 'facebook' (client_id y client_secret respectivamente).


Funcionamiento de un Cliente

Secuencia desde el login hasta el callback

1- Cuando tu usuario hace click en "Google", pues el CrugeConnector hallará a un cliente para manejar a google, usando la clase crugeconnector/clients/Google.php. (no busca la clase por su nombre, sino por la configuracion en config/main atributo 'class' de la entrada 'google').

2- CrugeConnector ejecutará a: clients.Google::doLogin(), por tanto el código puesto en ese metodo será el encargado de redireccionar tu browser a la url de autenticacion remota de google. IMPORTANTE: Se le dará al sitio web de google la url de tu callback para que puedan darte los datos del usuario mediante ese mecanismo.

3- Tu usuario verá la página de autenticacion de Google, en la cual el o ella darán permiso para continuar, es posible que aborten el proceso.

4- Tras una accion del usuario, Google Website invocará a tu callback: http://ascinformatix.com/app/google-callback.php, con el objeto de informar el resultado de la operacion.

5- El callback llamará al action SiteController::actionCrugeConnector (paso #4 de la instalación) que es manejado por la clase CrugeConnectorAction, quien a su vez invocará a CrugeConnector, quien a su vez identificará al cliente, hara una instancia de clients.Google.php y le invocará a Google::doCallback().

6- Google.doCallback() recibirá datos de google, los almacenará en memoria de sesión usando a CrugeBaseClient::setData(), y finalmente serás redirigido a uno de los actions: onSuccess u onError, según sea el caso de respuesta.

7- Tu, en los actions de onSuccess u onError podrás conocer que datos se recibieron haciendo una llamada a: Yii::app()->crugeconnector->getStoredData(). Revisa al inicio de esta wiki acerca de cómo son los datos que google o facebook te envían.


Usando el Tester

El cliente Tester (que trae CrugeConnector) sirve para que simules ser facebook o google sin siquiera tener internet. Una vez que tu app funciona con el Tester entonces los problemas locales se habrán resuelto. El funcionamiento con el Tester garantiza que tu app responde bien ante un usuario que viene de facebook o google, recuerda que la funcion de CrugeConnector no es la de darle a tu app el inicio de sesion o el registro de usuario..la funcion de CrugeConnector es: darte el usuario, nada mas. Ten esto presente.

Si te das cuenta existe un método de inicio de sesión llamado "Tester", para habilitarlo o deshabilitarlo debes ir a tu archivo protected/config/main.php y editar la entrada 'components'=>array('tester'=>array('enabled'=>--true o false--)).

Es muy útil, si considerás que los sitios web como facebook o google requieren que tu aplicación web esté instalada en un sitio real, y mas aún en el caso de facebook que requieres de una aplicación web. Con este Tester podrás simular cualquiera de las dos.

Para evitar que hagas modificaciones al CORE (código fuente maestro) de CrugeConnector pues es mas sano que hagas una copia de /tuapp/protected/extensions/crugeconnector/Tester.php dentro de /tuapp/protected/components/Tester.php, y luego, en tu archivo de config cambias la ruta de la clase, para que CrugeConnector use esta nueva clase y no la original.

Se hace asi:

1. haz una copia de:

 /tuapp/protected/extensions/crugeconnector/Tester.php

hacia:

 /tuapp/protected/components/Tester.php

2. Edita tu archivo:

 /tuapp/protected/config/main.php

y cambia la ruta del atributo "class" por lo que te muestro:

'tester'=>array(
	'enabled'=>true,
	'class'=>'application.components.Tester',  // << ---- AQUI, poner esto.
),

3. Pues ahora puedes editar a tu gusto el archivo

/tuapp/protected/components/Tester.php

En este archivo hallarás un metodo llamado doCallback(), el cual ya trae varios ejemplos para activar o desactivar. Supon que quieres simular una respuesta de Facebook, pues pones:

	public function doCallback(){
		// facebook simulation: 
		//
		$this->setKey('facebook');
		$this->setData(CJSON::encode(
			array(
				'username'=>'jdoe',
				'email'=>'jondoe@xyz.com',
				'first_name'=>'Jon',
				'last_name'=>'Doe',
			)));

		return true;
	}


Cuando en la pantalla de login selecciones "TESTER" (no facebook!) pues el Tester simulará ser facebook y te responderá tal cual lo hubiese hecho facebook. Mismo caso aplica para Google.

Diagramas Varios

Diagramas de Secuencia

Este diagrama muestra que sucede desde que se hizo click en "Login" hasta que el sitio web remoto recibió la petición de autenticación.

DoLogin--sec-diagram-.jpg

Este diagrama muestra cómo el sitio web remoto responde a un callback de nuestra aplicación y muestra cómo esta respuesta es manejada por CrugeConnector.

DoCallback--sec-diagram.jpg

Diagrama de Clase de CrugeConnector

Crugeconnector-class-diagr.png

Diagrama de Clase de Yii Auth

Yii base auth class diag..png


Problemas

Aqui voy colocando algunos problemas que pueden ir saliendo.

El email no esta presente en los datos entregadoskey: facebook

CrugeConnector almacena las credenciales obtenidas remotamente en una variable de sesion para su posterior uso usando los metodos push() y getStoredData() de la clase CrugeBaseClient.

Hay casos en que esta variable de sesion puede ser blanqueada por otros procesos (CWebUser::init()) con la consecuencia de que CrugeConnector no pueda recuperar la data obtenida remotamente causando el fallo mencionado aqui en el titulo, para solucionar esto puedes seleccionar que metodo de almacenamiento usar:

(debes alterar el archivo CrugeClientBase.php, mientras consigo una solucion mas decente..)

1. Con CHttpSession, por defecto comentado en el codigo. Podrias habilitarlo en tal caso que se requiera. https://bitbucket.org/christiansalazarh/crugeconnector/src/fe4795225cb30cdcc8e5879c79e51f96fb3391d1/CrugeBaseClient.php?at=master#cl-82

2. Sin CHttpSession (Usando $_SESSION), por defecto habilitado.

  • No pueden estar las dos habilitadas !

CONECTAR A CRUGE PARA USAR FACEBOOK Y GOOGLE COMO PROVEEDOR DE CUENTAS

Usando a Cruge como gestor de usuarios puedes aumentar su potencial conectandole a CrugeConnector. Para saber como conectar ambas partes y lograr esta funcionalidad puedes leer este documento: (Conectar Cruge con CrugeConnector)

Quiero poner solo un link "Registrate con Facebook" (o google) en vez del form de login tradicional. ¿ Cómo ?

Supon que quieres poner en tu website solo un icono de facebook para que los usuarios inicien sesion con su cuenta de Facebook de inmediato sin ir a un formulario de login.

Es simple, usas el API de CrugeConnector en tu propia vista asi:

 
<div>
	<?php 
		$key = 'facebook';
		$cc = Yii::app()->crugeconnector;
		$imagen = CHtml::image($cc->getClientDefaultImage($key));
		echo CHtml::link($imagen,$cc->getClientLoginUrl($key));
	?>
</div>

Con eso aparecera una imagen (en forma de link) a la que tu usuario podrá darle click y asi iniciar sesión o registrarse en tu sistema usando su cuenta de facebook.

Debes recordar que tu aplicación Yii original (la que que yiic te crea en blanco) no tiene gestión para crear usuarios ni registrarlos por tanto CrugeConnector solo te devolverá los datos del usuario. Si quieres tener todo el poder de gestion de usuarios debes usar Cruge y para insertarle a Cruge este componente de CrugeConnector deberás leer este enlace: Conectar CrugeConnector a Cruge para brindar inicio de sesión con facebook y google