Веб-разработка / Неназойливые регистрация и вход на сайт

Надоело отправлять пользователям подтверждения аккаунта и сброса пароля по утере на почту?
Пользователи уходят, устав заполнять вашу форму регистрации?
Вы точно уверены, что у посетителей вашего сайта есть аккаунт на Facebook или Вконтакте?
Не хотите хранить никакие персональные данные?
Ваши пользователи устали вводить логин и пароль?
Вашим пользователям лень даже нажать на кнопку «Войти»?
Видели, как это сделано на stackoverflow и хотите так же, и даже лучше?

Ниже о том, как сделать вход на ваш сайт ненавязчивым, автоматическим, и без особых затрат.

Раз решили избавляться от проблем — так уж от всех сразу.

Не будем отправлять пользователям подтверждения аккаунта и сброса пароля по утере на почту.
Уберём форму регистрации.
Не будем хранить никакие персональные данные.
Уберём форму ввода логина и пароля.

Выход один — делать вход на сайт с помощью OpenID или OAuth. Если есть уверенность, что у всех пользователей есть регистрация в Facebook или Вконтакте, то описанный ниже метод подойдёт.

Для того, чтобы была возможность аутентификации пользователя через OAuth на Facebook и Вконтакте, надо зайти на соответствующие страницы их разделов для разработчиков и создать там свои приложения, правильно указав доменное имя сайта. Для фейсбука можно указать и несколько имён одновременно, что упрощает разработку на localhost.
Всё, что нам оттуда пригодится это AppID для Facebook и 'ID приложения' для Вконтакте, запомним их. Если вы планируете заниматься разработкой на локальной машине, то приложения Вконтакте придётся создать два, и указать у одного из них в качестве домена localhost.

Нам нужно будет загрузить два скрипта, по одному с каждого из сайтов, и после загрузки каждого выполнить некие действия. Но поскольку мы не хотим сделать всё максимально быстро, и для закрепления пройденного материала, и воспользуемся параллельным загрузчиком с функцией обратного вызова ^[1]:

//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') }

Два варианта для отработки нажатия на Вход, первый — с открытием двух окошек одновременно, второй — раздельно.

  $('.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   })

Ну, и немного HTML'я, котрый нам позволит немного визуализировать происходящее.

<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>   ...

И немножко CSS'а к нему.

#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; }

Что же у нас получилось в итоге и как это работает

Всё интересное происходит на стороне клиента. Когда пользователь впервые зашёл на сайт, и ещё не дал согласия Facebook и Вконтакте предоставить данные о себе сайту, у него показываются кнопки входа. Через некоторое, довольно короткое, время, когда Facebook и Вконтакте отрабатывают попытку автоматического логина, пропадает img loading.gif, и пользователь может щёлкнуть по входу. В результате у него откроются сразу два всплывающих окна — по одному на сайт, с запросом авторизовать доступ.
Как только пользователь выразил своё согласие, вызываются методы facebook_auth и vk_auth, которые отправляют уникальные идентификаторы пользователя (и его имя) к нам на сайт по адресам /auth/vk и /auth/facebook.

Самое интересное и полезное происходит во время следующего захода пользователя на сайт, когда он уже авторизовал доступ нашего сайта к своей информации на Facebook и Вконтакте. Немного покрутившись, loading.gif пропадёт, и будут вызваны facebook_auth и vk_auth, но в этот раз уже без всякого вмешательства со стороны пользователя, чего мы и добивались. То есть пользователю для повторного входа (логина) на наш сайт не нужно совершать вообще никаких действий. А для регистрации (первичного входа) достаточно дать согласие на использование своей информации из социалок нашему сайту.

Работающие примеры можно посмотреть здесь ^[2] и тут, усечённый до только Facebook ^[3]. Хабраэффекта не выдержит, будьте терпеливы. Исходный код целиком там же по ссылке на github.

Автор: philpirj