Документация по макросам и шаблонам UMI.CMS

В версии 2.8.2, в UMI.CMS был интегрирован OpenID провайдер "Loginza". Этот механизм позволяет пользователям вашего сайта, имеющим аккаунты в различных социальных сетях и на других популярных сервисах, проходить ускоренную регистрацию на вашем сайте, используя данные сторонних аккаунтов.

Подключение функционала

Рассмотрим подключение на примере демо-шаблона "Сайт компании" (demohunt), в котором данный функционал по умолчанию не подключен.

Разработчиками UMI.CMS был создан специальный метод "getLoginzaProvider" для модуля "users", который, при запросе по протоколу UData отдаёт данные, сформированные специально для вызова виджета Loginza:

<?xml version="1.0" encoding="utf-8"?>
<udata xmlns:xlink="http://www.w3.org/TR/xlink" module="users" method="getLoginzaProvider" generation-time="0.005786">
 <providers>
  <provider name="yandex" title="Яндекс"/>
  <provider name="vkontakte" title="Вконтакте"/>
  <provider name="facebook" title="Facebook"/>
  <provider name="google" title="Google Accounts"/>
  <provider name="openid" title="OpenID"/>
  <provider name="myopenid" title="MyOpenID"/>
  <provider name="twitter" title="Twitter"/>
  <provider name="rambler" title="Rambler"/>
  <provider name="mailru" title="Mail.ru"/>
  <provider name="loginza" title="Loginza"/>
  <provider name="webmoney" title="WebMoney"/>
  <provider name="flickr" title="flickr"/>
  <provider name="lastfm" title="lastfm"/>
 </providers>
 <widget_url>https://loginza.ru/api/widget?token_url=http%3A%2F%2Fsite.ru%2Fusers%2Floginza%2F%3Ffrom_page%
 3Dhttp%253A%252F%252Fsite.ru%252Fudata%252Fusers%252FgetLoginzaProvider&providers_set=
 google,yandex,mailru,vkontakte,facebook,twitter,loginza,rambler,lastfm,myopenid,openid,mailruapi</widget_url>
</udata>

Для подключения виджета, нам необходимо поменять шаблон формы авторизации пользователя. В рассматриваемом нами примере, это шаблон ~/xsltTpls/modules/users/auth.xsl .

Нас интересует шаблон, выводящий форму авторизации для незарегистрированного пользователя на главной странице сайта:

<xsl:template match="udata[@module = 'users'][@method = 'auth']" mode="main">

В данном шаблоне вывод формы авториазции задан следующим образом:

<form method="post" action="/users/login_do/" id="auth_right">
 <div>
  <label>
   <xsl:choose>
    <xsl:when test="$demo=1">
     <input type="text" value="demo" class="textinputs" name="login" id="login" />
    </xsl:when>
    <xsl:otherwise>
   <input type="text" value="" class="textinputs" name="login" id="login" />
    </xsl:otherwise>
   </xsl:choose>
   <strong>Логин:</strong>
  </label>
 </div>
 <div>
  <label>
   <xsl:choose>
    <xsl:when test="$demo=1">
     <input type="password" value="demo" class="textinputs" name="password" id="password"/>
    </xsl:when>
    <xsl:otherwise>
   <input type="password" value="" class="textinputs" name="password" id="password"/>
    </xsl:otherwise>
   </xsl:choose>
   <strong>Пароль:</strong>
  </label>
 </div>
 <div>
  <label class="forget_passward">
   <a href="/users/forget/" class="sub">Забыли пароль?</a>
  </label>
  <label class="forget_passward">
   <a class="sub" href="/users/registrate/">Регистрация</a>
  </label>
  <input type="submit" class="textinputs" value="Вход" />
 </div>
 <input type="hidden" value="{$url}" name="from_page" />
</form>

Добавим вызов метода users getLoginzaProvider в то место, где мы хотим увидет кнопку Loginza:

<form method="post" action="/users/login_do/" id="auth_right">
 ...
 <div>
  <label class="forget_passward">
   <a href="/users/forget/" class="sub">Забыли пароль?</a>
  </label>
  <label class="forget_passward">
   <a class="sub" href="/users/registrate/">Регистрация</a>
  </label>
  <input type="submit" class="textinputs" value="Вход" />
  <xsl:apply-templates select="document('udata://users/getLoginzaProvider')/udata"/>
 </div>
 <input type="hidden" value="{$url}" name="from_page" />
</form>

Ниже напишем следующий шаблон для обработки ответа:

<xsl:template match="udata[@method='getLoginzaProvider']">
 <div class="loginza_block" style="text-align:center; margin-top:5px"> 
  <script src="http://loginza.ru/js/widget.js" type="text/javascript"></script>
  <a href="{widget_url}" class="loginza">
   <img src="http://loginza.ru/img/sign_in_button_gray.gif" alt="Войти через loginza"/>
  </a>
 </div>
</xsl:template>

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