Компания
538,28
рейтинг
28 октября 2010 в 15:30

Разное → Авторизация пользователей через Mail.Ru API: большой эффект маленькой кнопки

Привет, с вами снова команда Платформы@Mail.Ru!

В предыдущем посте мы рассказывали о различных социальных плагинах Моего Мира, а также сравнивали их эффективность на примере собственных проектов портала.

Настало время поговорить о других возможностях Mail.Ru API, возможностях более тесной интеграции сайтов с социальной сетью. И, конечно же, дело снова не обойдется без кейсов – уже кейсов независимых проектов с реальными показателями эффективности.

Поехали!


Регистрация пользователей Mail.Ru в два клика



Если вам нужно авторизовать или зарегистрировать посетителя на вашем сайте и у него есть аккаунт на Mail.Ru (а таковых в Рунете абсолютное большинство), вы можете сильно облегчить жизнь как себе, так и ему. Достаточно внедрить возможность регистрации и авторизации пользователей через Mail.Ru API.

Вместо того, чтобы предлагать пользователю в 125-й раз заполнять длинную форму регистрации на вашем ресурсе, предложите ему авторизоваться «в 2 клика» с помощью API. Это радикально снизит «порог входа» на ваш ресурс, а также повысит лояльность уже существующей аудитории. Как только пользователь дал согласие на авторизацию, вы получаете доступ к его персональной информации из профиля на Mail.Ru: email, имя, фамилия, фото, пол, возраст, город и так далее.

Используйте эту информацию для фоновой автоматической регистрации пользователя. Также у вас появляется возможность предлагать пользователю персонализированный контент и сервисы, например, переключить на версию сайта для определенного города или показывать только мужской или женский контент.

Вот как это все реализовано на сайте одного из наших многочисленных партнеров – darberry.ru:



После клика на кнопку «Войти» пользователь видит окно, на котором ему предлагается установить связь с сайтом, предоставив доступ к своему профилю:



Если пользователь нажимает кнопку «Установить связь», то вам через javascript API возвращается полная информация о нем, и вы можете произвести автоматическую регистрацию пользователя.

Кстати, вы можете спросить человека, не был ли он уже ранее зарегистрирован на вашем сайте, и «связать» его профили в один. Вот как это выглядит на проекте Bigbuzzy. Также это отличный пример автоматического заполнения полей в профиле на основе информации из аккаунта человека на Mail.Ru:



Кстати, возможность быстрой авторизации пользователей Mail.Ru на вашем сайте можно использовать не только в форме регистрации/авторизации, но и, например, в форме комментирования новостей или статей на ресурсе.

Техническая сторона интеграции


Подключить авторизацию через Mail.Ru API на свой сайт достаточно просто. Для этого нужно зарегистрировать ваш сайт и написать несколько строк javascript кода.

Ниже приведен пример странички с минимальной интеграцией:

<html>
<head>
 // этот небольшой скрипт создает минимальное окружение для библиотеки,
 // но не загружает ее саму
 <script type="text/javascript" src="http://cdn.connect.mail.ru/js/loader.js">
 </script>
</head>
<body>
 <script type="text/javascript">
  //<![CDATA[
  // этот вызов обязателен, он осуществляет непосредственную загрузку
  // кода библиотеки; рекомендуем всю работу с API вести внутри callback'а
  mailru.loader.require('api', function() {
   // инициализируем внутренние переменные
   // не забудьте поменять на ваши значения app_id и private_key
   mailru.connect.init(__app_id__, __private_key__);
   // регистрируем обработчики событий,
   // которые будут вызываться при логине и логауте
   mailru.events.listen(mailru.connect.events.login, function(session){
   window.location.reload();
   });
   mailru.events.listen(mailru.connect.events.logout, function(){
   window.location.reload();
   });
   // проверка статуса логина, в result callback'a приходит
   // вся информация о сессии (см. следующий раздел)
   mailru.connect.getLoginStatus(function(result) {
   if (result.is_app_user != 1) {
    // пользователь не залогинен, надо показать ему кнопку логина

    // вешаем кнопку логина (пример для jquery)
    $('<a class="mrc__connectButton">вход@mail.ru</a>').appendTo('body');
    // эта функция превращает только что вставленный элемент в
    // стандартную кнопку Mail.Ru
    mailru.connect.initButton();
   } else {
    // все ок, можно работать

    // получаем полную информацию о текущем пользователе
    mailru.common.users.getInfo(function(result){console.log(result[0].uid)});
   }
   });
  });
  //]]>
 </script>
