Установка скрипта «Авторизация через социальные сети»

Введение

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

    Требования к установке:
  • активированное PHP;
  • uAPI.

Перед установкой, сделайте полный бэкап шаблонов на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в Панели управления » Управление дизайном » Backup шаблонов.

Первый шаг: активация uAPI и PHP


Этап 1. Активация uAPI для нужного модуля

Перейдите в настройки модуля "пользователи" и напротив пункта «Включить uAPI для модуля» установите галочку, затем прокрутите страницу вниз и сохраните изменения.


Этап 2. Получение токен-доступов для uAPI

Перейдите на страницу http://uapi.ucoz.com/uapi_panel, авторизуйтесь под своим uID-профилем.

После авторизации, вы увидите интерфейс управления uAPI-приложений. Нам нужно создать приложение. Нажмите на «Создать» и введите все те данные, которые запросит форма.
  • В пункте «Название приложения» можно написать свое название (абсолютное любое);
  • В пункте «Consumer key» введите любой набор латинских букв, как например: hFFSJjknfsdgF87T, рекомендуем сгенерировать;
  • В пункте «Consumer secret» оставляем всё как есть;
  • В пункте «Redirect URL» введите ссылку на свой сайт (куда собираетесь подключить скрипт);
  • Нажмите на Сохранить.


Этап 3. Создание токенов

Перейдите на страницу http://api.ucoz.net/ru/join/reg, выберите «Полуавтоматом». Далее вам предложат ввести данные – их вы можете взять со страницы http://uapi.ucoz.com/uapi_panel. Заполните поля, продолжайте следовать инструкциям системы. В результате вы должны получить токены. Пошаговая иллюстрация:








Ура, теперь мы получили токены. Зайдите в папку «ulogin», которая находится в архиве со скриптом, найдите в нём файл uAPImodule.php и откройте его в любом текстовом редакторе. Затем пропишите в этом файле данные ключей, которые вы только получили.


Активация PHP

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

Второй шаг: загрузка скриптов на FTP PHP


Этап 1. Установка пароля

Если у вас задан пароль к FTP PHP, сразу же переходите к следующему этапу.
Перейдите на главную страницу панели управления вашим сайтом, в правой верхней части нажмите на ссылку «PHP детали».
В открывшемся окне кликните на ссылку: «Пароль не установлен.
Мы попадем на страницу установки пароля на FTP PHP. Заполните поля, продолжайте следовать инструкциям системы.

Этап 2. Подключение к PHP FTP серверу

После установки пароля, скачайте FTP-клиент, рекомендуем бесплатный FTP клиент FileZilla. После установки программы, в верхней части вводим параметры подключения:

  • Сервер: s2000.ucoz.net
  • Логин (FTP login): введите свой логин, который указан в меню "PHP детали"
  • Пароль: пароль который вы ввели ранее в специальном разделе

После заполнения полей нажмите на кнопку «Быстрое соединение».


Этап 3. Загрузка скриптов на PHP FTP сервер

После успешного подключения вы увидите каталог под именем «scripts» в правой части окна программы. Обязательно переходим в этот каталог двойным кликом по нему.

Теперь загрузите в этот каталог папку из архива со скриптом «ulogin». Загрузить легко, просто перетащите эту папку в правый диалог (где отображаются каталоги и файлы хранящиеся на сервере).
Узнать статус передачи файлов вы можете в окне статуса, которое находится в нижней части программы, там отображаются файлы которые ожидают передачи и те, которые не удалось передать, в частности которые были успешно переданы.

Третий шаг: установка кода

Перейдите в Панель управления » Управление дизайном » Пользователи: Персональная страница пользователей, найдите следующий код: 

<?if($_YAHOO$)?>

 <div id="block16" class="udtb"><div class="udtlb">Yahoo:</div> $_YAHOO$</div>

<?endif?>
и после него вставьте: 

<div id="block16" class="udtb">

 <div class="udtlb">Привязать к аккаунту соцсети:</div>

 <div id="my_social"></div>

</div>

<script>

    $(function() {

    $.ajax({

        url: '/php/ulogin/attachment.php',

        type: 'POST',

        data: 'do=getSocial',

        success: function(data) {

        $('#my_social').html(data);

        }

    });

    });

</script>
затем сохраните изменения.

Выбираем дизайн кнопок

У каждого дизайна есть свой код – скопируйте его и установите к себе на сайт. Как правило, необходимо перейти в Панель управления: Управление дизайном – Глобальные блоки – Первый контейнер (или Второй контейнер) и найти там код вида $LOGIN_FORM$. Прямо перед ним пропишите выбранный код. В коде вы также сможете найти mysite.ucoz.ru – здесь необходимо указать свою ссылку на сайт. Например: dima.ucoz.net

Дизайн 1



<?if($LOGIN_FORM$)?>

<?if(strpos($REQUEST_URI$,'auth=error')!='-1')?>

<script>new _uWnd('ajax','Ошибка','500','200',{autosize:false,modal: false,close:true,header:true,nomove: false,fixed:true},'Во время авторизации произошла ошибка. Пожалуйста, попробуйте еще раз. Если ошибка повторяется, сообщите о ней администратору сайта Код ошибки: <? substr($REQUEST_URI$,-1) ?>')</script>

<?endif?>

<style>@import "/.s/src/social.css";</style>

<script src="//ulogin.ru/js/ulogin.js"></script>

