Examples of integrating Loginza into the login section of a website

We would like to introduce you to the different methods of integrating the Loginza widget into the login interface of your website. The methods listed below are by no means comprehensive but are simply designed to provide you with some examples of website login forms using the Loginza widget.

You can find out how to receive and process the profile data of an authorized user in the Loginza.API description page.

This example demonstrates the ability to integrate the Loginza widget through an "iframe" with your site’s authentication page. It is convenient to use this option on the same page as your main login form.

Sig in:

Замените [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.