reCAPTCHA not stopping users logging in - python

I am trying to use Google reCAPTCHA for my login form to prevent spam. After following the necessary steps to get it all working, users can still login. They can fill out there details and login with out ticking the checkbox which isn't correct.
I think it might be the placement in the DOM so I tried moving it around and that didn't work.
CODE:
{% extends 'public/base.html' %}
{% load staticfiles %}
{% load crispy_forms_tags %}
{% block head %}
<link rel="stylesheet" type="text/css" href="{% static "public/css/auth.css" %}" />
{% endblock %}
{% block content %}
<div class="container mt-5 mb-5 login-container">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group mt-4">
<legend class="border-bottom mb-4">Log In</legend>
{{ form|crispy }}
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="################################
"></div>
</fieldset>
<div class="form-group">
<button class="btn btn-success" type="submit">Login</button>
<small class="text-muted ml-2">
Forgot Password?
</small>
</div>
</form>
<div class="border-top pt-3 mb-4">
<small class="text-muted">
Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
</small>
</div>
</div>
{% endblock %}```
Thanks.

When you use the captcha, a textarea is added dynamically inside <div class="g-recaptcha">.
That textarea is not visible and by default has id="g-recaptcha-response".
You can get it with:
document.getElementById('g-recaptcha-response').value
In your login form you have to check if that textarea has a value or not. If it has a value then user has used successfully the captcha and can continue with the login process.
Something like this:
<form onsubmit="return check_form()">
...
</form>
<script>
function check_form()
{
return document.getElementById('g-recaptcha-response').value != '';
}
</script>
If check_form() returns FALSE, then the form is not submitted.

Related

Request in Flask from a Form in HTML is returning None Value, What should I Do?

I am getting no value on request in flask. It is returning None value.
I have tried changing the method but no use.
The flask code:
#app.route("/login/user/book")
def searchbook():
bookname=request.form.get("search")
return render_template("message.html",heading=bookname ,message=" ")
The webpage:
{% extends "layout.html" %}
{% block heading %}Welcome to BookSarkar{% endblock %}
{% block body %}
<p>Welcome {{ name }}</p>
<form action="{{ url_for('searchbook') }}" method="get" class="form-group">
<div class="form-group">
<input type="text" name="search" class="form-control col-md-6 mt-5 mx-auto" placeholder="Search books">
<p style="text-align:center;">
<button type ="submit" class="btn btn-primary mt-2 mx-auto">Search</button>
</p>
</div>
</form>
<div class="fixed-top m-2">
<a class="btn btn-outline-primary" href="{{ url_for('logout') }}" role="button" style="float:right;">Log out</a>
</div>
{% endblock %}
The message webpage:
{% extends "layout.html" %}
{% block heading %}{{ heading }}{% endblock %}
{% block body %}
{{ message }}
<a class="btn btn-primary" href="{{ url_for('index') }}" role="button">Return to Home Page</a>
{% endblock %}
The layout page has no bugs as all other pages are working fine. I expected the webpage to show the given input but it is showing None
request.form contains values submitted via post or put, while your form uses get. Try using request.args.get("search") instead of request.form.get("search")

How to handle AuthAlreadyAssociated at Python-auth/Django-Social? [duplicate]

This question already has answers here:
AuthAlreadyAssociated Exception in Django Social Auth
(5 answers)
Closed 9 months ago.
I use this python-social-auth/social-app-django to connect my web with social media
I want to ask how to handle errors when the same account is used to sign up?
For example, I signed up using facebook and I signed up again using twitter. both successfully registered into two separate accounts, when I logged in using my facebook and then on my account settings page, I want to connect my twitter that has been registered before it will display an error message
"AuthAlreadyAssociated at / oauth / complete / twitter /"
AuthAlreadyAssociated
This message appears after I authorize on the twitter redirect page when it gets redirected back to my web.
In short, how to deal with accounts that have been registered in other accounts?
This is my views.py:
#login_required
def settings(request):
user = request.user
try:
github_login = user.social_auth.get(provider='github')
except UserSocialAuth.DoesNotExist:
github_login = None
try:
twitter_login = user.social_auth.get(provider='twitter')
except UserSocialAuth.DoesNotExist:
twitter_login = None
try:
facebook_login = user.social_auth.get(provider='facebook')
except UserSocialAuth.DoesNotExist:
facebook_login = None
can_disconnect = (user.social_auth.count() > 1 or
user.has_usable_password())
return render(request, 'profile/settings.html', {
'github_login': github_login,
'twitter_login': twitter_login,
'facebook_login': facebook_login,
'can_disconnect': can_disconnect
})
And this is my settings.html template:
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block title %}Navhi Microblog - Profile{% endblock %}
{% block content %}
<div class="col-lg-12 mx-auto">
<br />
<div class="card">
<div class="card-body">
{% include 'profile/base_profile.html' %}
<!--Card Body goes here-->
<div class="card-body">
<div class="card">
<div class="card-body">
{% if github_login %}
{% if can_disconnect %}
<form method="post" action="{% url 'social:disconnect' 'github' %}">
{% csrf_token %}
<button class="btn btn-danger btn-block" type="submit">Disconnect from GitHub</button>
</form>
{% else %}
<p class="text-center" style="color: red">You must define a password for your account before disconnecting from Github.</<p class="text-center">
{% endif %}
{% else %}
<a class="btn btn-sm btn-social btn-github btn-block" href="{% url 'social:begin' 'github' %}?next={{ request.path }}">
<span class="fa fa-github"></span> Connect to Github
</a>
{% endif %}
</div>
</div>
<br />
<div class="card">
<div class="card-body">
{% if twitter_login %}
{% if can_disconnect %}
<form method="post" action="{% url 'social:disconnect' 'twitter' %}">
{% csrf_token %}
<button class="btn btn-danger btn-block" type="submit">Disconnect from Twitter</button>
</form>
{% else %}
<p class="text-center" style="color: red">You must define a password for your account before disconnecting from Twitter.</p>
{% endif %}
{% else %}
<a class="btn btn-sm btn-social btn-twitter btn-block" href="{% url 'social:begin' 'twitter' %}?next={{ request.path }}">
<span class="fa fa-twitter"></span> Connect to Twitter
</a>
{% endif %}
</div>
</div>
<br />
<div class="card">
<div class="card-body">
{% if facebook_login %}
{% if can_disconnect %}
<form method="post" action="{% url 'social:disconnect' 'facebook' %}">
{% csrf_token %}
<button class="btn btn-danger btn-block" type="submit">Disconnect from Facebook</button>
</form>
{% else %}
<p class="text-center" style="color: red">You must define a password for your account before disconnecting from Facebook.</p>
{% endif %}
{% else %}
<a class="btn btn-sm btn-social btn-facebook btn-block" href="{% url 'social:begin' 'facebook' %}?next={{ request.path }}">
<span class="fa fa-facebook"></span> Connect to Facebook
</a>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
Thank you, I hope somebody can provide a solution for this, and sorry for my bad english.
Your question has been answered here:
AuthAlreadyAssociated Exception in Django Social Auth
Basically the answer is to override the default method process_exception() in the social_auth.middleware.SocialAuthExceptionMiddleware class, and add this middleware to your settings.py.
More on how to override here: How do I handle exceptions on Python Social Auth

Side by side inputs in form - HTML, Flask

I am using Flask to develop a web application. I want to put a form in the main page that allows the user to upload a file and submit to the server.
This is working:
<div class="jumbotron">
<div class="container">
<h1>Automatic Guitar Music Transcription</h1>
</div>
</div>
<div class="container">
<p class="lead">Upload your audio file below:</p>
<form method="POST" action="/" enctype="multipart/form-data">
<input name="file" type="file"/>
<input type="submit"/>
</form>
</div>
(JSFiddle)
However, my real index.html is a Flask template, and also uses Bootstrap.
{%- extends "base.html" %}
{% import "bootstrap/utils.html" as utils %}
{% block content %}
{% if request == "GET": %}
<div class="jumbotron">
<div class="container">
<h1>Automatic Guitar Music Transcription</h1>
</div>
</div>
<div class="container">
<p class="lead">Upload your audio file below:</p>
<form method="POST" action="/" enctype="multipart/form-data">
<input name="file" type="file"/>
<input type="submit"/>
</form>
</div>
...more HTML...
{% endif %}
{% endblock %}
{% block scripts %}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="https://rawgit.com/mattdiamond/Recorderjs/master/dist/recorder.js"></script>
<script src="{{url_for('static', filename='js/record.js')}}"></script>
{% endblock %}
Unfortunately, this way, I don't get the input buttons side by side like in the JSFiddle, but I get the submit button under the file upload button:
Why is this happening? Thanks.
Use a simple table to achieve this:
<table>
<tr>
<td><input name="file" type="file"/></td>
<td><input type="submit"/></td>
</tr>
</table>

load css and js file when load a div using ajax Django

Hi everyone I am using Django CMS in my Site, I create a template for a page and now using ajax to load a index.html in a section of this template...
Everything work fine ... but my index html call a style.css file and hpc.js file, that when I load by ajax I don't see its.
I use this to load file in my index.html
{% addtoblock "css" %}
<link rel="stylesheet" type="text/css" href="{% static 'health/css/stylehealth.css' %}" />
{% endaddtoblock %}
and this for my js.file
{% addtoblock "js" %}
<script src="{% static 'health/js/health.js' %}"></script>
{% endaddtoblock %}
my index.html
{% load cms_tags menu_tags sekizai_tags %}
{% load static %}
{% block title %}{% page_attribute "page_title" %}{% endblock title %}
{% block content %}
{% placeholder "content" %}
{% addtoblock "css" %}
<link rel="stylesheet" type="text/css" href="{% static 'health/css/stylehealth.css' %}" />
{% endaddtoblock %}
<div class="selector_healthApp">
<div class="selector_area">
<div class="row">
<form action="#">
{% for list in new_object_list %}
<div class="col-xs-3">
<select class="form-control" id="item_project">
<option>{{ 'Select Categoty' }}</option>
{% for item_list in list.select_opc %}
<option value="{{ list.url }}">{{ item_list }}</option>
{% endfor %}
</select>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" id="start_rank" value="{{ list.start }}" placeholder="Start Rank">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" id="display_count" value="{{ list.count }}" placeholder="Display Count">
</div>
<div class="col-xs-3">
<input type="submit" class="btn btn-primary execute_value" name="" value="Update">
</div>
{% endfor %}
</form>
</div>
</div>
</div>
<div class="healthChart">
<div class="container">
<div class="row">
<div class="graphic"></div>
</div>
</div>
</div>
{% addtoblock "js" %}
<script src="{% static 'health/js/health.js' %}"></script>
{% endaddtoblock %}
{% endblock content %}
so all tags like this {% %} don't load in a page.
any idea how to load this file...
Thanks in advance!
(A) If you need to be able to load the index.html regularly as well as via AJAX:
Use {% extends parent %} and set the parent variable depending on whether the request is an AJAX request or not.
The parent for the regular request is the complete page <html></html> with all resources so that it can be rendered whole.
(B) If you always ever use this template for rendering the response to that AJAX request only, don't need to differentiate between the parents.
The parent for the AJAX request only needs to contain the snippet that is in your block content including all required resources. You might even not need the content block directives. It depends on what you want to add to that snippet.
To use sekizai inside that partial template, however, you need to add a render_block directive for CSS and JS. And thus, these warnings apply:
{% render_block %} tags must not be placed inside a template tag block
(a template tag which has an end tag, such as {% block %}...{%
endblock %} or {% if %}...{% endif %}).
If the {% addtoblock %} tag is used in an extending template, the tags
must be placed within {% block %}...{% endblock %} tags.
http://django-sekizai.readthedocs.io/en/latest/#handling-code-snippets
So, a very simplistic solution for your code would be:
{% load cms_tags menu_tags sekizai_tags static %}
{# this won't work, because there is no parent template defining this block. Use JS to update the title #}
{# block title %}{% page_attribute "page_title" %}{% endblock title #}
{# e.g. send an element with ID that can be replaced in the title #}
{# do include the CSS and JS elements #}
{% render_block "css" %}
{% placeholder "content" %}
{% addtoblock "css" %}
<link rel="stylesheet" type="text/css" href="{% static 'health/css/stylehealth.css' %}" />
{% endaddtoblock %}
{# use the element ID to replace the html #}
<div id="index-container" class="selector_healthApp">
<div class="selector_area">
<div class="row">
<form action="#">
{% for list in new_object_list %}
<div class="col-xs-3">
<select class="form-control" id="item_project">
<option>{{ 'Select Categoty' }}</option>
{% for item_list in list.select_opc %}
<option value="{{ list.url }}">{{ item_list }}</option>
{% endfor %}
</select>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" id="start_rank" value="{{ list.start }}" placeholder="Start Rank">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" id="display_count" value="{{ list.count }}" placeholder="Display Count">
</div>
<div class="col-xs-3">
<input type="submit" class="btn btn-primary execute_value" name="" value="Update">
</div>
{% endfor %}
</form>
</div>
</div>
</div>
<div class="healthChart">
<div class="container">
<div class="row">
<div class="graphic"></div>
</div>
</div>
</div>
{% render_block "js" %}
{% addtoblock "js" %}
<script src="{% static 'health/js/health.js' %}"></script>
{% endaddtoblock %}

django-bootstrap-toolkit for my contact page

I'm new to django. I'm using django-bootstrap-toolkit for my contact page. It works fine when I test it locally. But I'm getting an error on my hosting server, while all other pages work just fine.
Exception Type: TemplateDoesNotExist
Exception Value: bootstrap_toolkit/form.html
Here is contact_us.html page
bootstrap_toolkit/form.html
{% extends 'base.html' %}
{% load bootstrap_toolkit %}
{% block content %}
<div id="wrap">
<div class="container">
<div class="page-header">
<h1 id="contact">Contact</h1>
</div>
<div class="form well" >
<h4 class="">Feedback</h4>
<p class="">Thank you for downloading BookxGeek. I look forward to hearing your feedback!</p>
<form action="." method="post" class="form" >
{% csrf_token %}
{% bootstrap_form form layout="vertical" %}
<br>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
<hr class="soft">
</div>
{% endblock %}

Categories