</body>
</html>



Более подробную информацию о том, как подключить авторизацию и другие возможности API вы найдете на страницах официальной документации.

Какой эффект можно получить


Наконец, цифры – например, по Darberry. Все цифры были получены еще летом, до масштабной рекламной компании на Mail.Ru.

  • 62% пользователей Darberry зарегистрированы с ящиков Mail.Ru.
  • Внедрение специального механизма авторизации для пользователей Mail.Ru увеличил конверсию формы регистрации в два раза. Если раньше регистрировался каждый 10-й пришедший новый пользователь, то после интеграции — каждый 5-й.


Еще пример – altergeo.ru, сложный технологичный стартап с преимущественно «гиковской» аудиторией. Их опыт интеграции Mail.Ru API:
  • До интеграции входа «в два клика» 24% пользователей были зарегистрированы c ящиков Mail.Ru.
  • После интеграции процент пользователей с ящиками Mail.Ru оказался равным 42%, при этом у них уже стояли кнопки от всех социальных сетей.
  • 57% пользователей Mail.Ru зарегистрировались и входят именно через кнопку «Войти с Mail.Ru»


Еще интересные и убедительные факты:
  • Mail.Ru — это почта, которой пользуются каждые 6 из 10 пользователей Рунета
  • Mail.Ru – это социальная сеть Мой Мир, у которой в месяц аудитория 18.5 миллионов пользователей (за сентябрь, только по России, TNS)
  • В среднем по Рунета — 50% пользователей регистрируются через ящики Mail.Ru


Так что интеграция авторизации через Mail.Ru API может стать существенным улучшением для вашего проекта.

Понятно, что удобной авторизацией возможности Mail.Ru API отнюдь не исчерпываются. В следующем посте мы расскажем еще больше!

C уважением,
Команда проекта Платформа@Mail.Ru

P.S. На все ваши вопросы по глубокой интеграции, как всегда, готов ответить Антон Мельников, менеджер по продвижению Платформы@Mail.Ru. Если вы еще не добавили его в контакты — добавляйте: a.melnikov@corp.mail.ru
Конечно, он опять читает комментарии и сразу отвечает.
Хорошего дня!
Автор: @gorin

