Loguear con facebook

#1 (**permalink**) 04/12/2010, 15:56

Hola y muy buenas (tardes, dias, noches)

Bien, hace tiempo que ya no tengo un problema y/o duda, pero en esta ocasion ya me atore demasiado

Bien, lo que trato de hacer, es justamente lo que dice el titulo, loguear con facebook

clasico, logueo y registro

bien, creo que me he complicado bastante en estos puntos

lo que estoy haceindo es lo siguiente

abrir secion de facebook
obtener datos
enviarlos por post via ajax par comproar existencia de usuario
si el usuario existe lo logueo
si no lo invito a registrarse

todo lo hago mediante ajax con ayuda de jquery (jaja que tramposo XD)

el login de facebook unicamente lo uso para obtener el id de usuario

osea el login sera un tipico user pass

en este caso el user es el id de facebook del usuario y el pass se genera en tiempo real

el problema aqui es que no se logra loguearse bien a una persona

el login de facebook fucniona bien, pero el mio es el que no

lo pueden checar aqui

http://dannegm.com (para los que se logren loguear, les mostrara un panel de escritura libre del blog, no comenten eso, aun no desarrollo la identificacion de tipo de usuarios (claro no puedo loguear usurios aun :P))

a continuacion les dejo el codigo que utilizo para hacer esto con comentarios y explicaciones
-------------------------------------------------------------------------------------
en el index llamo este archivo con php (include), que es el que se encarga de todo el login
facebookConnect.php

Código Javascript:

Ver original<a href="#" id="login">Entrar con facebook</a>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> 
<script type="text/javascript">
    var nombre;
    var link;
    var imagen;
    FB.init({
        appId: 'MIIDDEAPPFACEBOOK',
        status: true,
        cookie:true,
        xfbml: true
    });
    document.getElementById('login').addEventListener('click', function (e) {
        e.preventDefault();
        FB.login(function (response) {
            if (response.session) {
                var fb_idUser;
                var fb_name;
                var fb_about;
                var fb_link;
                var fb_pic;
                var fb_genere;
                document.getElementById('login').removeEventListener('click', arguments.callee, false);
                FB.api('/me', function (usuario) {
                    console.log(usuario);
                    fb_idUser = usuario.id;
                    fb_name = usuario.name;
                    fb_about = ""; // Lo dejo en blanco por correccion... despues lo reparo
                    fb_link = usuario.link;
                    fb_genere = usuario.gender;
                }); 
                FB.Data.query('SELECT pic FROM user WHERE uid = me()').wait(function (filas) {
                    fb_pic = filas[0].pic;
                });
 
                // A partir de aqui explico
                $.post( //Compruebo si el usuario existe enmi base de datos
                    "fb/fb-comprobar.php",
                    {
                        idUser: fb_idUser
                    },
                    function(resultado){
                        if(resultado != "false"){ //Si existe
                            //post a login
                            $.post( // Trato de hacer login
                                "fb/fb-login.php",
                                {
                                    idUser: fb_idUser, // Usuario (id de facebook)
                                    pass: resultado // Contraseña (generada en tiempo real, la imprime en el callback y lo guarda en una cookie
                                },
                                function(login){ // Resibe la contraseña generada
                                    if(login != "false"){ // Si la contraseña coincide con el cookie, se loguea correctamente al usuario
                                        msgAlert("Estas logueado!!");
                                        location.href= "http://dannegm.com";
                                    }else{ // Si no, mostrar error de logueo
                                        msgAlert("Ha ocurrido un incombeniente a la hora de loguear!","Error");
                                    }
                                }
                            );
                        }else{ // Si el usuario no existe en mi bd
                                    // Invitarlo a registrarse
                            msgConfirm("Actualmente no estas registrado en este sitio, para poder comentar, publicar y demas cosas debes registrarte.<br /><br />¿Deseas hacerlo?","Registrate",
                                function(result){
                                    if(result==true){ // Si acepta, obtengo sus datos de facebook y los registro y lo logueo
                                        $.post(
                                            "fb/fb-register.php",
                                            {
                                                idUser: fb_idUser,
                                                name: fb_name,
                                                about: fb_about,
                                                link: fb_link,
                                                pic: fb_pic,
                                                genere: fb_genere
                                            },
                                            function(login){
                                                if(login != "false"){
                                                    msgAlert("Estas logueado!!");
                                                    location.href= "http://dannegm.com";
                                                }else{
                                                    msgAlert("No estas logueado!!");
                                                }
                                            }
                                        );
                                    } // Si no, simplemente no se hace el logueo
                                }
                            );
                        }
                    }
                );
            }
        });
    }, false);
</script>

Este archivo comprueba existencia de usuario y genera la contraseña
fb/fb-comprobar.php

Código PHP:

Ver original<?php
    include("../includes/config.php");  // Incluir los datos de conexion mysql
 
    $idUser = $_POST["idUser"]; // Resivir el id del usuario
 
    // Establecer conexion a MySQL
    $conexion = mysql_connect($servidor, $usuario, $clave);
    if (!$conexion){
        die("Fallo la conexión a la Base de Datos: " . mysql_error());
    }
 
    // Estableser conexion a la base de datos
    $seleccionar_bd = mysql_select_db($basedatos, $conexion);
    if (!$seleccionar_bd){
        die("Fallo la selección de la Base de Datos: " . mysql_error());
    }
 
    // Generar consulta, buscamos al usuario en la base de datos
    $sql = "SELECT id FROM usuarios WHERE id='" . $idUser . "'" ;
 
    // Ejecutar consulta
    $query = mysql_query($sql);
 
    if(mysql_num_rows($query)<0) {
        //No existe usuario
        die("false");
    }else{
        //Existe usuario y devuelve la contraseña
        mt_srand(time());
        $pass = mt_rand(0,99999999);
        setcookie("pass", $pass, time()+(60*60*5));
        die($pass);
    }
 
?>

Este archivo hace la validacion de datos y permite el login
fb/fb-login.php

Código PHP:

Ver original<?php
 
    $idUser = $_POST["idUser"]; // Resivo id de usuario
    $pass = $_POST["pass"]; // Resivo contraseña anteriormente generada
    if ($pass == $_COOKIE["pass"]){ // Si la contraseña es correcta
        include("../includes/config.php");
 
        // Establecer conexion a MySQL
        $conexion = mysql_connect($servidor, $usuario, $clave);
        if (!$conexion){
            die("Fallo la conexión a la Base de Datos: " . mysql_error());
        }
 
        // Establecer conexion a la bd
        $seleccionar_bd = mysql_select_db($basedatos, $conexion);
        if (!$seleccionar_bd){
            die("Fallo la selección de la Base de Datos: " . mysql_error());
        }
 
        // Obtengo el nombre del usuario
        $sql = "SELECT nombre FROM usuarios WHERE id = '" . $idUser . "'";
        $query = mysql_query($sql);
        if($row = mysql_fetch_array($query)){
            $name = $row['nombre'];
        }
 
        // Logueo al usuario, guardo la secion abierta (true), el id de usuario y su nombre
        setcookie("login", "true", time()+(60*60*24*7*4));
        setcookie("idUser", $idUser, time()+(60*60*24*7*4));
        setcookie("name", $name, time()+(60*60*24*7*4));
    }else{
        // Si la contraseña es incorrecta (por algun span, usuario malisioso, etc)
        die("false"); // Devolver falso
    }
?>

Y finalmente este archivo hace el registro del usuario
fb/fb-register.php

Código PHP:

Ver original<?php
    // Declaro los datos que voy a registrar
    $idUser = $_POST["idUser"];
    $name = $_POST["name"];
    $about = $_POST["about"];
    $link = $_POST["link"];
    $pic = $_POST["pic"];
    $genere = $_POST["genere"];
 
    $age = "1993-04-01";
    $email = "[email protected]";
    $tipo = "normal";
    $nombreautor = "unname";
    $date = date("Y-m-d");
 
    // Conecto a bd
    include("../includes/config.php");
 
    $conexion = mysql_connect($servidor, $usuario, $clave);
    if (!$conexion){
        die("Fallo la conexión a la Base de Datos: " . mysql_error());
    }
 
    $seleccionar_bd = mysql_select_db($basedatos, $conexion);
    if (!$seleccionar_bd){
        die("Fallo la selección de la Base de Datos: " . mysql_error());
    }
 
    // Inserto los datos en el registro
    $sql = "INSERT INTO usuarios (id, nombre, nombredeautor, email, urlfoto, urlperfil, edad, sexo, fechaderegsitro, tipo) VALUES ('" . $idUser . "', '" . $name . "', '" . $nombreautor . "', '" . $email . "', '" . $pic . "', '" . $link . "', '" . $age . "', '" . $genere . "', '" . $date . "', '" . $tipo . "')";
    $query = mysql_query($sql);
    if (!$query){
        die("Fallo el registro: " . mysql_error());
    }else{
        // Si todo fue correcto, logeo al usuario
        die("Exito!!");
        setcookie("login", "true", time()+(60*60*5));
        setcookie("idUser", $idUser, time()+(60*60*5));
        setcookie("name", $name, time()+(60*60*5));
    }
?>

Nota: msgAlert(); y msgConfirm(); son mis verciones de los famosos Alert(); y Confirm();
-------------------------------------------------------------

Bien, si alguien tiene idea de donde esta mi problema (que creo que esta en el archivo de comprovacion) por favor ayudenme

Seguire invetigando mi error, y tratar de solucionarlo

Igual cualquier duda y/o sugerencia decirme!!

Todos los comentarios productivos (me agraden o no) son bienvenidos!!

de antemano gracias!!

#2 (**permalink**) 04/12/2010, 19:05

Meditando mas a fondo mi problema, creo que la consulta que hago en fb/fb-comprobar.php linia 19 no tiene sentido

