Как внедрить регистрацию в сайт

7

Упрощаем регистрацию и вход на сайт

Мы решили дополнить некоторыми примерами статью, опубликованную на хабре, чтобы вы узнали о некоторых «инновационных техниках» улучшения форм регистрации и авторизации.

Ваши клиенты «заснули»? Заказывайте email-маркетинг от Netpeak — мы легко их разбудим:

Упрощаем формы регистрации

Итак, несколько приемов:

• не нужно дублировать ввод пароля;

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

А. Подключаем библиотеки в ‹header›.

1. Библиотека jQuery.

2-7. инициализация на элементе.

Б. HTML-код формы следующий:

5-6. видимость этих полей переключается скриптом по чекбоксу.

B. init.js

Г. styles.css

• лучше сделать автозаполнение полей на основе введённых данных;

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

А. Подключаем библиотеки в ‹header›.

Библиотека jQuery.
2. Основной скрипт.

1.Поле, в которое следует внести почтовый индекс.

В. zip_city.js:

Г. zip_city.php: обработчик ajax-запроса.

Д. db.php: конфигурация подключения к БД.

Е. Создание таблицы БД:

• можно сделать автоподстановку в поле ввода;

Некоторые поля предполагают ограниченный набор вводимых значений. Например, пользователь может ввести два символа, увидеть список стран, которые начинаются на эти буквы и легко выбрать нужную. К тому же, он уж точно не совершит ошибок в названии родины. AJAX Auto-Complete под jQuery.

А. Подключаем в ‹header›. 1. Библиотека jQuery.
2. Скрипт автозаполнения для jQuery.
3. Основной скрипт.

Б. HTML-код формы следующий:

1. Поле, в которое нужно начинать вводить название страны.

В. init.js:

Г. autocomplete.php: обработчик ajax-запроса

Д. Создание таблицы БД:

Ж. styles.css:

• зачем вводить данные дважды?

Во многих интернет-магазинах используют многошаговые формы заказа с полями адресов оплаты и доставки. Зачастую их значения совпадают. Почему бы не предложить пользователю в один клик продублировать значения уже введённых полей? Программно приём прост и вы можете применять его в разных случаях, где подразумевается вероятность повторения значений.

А. Подключаем в ‹header›:

2. jQuery Select Plugin.

3. основной скрипт.

Б. HTML-код форм следующий:

Работал Web developer в компании «ООО «Цитрус Дискаунт»», «Netpeak», «Infomir», Front-End Developer в компании «Ciklum Odessa», Programmer в COMODO, Web developer в компании «ООО «Цитрус Дискаунт»».

Создание регистрации на сайте на PHP + MySQL

Здравствуйте! Сейчас мы попробуем реализовать самую простую регистрацию на сайте с помощью PHP + MySQL. Для этого на вашем компьютере должен быть установлен Apache. Принцип работы нашего скрипта изображен ниже.