Комментарии (58)

  • +4
    Ура! Mail.ru вышел из анабиоза!
    • 0
      Интеграцией активно пользуются давно.
      Можете посмотреть примеры tvigle.ru, kinopoisk.ru, baby.ru и classnet.ru.
      А также стартапы: darberry.ru, altergeo.ru, iii.ru, firmbook.ru, dressed.ru, bigbuzzy.ru, pokupon.by, kupibonus.ru, kvartirakrasivo.ru и chatovod.ru.

      Кстати, только тут я написал 5 штук сервисов «Groupon» с авторизацией пользователей через Mail.Ru API (если считать у Альтергео внутренний).
  • –1
    Второй скрин… я не Антон но Мельников), Антон это мой Брат)
    • +6
      Я твой брат? Брат! ;)
  • +6
    А почему Вы предпочли не использовать OAuth или OpenID?
    • –1
      OpenID не дает таких возможностей, да и сложнее для конечного пользователя. По статистике, если на сайте стоит OpenID, то им все равно пользуются не больше 5% пользователей. Интеграция API дает намного больше возможностей и пользуются кнопкой чаще. Она понятнее для пользователя.
      • +6
        > По статистике, если на сайте стоит OpenID, то им все равно пользуются не больше 5% пользователей.

        Пруф или не было.
        • +2
          или это по статистике использования именно вашего openId? ну так ЦА-то у вас, прямо скажем…
          • 0
            Нет, это статистика крупного внешнего проекта. Я попрошу дать комментарий по статистике входа через OpenID и API или напишу сам, как получу разрешение.
            • +2
              Внешнего провайдера OpenId? Или статистика «если на сайте стоит OpenID, то им все равно пользуются не больше 5% пользователей» основана на результатах использования на только одном сайте?
              • 0
                Слив засчитан. Да, я поторопился написать.
                Это статистика проектов, где стоит сразу интеграция API и OpenID. Она показывает, что кнопкой пользуются чаще чем OpenID. И это не статистика по всем проектам. Комментарий правильный.
                • +2
                  Чем OpenId2 отличается от «кнопки»?

                  гугл вроде как через опенАйди авторизует и все хорошо…
      • +1
        А что относительно OAuth? В Twitter и Facebook он прекрасно сосуществует с богатым API и аналогичной кнопкой для логина.
      • 0
        каких именно возможностей не даёт OpenID?
        • +4
          не даёт возможности привязать к собственному протоколу. это не шутка совсем.
          • 0
            о каком собственном протоколе идёт речь?
            • +2
              о мейлрушном.
        • 0
          Обычно просит пользователя ввести логин. Мне в этом плане больше нравится вариант гугла, где для входа по опенайде логин не нужен.
    • +4
      На самом деле, там практически user-agent flow из oAuth 2.0. Разница в названиях параметров и некоторых деталях. Когда начинали делать, спецификации еще не было.

      В скором будущем приведем к стандарту, благо, js либа это абстрагирует.
      • +3
        Надеюсь что это будущее действительно скоро наступит)

        А то как-то так нехорошо получается, что если надо сделать вход через сервисы, то имеется один код, который обрабатывает практически все зарубежные и по отдельной js-библиотеке на каждый российский (кроме Яндекса, за что ему честь и хвала).
  • –5
    блять! вы ещё живы? Почему такой просчет?
    А использовать стандарты а-ля OAuth это не круто, велосипед это гораздо приятнее и после этого кажется что действительно что-то крутое получилось.
    • +1
      Ну стоит посмотреть на хотя бы то, как они сделали свои API :)
      • +1
        ну как бы я сильно не вижу принципиальной разницы с OAuth.
        И простите все что высказал свое мнение по поводу мэйла, но это единственная компания, у которой нет НИ ОДНОГО приличного сервиса.
        Но все таки почему-то люди пользуются и не догадываются о том что есть приличные варианты исполнения сервисов. И что подобная авторизация есть уже у всех кому не лень уже пару лет…
        • +2
          я имел в виду API не «аутентификационный», а «функциональный», который дёргают после аутентификации.
  • +4
    > Mail.Ru — это почта, которой пользуются каждые 6 из 10 пользователей Рунета
    Да, к сожалению.
  • –5
    > у него есть аккаунт на Mail.Ru (а таковых в Рунете абсолютное большинство)
    а вот это далеко не фаааааааакт…
  • +1
    Чо-то мне кажеца, штука под названием __private_key__ не должна светиться в исходнике-то? Или это просто ради красоты так назвали, чтобы как у всех было по-взрослому?
    • 0
      Это историческое название. Поменять пока не можем из-за обратной совместимости :(
    • 0
      Чтобы как у всех по-взрослому.
      Штука, которую не нужно светить, называется secret_key.
  • +2
    по моему очень даже полезно, надо же с чего то начинать!
    • 0
      Спасибо. Присоединяйтесь!
      Kinopoisk.ru, iii.ru, firmbook.ru и другие уже сделали. Если будут вопросы по интеграции — пишите.
      • 0
        Кстати, придумывать, как использовать новые открывшиеся возможности, особенно удается стартапам. Не удивительно, что и активность использования всех возможностей API среди стартапов значительно выше — они не упускают ни одной возможности получить преимущества от чего-либо нового.
        • 0
          >они не упускают ни одной возможности получить преимущества от чего-либо нового.

          или могут себе позволить ввести что-то новое, не рискуя получить море вайна от «старых» пользователей: «Верните как было!!!», ввиду отсутствия этих «старых» пользователей :)
  • +1
    Когда будет возможным авторизоваться без javascript?
    Например c телефона (как это сделано в facebook/oAuth)
    • 0
      Поддержка oAuth 2.0 в разработке, будет в течение ближайших месяцев.
      • 0
        Ближайшие месяцы прошли… Или уже не ждать? =(
  • +3
    ну да, кнопка от фэйсбука, вконтакте, твиттера, мэил.ру и сайт становится похож на новогоднюю ёлку…

    мне кажется, было бы лучше иметь обычную регистрацию и потом уже из профиля иметь возможность подключить соцсети чтобы перекинуть на сайт какие-то альбомы или статьи и прочую информацию…

    два поля: логин, пароль и кнопка войти/зарегистрироваться

    если такого логина не существует — то он регистрирует и делает автоматический вход, если существует то проверяет пароль и или входит или выдаёт ошибку «неверный пароль для такого-то логина, сделающая попытка возможна через 15 секунд».

    если человек успешно вошёл первый раз — попадает на страницу профиля, где может указать почтовый ящик (он проверяется как обычно, отправляется письмо со ссылкой, если проверился ок, то проверяется граватар) или подключиться к какой-либо соцсети, нажав на их иконки, импортировав оттуда какие-то свои фотки или данные…

    P.S.
    mail.ru следовало бы делать единые решения кнопок входа (вместе с open id/twitter/facebook/vkontakte в одном флаконе), иначе стимула их ставить совсем нет (mail.ru занимает достойное 5-е место, обогнав разве что одноклассников)

    посмотрите как дискас делают… чтобы зайти написать коммент через эту систему я могу и через твиттер зайти, и через фэйсбук, и через их собственную системку…
    • +1
      так в том то и дело, что гораздо удобнее использовать учетку из соц. сетей или от мыла для авторизации везде, а не регестрироваться, вводить капчу, подтверждать мыло и т.д.
    • +1
      Для «единого входа» существует Loginza, но она не дает использовать все возможности. Например, посылать персональные уведомления пользователям в Мой Мир или поставить виджет (HTML блок) вашему пользователю прямо на страницу профиля.

      Если у вас будет возможность «быстрой регистрации» путем ввода логина и пароля, не создаст ли это кучу клонов? Зачем тогда регистрация в принципе (на сайтах многих СМИ поступают именно так, не регистрируют, но дают возможность вписать свои данные).
      • 0
        как вариант:

        а что если сделать типа такой же системы, только добавить дополнительные возможности в зависимости от того, через какую систему зашли… то есть мне кажется должно быть какое-то единое решение, к которому могут подключаться другие платформы (фэйсбук, твиттер, вконтакте, мэил, много чего ещё...), чтобы разработчик сайта мог сам выбирать какие системы показываются и в каком порядке и мог добавить на равных свои проекты туда (при этом сделать их доступными только для себя или для всех)…

        то есть такой большой-большой каталог различных сайтов, с помощью которых можно осуществить вход… сортировка по популярности… есть функция поиска, я как обычный вебмастер могу зайти и выбрать те системы, которые мне нужны… допустим, я не люблю одноклассники, я их отмечать не буду, мэил ру, фэйсбук, твиттер и яндекс возьму и ещё возьму свой механизм проверки по базе пользователей с другого моего сайта (в целях его дополнительной рекламы таким образом, то есть каким-то образом сделаю там open id и закачаю логотип этого сайта в эту систему чтобы он был на равных с тем же яндексом open id)

        если это какая-то известная система типа того же мэил ру или вконтакте — то можно реализовать какие-то дополнительные фишки, которые поддерживает только этот популярный сервис…

        вообщем, получается вот такой монстр, который всё умеет…

        ===

        > Если у вас будет возможность «быстрой регистрации» путем ввода логина и пароля, не создаст ли это кучу клонов? Зачем тогда регистрация в принципе (на сайтах многих СМИ поступают именно так, не регистрируют, но дают возможность вписать свои данные).

        Если человек хочет иметь несколько аккаунтов — пусть регистрирует сколько ему надо… Разве это плохо? :-)
    • 0
      Собственно, как раз OpenId и можно было бы дополнительно применить в самих социальных сетях. Что, например, есть у Яндекса.
  • 0
    Хоть документация стала лучше, а то была вики, в которой черт ногу сломит
    • 0
      Спасибо. Будем улучшать. Если есть комментарии — тоже присылайте.

      А также информация для авторов — если вы разрабатываете проект, и используете интеграцию API, вы можете сделать скринкаст или текстовый туториал. Если у вас хорошо получится — мы можем разместить это в примерах на сайте Mail.Ru API. А может быть придумаем как вас еще поощрить, если вы разработаете модуль для CMS или библиотеку для различных платформ.
  • 0
    А плагин для Вордпресса слабо? Прикрутил бы на 8 сайтах сразу.
    • 0
      Я думаю плагин скоро будет. Если тут присутствуют разработчики под Wordpress — смотрите комментарий выше.
  • +1
    Скачал и залил receiver.html
    Мне пишут (орфография сохранена):
    Ваш сайт не будет работать в полном режиме для все пользователей, пока вы не завершите его настройку

    Что я делаю не так?
    • –2
      На данный момент появилась техническая проблема, она будет решена в течение суток.
      • 0
        Еще подскажите, пожалуйста, как удалить сайт из списка «своих сайтов» (http://api.mail.ru/sites/my/)?
      • 0
        Ну и на последок этот скрин весьма доставляет:
        habreffect.ru/files/e36/9b8467323/mail.ru.wtf.png
  • 0
    Чёрт, ещё одну кнопку на сайт прикручивать надо… Вот вроде читаешь описания — действительно удобно для всех, но где-то на 5-м сервисе начинаешь задумываться, что код аутентификации, импорта/экспорта и т. п. превышает собственно код сайта. По функциональности сервисы тоже не равнозначны и приходится выбирать либо пользоваться «наибольшим общим знаменателем», либо как-то ограничивать часть своих пользователей, либо ещё что-то. Уже видится страница/вкладка профиля «интеграция с другими сервисами», где пользователь вводит другие свои «идентификаторы» и получает возможность взаимодействовать с ними. Но как подумаешь о юзабилити, а также разрешении потенциальных конфликтов и дублей (причём далеко не всегда бинарных)…
  • +1
    какая замечательная метода для сбора паролей с майл.ру ^^
    • +1
      Да уж…
      Понавтыкают на порносайтах муляжей кнопки с попапом на левом домене «connect.mail.pussicat.ru» и поди разбери на каком адресе логинишься:
      habrastorage.org/storage/7aedc366/df9f36c9/5a02708d/bc181a42.png

      А все потому, что в оперном попапе адреса не видно — только на узкой полоске домен указан. Большинство людей даже не поймет что эта надпись означает :(

      Так что этот попап надо переделать: большими буквами написать что и где нужно проверить, чтобы безопасно залогиниться…
  • 0
    Вот допустим у меня при получении информации о пользователе выдает ошибку: «Incorrect signature»,«error_code»:104. К кому мне обратится за помощью, форум у вас есть?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разное