{{ namePage }}

Подключение webSdk на HTML страницу


                        

                        

                            
let webSDK = new WrSDK();
    webSDK.on('init', function(){
        // если this.data не пустой объект
        // this.data.user будет содержать данные об авторизации
        // пример: (this.data.user && this.data.user.authenticated)?alert("Авторизован"):alert("Не авторизован")
    }))

                        

                    

                

            

        

        
        
        
        

            

                

                    

                        
2. Анонимная запись на прием

                    

                

                

                    

                        

                            

                                

                                    
Выберите дату:

                                

                                

                                    

                                        
                                    

                                

                            

                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            

                                

                                    
captcha:

                                

                                

                                    

                                

                            

                            
                            

                            

                                

                                    

                                        
webSDK.scheduleRecReserveAnonymousInit({
    name: "{{ scheduleRecReserveAnonymous.name }}",
    phone: "{{ scheduleRecReserveAnonymous.phone }}",
    email: "{{ scheduleRecReserveAnonymous.email }}",
    st: "{{ scheduleRecReserveAnonymous.st }}",
    en: "{{ scheduleRecReserveAnonymous.en }}",
    date: "{{ scheduleRecReserveAnonymous.date }}",
    dcode: {{ scheduleRecReserveAnonymous.dcode }},
    filial: "{{ scheduleRecReserveAnonymous.filial }}",
    onlineType: {{ scheduleRecReserveAnonymous.onlineMode }},
    schedident: {{ scheduleRecReserveAnonymous.schedident }}
})

                                    

                                

                            

                        

                    


                

                

                    

                        
                        
                    

                

            

        

        
        

            

                

                    

                        
3. Подтверждение анонимной записи

                    

                

                

                    

                        

                            
                            
                            

                                

                                    

                                        
webSDK.scheduleRecReserveAnonymousComplete({
    rToken: "{{ scheduleRecReserveAnonymousConfirm.rToken }}",
    phoneCode: "{{ scheduleRecReserveAnonymousConfirm.phoneCode }}"})

                                    

                                

                            

                        

                    

                

                

                    

                        
                    

                

            

        

        

            

                

                    

                        
4. Встраивание кода проверки captcha

                    

                

                

                    

                        

                            
Для встраивания captcha нужно определить ее тип и получить ключ в случае с GoogleReCaptcha или код изображения в случае с текстовой captcha.

                            

                            
                            
#captchaContainer

                            

                                

                                    
Пример вызова с инициализацией и встраиванием:

                                    


                                        
const container = document.getElementById("captchaContainer");
                                            console.assert(container,"Не найден контейнер для captcha");
                                            
                                            webSDK.getCaptcha().then(resolve=>{
                                                // Запоминаем и проверяем тип капчи
                                                const captchaType = resolve.captchaType;
                                                if (captchaType === 'google'){
                                                    const googleCaptchaCallbackIfNeeded = function(response){
                                                        // действия после валидации
                                                        // значение response отправляется для валидации в поле captcha
                                                        // это значение так-же можно получить методом grecaptcha.getResponse
                                                        // подробности в официальной документации https://developers.google.com/recaptcha/docs/display
                                                    }
                                                    // Проверяем наличии скриптов от google
                                                    const script = document.getElementById('recaptchaScript');
                                                    // Callback функция готовности капчи
                                                    window.reCaptchaReady = function(){
                                                        grecaptcha.ready(function(){
                                                           container.innerHTML = "";
                                                           // пробуем срендерить reCaptcha в контейнер,
                                                           // если там уже есть reCaptcha - обновим ее
                                                           try{
                                                               grecaptcha.render(container,{
                                                                   sitekey:(document.domain.indexOf(".infoclinica.ru") + 1)
                                                                       ? resolve.globalPublicKey
                                                                       : resolve.publicKey,
                                                                   callback:googleCaptchaCallbackIfNeeded
                                                               })
                                                           } catch (e){
                                                               grecaptcha.reset(container);
                                                           }
                                                        });
                                                    }
                                                    if (!script) {
                                                        const newScriptTag = document.createElement('script');
                                                        const scriptSrc = "https://www.google.com/recaptcha/api.js?onload=reCaptchaReady&render=explicit&hl=ru";
                                                        newScriptTag.setAttribute('src',scriptSrc);
                                                        // id тэга нужен для проверки при повторных вызовах
                                                        newScriptTag.setAttribute('id','recaptchaScript');
                                                        document.body.append(newScriptTag);
                                                    } else {
                                                        // если скрипт существует вызываем обработчик
                                                        window.reCaptchaReady();
                                                    }
                                                } else if (captchaType === 'text') {
                                                    // помещаем изображение капчи в контейнер
                                                    container.innerHTML = resolve.captchaBody;
                                                    let captcha = container.querySelector('img');
                                            
                                                    if (captcha){
                                                        // инициализируем поля и кнопку сброса для captcha
                                                        const valueField = document.createElement('input')
                                                            ,inputField = document.createElement('input')
                                                            ,resetBtn = document.createElement('button');
                                            
                                                        // это скрытое поле, значение которого будет использоваться для проверки
                                                        valueField.setAttribute('name','captcha');
                                                        valueField.setAttribute('type','hidden');
                                            
                                                        // это поле для ввода текста пользователем
                                                        inputField.setAttribute('name','captchaVal');
                                                        inputField.setAttribute('type','text');
                                                        // обработчик события для заполнения скрытого поля со значением для валидации на сервере
                                                        inputField.addEventListener('input',function(){
                                                           valueField.value = `${captcha.getAttribute('data-validator')}*${this.value}`;
                                                        });
                                            
                                                        resetBtn.innerText = 'сброс';
                                                        // обработчик для обновления изображения captcha
                                                        resetBtn.addEventListener('click',function(){
                                                            // запрашиваем новое изображение
                                                            webSDK.getCaptcha().then(resolve=>{
                                                                // удаляем текущее изображение
                                                                captcha.remove();
                                                                let temp = document.createElement('p');
                                                                temp.innerHTML = resolve.captchaBody;
                                                                // вставляем изображение на страницу
                                                                container.prepend(captcha = temp.querySelector('img'));
                                                                temp.remove();
                                                            });
                                                        });
                                            
                                                        container.append(inputField);
                                                        container.append(valueField);
                                                        container.append(resetBtn);
                                                    }
                                                }
                                            })
                                                                                    
                                            
Важно!!
 Отрисовка captcha нужна:
                                            
  • Для анонимной записи и регистрации при условии: response.registration  == true || response.allEnabled == true
  • Для анонимной записи регистрации и авторизации при условии: response.allEnabled == true
  • Не требуется при условии: response.registration == false && response.allEnabled == false