Geekly Articles each Day
📜 ⬆️ ⬇️

Non-intrusive registration and login


Tired of sending users confirmation of the account and resetting the password for the loss to the mail?
Are users leaving a charter to fill out your registration form?
Are you sure that your website visitors have an account on Facebook or Vkontakte?
Do you want to store any personal data?
Are your users tired of entering username and password?
Your users are too lazy to even click on the "Login" button?
Have you seen how it is done on stackoverflow and you want the same, and even better?

Below is how to make the entry to your site unobtrusive, automatic, and inexpensive.

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

We will not send users to confirm the account and reset the password for the loss by mail.
Remove the registration form.
We will not store any personal data.
Remove the login form and password.
')
Only one way out - to log in to the site using OpenID or OAuth. If there is confidence that all users have a registration on Facebook or Vkontakte, then the method described below will do.

In order to be able to authenticate the user through OAuth on Facebook and Vkontakte, you need to go to the appropriate pages of their sections for developers and create there your applications, correctly specifying the domain name of the site. For Facebook, you can specify several names at the same time, which simplifies the development on localhost.
All that is useful to us from there is the AppID for Facebook and the 'application ID' for Vkontakte, remember them. If you plan to develop on a local machine, then Vkontakte applications will have to create two, and specify one of them as the localhost domain.

We will need to download two scripts, one from each of the sites, and after loading each, perform some actions. But since we do not want to do everything as quickly as possible, and to consolidate the material covered, we will use a parallel loader 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($('<span>'+data+'</span>')) }) } 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($('<span>'+data+'</span>')) }) } else $('.loggingin').removeClass('loggingvk') }


Two options for practicing clicking on the Login, 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, some HTML, which will allow us to visualize a little bit of what is happening.
 <body> <div id="fb-root"></div> <div class="top"> <div id="logins"> <div class="login"> <span id="not_logged_in"> <span class="loggingin loggingfb loggingvk"> <img src="/images/loading.gif" /> </span> <span> <a></a> </span> </span> <span class="fb"> <img class="nano" src="/images/facebook.png" /> <span class="name"></span> </span> <span class="vk"> <img class="nano" src="/images/vkontakte.png" /> <span class="name"></span> </span> </div> </div> ...

And a little bit of 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 we got in the end and how it works

Everything interesting happens on the client side. When a user first logged on to the site, and has not yet consented to Facebook and Vkontakte to provide information about himself to the site, his login buttons are shown. After some rather short time, when Facebook and Vkontakte are trying to automatically login, img loading.gif disappears and the user can click on the entrance. As a result, it will open two pop-up windows at once - 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 website at / auth / vk and / auth / facebook.

The most interesting and useful occurs during the next user’s visit to the site, when he has already authorized our site to access his information on Facebook and Vkontakte. A little twist, loading.gif will disappear, and facebook_auth and vk_auth will be called, but this time without any intervention from the user, which we wanted. That is, the user for re-entry (login) to our site does not need to perform any action at all. And for registration (initial entry), it is enough to give consent to the use of your information from social networks to our site.

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

Source: https://habr.com/ru/post/138538/

More articles:


All Articles