<div id="uLogin" data-ulogin="display=buttons;fields=first_name,last_name,email,nickname,photo;redirect_uri=http%3A%2F%2Fmysite.ucoz.ru%2Fphp%2Fulogin%2Fcallback.php;" style="padding-bottom:10px;"><h3>Авторизация через соцсети</h3>

    <div id="uidLogForm" align="center">

	<a href="javascript://" class="login-with facebook" title="Войти через facebook" data-uloginbutton = "facebook" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with vkontakte" title="Войти через vkontakte" data-uloginbutton = "vkontakte" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with yandex" title="Войти через yandex" data-uloginbutton = "yandex" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with google" title="Войти через google" data-uloginbutton = "google" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with ok" title="Войти через odnoklassniki" data-uloginbutton = "odnoklassniki" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with twitter" title="Войти через twitter" data-uloginbutton = "twitter" rel="nofollow"><i></i></a>

    </div></div>

<?endif?>

Дизайн 2



<?if($LOGIN_FORM$)?>

<?if(strpos($REQUEST_URI$,'auth=error')!='-1')?>

<script>new _uWnd('ajax','Ошибка','500','200',{autosize:false,modal: false,close:true,header:true,nomove: false,fixed:true},'Во время авторизации произошла ошибка. Пожалуйста, попробуйте еще раз. Если ошибка повторяется, сообщите о ней администратору сайта Код ошибки: <? substr($REQUEST_URI$,-1) ?>')</script>

<?endif?>

<style>@import "/.s/src/social2.css";</style>

<script src="//ulogin.ru/js/ulogin.js"></script>

<div id="uLogin" data-ulogin="display=buttons;fields=first_name,last_name,email,nickname,photo;redirect_uri=http%3A%2F%2Fmysite.ucoz.ru%2Fphp%2Fulogin%2Fcallback.php;" style="padding-bottom:10px;"><h3>Авторизация через соцсети</h3>

    <div id="uidLogForm" align="center">

	<a href="javascript://" class="login-with facebook" title="Войти через facebook" data-uloginbutton = "facebook" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with vkontakte" title="Войти через vkontakte" data-uloginbutton = "vkontakte" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with yandex" title="Войти через yandex" data-uloginbutton = "yandex" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with google" title="Войти через google" data-uloginbutton = "google" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with ok" title="Войти через odnoklassniki" data-uloginbutton = "odnoklassniki" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with twitter" title="Войти через twitter" data-uloginbutton = "twitter" rel="nofollow"><i></i></a>

    </div></div>

<?endif?>

Дизайн 3



<?if($LOGIN_FORM$)?>

<?if(strpos($REQUEST_URI$,'auth=error')!='-1')?>

<script>new _uWnd('ajax','Ошибка','500','200',{autosize:false,modal: false,close:true,header:true,nomove: false,fixed:true},'Во время авторизации произошла ошибка. Пожалуйста, попробуйте еще раз. Если ошибка повторяется, сообщите о ней администратору сайта Код ошибки: <? substr($REQUEST_URI$,-1) ?>')</script>

<?endif?>

<style>@import "/.s/src/social3.css";</style>

<script src="//ulogin.ru/js/ulogin.js"></script>

<div id="uLogin" data-ulogin="display=buttons;fields=first_name,last_name,email,nickname,photo;redirect_uri=http%3A%2F%2Fmysite.ucoz.ru%2Fphp%2Fulogin%2Fcallback.php;" style="padding-bottom:10px;"><h3>Авторизация через соцсети</h3>

    <div id="uidLogForm" align="center">

	<a href="javascript://" class="login-with facebook" title="Войти через facebook" data-uloginbutton = "facebook" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with vkontakte" title="Войти через vkontakte" data-uloginbutton = "vkontakte" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with yandex" title="Войти через yandex" data-uloginbutton = "yandex" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with google" title="Войти через google" data-uloginbutton = "google" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with ok" title="Войти через odnoklassniki" data-uloginbutton = "odnoklassniki" rel="nofollow"><i></i></a>

	<a href="javascript://" class="login-with twitter" title="Войти через twitter" data-uloginbutton = "twitter" rel="nofollow"><i></i></a>

    </div></div>

<?endif?>

Четвёртый шаг: настройка и использование

Откройте через текстовый редактор файл callback.php (который мы загружали на FTP PHP).
  • Найдите строку номер 288 $mywebsite = '';. В кавычках укажите ссылку на ваш сайт. Например: http://site.ucoz.ru (именно с http:// и без / в конце). Если адрес с https, то вводите https соответственно
  • Найдите строку номер 289 $mysecret = '';. В кавычках укажите любые 4 латинские буквы. Например: bKfn (только не эти, любые другие)
Откройте через текстовый редактор файл attachment.php (который мы загружали на FTP PHP).
  • Найдите строку номер 85 $mywebsite = '';. В кавычках укажите ссылку на ваш сайт. Например: http://site.ucoz.ru (именно с http:// и без / в конце). Если адрес с https, то вводите https соответственно
  • Найдите строку номер 86 $mysecret = '';. В кавычках укажите любые 4 латинские буквы. Например: bKfn (внимание! Символы должны совпадать, что и и для файла callback.php)
Обратите внимание! Аккаунт, через который регистрировал uAPI ключи - должен быть в группе "администраторы" на вашем сайте.

FAQ

Через какие социальные сети можно авторизовываться?
На сегодняшний день это uID, Facebook, VKontakte, Yandex, Google, Odnoklassniki, Twiiter

uAPI и PHP обязательны?
Да, обязательны. uAPI – бесплатный функционал. PHP-услугу можно купить в Панели управления: $Платные услуги – Платные услуги

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

Выводится уведомление о 5 ошибке, что делать?
Значит вы что-то сделали не так в процессе установки, скрипт тестировался на многих сайтах. Если не получается, закажите установку - https://uscript.pro/shop/20/item/install-script

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

Установка завершена.