Рейтинг:0

Отправка динамической регистрационной формы с использованием vanilla Javascript ajax

флаг us

Я хочу использовать возможность ajax не обновлять страницу или перенаправлять пользователя на страницу регистрации. Созданы модальные окна входа/регистрации. У меня есть вход в javascript ajax, отлично работающий с использованием ajax-вызова для входа в API без каких-либо конфигураций или добавленных модулей. Я хочу интегрировать регистрационную форму таким же образом. Я хочу, чтобы регистрация:

  1. показать в модальном режиме - это работает.
  2. Отправить код javascript работает с preventDefault
  3. ответ не работает.

Ajax Post возвращает '<', очевидно, это возвращает какой-то html. Откуда мне знать, как передавать данные в вызове ajax и чего ожидать в ответ? Мой пример ниже:

<style>
.scroll {
  //background-color: #fed9ff;
  //width: 600px;
  height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
  //text-align: center;
  //padding: 20px;
}


.close { 
  margin: 10px 25px 0px;
}
#log-title { 
  margin-left:25px;
}
</style>

<a data-target="#register-modal" data-toggle="modal" class="" id="" href="#register-modal">Register / Create an Account </a>
 
<div id="overlay_container"></div>

 
<!--  Register to download button so stays on same page.  -->
<div id="register-modal" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button> 
  <h3 id="log-title">Please register:</h3>   
  <div class="modal-dialog">
    <div class="modal-content scroll">
      <?php
        $register_form = \Drupal::service('entity.form_builder')->getForm(\Drupal\user\Entity\User::create([]), 'register', []);    
        // Load the service renderer
        $render = Drupal::service('renderer');
        $rform = $render->renderPlain($register_form);
        echo $rform;
      ?>
    </div> <!-- Register modal content end-->
  </div><!-- Register modal-dialog end -->
</div><!-- Register modal end -->

<script>
  var registerForm = document.getElementById('user-register-form');
  if (registerForm ) {
    // capture registration submit, prevent from submission and use ajax to get response
    registerForm.onsubmit = async (e) => {
      e.preventDefault();
        // callRegCaptcha();
      elms =document.getElementById("user-register-form").elements; 
      var url = "https://website/user/register"; //website is a true url

      fetch(url, {
        method: 'POST',
        body: elms
      })
      .then(response=>response.json())
      .then(json => {
        console.log(json);
      });
    }
  }
</script>

Все работает, кроме ответа. Я нигде не могу найти, чего ожидать в ответ. Или если я правильно привязываю данные вязов. Может ли кто-нибудь помочь мне в этой области?

Для входа в систему требовалось передать csrfToken вместе с

 заголовки: {
                «Тип контента»: «приложение/json»,
                «X-CSRF-токен»: csrfToken
              },

и «?_format=json», добавленный к URL-адресу, но для регистрационных значений я работаю вслепую. У кого-нибудь есть информация о том, что пройти? В ответ я получаю html-страницу.

Наконец, при регистрации есть капча v2, которая выводит ошибку: «Введенный вами ответ на капчу неверен».

Я также посмотрел на этой странице: https://www.drupal.org/node/2405657

Отображение #Регистр

ПОСТ: https://example.com/user/register?_format=json
Тип содержимого: приложение/json

{
  "имя": { "значение": "fooBar" },
  "почта": { "значение": "[email protected]" },
  «проход»: { «значение»: «секретный соус» }
}
200 ОК

Я не получаю ответ json, он возвращает синтаксическую ошибку: неожиданный токен < в JSON в позиции 1.

выборка(URL, {
            метод: «ПОСТ»,
            данные: JSON.stringify({
  "имя": { "значение": "fooBar" },
  "почта": { "значение": "[email protected]" },
  «проход»: { «значение»: «секретный соус» }
}),


            тип данных: "json",
            contentType: "приложение/json; charset=utf-8",
            успех: функция (данные) {
                console.log(данные);
                successmessage = 'Данные успешно собраны';
                $("#overlay_container").текст(сообщение об успехе);
            },
            ошибка: функция (данные) {
                console.log(данные);
                сообщение об успехе = 'Ошибка';
                $("#overlay_container").текст(сообщение об успехе);
            }
        })
        .тогда(ответ=>ответ.json())
        .тог(json=> {
            console.log(json);
        }).catch(функция(ошибка) {
                        console.log(ошибка); // показывает указанное выше исключение
                 });

Ни один из успехов: или ошибка не отвечает, просто улов

