Registration and authorization of the user on the site - one click - through the custom Facebook button. 2017

So, I began to develop one project for the fan. The basic idea of ​​the project is simple: a platform where everyone can bet on anything, make bets, deals and WITHOUT any restrictions. An entertaining project in its essence.

And of course there was the question Convenient authorization of users with the least "friction". After thinking a bit, I chose authorization through Facebook, but I think I’ll not stop at this and you’ll read some more articles, with authorization through Google Acc, VK and Tweet.


So to the point! I found several topics on the Internet that describe the issue of authorization, some information helped me, but I didn’t find one that would solve the task I had set, so, having completed the task, I decided to write this article.

MADE: User registration in the database and his authorization on the site with one click of the Custom button (any picture to your taste)
')

1. REGISTRATION OF AN APPLICATION IN FB:

but. https://developers.facebook.com/apps/
b. We register the application, register the address of your site, the data acceptance page for the answer, and much more. The interface is very friendly, Facebook loves us. Therefore, I will not list everything and everything. From there we will need the application ID and site address.

2. FRONT END:

I give a complete working example from my site. By clicking on the link, the function is called: “fb_login ()”, the function first checks “is the user logged in to Facebook?” If YES, takes his ID and sends it to BackEnd, if NO, then calls the Facebook login form.

fb_login () - initiates communication with the FB
handle_fb_data () - is engaged in receiving and forwarding user data from FB to BackEnd

<a class="fb_login_btn" onclick="fb_login();return false;"><img src="/image/fb_login.png" border="0" alt=""></a> <script> function handle_fb_data(response){ FB.api('/me', function(response) { console.log('Successful login for: ' + response.name); console.log('  : '+JSON.stringify(response)); // alert('  : '+JSON.stringify(response)); $.ajax({ type: 'post', url: '/do/reg/fb', data: response, success: function(msg) { console.log(msg); if ((msg=='')||(msg=='')){window.location.reload();} }, error: function(){} }) }); } function fb_login(){ FB.getLoginStatus(function(response) { if (response.authResponse) { console.log('Welcome! Fetching your information.... '); handle_fb_data(response); } else { console.log('      ,   '); FB.login(function(response){ if (response.authResponse) { console.log('Welcome! Fetching your information.... '); handle_fb_data(response); } else { console.log('     '); } }); } }, { scope: 'email,id' }); } window.fbAsyncInit = function() { FB.init({ appId : '{  ID }', cookie : true, // enable cookies to allow the server to access // the session xfbml : true, // parse social plugins on this page version : 'v2.8' // use graph api version 2.8 }); }; // Load the 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/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> 

Well, actually, on the front-end everything, now consider BackEnd.

3. BEC AND

  public function fb(){ if (($this->session->userdata('logged_in') != true) ){ // 1.   ,    . // 2.  ,  ,          FB_ID //  ,    // 3.     ,        // ,               , .. "" $query = $this->db->get_where('users', array('fb_id' => $_POST['id'])); if ($query->num_rows() > 0) { foreach ($query->row_array() as $key => $value) { $userdata[$key] = $value; } $userdata["logged_in"] = true; //,         -  ,  ,     if ($this->session->userdata('bet_code_last') != false) { $data = array( 'start_user_id' => $userdata['id'] ); $this->db->where('bet_code', $this->session->userdata('bet_code_last')); $this->db->update('bet', $data); $this->session->sess_destroy(); } $this->session->set_userdata($userdata); echo ''; } else { $data = array( 'fb_id' => $_POST['id'], 'lang' => 'en', 'name' => $_POST['name'], ); // ,       ,         if( preg_match('/[-]/i', $_POST['name']) ){$data['lang']='ru';} $this->db->insert('users', $data); //      ,      ;) $data["logged_in"] = true; $this->session->set_userdata($data); echo ''; } }else{echo '  ';} } 

In PHP code, functions are used to access the database from the Codeigniter framework. Well, in general, I described the whole process, I hope that it is very clear and accessible.

Notes:

1. Then, with blood, he himself thought that it would be better to check the status first, and then call the login form (on the front-end), which was not in one of the descriptions explicitly.

2. After the data is entered into the session, the page is still not updated, so I update it here with this line, in those moments when BackEnd confirms that it has done everything it needs:
if ((msg == 'registered') || (msg == 'logged in')) {window.location.reload ();}

Thanks for attention!