1. Начнем с создания таблички users в базе. Она будет содержать данные пользователя (логин и пароль). Зайдем в phpmyadmin (если вы создаете базу на своем ПК http://localhost/phpmyadmin/). Создаем таблицу users, в ней будет 3 поля.

Я создаю ее в базе mysql, вы можете создавать в другой базе. Далее устанавливаем значения, как на рисунке:

Нажимаем «сохранить». Итак, таблица у нас есть.

2. Необходимо соединение с этой таблицей. Давайте создадим файл bd.php. Его содержание:

В моем случае это выглядит так:

Сохраняем bd.php.
Отлично! У нас есть таблица в базе, соединение к ней. Теперь можно приступать к созданию странички, на которой пользователи будут оставлять свои данные.

3. Создаем файл reg.php с содержанием (все комментарии внутри):

4. Создаем файл, который будет заносить данные в базу и сохранять пользователя. save_user.php(комментарии внутри):

5. Теперь наши пользователи могут регистрироваться! Далее необходимо сделать «дверь» для входа на сайт уже зарегистрированным пользователям. index.php (комментарии внутри) :

В файле index.php мы выведем ссылочку, которая будет открыта только для зарегистрированных пользователей. В этом и заключается вся суть скрипта — ограничить доступ к каким-либо данным.

6. Остался файл с проверкой введенного логина и пароля. testreg.php (комментарии внутри):

Ну вот и все! Может урок и скучный, но очень полезный. Здесь показана только идея регистрации, далее Вы можете усовершенствовать ее: добавить защиту, оформление, поля с данными, загрузку аватаров, выход из аккаунта (для этого просто уничтожить переменные из сессии функцией unset) и так далее. Удачи!

Все проверил, работает исправно!

Автор: Стороженко Евгений (отредактировал и опубликовал Максим Шкурупий)

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Максим Шкурупий
Урок создан: 24 Июля 2009
Просмотров: 10494500
Правила перепечатки

5 последних уроков рубрики «PHP»

• 

Фильтрация данных с помощью zend-filter

Когда речь идёт о безопасности веб-сайта, то фраза "фильтруйте всё, экранируйте всё" всегда будет актуальна. Сегодня поговорим о фильтрации данных.

Контекстное экранирование с помощью zend-escaper

Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

Подключение Zend модулей к Expressive

Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

Совет: отправка информации в Google Analytics через API

Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

Подборка PHP песочниц

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

Авторизация и регистрация в интернет-магазине: 5 решений для удобства авторизации и 16 решений для удобства регистрации

На связи Максим Жуков из KISLOROD. Мы специализируемся на разработке и развитии ecommerce-проектов. Делимся экспертизой в этом блоге и телеграм-канале. Подписывайтесь, чтобы не пропускать материалы о точечном увеличении конверсий в клиентских проектах, исследованиях, гипотезах и наблюдениях.

Ранее мы уже рассказали о грамотной реализации:

Сегодня поговорим об авторизации и регистрации в интернет-магазине. От того, насколько удобно для пользователя реализована авторизация и регистрация в интернет-магазине, сильно зависит конверсия. Рассмотрим, как упростить эти процессы для покупателей и не терять их из-за нежелания регистрироваться или авторизоваться.

Ритейлеры заинтересованы в том, чтобы посетители регистрировались на сайте. После регистрации пользователь попадает в подписную базу. Благодаря этому можно:

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

Процесс регистрации улучшает поведенческие факторы — так как пользователь совершает несколько целевых действий и переходов. А это положительно влияет на ранжирование в поисковых системах.

При этом многие пользователи не хотят выполнять лишние действия, связанные с регистрацией и авторизацией в интернет-магазине. И если функционал реализован неграмотно и усложняет процесс покупки, это обязательно скажется на конверсии. Дальнейшие рекомендации помогут сделать авторизацию и регистрацию выгодной для пользователей, а сами процедуры — максимально простыми.

Пользователи привыкли видеть форму в правом верхнем углу. Чтобы им не приходилось искать форму авторизации на сайте, размещайте ее в привычном месте.

1. Если пользователь ошибся, укажите в чем именно — логине или пароле.
2. Внедрите функционал, позволяющий проверить правильность введения пароля до отправки формы.

Позвольте легко получить новый пароль, разместив ссылку на его восстановление рядом с полем пароля — на случай, если пользователь его забыл.

Всё меньше пользователей хотят использовать авторизацию через email, отдавая предпочтение авторизации через телефон:

1. Нет необходимости запоминать пароль — можно пройти авторизацию, указав код, который придёт в SMS.
2. В эру соцсетей и мессенджеров пользователи всё реже пользуются почтой для обмена сообщениями.

Важно учитывать эти тенденции, если вы работаете преимущественно в b2c-сегменте.

Единственный недостаток внедрения авторизации через телефон — дополнительные издержки на оплату SMS рассылки.

Вы также можете внедрить авторизацию через социальные сети. Это упростит пользователям процесс регистрации и авторизации. Статистические исследования показывают, что 53% пользователей авторизуются через Facebook и 44,8% — через Google.

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

Хороший пример формы для авторизации на сайте нашли на lamoda.ru — можно войти и с помощью соцсетей, и стандартным способом.

Несколько нюансов авторизации через соцсети:

• способ предпочитает молодая аудитория;
• возможна авторизация через Фейсбук, авторизация на сайте через ВК или даже через Одноклассники — учитывайте предпочтения аудитории и реализуйте сразу все возможности;
• для бизнес-аудитории больше подойдет авторизация на сайте через Google;
• пользователь может забыть, с помощью какой соцсети регистрировался;
• удалив аккаунт в соцсети, пользователь не получит доступ к сайту.

Пользователи могут авторизоваться на разных этапах взаимодействия с интернет-магазином:

сразу после входа на сайт;

после того как найдут интересующие товары;

После авторизации текущее положение посетителя не должно изменяться, чтобы он мог продолжать путь по воронке продаж.

Особенно важно оставлять пользователя на странице оформления заказа — даже если он сбрасывал пароль. Если покупатель уже оформляет товар, а его перенаправят на главную, это может привести к уходу с сайта. Ведь пользователь мог находиться в карточке товара, который долго искал. А после возвращения на главную у него могут возникнуть сомнения, что он снова найдет карточку — по крайней мере, быстро.

Как сохранить положение пользователя:

• реализовать форму авторизации на сайте в раскрывающемся меню, без перехода на страницу авторизации;
• отображать форму авторизации на сайте во всплывающем поверх текущей страницы в модальном окне.

Большинство интернет-магазинов в Рунете использует второе решение. После такой авторизации можно будет обновить текущую страницу и не потерять положение на сайте.

Согласно исследованиям Baymard Institute, 37% пользователей откажутся от оформления заказа из-за необходимости создавать учетную запись. Зачастую пользователям проще сделать заказ в другом интернет-магазине, чем регистрироваться. Есть категория покупателей, которые сознательно выбирают магазины с необязательной регистрацией. Чтобы не терять клиентов, дайте им право выбора — регистрироваться или нет.

Преимущества зависят от возможностей учетной записи конкретного интернет-магазина. Сообщите о них, когда предлагаете зарегистрироваться, чтобы убедить пользователя заполнить форму. Например:

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

вы будете получать полезную информацию, знать о всех распродажах и спецпредложениях;

Чтобы стимулировать пользователя зарегистрироваться, можно использовать:

• скидку на покупку или подарок;
• бесплатную услугу — например, доставку;
• участие в бонусной программе;
• розыгрыш призов.

При оформлении заказа предлагайте купить товар без регистрации или зарегистрироваться и получить что-то ценное.

Вместо обычной регистрации можно предложить пользователям стать участником закрытого клуба. Это работа на уровне психологии — снять предубеждения о регистрации и вызывать желание стать особенным.

Например, на сайте онлайн-винотек Grape можно вступить в закрытый клуб и получить доступ к специальным скидкам и акциям.

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

Форма регистрации на сайте с множеством полей пугают пользователей. Чем меньше полей, тем выше вероятность регистрации. Оставьте только те поля, которые действительно необходимы.

Не заставляйте пользователей вводить пароль в двух полях — можно показывать пароль, который фактически вводит пользователь, чтобы избежать ошибки введения. Запрашивайте дополнительную информацию после регистрации. К такой информации относится, например, фотография или дата рождения пользователя.

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

Человек может забыть логин, особенно если использует разные логины на разных сайтах. Но он не забудет адрес своей электронной почты. Еще одно преимущество такого подхода — вы в любом случае запрашивали адрес почты, а значит без логина количество полей в форме уменьшится.

Пользователь может забыть, что когда-то уже регистрировался на сайте. Если учетная запись для электронной почты уже существует, то сразу сообщите об этом пользователю — не ждите отправки формы. Предложите ввести пароль для учетной записи и отправить новый пароль на указанную почту.

Если в форме есть обязательные и необязательные для заполнения поля, сообщите об этом пользователю. Не отмечайте только необязательные или только обязательные поля. Ставьте метки возле каждого поля.

В исследовании Baymard Institute 32% пользователей не заполняли часть обязательных полей в формах, в которых были отмечены только необязательные поля. Пользователям не очевидно значение отсутствия маркировки поля. И вместо того, чтобы заполнять поля без маркировки, пользователи тратят время на раздумья, обязательны ли они. Отсутствие пометки «обязательное поле» увеличивает время заполнения формы и количество ошибок

Формы, в которых были отмечены только обязательные поля, показали лучшие результаты при тестировании. Правда, показатель заполнения необязательных полей был почти идентичен показателю заполнения обязательных полей. То есть пользователи думали, что необязательное поле обязательно к заполнению. И в некоторых случаях испытывали дискомфорт, так как считали, что обязаны предоставить информацию, которую не хотели бы раскрывать (например, должность). Такая ситуация может привести к отказу от регистрации. Избавляйтесь от ненужных полей.

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

Чрезмерно строгие требования к паролям могут стать серьезным препятствием к авторизации во время оформления заказа.

По данным Baymard Institute,18,75% пользователей, которые делают покупку на сайте повторно, не завершают заказ из-за того, что не могут вспомнить сложный пароль. Обычно они пробуют несколько комбинаций, затем сбрасывают пароль и ждут письма с возможностью поменять его. На этом этапе могут возникнуть проблемы — задержка письма, попадание в спам — вероятность отказа от покупки очень высока.

У новых пользователей необходимость придумывать сложный пароль вызывает негативные эмоции в процессе регистрации. Правда, если сообщать требования к паролю заранее, посетители редко отказываются от создания учетной записи по этой причине. Если у вас есть требования к паролю, укажите их прямо в форме регистрации на сайте или хотя бы тогда, когда пользователь получит сведения об ошибке при вводе будущего пароля.

У посетителей обычно есть несколько привычных паролей, которые они используют на разных сайтах. Если пароль слишком простой, сообщите пользователю об этом и предложите создать более надежный пароль. Но не ограничивайте возможность использовать привычный пароль.

Интернет-магазин заинтересован не только в защите информации, но и в упрощении входа для пользователей. Исследователи из Baymard рекомендуют использовать минимальные требования к паролю — 6 строчных букв. Чтобы это не отразилось негативно на безопасности учетной записи, можно внедрить дополнительные меры безопасности. Например, необходимость каждый раз вводить данные платежной карты при оплате. При этом не стоит ограничивать максимальную длину и сложность пароля, так как есть пользователи, которые предпочитают перестраховаться.

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

Исследователи из Baymard Institute не рекомендуют использовать капчу — даже при условии хорошей реализации она приводит к потере покупателей. Если же капча настолько нечитаема, как в примере ниже, вероятность отказа очень высока.

По результатам исследований, около 8,66% всех пользователей ошибаются при первой попытке. Если капча чувствительна к регистру, ошибутся 29,45%. Только 66% с первой попытки правильно ввели капчу. Если пользователи неправильно введут капчу два раза подряд, то скорее всего покинут сайт.

Если без капчи не обойтись, опирайтесь на следующие правила:

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

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

Пример использование сервиса reCAPTCHA на askona.ru

Блокировка учетной записи при многократном неправильном введении пароля более агрессивная мера безопасности, чем капча. Она приводит к еще большему количеству отказов пользователей.

Как уже писали выше, если пользователям приходится использовать сложные пароли вместо стандартных, они часто забывают их. Поэтому начинают пробовать разные комбинации, что вызывает блокировку учетной записи. А это, в свою очередь приводит к почти стопроцентной вероятности отказа от покупки. Вряд ли кто-то будет ждать отмены блокировки — скорее уйдет покупать товар в другом месте.

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

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

Когда пользователь забывает пароль, то зачастую пытается найти письмо с паролем. Облегчите задачу, отразив суть письма в теме. Вместо «Поздравляем!» или «Добро пожаловать!» используйте тему вроде «Данные учетной записи в таком-то интернет-магазине». В качестве отправителя также должно быть название ресурса.

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

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

В следующий раз обсудим нюансы реализации личного кабинета в интернет-магазине. Подпишитесь на этот блог или наш телеграм-канал, чтобы не пропустить статью.

Как настроить регистрацию на сайте через соцсети

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

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

Регистрация на asos.com

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

Чем так хороши соцсети для регистрации

От этого способа авторизации выигрывают и клиенты, и владелец сайта.

Удобно клиентам: меньше заполнять, быстрее регистрация, учетка не теряется

Еще в 2013 году исследование показало, что 77% пользователей считают вход через соцсети хорошим решением. А в 2016 году другие исследователи выяснили, что 93% пользователей чаще выбирают способ авторизации через соцсеть. Остальные опрошенные либо не были зарегистрированы в соцсетях, либо не хотят передавать сайту личные данные профиля, для них нужно оставить возможность авторизации через email.

Регистрация по почте или телефону требует больше действий вручную, а при каждом входе придется вводить данные, если не сохранить их в браузере. Вход через соцсеть быстрее, надо только выбрать соцсеть и нажать «войти».

После того, как платформа для email-рассылок Mailchimp внедрила авторизацию через соцсети, количество неудачных попыток входа в систему снизилось на 66%. С этим способом меньше вероятность забыть логин и пароль, потому что не нужно запоминать отдельную учетку.

Полезно компании: можно собирать данные, больше вероятность репостов

Если пользователь авторизовывается через соцсеть, веб-мастер получает информацию о нем из профиля. Это может быть рабочий адрес почты, возраст, геоданные, семейное положение, интересы — то, что заполнено в профиле. А еще это значит, что пользователь точно не ввел для регистрации одноразовую почту, так что рассылка не пропадет.

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

Поскольку регистрация на сайте подразумевает сбор личных данных пользователей, их нужно защитить. Подготовьте сайт к работе с такими данными.

Требования к сайту по защите личных данных

В ФЗ N152-ФЗ «О персональных данных» описаны правила для законного сбора и обработки данных пользователей. За нарушения предусмотрены штрафы.

Сайт должен работать на HTTPS, то есть ему нужен ssl-сертификат.

Хостинг сайта по закону должен находиться на территории РФ.

До публикации сайта владелец или разработчик должен подать в Роскомнадзор уведомление об обработке персональных данных в бумажном или электронном виде.

На сайте должны быть:

согласие на обработку персональных данных в свободной форме;

либо ссылка на единую публичную оферту, но тогда придется хранить логи на случай требования Роскомнадзора доказать посещение сайта пользователем;

документ с политикой в отношении обработки персональных данных с перечислением информации, которые собирает сайт, и обоснованием необходимости;

уведомление о сборе cookies и других данных.

Ссылки на документы на сайте ikea.ru

С 1 марта 2021 года вступил в силу ФЗ от 30.12.2020 № 519-ФЗ об изменении правил обработки общедоступных персональных данных, которые есть в профилях соцсетей и на сайтах объявлений. Это имя, город проживания, контакты, личные фото и другая информация.

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

Настройки cookie на booking.com

Если владелец сайта — юридическое лицо, к нему есть дополнительные требования относительно документации, штрафы за несоблюдение закона сильно выше.

Как добавить на сайт регистрацию через профили в соцсетях

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

Регистрация на сайте lamoda.ru

Авторизация через соцсети идет по цепочке:

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

В приложение социальной сети приходит запрос.

Пользователя перебрасывает в закрытое защищенное приложение соцсети, которое создал веб-мастер. На экране появляется кнопка «Продолжить как…» или «Разрешить».

По клику пользователь разрешает войти в систему через учетную запись соцсети. Кликнул — разрешил передать данные.

Соцсеть отправляет сайту ключ доступа к личным данным пользователя.

Сайт отправляет соцсети запрос на получение данных и подтверждает его полученным ранее ключом доступа.

Соцсеть передает данные сайту. Количество данных может быть разным из-за того, что пользователь разрешит передать.

Для добавления регистрации через соцсети есть несколько способов — ручной и автоматизированные.

Способ 1. Ручная настройка форм для каждой социальной сети

Каждая соцсеть требует отдельных настроек:

со стороны соцсети нужно зарегистрировать сайт в системе и получить ключи;

со стороны сайта нужно настроить интеграцию с социальной сетью.

ВКонтакте

Настроить авторизацию на сайте через ВКонтакте можно с помощью API. На странице создания приложения заполните поля, в качестве платформы выберите «Сайт».

Создание приложения

Нажмите «Подключить сайт», действие нужно подтвердить через телефон или устройство с приложением. В настройках вы увидите id приложения и ключ — эти данные понадобятся для работы с API.

Список дальнейших действий подробно разобран на странице Документации для разработчиков.

Если вам нужен только ВКонтакте, можно использовать официальный виджет авторизации. На странице создания виджета нужно заполнить поля и скопировать код для вставки на сайт. Подробная документация расскажет, как правильно его вставить.

Виджет для входа через сайт ВКонтакте

Фейсбук*

Зарегистрируйтесь в системе Фейсбука* для разработчиков, кликните на «Создать приложение» и выберите «Создание кросс-сервисных функций:

Дальше после заполнения полей и клика на «Создать приложение» откроются настройки. Выберите «Настроить» у плашки «Вход через Facebook*». Дальше выберите платформу — Веб, введите адрес сайта, сохраните и нажмите продолжить.

Теперь надо все настроить. Откройте настройки приложения на боковой панели, добавьте добавьте домен сайта, URL политики конфиденциальности и пользовательского соглашения.

Фейсбук* придерживается общего регламента по защите данных (GDPR), согласно ему у пользователей должна быть возможность сделать запрос на удаление данных. В пункте «Удаление данных пользователей» выберите «URL инструкций для удаления данных» и вставьте ссылку на описание таких инструкций. Это обязательный пункт.

Все сохраните, Скопируйте ID приложения и секрет.

В меню настроек вашего сайта нужно найти настройку авторизации через соцсети, выбрать Фейсбук* и ввести ID приложения и код секрета.

Дальше откройте настройки главы «Вход через Фейсбук*»:

В настройках должны быть отметки «Да» у опций «Клиентская авторизация Oauth», «Веб-авторизация Oauth», «Требовать HTTPS» и «Использовать строгий режим для URI перенаправления». В поле «Действительные URI перенаправления для OAuth» нужна ссылка в формате http://site.ru/auth/facebook/callback. OAuth — это единый стандарт авторизации.

Сохраните изменения. Вверху вы увидите «Статус: в разработке», его нужно активировать, чтобы он сменился на «Опубликовано».

Другие соцсети настраиваются по похожему механизму с помощью API. К примеру, в Одноклассниках тоже надо начать с создания приложения, у Твиттера также есть платформа для разработчиков. Быстрее это можно сделать через инструменты или плагины.

Способ 2. Сервисы для настройки авторизации через соцсети

Это не все существующие сервисы, но более-менее популярные из тех, что нам встретились, по большей части платные. Если вы используете что-то из перечисленного, дайте свой отзыв в комментариях!

ULogin

Простой генератор универсального кода для вставки виджета авторизации через соцсети. Нужно выбрать внешний вид, найти из списка CMS вашего сайта или выбрать универсальный вариант для всех и код виджета готов. Русскоязsчный.

Akamai

Более серьезный сервис. Поможет настроить авторизацию через Фейсбук*, LinkedIn, PayPal, Твиттер и Yahoo!, есть функциональность для сбора и анализа информации из пользовательских профилей. Интерфейс на английском.

Gigya

Подходит для установки регистрации через ВКонтакте, Facebook, Twitter и LinkedIn,интеграции с другими сервисами и платформами, а также для обработки статистики по зарегистрированным пользователям. Интерфейс на английском.

Способ 3. CMS-плагины для регистрации на сайте через соцсети

Если пользуетесь CMS, можно поискать решение через модули и расширения в каталогах.

WordPress

Для этого движка есть много расширений, к примеру:

miniOrange Social Login для регистрации через ВКонтакте, Твиттер, Инстаграм*, Фейсбук* и другие соцсети. Есть дополнительные премиальные возможности, например, отправка приветственных писем зарегистрировавшимся;

Social Login & Register тоже предлагает много соцсетей, среди которых ВКонтакте, Фейсбук*, Инстаграм*, Твиттер и другие. Есть возможность аналитики данных пользователей;

Social Login by BestWebSoft для добавления формы авторизации через соцсети и комментирования. Работает с Фейсбуком*, Твиттером, аккаунтом Google и LinkedIn;

Super Socializer включает в себя не только авторизацию, но и возможность делать репосты и комментировать контент на сайте через профили в соцсетях.

Joomla

Модулей авторизации довольно много, а работа с ними одинаковая: установить модуль, зарегистрировать специальное приложение в соцсети и получить ключи, как мы писали в примерах с ВКонтакте и Фейсбуком*, добавить эти данные в настройки модуля и опубликовать.

Модули можно найти в разделе Расширения — Менеджер расширений. Например:

Slogin для регистрации через ВКонтакте, Твиттер, Фейсбук*, Одноклассники, Инстаграм*, Twitch, Telegram, Github и другие платформы;

Social Login — ВКонтакте, Фейсбук*, Твиттер, Pinterest, LinkedIn, Инстаграм*, GitHub, WordPress, Reddit, Vimeo, Steam, Mail.ru, Яндекс, Одноклассники и другие соцсети;

Instant Facebook* Login для Фейсбука*, Твиттера и LinkedIn, дополнительно с его помощью можно работать с комментариями, чатом и другими функциями;

BT Social Login для Фейсбука* и Твиттера;

Akeeba SocialLogin для регистрации с помощью Фейсбука* и Твиттера или через профили в GitHub, Google и Microsoft.

OpenCart

Для OpenCart тоже есть модули, к примеру:

бесплатный модуль авторизации через социальные сети Фейсбук* и Инстаграм* для версий OpenCart 2.1, 2.2, 2.3;

платный модуль для регистрации через ВКонтакте, Фейсбук*, Одноклассники, Твиттер, Gmail.com, Mail.ru.

Битрикс

У CMS Битрикс авторизация на сайте через социальные сети входит в функциональность основного модуля входа на сайт.

Нужно только настроить:

В выбранных вами соцсетях нужно зарегистрировать приложение и получить ключи.

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

*Компания Meta, которой принадлежит Instagram и Facebook, признана в России экстремистской организацией.