Более того, когда _format=json для URL-адреса, сообщается следующая ошибка:

{сообщение: "Недопустимый формат: json"}
сообщение: "Недопустимый формат: json"
[[Прототип]]: Объект

Затем я попытался следовать этому ответу @Fons Vandamme на сообщения об установке Rest UI и настройке регистрации пользователя.

регистрация пользователя с отдыхом

сообщение: "Данные учетной записи пользователя для регистрации не получены."
[[Прототип]]: Объект

Далее: в расширении администратора изменена аутентификация с файлов cookie на базовую аутентификацию, установив базовую аутентификацию HTTP, перейдя к остальной конфигурации пользовательского интерфейса для регистрации пользователя / пользователя / регистрации: POST, и новая ошибка — 400 Bad Request.

Рейтинг:1
флаг us

Чтобы заставить это работать, были предприняты шаги, чтобы заставить его работать. Согласно многим комментариям, следуйте инструкциям по этим ссылкам: https://areatype.com/blog/register-user-drupal-8-rest-api

  1. Включить веб-службы RESTful, HAL, REST UI, сериализацию
  2. Настроить пользовательский интерфейс Rest, нажмите «Настроить» в разделе «Расширить пользовательский интерфейс Rest». Включите ресурс «Регистрация пользователей» со следующими настройками:

       а. путь -> /пользователь/регистр: POST  
       б. методы: ПОСТ
       в. форматы: hal_json, json
       д. аутентификация: cookie "**ПРИМЕЧАНИЕ**: возможно, это позволяет избежать учетных данных для новых пользователей..."
  1. Настройки учетной записи: в разделе «Конфигурация» -> «Настройки учетной записи». «Кто может регистрировать аккаунты?» -> посетитель отключить «Требовать подтверждение электронной почты, когда посетитель создает учетную запись»

  2. Веб-службы RESTful -> Расширение -> Веб-службы RESTful -> разрешения Флажок «Доступ к POST на ресурсе регистрации пользователя» Предоставить анонимному пользователю.

  3. Получите Postman для Chrome и настройте его следующим образом: POST -> конечная точка URL-адреса -> http://{имя-сайта-указатель}/пользователь/регистр?_format=hal_json Авторизация: нет Заголовки: Content-Type:application/json x-csrf-токен: OGVi9xj9vemD3BitXOWf4-3ml2maqy-2kk0gkjIRuHk **Получить токен x-csrf-token через новый билдер get call** ** http://{website}/session/token ** выводит токен csrf в теле возврата.

должно выглядеть так:

заголовок: X-CSRF-Token и Content-Type
URL сообщения: http://{имя-сайта-указатель}/user/register?_format=hal_json
тело:
{
"имя":[{"значение":"test3"}],
"почта":[{"значение":"[email protected]"}],
"пройти":[{"значение":"тест"}]
}

Это должно вернуть статус 200 ok вместе с содержимым недавно зарегистрированных пользователей uid uuid и т. д. в качестве ответа, как если бы страница регистрации была отправлена.

ПРИМЕЧАНИЕ если он возвращает html-страницу «создать / зарегистрировать пользователя» в теле ответа или другие значения, скорее всего, это настройки в остальной конфигурации пользовательского интерфейса или конфигурации vistor.

Если вы получаете другой менее идентифицируемый статус, все это неверно. Если вы получаете сообщение об ошибке 500, скорее всего, это проблема аутентификации, и переключитесь либо с cookie на базовую авторизацию, либо дважды проверьте настройки пользовательского интерфейса для аутентификаторов. Номера 2 и 3, казалось, были областью проб и ошибок.

Кажется, устранение неполадок сложнее, чем должно быть, и потребовалось 3 дня поиска ответов в Интернете и чтения большого количества журнала изменений кода.

Я разместил это, чтобы помочь всем, у кого есть подобные трудности, заставить процесс работать эффективно.

Ответить или комментировать

Большинство людей не понимают, что склонность к познанию нового открывает путь к обучению и улучшает межличностные связи. В исследованиях Элисон, например, хотя люди могли точно вспомнить, сколько вопросов было задано в их разговорах, они не чувствовали интуитивно связи между вопросами и симпатиями. В четырех исследованиях, в которых участники сами участвовали в разговорах или читали стенограммы чужих разговоров, люди, как правило, не осознавали, что задаваемый вопрос повлияет — или повлиял — на уровень дружбы между собеседниками.