Веб-чат с интеграцией с Facebook

Question

Мне нужна ваша помощь, ребята, я создаю свой собственный веб-чат для моего онлайн-радио-сайта. У меня уже есть веб-чат AJAX PHP из Tutorialzine. Я хочу изменить его. Но я не знаю, с чего начать. Я хочу, чтобы он интегрировался с Facebook. Я хочу это вместо того, чтобы просить имя пользователя и адрес электронной почты, появится кнопка «Подключиться к Facebook». и изображение профиля и имя пользователя будут автоматически сохранены в базе данных. Мне это действительно нужно. И я хочу, чтобы это было модерировано. Спасибо! и Бог благословит всех! :)

ajax.php

<?php 

/* Database Configuration. Add your details below */ 

$dbOptions = array(
'db_host' => 'localhost', 
'db_user' => 'root', 
'db_pass' => '', 
'db_name' => 'chat' 
); 

/* Database Config End */ 


error_reporting(E_ALL^E_NOTICE); 

require "classes/DB.class.php"; 
require "classes/Chat.class.php"; 
require "classes/ChatBase.class.php"; 
require "classes/ChatLine.class.php"; 
require "classes/ChatUser.class.php"; 

session_name('webchat'); 
session_start(); 

if(get_magic_quotes_gpc()){ 

// If magic quotes is enabled, strip the extra slashes 
array_walk_recursive($_GET,create_function('&$v,$k','$v = stripslashes($v);')); 
array_walk_recursive($_POST,create_function('&$v,$k','$v = stripslashes($v);')); 
} 

try{ 

// Connecting to the database 
DB::init($dbOptions); 

$response = array(); 

// Handling the supported actions: 

switch($_GET['action']){ 

    case 'login': 
     $response = Chat::login($_POST['name'],$_POST['email']); 
    break; 

    case 'checkLogged': 
     $response = Chat::checkLogged(); 
    break; 

    case 'logout': 
     $response = Chat::logout(); 
    break; 

    case 'submitChat': 
     $response = Chat::submitChat($_POST['chatText']); 
    break; 

    case 'getUsers': 
     $response = Chat::getUsers(); 
    break; 

    case 'getChats': 
     $response = Chat::getChats($_GET['lastID']); 
    break; 

    default: 
     throw new Exception('Wrong action'); 
} 

echo json_encode($response); 
} 
catch(Exception $e){ 
die(json_encode(array('error' => $e->getMessage()))); 
} 

?> 

script.js

$(document).ready(function(){ 

// Run the init method on document ready: 
chat.init(); 

}); 

