Примеры интеграции Loginza в форму авторизации сайта

Мы предлагаем Вам ознакомиться с различными вариантами (шаблонами) интеграции виджета Loginza в WEB интерфейс авторизации Вашего сайта. Эти варианты не являются приоритетными, а всего лишь демонстрируют некоторые шаблоны форм авторизации сайтов с использованием виджета Loginza.

Как получить и обработать данные профиля авторизованного пользователя Вы можете на странице описания Loginza.API.

Пример демонстрирует возможность встраивания виджета Loginza прямо на страницу авторизации Вашего сайта через блок iframe. Данный вариант удобно использовать на странице где расположена Ваша главная форма авторизации.

Вы можете войти как:

Спареная форма авторизации (форма Loginza + Ваша форма авторизации)

Замените [RETURN_URL] на адрес обратной ссылки на Ваш сайт, куда будет возвращен пользователь после авторизации.

<script src="http://loginza.ru/js/widget.js" type="text/javascript"></script>
<iframe src="http://loginza.ru/api/widget?overlay=loginza&token_url=http://[RETURN_URL]" 
style="width:359px;height:300px;" scrolling="no" frameborder="no"></iframe>

Кнопка виджета Loginza

Пример формы
HTML-код

Вы можете использовать кнопку Loginza на любой странице или в любом блоке сайта. Ниже, как пример, представлен блок авторизации сайта с кнопкой Loginza:

Замените [RETURN_URL] на адрес обратной ссылки на Ваш сайт, куда будет возвращен пользователь после авторизации.

<script src="http://loginza.ru/js/widget.js" type="text/javascript"></script>
<a href="http://loginza.ru/api/widget?token_url=http://[RETURN_URL]" class="loginza">
	<img src="http://loginza.ru/img/sign_in_button_gray.gif" alt="Войти через loginza"/>
</a>

Набор иконок провайдеров

Пример формы
HTML-код

Вы можете заменить картинки иконок провайдеров на другие варианты иконок которые Вам удобны.

Замените [RETURN_URL] на адрес обратной ссылки на Ваш сайт, куда будет возвращен пользователь после авторизации.

<script src="http://loginza.ru/js/widget.js" type="text/javascript"></script>
Также Вы можете войти используя:
<a href="https://loginza.ru/api/widget?token_url=http://[RETURN_URL]" class="loginza">
	<img src="http://loginza.ru/img/providers/yandex.png" alt="Yandex" title="Yandex">
	<img src="http://loginza.ru/img/providers/google.png" alt="Google" title="Google Accounts">
	<img src="http://loginza.ru/img/providers/vkontakte.png" alt="Вконтакте" title="Вконтакте">
	<img src="http://loginza.ru/img/providers/mailru.png" alt="Mail.ru" title="Mail.ru">
	<img src="http://loginza.ru/img/providers/twitter.png" alt="Twitter" title="Twitter">
	<img src="http://loginza.ru/img/providers/loginza.png" alt="Loginza" title="Loginza">
	<img src="http://loginza.ru/img/providers/myopenid.png" alt="MyOpenID" title="MyOpenID">
	<img src="http://loginza.ru/img/providers/openid.png" alt="OpenID" title="OpenID">
	<img src="http://loginza.ru/img/providers/webmoney.png" alt="WebMoney" title="WebMoney">
</a>

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

О том как получить и обработать профиль авторизованного через виджет пользователя, ознакомьтесь в разделе руководство по Loginza.API.