Авторизация по номеру телефона

Примеры

Примеры с кодом есть в пункте Классы и методы с примерами

Компонент в попап (модальном) окне

В случае елси вам не обходимо скрыть на странице блок с авторизацией и показывать в попап окне при необходимости, можно это сделать следующим образом. На странице размещается комопнент атворизации в скрытом блоке и на кнопку авторизоватсья подвешивается событие клика, при котором показывается модальное окно.

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


<div class="btn btn-default btn-success btn-small js-btn-show-auth-popup">Войти</div>

<div class="hidden" id="auth-popup" style="display:none;">
    <div>
        <? $APPLICATION->IncludeComponent('bxmaker:authuserphone.login', '', array()); ?>
    </div>
</div>


<script type="text/javascript">
    $(document).ready(function () {
        $('.js-btn-show-auth-popup').on("click", function (e) {
            e.preventDefault();
            e.stopPropagation();

            //для версии fancybox 3.0
            $.fancybox.open($('#auth-popup'), {
                loop: true,                
                gutter: 0,
                closeBtn:false,
                arrows: false,
                keyboard: false,
                infobar: false,
                toolbar: false,
                protect: false,
                buttons: ['close'],
                type: 'html',
                smallBtn: false
            });

//для версии fancybox < 3.0

	    $.fancybox.open($('#auth-popup .c-bxmaker-authuserphone_login-default-box '), {
	               
 		closeBtn:false,
	    });


        });
    })
</script>

<style type="text/css">
    .fancybox-slide > div {
        padding: 0;
        background-color: transparent;
    }
    
    .c-bxmaker-authuserphone_login-default-box {
        background-color: #fff !important;
    }
</style>


Комопнент в попап (модальном) окне с загрузкой по AJAX

Бывают случаи когда не хочется на странице размещать компонент аторизации, в только кнпоку Авторизоваться. При клике по которой покажется попап окно с формой для авторизации. Для этого нужно немного иначе сделать чем в предыдущем варианте.

Для примера также используется оконая библиотека fancybox 3.

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

<div class="btn btn-default btn-success btn-small js-btn-show-auth-popup-by-ajax">Войти</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.js-btn-show-auth-popup-by-ajax').on("click", function (e) {
            e.preventDefault();
            e.stopPropagation();

           //для версии fancybox 3.0
            $.fancybox.open({
                loop: true,                
                gutter: 0,
                closeBtn:false,
                arrows: false,
                keyboard: false,
                infobar: false,
                toolbar: false,
                protect: false,
                buttons: ['close'],
                smallBtn: false,
                type: 'ajax',
                src: '/ajax/user/auth.php',
            });

        });
    })
</script>

<style type="text/css">
    .fancybox-slide > div {
        padding: 0;
        background-color: transparent;
    }
    
    .c-bxmaker-authuserphone_login-default-box {
        background-color: #fff !important;
    }
</style>

Делаем страницу для примера по пути относительно корня сайта - /ajax/user/auth.php с содержимым (его нужно добавить не через редактор страниц а врчную загрузить ии редактировать как текст через админку):

<?
    require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/prolog_before.php");
?>
    <div>
        <? $APPLICATION->IncludeComponent('bxmaker:authuserphone.login', '', array()); ?>
    </div>

<?php
    //это нужно обязательно чтобы подгрузились стили и срипты компонента
    $css = \Bitrix\Main\Page\Asset::getInstance()->getCss();
    $js = \Bitrix\Main\Page\Asset::getInstance()->getJs(\Bitrix\Main\Page\AssetShowTargetType::TEMPLATE_PAGE);
    
    echo $css;
    echo $js;
?>
<?
    require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/epilog_after.php");
?>