Компонент авторизации для Joomla – Improved AJAX Login & Register

Вступление

Двухфакторная аутентификация Joomla это новая попытка авторов системы повысить безопасность сайта, и дополнительно защитить сайт от нецелевого взлома или попросту, взлома сайта со стороны административной панели и/или со стороны сайта.

Вот так выглядит компонент improved ajax login & register который мы настраивали

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

Идём в настройки модуля Improved AJAX Login & Register находим там Theme Parameters и переключаем параметр “Open popups at center” в положение “ON”. Тут же ниже можем поменять серый фон.

Тут ещё куча настроек стиля модуля, описывать все не буду, если будут вопросы пишите.

Сохраняем и смотрим что получилось.

На этом настрока Improved AJAX Login & Register закончена, подключение других компонентов к этому ищите по сайту в других обзорах и уроках. 

Есть вопросы, задавайте не стесняйтесь!

Где можно разместить форму регистрации joomla

Разместить форму регистрации Joomla можно в любом модуле, в меню и в статьях. Посмотрим, как это сделать.

Двухфакторная аутентификация – google authenticator

Разумно для начала включить плагин. Что мы и делаем на вкладке: Менеджер плагинов.

Двухфакторная аутентификация joomla – включение

Для двухфакторной аутентификации Joomla в ядро системы ввели два плагина:

  • Двухфакторная аутентификация – Google Authenticator (ID 448);
  • Двухфакторная аутентификация – YubiKey (ID 450).

По умолчанию оба плагина отключены.

Еще статьи

  • 10 лучших WAMP платформ для CMS Joomla под Windows, урок 3
  • 12 Правил оптимизации Joomla сайта, урок 28
  • 2 программы FTP клиент для создания Joomla сайта – FilleZilla, WinSCP, урок 4
  • 33 первых расширения Joomla сайта — плагины и компоненты для расширения функционала сайта, урок 29
  • 5 Программ для работы с изображениями Joomla, урок 6
  • Favicon сайта Joomla – как создать и установить favicon на сайт Joomla, урок 13
  • Joomla модуль Обёртка (Wrapper)
  • Joomla на XAMPP — управление Joomla в автономном режиме на локальной машине, урок 7
  • reCAPTCHA версия 2.0 на сайте Joomla — капча на Joomla сайте
  • URL Joomla: SEF, ЧПУ, убрать index урок 59

Зачем нужен секретный код

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

Зачем нужна форма регистрации пользователей joomla

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

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

Настройка формы регистрации joomla

Максимальная форма регистрации (форма регистрации со всеми включенными полями для заполнения), выглядит так.

Как видите полей для заполнения слишком много. Их можно сократить до необходимого минимума.Делаем это на вкладке Общие настройки→Контакты→Контакты

Настройки плагина двухфакторной аутентификации

По сути, в настройках плагина нет настроек. Есть только три включения, где использовать этот плагин. Можно включить его для:

  • Для сайта;
  • Для панели управления;
  • Оба.

Для начала выбираем «Панель управления».

От автора

В системе Joomla предусмотрена стандартная форма регистрации пользователей. Заполнив её, любой гость сайта может перейти в группу пользователей «Зарегистрированные» (Registered). Правда, при этом, должны быть выполнены некоторые настройки формы.  

Разместить форму регистрации в меню

Для размещения формы регистрации в Менеджере меню создаем пункт меню типа: Менеджер пользователей→Форма регистрации или форма авторизации. Всё. Создаете такой пункт меню, даете ему имя и выставляете остальные настройки, они стандартные. В меню появляется пункт с переходом на форму регистрации.

Разместить форму регистрации в модуле

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

Для оформления такого модуля предусмотрены поля для текстов над формой регистрации и текст после формы регистрации. Оба текста заполняются в HTML.

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

Еще две настройки заслуживают внимание. Это перенаправление пользователя после регистрации (при входе) (3) и выходе (4). Например, клиент регистрировался, что бы, что-то купить, вы можете  перенаправить его на форму оформления покупок.

Разместить форму регистрации в статье

Разместить форму регистрации, в полноценном виде, в статье стандартными функциями не получится. Но можно разместить ссылку на пункт меню с формой регистрации. Получится, что-то вроде, «Зарегистрироваться на сайте вы можете ТУТ».

