Requesting Assistance In Getting My Head Around Facebook Login for Websites -
i'm wanting implement "login facebook" that's common on websites i'm having trouble grasping whole concept , if assist me i'd appreciative.
i've been reading documentation under link https://developers.facebook.com/docs/facebook-login/ days still don't "get it".
let's start with...
in documentation, says js sdk easiest use (for whom dont know) i'm thinking non js version better , faster (and easier me grasp) don't know do. i'm "stuck"
my main problem don't understand how suppossed able insert auto incrementing id along person's first , last name db. there's nothing or in facebook code specify db, table or column how data suppossed db log user in??
i have classifieds on site of i'm attempting create fb login said above, i'm stuck , use have intermediate level of knowledge regarding php , mysql
like discussed in comments, here's example using js sdk
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <!-- jquery library, makes things easier. --> <title>fb example</title> </head> <body> <div id="fb-root"></div> <script> window.fbasyncinit = function() { // init fb js sdk fb.init({ appid : your_app_id, // app id app dashboard status : true, // check facebook login status xfbml : true // social plugins on page }); // additional initialization code such adding event listeners goes here }; // load sdk asynchronously (function(d, s, id){ var js, fjs = d.getelementsbytagname(s)[0]; if (d.getelementbyid(id)) {return;} js = d.createelement(s); js.id = id; js.src = "//connect.facebook.net/en_us/all.js"; fjs.parentnode.insertbefore(js, fjs); }(document, 'script', 'facebook-jssdk')); /* function gets information user , alrets user's name. */ function getuserinfo() { fb.api('/me', function(response) { $.ajax({ url: "ajax.php", //url send ajax request data: { json: response, // key => value pairs of items send }, success: function(ajaxresponse) { // upon successful request alert(ajaxresponse); //alert whatever response got. } }) }) } /* function gets login status of user */ function getloginstatus() { fb.getloginstatus(function(response) { if (response.status === 'connected') { //user connected facebook , authorized app getuserinfo(); } else if (response.status === 'not_authorized') { //user connected facebook, hasn't authorized app login(); } else { //user not connected facebook login(); } }); } /* function promts user log in , asks permissions */ function login() { fb.login(function(response) { if (response.authresponse) { getuserinfo(); } else { alert('user cancelled login or did not authorize.'); } }, {scope: 'email'}); // comma separated permissions } </script> <a href="javascript:getloginstatus()"/>login</a> </body> </html>
this simple example. on page see link "login". upon pressing you'll either asked login (if you're not logged facebook, or haven't authorized app yet), or show popup name. of code has been taken javascript sdk documentation
edit:
to add user's data database, suggest making ajax call getuserinfo()
function. replace alert part ajax call php file, create , pass data response
variable (which contains data user, response.name
, response.email
). in php file insert information got database.
another edit:
i've updated code once again, namely added jquery library (easier me make ajax calls in it, although it's not different plain js).
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
and updated getuserinfo()
function make ajax request ajax.php
.
in ajax.php
i've made 1 line:
print_r($_request['json']);
this print out whatever data send via ajax, , see in popup. next step checking out information get, , take whatever need (it's $_request['json']
simple array), , insert db.
Comments
Post a Comment