Por que busco el id donde id sea igual que id (si yo tampoco se por que lo puse)

en fin, ademas de eso, creo que la forma de verificar si existe el registro esta algo mal, y esque nunca me habia surgido la nececidad de verificarlo

alguna sugerencia de como hacerlo?? tal vez con esto resuelva mi problema

y gracias a los 50 usuarios que se tomaron la molestia de leerme!! XD

#3 (**permalink**) 04/12/2010, 21:47

Bien, asunto solucionado gracias a dual#nigma...
despues posteare la solucion (tube que reescriir todo de nuevo, jaja)

bien, gracias por tomarse la molestia de leer, aunque no hayan respondido!!

beto_20 · #4 (**permalink**) 04/12/2010, 22:44

ey sube la solucion plis ayer empeze a trabajar con la api de facebook pero solo obtengo el ID del usuario me gustaria guardar sus datos en mi BD, ojala puedas subir tu solucion seria una grata ayuda. saludos

#5 (**permalink**) 05/12/2010, 00:08

si, aun estoy preparando detalles, el lunes al anocheser (en mexico) mas tardar los subo, los domingos no trabajo!! XD

dual3nigma · #6 (**permalink**) 05/12/2010, 01:47

Uuu Jaja gracias x los créditos!! =) Espero que quede súper! Nos estamos viendo!

#7 (**permalink**) 05/12/2010, 02:16

Cita:

Iniciado por dual3nigma

Uuu Jaja gracias x los créditos!! =) Espero que quede súper! Nos estamos viendo!

de que!! me has ayudado mucho!! (mas de que a los presentes aqui, como siempre lo tengo que resolver por otro lado ¬¬)

pero aun no te puedo dar karma... moderadores... permiten que le de karam? jaja dice que debbo exparcir mas karma antes de darle a el!! XD

beto_20 · #8 (**permalink**) 05/12/2010, 03:23

Cita:

Iniciado por danneg

si, aun estoy preparando detalles, el lunes al anocheser (en mexico) mas tardar los subo, los domingos no trabajo!! XD

jaja ok ok estare al pendiente

JavierB · #9 (**permalink**) 05/12/2010, 03:31

Hola danneg

Muevo tu tema al foro de PHP desde Web general.

Saludos,

#10 (**permalink**) 05/12/2010, 14:12

Cita:

Iniciado por JavierB

Hola danneg

Muevo tu tema al foro de PHP desde Web general.

Saludos,

Ok gracias!!... pero siento que es general, por que utilizo mas js que php, ademas que la api de fb la uso en js

#11 (**permalink**) 05/12/2010, 23:22

Bien, al final si tube tiempo para poder subir lo que utilize, notablemente es menos codigo del qu pense que estaba utilizando

Sugeriria ponerlo como aporte

ya que muchos buscan este tipo de informacion y en muchos lugares siempre es lo mismo, muy enredado sin explicacion y aveces no sirve

bien, comensemos
------------------------------------
(aclaro, el archivo lo llame facebookConnect.php y lo llame al index con php (include))

Para comenzar partire por partes el codigo para una explicacion y al final incluire el codigo completo

tambien aclaro que utilize jQuery
------------------------------------

