Unobtrusive registration and access to the site

Tired of sending users account confirmation and password reset by loss to email?
Users leave, charter to fill out your registration form?
Are you sure that visitors to your site have an account on Facebook or Vkontakte?
Do not want to store any personal data?
Are your users tired of entering username and password?
Are your users too lazy to even click on the "Login" button?
Seen how it is done on stackoverflow and want the same, and even better?

Below is how to make access to your site unobtrusive, automatic, and at no special cost.

Once they decided to get rid of problems - so all at once.

We will not send users account confirmation and password reset by loss to e-mail.
We remove the registration form.
We will not store any personal data.
Remove the login form and password.

There is only one way out - to log in to the site using OpenID or OAuth. If you are sure that all users have registration on Facebook or Vkontakte, then the method described below is suitable.

In order to be able to authenticate the user through OAuth on Facebook and Vkontakte, you need to go to the corresponding pages of their sections for developers and create your own applications there, correctly indicating the domain name of the site. For facebook, you can specify several names at the same time, which simplifies development on localhost.
All that comes in handy from there is the AppID for Facebook and the “Application ID” for Vkontakte, remember them. If you plan to develop on a local machine, you will have to create two Vkontakte applications, and specify one of them as localhost.

We will need to download two scripts, one from each of the sites, and after loading each, perform some actions. But since we don’t want to do everything as quickly as possible, and to consolidate the material we covered, we will use a parallel bootloader with a callback function :

//Facebook
yepnope({
  load: ['//connect.facebook.net/ru_RU/all.js'],
  complete: function(){
    FB.init({appId: 'сюда нужно вставить AppID Facebook', xfbml: true, cookie: true, oauth: true})
    FB.Event.subscribe('auth.statusChange', facebook_auth)
  }
})
function facebook_auth(response) {
  if (response.authResponse) {
    var uid = response.authResponse.userID;
    var token = response.authResponse.accessToken;
    $.get("/auth/facebook?token="+token+"&uid="+uid, function(data, status){
      $('.loggingin').removeClass('loggingfb')
      if(status == 'success')
        $('#logins .fb').append($(''+data+''))
    })
  } else
    $('.loggingin').removeClass('loggingfb')
}
// Вконтакте
yepnope({
  load: ['//vkontakte.ru/js/api/openapi.js'],
  complete: function(){
    if(location.href.match(/localhost/)) VK.init({apiId: 'сюда нужно вставить ID приложения для localhost'})
    else VK.init({apiId: 'сюда нужно вставить ID приложения для домена'})
    VK.Auth.getLoginStatus(vk_auth, true)
  }
})
function vk_auth(response) {
  if (response.status === 'connected') {
    var uid = response.session.mid
    var sid = response.session.sid
    var name = response.session.user.first_name + ' ' + response.session.user.last_name
    $.get("/auth/vk?sid="+sid+"&uid="+uid+"&name="+name, function(data, status){
      $('.loggingin').removeClass('loggingvk')
      if(status == 'success')
        $('#logins .vk').append($(''+data+''))
    })
  } else
    $('.loggingin').removeClass('loggingvk')
}

Two options for practicing clicking on the Input, the first - with the opening of two windows at the same time, the second - separately.

  $('.login').click(function(){
    FB.login(function(){}, {scope : 'user_relationships,publish_stream,offline_access'})
    VK.Auth.login(vk_auth, 1027)
    return false
  })

  $('.login .vk').click(function(){
    VK.Auth.login(vk_auth, 1027)
    return false
  })
  $('.login .fb').click(function(){
    FB.login(function(){}, {scope : 'user_relationships,publish_stream,offline_access'})
    return false
  })

Well, and a bit of HTML, which will allow us to visualize a little what is happening.

Войти
  ...

And a little CSS to it.

#logins {
  float: right;
  margin-top: -10px;
  padding: .5em;
  background-color: #ffffaa;
  cursor: pointer;
  border: 1px solid #eeeeaa;
  border-radius: 0 0 5px 5px;
}
#logins a {text-decoration: none; }
#logins .prompt span {padding: .5em; }
#logins span {font-weight: bold; }
#not_logged_in, #logins .vk, #logins .fb {margin: .5em; }
.loggedinvk.loggedinfb #not_logged_in {display: none; }
.loggedinvk .inputs_not_logged, .loggedinfb .inputs_not_logged {display: none; }
.loggingin {display: none; padding-right: .5em; }
.loggingin.loggingfb, .loggingin.loggingvk {display: inline; }
.add .inputs {display: none; }
.loggedinvk .add .inputs, .loggedinfb .add .inputs {display: block; }

What did we get in the end and how it works

Everything interesting happens on the client side. When the user first visited the site, and has not yet given the consent of Facebook and Vkontakte to provide information about himself to the site, his login buttons are displayed. After a rather short time, when Facebook and Vkontakte fulfill an attempt to automatically login, img loading.gif disappears, and the user can click on the input. As a result, he will immediately open two pop-up windows - one per site, with a request to authorize access.
As soon as the user has expressed his consent, the methods facebook_auth and vk_auth are called, which send the unique identifiers of the user (and his name) to our site at the addresses / auth / vk and / auth / facebook.

The most interesting and useful thing happens during the next user visit to the site, when he has already authorized the access of our site to his information on Facebook and Vkontakte. Twisting a little, loading.gif will disappear, and facebook_auth and vk_auth will be called, but this time without any user intervention, which is what we wanted. That is, the user does not need to perform any actions to re-enter (login) to our website. And for registration (primary entry) it is enough to give consent to the use of your information from social networks to our site.

You can see working examples here ( carefully, can post to your page, but in the Facebook authorization dialog you can remove this permission ) and here, truncated to only Facebook. Habraffekt will not stand, be patient. The source code is entirely there on the link to github.