Надоело отправлять пользователям подтверждения аккаунта и сброса пароля по утере на почту?
Пользователи уходят, устав заполнять вашу форму регистрации?
Вы точно уверены, что у посетителей вашего сайта есть аккаунт на Facebook или Вконтакте?
Не хотите хранить никакие персональные данные?
Ваши пользователи устали вводить логин и пароль?
Вашим пользователям лень даже нажать на кнопку «Войти»?
Видели, как это сделано на stackoverflow и хотите так же, и даже лучше?
Ниже о том, как сделать вход на ваш сайт ненавязчивым, автоматическим, и без особых затрат.
Раз решили избавляться от проблем — так уж от всех сразу.
Не будем отправлять пользователям подтверждения аккаунта и сброса пароля по утере на почту.
Уберём форму регистрации.
Не будем хранить никакие персональные данные.
Уберём форму ввода логина и пароля.
Выход один — делать вход на сайт с помощью OpenID или OAuth. Если есть уверенность, что у всех пользователей есть регистрация в Facebook или Вконтакте, то описанный ниже метод подойдёт.
Для того, чтобы была возможность аутентификации пользователя через OAuth на Facebook и Вконтакте, надо зайти на соответствующие страницы их разделов для разработчиков и создать там свои приложения, правильно указав доменное имя сайта. Для фейсбука можно указать и несколько имён одновременно, что упрощает разработку на localhost.
Всё, что нам оттуда пригодится это AppID для Facebook и 'ID приложения' для Вконтакте, запомним их. Если вы планируете заниматься разработкой на локальной машине, то приложения Вконтакте придётся создать два, и указать у одного из них в качестве домена localhost.
Нам нужно будет загрузить два скрипта, по одному с каждого из сайтов, и после загрузки каждого выполнить некие действия. Но поскольку мы не хотим сделать всё максимально быстро, и для закрепления пройденного материала, и воспользуемся параллельным загрузчиком с функцией обратного вызова:
//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, но в этот раз уже без всякого вмешательства со стороны пользователя, чего мы и добивались. То есть пользователю для повторного входа (логина) на наш сайт не нужно совершать вообще никаких действий. А для регистрации (первичного входа) достаточно дать согласие на использование своей информации из социалок нашему сайту.
Работающие примеры можно посмотреть здесь и тут, усечённый до только Facebook. Хабраэффекта не выдержит, будьте терпеливы. Исходный код целиком там же по ссылке на github.
Автор: philpirj
