Error on login

Hello,
I’m implementing a login form that asks username and password.
The HTTP response i get is
{"code":17000,"message":"JSON parse error: 'Wrong JSON or ContentType.'.","errorData":{}}

and in the browser console i get the error Content Security Policy: Il caricamento di una risorsa su https://api.backendless.com/favicon.ico è stato bloccato dalle impostazioni della pagina (“default-src”).

This is the code of my login form

<html>
	<meta charset="utf-8">
	<form action= "https://api.backendless.com/<appid>/<rest key>/users/login" method="POST">
		<input type="text" name="login" value="a">username</input><br>
		<input type="password" name="password" value="segreta">password</input><br>
		<button type="submit" id="submit">Invia</button>
	</form>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script>
	$('#submit').on('click', function(){
		$.ajax({
			url:"https://api.backendless.com/<appid>/<rest key>/users/login",
			type: 'POST',
			contentType: 'application/json',
			headers:{
				"Content-Type": "application/json"
				},
			async: false
		})
	})
	</script>
</html>`

Obviously instead of appid and appkey i’ve put my id/key.

Thanks for helping

Hi Marco
There are a few reasons why it doesn’t work

  1. when you click at “sumbit” button there will be actually two requests, one from your form (it’s a native behavior) and another one from jQuery ajax, so, to solve the problem you have to prevent a submit event in you code

  2. the api server is expecting ContentType=application/json but the html form sends “application/x-www-form-urlencoded”

  3. in your code you don’t pass request body to ajax function

here is a working code

<html>
	<meta charset="utf-8">
	<form id="form">
		<input type="text" name="login" value="a">username</input><br>
		<input type="password" name="password" value="segreta">password</input><br>
		<button>Invia</button>
	</form>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script>
	$('#form').on('submit', function(e){
	  e.preventDefault() // prevent native form sending
	  
		$.ajax({
			url:"https://api.backendless.com/{APP_ID}/{API_KEY}/users/login",
			type: 'POST',
			contentType: 'application/json',
			data: JSON.stringify({ // request body should be stringified 
				login: e.target.login.value, // e.target=dom element (form); e.target.login=dom element (login input)
				password: e.target.password.value,
			})
		})
	})
	</script>
</html>

Regards, Vlad

2 Likes

I used this same code which you have given but its not working at all for me. the submit button doesn’t do anything.

Hi Shaurya

from slack conversation:

it doesn’t work for you because you do not use the same code, your code is:

you subscribe on “click” event for button, but you need to subscribe on “submit” event for form

also you need to use e.preventDefault() to avoid form sending

Regards, Vlad

1 Like

this is what happens when i click submit, what should i do to fix it ?:unamused:
image

please share your code one more time here

<?php
/*
Template Name: signup
*/
?>
<html>
    <meta charset="utf-8">
    <form action= "https://api.backendless.com/{APP_ID}/{API_KEY}/users/login" method="POST">
        <input type="text" name="login">username</input><br>
        <input type="password" name="password">password</input><br>
        <button type="submit" id="submit">Submit</button>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
    $('#submit').on('click', function(e){
        $.ajax({
            url:"https://api.backendless.com/{APP_ID}/{API_KEY}/users/login",
            type: 'POST',
            contentType: 'application/json',
            headers:{
                "Content-Type": "application/json"
                },
data: JSON.stringify({ 
              login: e.target.login.value, 
              password: e.target.password.value
            async: false
        })
    })
    </script>
</html>

please read my answer above Error on login and compare your code with mine

When i use it the submit button doesnt do anything

i tried to find a lot online for the solution of my problem. i dont know what its related to if not backendless. I just cant happen to connect the login (or any form) to backendless…

  1. just copy/past the next code exactly as it is
<html>
	<meta charset="utf-8">
	<form id="form">
		<input type="text" name="login" value="a">username</input><br>
		<input type="password" name="password" value="segreta">password</input><br>
		<button>Invia</button>
	</form>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script>
	$('#form').on('submit', function(e){
	  e.preventDefault() // prevent native form sending
	  
		$.ajax({
			url:"https://api.backendless.com/{APP_ID}/{API_KEY}/users/login",
			type: 'POST',
			contentType: 'application/json',
			data: JSON.stringify({ // request body should be stringified 
				login: e.target.login.value, // e.target=dom element (form); e.target.login=dom element (login input)
				password: e.target.password.value,
			})
		})
	})
	</script>
</html>
  1. replace <appid> <rest key> with your own, you can find them on the dashboard page https://take.ms/QM9OD

  2. run the code

ok il do it . REST API or JS API key ?

you can use any of them, it’s needed for roles, analytics, bl, e.g.
https://backendless.com/docs/rest/users_user_roles.html

I did exactly what you said and the after clicking submit nothing happen.

did you open browser’s dev console, Network Section? like on this video https://take.ms/zvfw7

“Cannot read property ‘ajax’ of undefined” doesn’t look like “nothing” =)

Its just rotating :frowning:

Really? Ohkay :slight_smile: so i guess there some scope here for it to work i hope so

just try to add a debug breakpoint and see what happen when you go into submit callback

	$('#form').on('submit', function(e){
          e.preventDefault() // <--- add breakpoint to this line

you mean to add a line with debugger;