var chat = { 

// data holds variables for use in the class: 

data : { 
    lastID  : 0, 
    noActivity : 0 
}, 

// Init binds event listeners and sets up timers: 

init : function(){ 

    // Using the defaultText jQuery plugin, included at the bottom: 
    $('#name').defaultText('Nickname'); 
    $('#email').defaultText('Email (Gravatars are Enabled)'); 

    // Converting the #chatLineHolder div into a jScrollPane, 
    // and saving the plugin's API in chat.data: 

    chat.data.jspAPI = $('#chatLineHolder').jScrollPane({ 
     verticalDragMinHeight: 12, 
     verticalDragMaxHeight: 12 
    }).data('jsp'); 

    // We use the working variable to prevent 
    // multiple form submissions: 

    var working = false; 

    // Logging a person in the chat: 

    $('#loginForm').submit(function(){ 

     if(working) return false; 
     working = true; 

     // Using our tzPOST wrapper function 
     // (defined in the bottom): 

     $.tzPOST('login',$(this).serialize(),function(r){ 
      working = false; 

      if(r.error){ 
       chat.displayError(r.error); 
      } 
      else chat.login(r.name,r.gravatar); 
     }); 

     return false; 
    }); 

    // Submitting a new chat entry: 

    $('#submitForm').submit(function(){ 

     var text = $('#chatText').val(); 

     if(text.length == 0){ 
      return false; 
     } 

     if(working) return false; 
     working = true; 

     // Assigning a temporary ID to the chat: 
     var tempID = 't'+Math.round(Math.random()*1000000), 
      params = { 
       id   : tempID, 
       author  : chat.data.name, 
       gravatar : chat.data.gravatar, 
       text  : text.replace(/</g,'&lt;').replace(/>/g,'&gt;') 
      }; 

     // Using our addChatLine method to add the chat 
     // to the screen immediately, without waiting for 
     // the AJAX request to complete: 

     chat.addChatLine($.extend({},params)); 

     // Using our tzPOST wrapper method to send the chat 
     // via a POST AJAX request: 

     $.tzPOST('submitChat',$(this).serialize(),function(r){ 
      working = false; 

      $('#chatText').val(''); 
      $('div.chat-'+tempID).remove(); 

      params['id'] = r.insertID; 
      chat.addChatLine($.extend({},params)); 
     }); 

     return false; 
    }); 

    // Logging the user out: 

    $('a.logoutButton').live('click',function(){ 

     $('#chatTopBar > span').fadeOut(function(){ 
      $(this).remove(); 
     }); 

     $('#submitForm').fadeOut(function(){ 
      $('#loginForm').fadeIn(); 
     }); 

     $.tzPOST('logout'); 

     return false; 
    }); 

    // Checking whether the user is already logged (browser refresh) 

    $.tzGET('checkLogged',function(r){ 
     if(r.logged){ 
      chat.login(r.loggedAs.name,r.loggedAs.gravatar); 
     } 
    }); 

    // Self executing timeout functions 

    (function getChatsTimeoutFunction(){ 
     chat.getChats(getChatsTimeoutFunction); 
    })(); 

    (function getUsersTimeoutFunction(){ 
     chat.getUsers(getUsersTimeoutFunction); 
    })(); 

}, 

// The login method hides displays the 
// user's login data and shows the submit form 

login : function(name,gravatar){ 

    chat.data.name = name; 
    chat.data.gravatar = gravatar; 
    $('#chatTopBar').html(chat.render('loginTopBar',chat.data)); 

    $('#loginForm').fadeOut(function(){ 
     $('#submitForm').fadeIn(); 
     $('#chatText').focus(); 
    }); 

}, 

// The render method generates the HTML markup 
// that is needed by the other methods: 

render : function(template,params){ 

    var arr = []; 
    switch(template){ 
     case 'loginTopBar': 
      arr = [ 
      '<span><img src="',params.gravatar,'" width="23" height="23" />', 
      '<span class="name">',params.name, 
      '</span><a href="" class="logoutButton rounded">Logout</a></span>']; 
     break; 

     case 'chatLine': 
      arr = [ 
       '<div class="chat chat-',params.id,' rounded"><span class="gravatar"><img src="',params.gravatar, 
       '" width="23" height="23" onload="this.style.visibility=\'visible\'" />','</span><span class="author">',params.author, 
       ':</span><span class="text">',params.text,'</span><span class="time">',params.time,'</span></div>']; 
     break; 

     case 'user': 
      arr = [ 
       '<div class="user" title="',params.name,'"><img src="', 
       params.gravatar,'" width="30" height="30" onload="this.style.visibility=\'visible\'" /></div>' 
      ]; 
     break; 
    } 

    // A single array join is faster than 
    // multiple concatenations 

    return arr.join(''); 

}, 

// The addChatLine method ads a chat entry to the page 

addChatLine : function(params){ 

    // All times are displayed in the user's timezone 

    var d = new Date(); 
    if(params.time) { 

     // PHP returns the time in UTC (GMT). We use it to feed the date 
     // object and later output it in the user's timezone. JavaScript 
     // internally converts it for us. 

     d.setUTCHours(params.time.hours,params.time.minutes); 
    } 

    params.time = (d.getHours() < 10 ? '0' : '') + d.getHours()+':'+ 
        (d.getMinutes() < 10 ? '0':'') + d.getMinutes(); 

    var markup = chat.render('chatLine',params), 
     exists = $('#chatLineHolder .chat-'+params.id); 

    if(exists.length){ 
     exists.remove(); 
    } 

    if(!chat.data.lastID){ 
     // If this is the first chat, remove the 
     // paragraph saying there aren't any: 

     $('#chatLineHolder p').remove(); 
    } 

    // If this isn't a temporary chat: 
    if(params.id.toString().charAt(0) != 't'){ 
     var previous = $('#chatLineHolder .chat-'+(+params.id - 1)); 
     if(previous.length){ 
      previous.after(markup); 
     } 
     else chat.data.jspAPI.getContentPane().append(markup); 
    } 
    else chat.data.jspAPI.getContentPane().append(markup); 

    // As we added new content, we need to 
    // reinitialise the jScrollPane plugin: 

    chat.data.jspAPI.reinitialise(); 
    chat.data.jspAPI.scrollToBottom(true); 

}, 

// This method requests the latest chats 
// (since lastID), and adds them to the page. 

getChats : function(callback){ 
    $.tzGET('getChats',{lastID: chat.data.lastID},function(r){ 

     for(var i=0;i<r.chats.length;i++){ 
      chat.addChatLine(r.chats[i]); 
     } 

     if(r.chats.length){ 
      chat.data.noActivity = 0; 
      chat.data.lastID = r.chats[i-1].id; 
     } 
     else{ 
      // If no chats were received, increment 
      // the noActivity counter. 

      chat.data.noActivity++; 
     } 

     if(!chat.data.lastID){ 
      chat.data.jspAPI.getContentPane().html('<p class="noChats">No chats yet</p>'); 
     } 

     // Setting a timeout for the next request, 
     // depending on the chat activity: 

     var nextRequest = 1000; 

     // 2 seconds 
     if(chat.data.noActivity > 3){ 
      nextRequest = 2000; 
     } 

     if(chat.data.noActivity > 10){ 
      nextRequest = 5000; 
     } 

     // 15 seconds 
     if(chat.data.noActivity > 20){ 
      nextRequest = 15000; 
     } 

     setTimeout(callback,nextRequest); 
    }); 
}, 

// Requesting a list with all the users. 

getUsers : function(callback){ 
    $.tzGET('getUsers',function(r){ 

     var users = []; 

     for(var i=0; i< r.users.length;i++){ 
      if(r.users[i]){ 
       users.push(chat.render('user',r.users[i])); 
      } 
     } 

     var message = ''; 

     if(r.total<1){ 
      message = 'No one is online'; 
     } 
     else { 
      message = r.total+' '+(r.total == 1 ? 'person':'people')+' online'; 
     } 

     users.push('<p class="count">'+message+'</p>'); 

     $('#chatUsers').html(users.join('')); 

     setTimeout(callback,15000); 
    }); 
}, 

// This method displays an error message on the top of the page: 

displayError : function(msg){ 
    var elem = $('<div>',{ 
     id  : 'chatErrorMessage', 
     html : msg 
    }); 

    elem.click(function(){ 
     $(this).fadeOut(function(){ 
      $(this).remove(); 
     }); 
    }); 

    setTimeout(function(){ 
     elem.click(); 
    },5000); 

    elem.hide().appendTo('body').slideDown(); 
} 
}; 

