Pull to refresh

Неназойливые регистрация и вход на сайт

Reading time 5 min
Views 28K

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

Articles