Aqui es puro html, es el boton Conectar con facebook (#login)
y la capa donde se hacen las peticiones de facebook (#fb-root)
llamamos tambien a la api de facebook, cambiando el lenguaje de la api en donde dice lenguaje

( para español utilizen es_ES )

aqui todos los lenguajes, los buscas de esta formaKlingon FB tl_ST lenguaje + FB + lg_LG

Código HTML:

Ver original<a href="#" id="login">Entrar con facebook</a>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/[B]lenguaje[/B]/all.js"></script>

Aqui va lo que en verdad nos interesa

Esta seccion comprueba si el usuario esta logueado en facebook, osea que anteriormente ya se logueo dentro de nuestra pagina y acepto los permisos

Código Javascript:

Ver original<script type="text/javascript">
 
// Se inicializa la api de acuerdo a tus datos y configuraciones
 
    FB.init({
 
 //Este es tu id de aplicacion de facebook que debiste ya haber registrado, esto es muy importante
 
        appId: '3452523624',
 
// Esto copialo y pegalo tal y como esta
 
        status: true,
        cookie: true,
        xfbml: true
    });
 
// Al cargar la pagina se hace el logueo
 
    $(document).ready(function(){
 
// Pregunta si estas logueado en fcebook, esta funcion te devuelve un callbak ( response ) true/false
 
        FB.getLoginStatus(function(response) {
 
// if existe una session...
 
            if (response.session) {
 
// cargamos el api y buscamos al usuario local, osea el logueado ( /me )
// te devuelve un callback, un objeto que almacena todos los [URL="http://developers.facebook.com/docs/reference/api/user"]datos del usuario[/URL]
 
                FB.api('/me', function (usuario) {
 
// Doy señales de que el usuario esta logueado mostrando su nombre ( usuario.name )
 
                    $("#fb_connect").append('<span id="welcome">Bienvenido <strong>' + usuario.name + '</strong> | <a id="logout" href="#">Cerrar seción</a></span>');
 
// Oculto el boton de logueo
 
                    $("#login").hide();
                });
            }
        });
    });
 
// Si el usuario no esta loguado, y pulsa el boton de loguear
 
    $('#login').click(function (e) {
        e.preventDefault();

Bien, ahora, aqui se hara el proseso de login por primera vez

Código Javascript:

Ver original// Hacemos el login, FB.login te devuelve un callback ( response )
 
        FB.login(
            function(response) {
 
// si el logueo fue correcto...
 
                if (response.session) {
 
// verifico que existan permisos, si no le pido los permisos
 
                    if (response.perms) {
 
// aqui solicito los datos del usuario ( /me )
 
                        FB.api('/me', function (usuario) {
 
// variable global para almacenar el url de la foto de perfil
 
                            var fb_pic;
 
// consulto de la base de datos la foto
 
                            FB.api(
                                {
 
// utilizando [URL="http://developers.facebook.com/docs/reference/fql/"]fql[/URL] ( facebook query languaje )
                                    method: 'fql.query',
 
// selecciono la columna "pic" de la tabla "user" donde "uid" es igual al id del usuario ( usuario.id )
 
                                    query: 'SELECT pic FROM user WHERE uid=' + usuario.id
                                },
 
//te devuelve el dato por callback
 
                                function(response) {
 
// y te devuelve un array con todas las fotos, las que nos interesa es la primera, que es la del perfil
 
                                    fb_pic = response[0].pic;
                                }
                            );
 
// ahora a enviar los datos a nuestro archivo de registro por post (ustedes sabran como hacer el sistema de registro)
                            $.post(
                                "fb/fb-register.php",
                                {
 
// declaro los datos y les asigno el valor, del usuario, usuario.dato
 
                                    idUser: usuario.id,
                                    name: usuario.name,
                                    link: usuario.link,
                                    pic: fb_pic,
                                    email: usuario.email,
                                    website: usuario.user_website
                                }
                            );
 
// despues muestro señal que el usuario ya esta loguado
 
                            $("#fb_connect").append('<span id="welcome">Bienvenido <strong>' + usuario.name + '</strong> | <a id="logout" href="#">Cerrar seción</a></span>');
                            $("#login").hide();
                        });
                    }
                }
            },
 
// aqui declaro los [URL="http://developers.facebook.com/docs/authentication/permissions"]permisos[/URL] que quiero pedir
            { perms: 'user_website, email' }
        );
    });

Y por ultimo, mostramos el boton de cerrar secion

Código Javascript:

Ver original// como el enlace para cerrar session se crea a mitad del proseso de logueo, hay que crear un evento para tal
// con ayuda de jquery lo creamos, cuando este elemento este vivo le asignamos el evento click
 
    $('#logout').live("click", function(e){
 
// esto desata el logout, logout no tiene callback
 
        FB.logout(function(){
 
//ocultamos informacion de login
 
            $("#welcome").hide();
 
// muestro el boton de logueo
 
            $("#login").show();
            e.preventDefault();
        });
    });
</script>

-----------------------------------------
y bien eso seria todo, el resto es imaginacion y cosa suya

a continuacion les dejo el codigo completo

Código Javascript:

Ver original<a href="#" id="login">Entrar con facebook</a>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> 
<script type="text/javascript">
    var nombre;
    var link;
    var imagen;
    FB.init({
        appId: '000',
        status: true,
        cookie: true,
        xfbml: true
    });
    $(document).ready(function(){
        FB.getLoginStatus(function(response) {
            if (response.session) {
                FB.api('/me', function (usuario) {
                    $("#fb_connect").append('<span id="welcome">Bienvenido <strong>' + usuario.name + '</strong> | <a id="logout" href="#">Cerrar seción</a></span>');
                    $("#login").hide();
                });
            }
        });
    });
    $('#login').click(function (e) {
        e.preventDefault();
        FB.login(
            function(response) {
                if (response.session) {
                    if (response.perms) {
                        FB.api('/me', function (usuario) {
                            var fb_pic;
                            FB.api(
                                {
                                    method: 'fql.query',
                                    query: 'SELECT pic FROM user WHERE uid=5526183'
                                },
                                function(response) {
                                    fb_pic = response[0].pic;
                                }
                            );
                            $.post(
                                "fb/fb-register.php",
                                {
                                    idUser: usuario.id,
                                    name: usuario.name,
                                    link: usuario.link,
                                    pic: fb_pic,
                                    email: usuario.email,
                                    website: usuario.user_website
                                }
                                            $("#login").hide();
                        });
                    }
                }
            },
            { perms: 'user_website, email' }
        );
    });
    $('#logout').live("click", function(e){
        FB.logout(function(){
            $("#welcome").hide();
            $("#login").show();
            e.preventDefault();
        });
    });
</script>

y si tienen alguna duda, encuentran un error, o tienen una sugerencia, por favor de postearla!!

saludos y suerte, y de nuevo muchas gracias a dual3nigma

------------------------------

si alguno duda de su funcionamiento... lo pueden ver trabajando en

http://dannegm.com

como mencione esta incluido en el index

neodani · #12 (**permalink**) 06/12/2010, 05:08

Buenas danneg,

Antes de nada darte las gracias por tu aporte!

Pero no consigo hacerlo funcionar! creo que me faltan cosas no? simplemente tengo un archivo index.php con la siguiente información

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prueba Facebook Connect</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<a href="#" id="login">Entrar con facebook</a>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/es_ES/all.js"></script>
<script type="text/javascript">
    var nombre;
    var link;
    var imagen;
    FB.init({
        appId: '10991XXXXX5209',
        status: true,
        cookie: true,
        xfbml: true
    });
    $(document).ready(function(){
        FB.getLoginStatus(function(response) {
            if (response.session) {
                FB.api('/me', function (usuario) {
                    $("#fb_connect").append('<span id="welcome">Bienvenido <strong>' + usuario.name + '</strong> | <a id="logout" href="#">Cerrar seción</a></span>');
                    $("#login").hide();
                });
            }
        });
    });
    $('#login').click(function (e) {
        e.preventDefault();
        FB.login(
            function(response) {
                if (response.session) {
                    if (response.perms) {
                        FB.api('/me', function (usuario) {
                            var fb_pic;
                            FB.api(
                                {
                                    method: 'fql.query',
                                    query: 'SELECT pic FROM user WHERE uid=5526183'
                                },
                                function(response) {
                                    fb_pic = response[0].pic;
                                }
                            );
                            $.post(
                                "fb-register.php",
                                {
                                    idUser: usuario.id,
                                    name: usuario.name,
                                    link: usuario.link,
                                    pic: fb_pic,
                                    email: usuario.email,
                                    website: usuario.user_website
                                }
                                            $("#login").hide();
                        });
                    }
                }
            },
            { perms: 'user_website, email' }
        );
    });
    $('#logout').live("click", function(e){
        FB.logout(function(){
            $("#welcome").hide();
            $("#login").show();
            e.preventDefault();
        });
    });
</script>
<h1>Prueba con Facebook Connect </h1>
 
</body> 
</html>

No hay que cargar alguna librería de facebook, o algún otro archivo? si ejecutas este código no hace nada, el botón de Entrar con facebook no hace nada :S

Muchas gracias de antemano!

#13 (**permalink**) 06/12/2010, 08:45

pues en realidad yo no cargue ni una libreria, si quieres puedes entrar al codigo fuente de mi pagina y ver que solo cargo jquery y el api de faebook

http://connect.facebook.net/en_US/all.js

puedes intentar ponerlo por defecto en idioma ingles

trata de crear una capa asi

Código HTML:

Ver original<div id="fb_connect"></div>

si te fijas ttu no la tienes, e donde yo estoy mostrando que el usuario ya esta logueado

neodani · #14 (**permalink**) 06/12/2010, 08:51

Cita:

Iniciado por danneg

pues en realidad yo no cargue ni una libreria, si quieres puedes entrar al codigo fuente de mi pagina y ver que solo cargo jquery y el api de faebook

http://connect.facebook.net/en_US/all.js

puedes intentar ponerlo por defecto en idioma ingles

trata de crear una capa asi

Código HTML:

Ver original<div id="fb_connect"></div>

si te fijas ttu no la tienes, e donde yo estoy mostrando que el usuario ya esta logueado

Cambie las dos lineas 11 y 12 tal y como me indicaste, sin embargo no hace ni un intento de funcionar.

Con este código debería realizar alguna acción cuando pulso el enlace "entrar"?

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prueba Facebook Connect</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<a href="#" id="login">Entrar con facebook</a>
<div id="fb-root"></div>
<div id="fb_connect"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
    var nombre;
    var link;
    var imagen;
    FB.init({
        appId: '109916975745209',
        status: true,
        cookie: true,
        xfbml: true
    });
    $(document).ready(function(){
        FB.getLoginStatus(function(response) {
            if (response.session) {
                FB.api('/me', function (usuario) {
                    $("#fb_connect").append('<span id="welcome">Bienvenido <strong>' + usuario.name + '</strong> | <a id="logout" href="#">Cerrar seción</a></span>');
                    $("#login").hide();
                });
            }
        });
    });
    $('#login').click(function (e) {
        e.preventDefault();
        FB.login(
            function(response) {
                if (response.session) {
                    if (response.perms) {
                        FB.api('/me', function (usuario) {
                            var fb_pic;
                            FB.api(
                                {
                                    method: 'fql.query',
                                    query: 'SELECT pic FROM user WHERE uid=5526183'
                                },
                                function(response) {
                                    fb_pic = response[0].pic;
                                }
                            );
                            $.post(
                                "fb-register.php",
                                {
                                    idUser: usuario.id,
                                    name: usuario.name,
                                    link: usuario.link,
                                    pic: fb_pic,
                                    email: usuario.email,
                                    website: usuario.user_website
                                }
                                            $("#login").hide();
                        });
                    }
                }
            },
            { perms: 'user_website, email' }
        );
    });
    $('#logout').live("click", function(e){
        FB.logout(function(){
            $("#welcome").hide();
            $("#login").show();
            e.preventDefault();
        });
    });
</script>
<h1>Prueba con Facebook Connect </h1>
 
</body> 
</html>

neodani · #15 (**permalink**) 06/12/2010, 09:03

El siguiente código cambiando el ID de la aplicación casi funciona.

Ahora ya me sale el pop-up de facebook, sin embargo me da un error

API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: redirect_uri is not owned by the application.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prueba Facebook Connect</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<p id="fb_connect"><a href="#" id="login">Entrar con facebook</a></p>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> 
<script type="text/javascript">
    FB.init({
        appId: '1099xxxxx745209',
        status: true,
        cookie: true,
        xfbml: true
    });
    $(document).ready(function(){
        FB.getLoginStatus(function(response) {
            if (response.session) {
                FB.api('/me', function (usuario) {
                    $("#fb_connect").append('<span id="welcome">Bienvenido <strong>' + usuario.name + '</strong> | <a id="logout" href="#">Cerrar seción</a></span>');
                    $("#login").hide();
 
                    $("#publish_entrie").load("templates/editor.html");
                });
            }
        });
    });
    $('#login').click(function (e) {
        e.preventDefault();
        FB.login(
            function(response) {
                if (response.session) {
                    if (response.perms) {
                        FB.api('/me', function (usuario) {
                            var fb_pic;
                            FB.Data.query('SELECT pic FROM user WHERE uid = me()').wait(function (filas) {
                                fb_pic = filas[0].pic;
                                $.post(
                                    "fb-register.php",
                                    {
                                        idUser: usuario.id,
                                        name: usuario.name,
                                        link: usuario.link,
                                        pic: fb_pic,
                                        email: usuario.email,
                                        website: usuario.website
                                    }
                                );
                            });
                            $("#fb_connect").append('<span id="welcome">Bienvenido <strong>' + usuario.name + '</strong> | <a id="logout" href="#">Cerrar seción</a></span>');
                            $("#login").hide();
                            $("#publish_entrie").load("templates/editor.html");
                        });
                    }
                }
            },
            { perms: 'user_website, email' }
        );
    });
    $('#logout').live("click", function(e){
        FB.logout(function(){
            $("#welcome").hide();
            $("#login").show();
            $("#publish_entrie").html("");
            e.preventDefault();
        });
    });
</script>
</body> 
</html>

Salu2!

GatorV · #16 (**permalink**) 06/12/2010, 09:07

Tema movido desde PHP a Javascript

neodani · #17 (**permalink**) 06/12/2010, 09:26

Buenas danneg,

Puedes indicarme que valores tienes puesto en tu aplicación.

Cuando edito mi aplicación me aparece estos cinco apartados:

Acerca de
Sitio Web
Integración con Facebook
Móvil y Dispositivos
Avanzado

Dentro de Sitio Web
Site URL aquí tengo puesto la ruta donde se encuentra el fichero de la aplicación
http://www.neodani.com/facebook/app2/

Site Domain no tengo nada

Integración con Facebook
Lo tengo todo por defecto, está todo vacio
Los radio butons marcados son (IFrame, Show scrollbars y Activado)

Móvil y Dispositivos
Igual por defecto sin rellenar nada

Avanzado
Lo mismo sin rellenar nada
Deauthorize Callback vacio y Modo sandbox desactivar
El resto están Inhabilitada

¿Qué diferencias ves con el tuyo, me puedes indicar?

Muchas gracias

neodani · #18 (**permalink**) 06/12/2010, 09:32

Creo que lo tengo!

En Integración con Facebook

Página de trabajo me faltaba http://apps.facebook.com/proyecto_alice/
Canvas URL http://neodani.com/facebook/app2/

#19 (**permalink**) 06/12/2010, 10:28

Gator V gracias por mover el tema!!

y bien, llegando a lo otro

creo que igual de importante es el dominio del sitio y direccion del sitio, ya que es donde se generara tu aplicacion

algo muy curioso que pasa es que dentro de mi localhost, esto no funciona, solo denytro del sitio en el que estoy trabajando

acerca de
---------------------------------
Nombre de la aplicacion: Dannegm
Descripcion:
Icono
Foto
Idioma: español
Direccion a soporte de usuario: url
correo electronico: mi correo electronico
url de privacidad: http://dannegm.com
url de condiciones de servicio:
desarrolladores: Yo

Sitio web
----------------------------------
id aplicaciom: mi id de aplicacion
clave secreta: mi clave secreta:
url del sitio (donde estas trabajando con tu aplicacion, debes de terminarla con "/" o con "?var=var": http://dannegm.com/
dominio del sitio (donde estas trabajando, sin el http://): dannegm.com

integrcion con facebook
---------------------------------
padina de trabajo: dannegm ( http://apps.fcebook.com/dannegm/ )
canvas url (esto se mostrara en facebook como tu aplicacion dentro de facebook, por ahora yo solo puse mi misma direccion ): http://dannegm.com
canvas type (si se muestra con ajax o con iframe): iframe
tamaño de la aplicacion (con barras automatico): con barras

social discovery: activado

lo demas lo tengo en blanco

movil y dispositivos
__________________
tipo de aplicacion: html5

y en opciones avanzadas todo lo tengo en blanco e inabilitado

#20 (**permalink**) 06/12/2010, 10:29

y si, tu aplicacion ya funciona, solo acoplalo a cualquier proyecto y te sera de gran utilidad!! suerte!!

neodani · #21 (**permalink**) 06/12/2010, 10:56

Cita:

Iniciado por danneg

y si, tu aplicacion ya funciona, solo acoplalo a cualquier proyecto y te sera de gran utilidad!! suerte!!

Ahora falta eso acoplarlo con el sitio web.

Corrígeme si me equivoco, pero ofrecer al usuario que use el botón Facebook Connect es para:

1 - Evitar que tenga que rellenar el formulario de registro de tu web?
2 - Una manera de registrarse en tu web?
3 - Un acceso temporal hasta que se registre definitivamente con el correspondiente formulario de alta?
4 - Si el usuario se registró en tu web y ahora se conecta con el Facebook Connect debería asociar su cuenta de facebook al usuario que creó, no?
5 - no se si me dejo alguna otra opción...

Cual es la idea del Facebook Connect? porque estoy algo confundido en qué me aporta... porque navegar por la web sin registrarse ya lo puede hacer, no hace falta que se conecte por Facebook Connect...

Muchas gracias de antemano!

#22 (**permalink**) 06/12/2010, 11:34

pues en si, es para los puntos del 1 al 3

el 4, pues eso es dependiendo del usuario y del tipo de navegacion que se tenga

ya que para mi seria mucho mas comodo solo entrar a la pagina y estar loguado sin logearme XD

para lo que yo lo utilizo en este caso

es para que actuen dentro de mi aplicacion

bien, te explico, a la hora de loguarte, puedes comentar, darle me gusta, sugerir, aportar, y demas, cosa que como usuario anonimo no se podra, ya que para hacer ese tipo de cosas, nececito saber quien es el que hace algo asi

por otro lado, habra un priilegio mas alto, que es el de publicar cosas, el que guste publicar algo, tendra que registrare, obvio con el boton de facebook connect, pero ahora el permiso cambiara, de usuario normal sera usuario editor, y tu sabes que nececito un poco mas de informacion en estos caso

pero para hacerlo menos tedioso, lo hare mas transparente, facily rapido

muchos utilizan este tipo de tecnologia para publicar cosas en tu muro, por ejemplo una publicacion, enlace, etc

o crear algun evento, te invitan y le das asistire y en automatico te lo cargan a tu cuenta

otros lo usan como una herramienta de seo, por ejemplo, gracias a ello puedes saber los gustos y opiniones de las personas, y puedes mejorar el sitio segun tu comveniencia y gusto del usuario

hay un sin fin de cosas para lo que esto sirve, pero no sirve de nada si antes no haces un logueo!!

neodani · #23 (**permalink**) 06/12/2010, 13:53

Cita:

Iniciado por danneg

pues en si, es para los puntos del 1 al 3

el 4, pues eso es dependiendo del usuario y del tipo de navegacion que se tenga

ya que para mi seria mucho mas comodo solo entrar a la pagina y estar loguado sin logearme XD

para lo que yo lo utilizo en este caso

es para que actuen dentro de mi aplicacion

bien, te explico, a la hora de loguarte, puedes comentar, darle me gusta, sugerir, aportar, y demas, cosa que como usuario anonimo no se podra, ya que para hacer ese tipo de cosas, nececito saber quien es el que hace algo asi

por otro lado, habra un priilegio mas alto, que es el de publicar cosas, el que guste publicar algo, tendra que registrare, obvio con el boton de facebook connect, pero ahora el permiso cambiara, de usuario normal sera usuario editor, y tu sabes que nececito un poco mas de informacion en estos caso

pero para hacerlo menos tedioso, lo hare mas transparente, facily rapido

muchos utilizan este tipo de tecnologia para publicar cosas en tu muro, por ejemplo una publicacion, enlace, etc

o crear algun evento, te invitan y le das asistire y en automatico te lo cargan a tu cuenta

otros lo usan como una herramienta de seo, por ejemplo, gracias a ello puedes saber los gustos y opiniones de las personas, y puedes mejorar el sitio segun tu comveniencia y gusto del usuario

hay un sin fin de cosas para lo que esto sirve, pero no sirve de nada si antes no haces un logueo!!

Todo lo que dices me parece genial xD pero sigo viendo el problema del doble login y conflicto con tu cuenta de usuario.
Si lo que deseas es no tener que escribir tu usuario y contraseña, puedes invitar al usuario a que marque el check "no cerrar sesión" y cuando vuelva otro día no tendrá que iniciar sesión.

La ventaja de hacer login con facebook sería para publicar cosas en tu muro, en ese caso sí, le veo sentido.

Corrigeme si me equivoco, pero una vez aceptas que tal web acceda a tu perfil de facebook quedas ligado con esa web, hasta que borres esa aplicación de tu perfil. Eso significa, que si no la borras y pasa X días que has cerrado sesión de facebook y has salido tb de esa página, y vuelves a logearte en facebook otro día, automáticamente si visitas la web entrarás en ella sin user y pass pq existe la relación de confianza, no? o ya caducó una vez cierras tu sesión de facebook y vuelves otro día e inicias la sesión con facebook?

Respecto a esto que dices, cómo puedes saber los gustos de las personas, etc? creo que solo puedes acceder a lo básico de su perfil, ni tan siquiera puedes sacar los emails de sus amigos para saber si también visitan tu aplicación, no?

Cita:

Iniciado por danneg

otros lo usan como una herramienta de seo, por ejemplo, gracias a ello puedes saber los gustos y opiniones de las personas, y puedes mejorar el sitio segun tu comveniencia y gusto del usuario

Muchas gracias de antemano!

maycolalvarez · #24 (**permalink**) 06/12/2010, 14:06

Cita:

Iniciado por neodani

Todo lo que dices me parece genial xD pero sigo viendo el problema del doble login y conflicto con tu cuenta de usuario.
Si lo que deseas es no tener que escribir tu usuario y contraseña, puedes invitar al usuario a que marque el check "no cerrar sesión" y cuando vuelva otro día no tendrá que iniciar sesión.

La ventaja de hacer login con facebook sería para publicar cosas en tu muro, en ese caso sí, le veo sentido.

Corrigeme si me equivoco, pero una vez aceptas que tal web acceda a tu perfil de facebook quedas ligado con esa web, hasta que borres esa aplicación de tu perfil. Eso significa, que si no la borras y pasa X días que has cerrado sesión de facebook y has salido tb de esa página, y vuelves a logearte en facebook otro día, automáticamente si visitas la web entrarás en ella sin user y pass pq existe la relación de confianza, no? o ya caducó una vez cierras tu sesión de facebook y vuelves otro día e inicias la sesión con facebook?

Respecto a esto que dices, cómo puedes saber los gustos de las personas, etc? creo que solo puedes acceder a lo básico de su perfil, ni tan siquiera puedes sacar los emails de sus amigos para saber si también visitan tu aplicación, no?

Muchas gracias de antemano!

para eso, necesitas pedir permisos extra al usuario, y con ello puedes usar FQL para obtener dicha información

Código Javascript:

Ver originalFB.login(function(response) {
                    if (response.session) {
                        if (response.perms) {
                        // user is logged in and granted some permissions.
                        // perms is a comma separated list of granted permissions
                            window.location.reload();
                        } else {
                        // user is logged in, but did not grant any permissions
                            alert('no se han especificado lo permisos necesarios');
                        }
                        } else {
                        // user is not logged in
                            alert('no se han especificado lo permisos necesarios');
                        }
                }, {perms:'read_stream,publish_stream'});//PERMISOS

Código PHP:

Ver original$loginUrl = $facebook->getLoginUrl(array(
        'canvas' => 1,
        'fbconnect' => 1,
        'req_perms' => 'read_stream,publish_stream', //PERMISOS
        'next' => 'http://apps.facebook.com/myfacebokcamvas/',
    ));

#25 (**permalink**) 06/12/2010, 14:22

Si mira, con lo que explique mas arriba, al entrar a tu sitio detectas si tienes abierta tu sesion de facebook, y como dices, si no estas conectado en facebook, tampoco en la aplicacion

con respecto a los gustos, eventos, etc, como ya YO lo explique tambien, nececitas pedir permisos

Aqui te dejo una lista de los datos que puedes obtener de una cuenta
http://developers.facebook.com/docs/reference/api/user

y aqui como se declaran los permisos
http://developers.facebook.com/docs/...on/permissions

para acceder a las cuentas de uno de tus amigos, en lugar de utilisar me() utilisa el uid de un amigo de tu usuario

caricatos · #26 (**permalink**) 06/12/2010, 16:06

Tema movido desde javascript

#27 (**permalink**) 06/12/2010, 17:58

Cita:

Iniciado por caricatos

Tema movido desde javascript

Sera ya este el definitivo??

por mi bien, asi ya 4 grupos pueden tener acceso al tema XD (broma, no me borren por spam por favor XD)