Django Recaptcha (v2) - использование капчи в модале, отображаемом с помощью ajax - PullRequest
0 голосов
/ 03 декабря 2018

Итак, я использую этот пакет: https://github.com/praekelt/django-recaptcha

Я отображаю модально с помощью for в представлении списка на основе AJAX:

{% for object in object_list %}
<div id="offer-{{ object.id }}" class="modal fade services-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content shadow">
            <div class="offer-box">
                <div class="offer-box-head">
                    <div class="offer-slider">
                        <div class="swiper-wrapper">
                            {% if object.gallery.all %}
                            {% for item in object.gallery.all %}
                            {% thumbnail item.photo "800x530" crop="center" as img %}
                            <div class="swiper-slide"><img src="{{ img.url }}" alt="offer image"></div>
                            {% endthumbnail %}
                            {% endfor %}
                            {% else %}
                            <div class="swiper-slide"><img src="{% static 'img/blank.png' %}" alt="offer image"></div>
                            {% endif %}
                        </div>

                        <div class="offer-pagination-prev left-arrow">
                            <span class="ti-angle-left"></span>
                        </div>

                        <div class="offer-pagination-next right-arrow">
                            <span class="ti-angle-right"></span>
                        </div>
                    </div>
                    <span class="offer-box-price">{{ object.price|floatformat:2 }} PLN</span>
                    {% if object.featured %}
                    <span class="offer-box-label"><span class="ti-star"></span>Polecane</span>
                    {% endif %}
                </div>
                <div class="offer-content pl-30 pr-30">
                    <span class="h4 offer-box-title">{{ object.offer_type }} {{ object.surface|floatformat }}m2</span>
                    <span class="offer-box-location"><span
                            class="ti-location-pin"></span>{{ object.locality }}: {{ object.street }} </span>
                    {% if object.year_built %}
                    <span class="offer-box-meta">{{ object.year_built }}</span>
                    {% else %}
                    <span class="offer-box-meta">Brak daty zbudowania</span>
                    {% endif %}
                    <a class="close" data-dismiss="modal"><span class="ti-close"></span></a>
                    <div class="contact-form mt-60">
                        <form method="post" action="{% url 'confirm_mail' %}">
                            {% csrf_token %}
                            <div class="form-group">
                                {{ form_mail.author.errors }}
                                <label for="{{ form.author.id_for_label }}">Autor</label>
                                {{ form_mail.author }}
                            </div>

                            <div class="form-group">
                                {{ form_mail.email.errors }}
                                <label for="{{ form.email.id_for_label }}">Email</label>
                                {{ form_mail.email }}
                            </div>

                            <div class="form-group">
                                {{ form_mail.telephone.errors }}
                                <label for="{{ form.telephone.id_for_label }}">Telefon</label>
                                {{ form_mail.telephone }}
                            </div>

                            <div class="form-group">
                                {{ form_mail.message.errors }}
                                <label for="{{ form.message.id_for_label }}">Wiadomość</label>
                                {{ form_mail.message }}
                            </div>

                            <div class="col-md-7">

                            </div>
                            <div class="col-md-2">
                                <div class="form-group grecaptcha">
                                    {{ form_mail.captcha }}
                                </div>
                            </div>

                            <input type="hidden" name="offernumber" id="id_offernumber"
                                   value="{{ object.offer_number }}">

                            <button type="submit" id="submit" name="submit"
                                    class="btn btn-primary">Wyślij
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endif %}

Я делаю это так:

function ButtonAjax(){
    $('[id^="pag_btn_"]').click(function(e){
        e.preventDefault();
        let url = offer_list_url;
        base_array = GetBaseDataArray();
        additional_array = {
            'button_page': $(this).val(),
            'request_type': 'Button',
        }
        data_array = $.extend(base_array, additional_array);
        $.ajax({
            type: "POST",
            url: url,
            data: data_array,
            cache: false,
            success: function(data){
                $('#big-list').html(data);
                UpdateURL(data);
            },
            complete: function(){
                ButtonAjax();
                SwiperReload();
            }
        });
    });
}

Но я получаю эту ошибку при перезагрузке страницы с помощью ajax и создании новых форм с этой капчей:

recaptcha__pl.js: 529 Uncaught DOMException: заблокирован фрейм с источником "https://www.google.com" от доступа к фрейму перекрестного происхождения. В RR.wE.xl (https://www.gstatic.com/recaptcha/api2/v1542004393985/recaptcha__pl.js:529:376) в мл (https://www.gstatic.com/recaptcha/api2/v1542004393985/recaptcha__pl.js:533:272) в Object.init (https://www.gstatic.com/recaptcha/api2/v1542004393985/recaptcha__pl.js:542:44) в https://www.google.com/recaptcha/api2/bframe?hl=pl&v=v1542004393985&k=6Ley7XsUAAAAAOkmsN1CVThsgorMxXLI7eqLc_Sp&cb=ocue9ieaiij1:184:30

Я пытался добавить Django CORS, но это не помогает. Кажется, это та же проблема, которую я нашел здесь: https://github.com/google/recaptcha/issues/121

Я пробовал слишком много разных решений, и я не знаюКак я могу это исправить. Одним из способов решения проблемы, которая приходит мне в голову, является обновление при включении / отключении recaptcha на модальном показе / скрытии или просто рендеринг одной капчи и (как-то) ее замена на каждом модальном шоу.

Это версия v2 Google recaptcha, если кто-то спросит.

...