Надоело отправлять пользователям подтверждения аккаунта и сброса пароля по утере на почту?
Пользователи уходят, устав заполнять вашу форму регистрации?
Вы точно уверены, что у посетителей вашего сайта есть аккаунт на 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.