Второй вариант размещения формы регистрации в статье это установить плагин «Modules Anywhere». Он позволяет легко вставить модуль типа «Вход на сайт» в любой место статьи.

Третий вариант, активировать плагин типа «Content», элемент (папка) «loadmodule», ID=406, название «Контент-Загрузка модулей» и в любое место статьи вставлять модуль «Форма регистрации» в синтаксисе: . Правда этот плагин работает не на всех шаблонах.

Создаём всплывающее окно авторизации для joomla

  • (function($){

  • $.facebox=function(data, klass){

  • $.facebox.loading()

  • if(data.ajax) fillFaceboxFromAjax(data.ajax, klass)

  • elseif(data.image) fillFaceboxFromImage(data.image, klass)

  • elseif(data.div) fillFaceboxFromHref(data.div, klass)

  • elseif($.isFunction(data))data.call($)

  • else$.facebox.reveal(data, klass)

  • }

  • $.extend($.facebox,{

  • settings:{

  • opacity :0.2,

  • overlay :true,

  • loadingImage :”,

  • closeImage :”,

  • imageTypes :[‘png’,‘jpg’,‘jpeg’,‘gif’],

  • faceboxHtml :‘

  • <div id=”facebox” style=”display:none;”>

  • <div>

  • <div>

  • </div>

  • <a href=”#”>close</a>

  • </div>

  • </div>’

  • },

  • loading:function(){

  • init()

  • if($(‘#facebox .loading’).length==1)returntrue

  • showOverlay()

  • $(‘#facebox .content’).empty()

  • $(‘#facebox .body’).children().hide().end().

  • append(‘<div><img src=”‘ $.facebox.settings.loadingImage ‘”/></div>’)

  • $(‘#facebox’).css({

  • top: getPageScroll()[1] (getPageHeight()/10),

  • left:$(window).width()/2–205

  • }).show()

  • $(document).bind(‘keydown.facebox’,function(e){

  • if(e.keyCode==27)$.facebox.close()

  • returntrue

  • })

  • $(document).trigger(‘loading.facebox’)

  • },

  • reveal:function(data, klass){

  • $(document).trigger(‘beforeReveal.facebox’)

  • if(klass)$(‘#facebox .content’).addClass(klass)

  • $(‘#facebox .content’).append(data)

  • $(‘#facebox .loading’).remove()

  • $(‘#facebox .body’).children().fadeIn(‘normal’)

  • $(‘#facebox’).css(‘left’,$(window).width()/ 2 – ($(‘#facebox .popup’).width() /2))

  • $(document).trigger(‘reveal.facebox’).trigger(‘afterReveal.facebox’)

  • },

  • close:function(){

  • $(document).trigger(‘close.facebox’)

  • returnfalse

  • }

  • })

  • $.fn.facebox=function(settings){

  • if($(this).length==0)return

  • init(settings)

  • function clickHandler(){

  • $.facebox.loading(true)

  • var klass =this.rel.match(/facebox[?.(w )]?/)

  • if(klass) klass = klass[1]

  • fillFaceboxFromHref(this.href, klass)

  • returnfalse

  • }

  • returnthis.bind(‘click.facebox’, clickHandler)

  • }

  • function init(settings){

  • if($.facebox.settings.inited)returntrue

  • else$.facebox.settings.inited=true

  • $(document).trigger(‘init.facebox’)

  • makeCompatible()

  • var imageTypes =$.facebox.settings.imageTypes.join(‘|’)

  • $.facebox.settings.imageTypesRegexp=new RegExp(‘.(‘ imageTypes ‘)$’,‘i’)

  • if(settings)$.extend($.facebox.settings, settings)

  • $(‘body’).append($.facebox.settings.faceboxHtml)

  • var preload =[new Image(),new Image()]

  • preload[0].src=$.facebox.settings.closeImage

  • preload[1].src=$.facebox.settings.loadingImage

  • $(‘#facebox’).find(‘.b:first, .bl’).each(function(){

  • preload.push(new Image())

  • preload.slice(–1).src=$(this).css(‘background-image’).replace(/url((. ))/,‘$1’)

  • })

  • $(‘#facebox .close’).click($.facebox.close)

  • $(‘#facebox .close_image’).attr(‘src’,$.facebox.settings.closeImage)

  • }

  • // getPageScroll() by quirksmode.com

  • function getPageScroll(){

  • var xScroll, yScroll;

  • if(self.pageYOffset){

  • yScroll = self.pageYOffset;

  • xScroll = self.pageXOffset;

  • }elseif(document.documentElement&amp;&amp; document.documentElement.scrollTop){// Explorer 6 Strict

  • yScroll = document.documentElement.scrollTop;

  • xScroll = document.documentElement.scrollLeft;

  • }elseif(document.body){// all other Explorers

  • yScroll = document.body.scrollTop;

  • xScroll = document.body.scrollLeft;

  • }

  • returnnew Array(xScroll,yScroll)

  • }

  • // Adapted from getPageSize() by quirksmode.com

  • function getPageHeight(){

  • var windowHeight

  • if(self.innerHeight){// all except Explorer

  • windowHeight = self.innerHeight;

  • }elseif(document.documentElement&amp;&amp; document.documentElement.clientHeight){// Explorer 6 Strict Mode

  • windowHeight = document.documentElement.clientHeight;

  • }elseif(document.body){// other Explorers

  • windowHeight = document.body.clientHeight;

  • }

  • return windowHeight

  • }

  • function makeCompatible(){

  • var$s =$.facebox.settings

  • $s.loadingImage=$s.loading_image||$s.loadingImage

  • $s.closeImage=$s.close_image||$s.closeImage

  • $s.imageTypes=$s.image_types||$s.imageTypes

  • $s.faceboxHtml=$s.facebox_html||$s.faceboxHtml

  • }

  • function fillFaceboxFromHref(href, klass){

  • // div

  • if(href.match(/#/)){

  • var url = window.location.href.split(‘#’)[0]

  • var target = href.replace(url,”)

  • if(target ==‘#’)return

  • $.facebox.reveal($(target).html(), klass)

  • // image

  • }elseif(href.match($.facebox.settings.imageTypesRegexp)){

  • fillFaceboxFromImage(href, klass)

  • // ajax

  • }else{

  • fillFaceboxFromAjax(href, klass)

  • }

  • }

  • function fillFaceboxFromImage(href, klass){

  • var image =new Image()

  • image.onload=function(){

  • $.facebox.reveal(‘<div><img src=”‘ image.src ‘” /></div>’, klass)

  • }

  • image.src= href

  • }

  • function fillFaceboxFromAjax(href, klass){

  • $.get(href,function(data){$.facebox.reveal(data, klass)})

  • }

  • function skipOverlay(){

  • return$.facebox.settings.overlay==false||$.facebox.settings.opacity===null

  • }

  • function showOverlay(){

  • if(skipOverlay())return

  • if($(‘#facebox_overlay’).length==0)

  • $(“body”).append(‘<div id=”facebox_overlay”></div>’)

  • $(‘#facebox_overlay’).hide().addClass(“facebox_overlayBG”)

  • .css(‘opacity’,$.facebox.settings.opacity)

  • .click(function(){$(document).trigger(‘close.facebox’)})

  • .fadeIn(200)

  • returnfalse

  • }

  • function hideOverlay(){

  • if(skipOverlay())return

  • $(‘#facebox_overlay’).fadeOut(200,function(){

  • $(“#facebox_overlay”).removeClass(“facebox_overlayBG”)

  • $(“#facebox_overlay”).addClass(“facebox_hide”)

  • $(“#facebox_overlay”).remove()

  • })

  • returnfalse

  • }

  • $(document).bind(‘close.facebox’,function(){

  • $(document).unbind(‘keydown.facebox’)

  • $(‘#facebox’).fadeOut(function(){

  • $(‘#facebox .content’).removeClass().addClass(‘content’)

  • $(‘#facebox .loading’).remove()

  • $(document).trigger(‘afterClose.facebox’)

  • })

  • hideOverlay()

  • })

  • })(jQuery);

    • Похожее:  SLogin - авторизация в Joomla через социальные сети -

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    ➤