// Custom GET & POST wrappers: 

$.tzPOST = function(action,data,callback){ 
$.post('php/ajax.php?action='+action,data,callback,'json'); 
} 

$.tzGET = function(action,data,callback){ 
$.get('php/ajax.php?action='+action,data,callback,'json'); 
} 

// A custom jQuery method for placeholder text: 

$.fn.defaultText = function(value){ 

var element = this.eq(0); 
element.data('defaultText',value); 

element.focus(function(){ 
    if(element.val() == value){ 
     element.val('').removeClass('defaultText'); 
    } 
}).blur(function(){ 
    if(element.val() == '' || element.val() == value){ 
     element.addClass('defaultText').val(value); 
    } 
}); 

return element.blur(); 
} 

Answer 1

Если вы только хотите, чтобы соединиться с Facebook для имени пользователя и изображения, то все, что вам нужно сделать, это включить Facebook Javascript SDK , а затем либо используйте Login Button plugin, либо используйте Client-Side authentication.

Если вы хотите подключиться к внутреннему чату Facebook, вы можете использовать Chat API, который имеет два метода аутентификации: Facebook Platform и Username/Password. Если вам нужен первый метод (кажется, что вы хотите), вам нужно будет аутентифицировать пользователя либо с потоком клиентской стороны, либо с server side flow и запросить "xmpp_login" permission.

В документации API чата есть примеры php.