通过将 POST 请求中的 HTML 表单发送到私有 API 来获取 JWT

Question

I have created a very simple html page with 2 inputs and a button (username, password and log in/submit). When I press submit, the username and password is converted into JSON, and sent as the body of a POST request to a private API which I have no control over. The API should then respond with another JSON containing a JWT access token. I then need to put this token into the request header of a GET request (Bearer token), but I haven't gotten this far yet, hence why I'm here.

I have tested the API with Postman, and it is working perfectly as expected. I am now trying to do what Postman does, only in my own small web application.

The JSON I need to send is like this:

{"username": "someUsername", "password": "somePassword"}

And the response is like this:

{"access_token": "A very long random string"}

Here is my code so far:

HTML:

<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
<script src="apirequest.js"></script>
<div class="container">
    <form class="form-signin">
        <h2 class="form-heading">Send POST request</h2>
        <div class="form-group">
            <input type="text" id="username" class="form-control" placeholder="Username" autofocus /> 
            <input type="password" id="password" class="form-control" placeholder="Password" />
            <button class="btn btn-lg btn-primary btn-block" type="submit" onclick="getToken()">Log in</button>
        </div>
    </form>
</div>

apirequest.js this URL is not the real one

alert("script loaded");
var token_;

function getToken() {

    alert("button pressed");

    var request = new XMLHttpRequest();

    var key;
    var username_ = document.getElementById("username").val();
    var password_ = document.getElementById("password").val();

    request.open("POST", "https://api.dummyurl.test", true);
    request.setRequestHeader("Content-type", "application/json");
    request.send(JSON.stringify({
        username: username_,
        password: password_
    }));
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
            var response = request.responseText;
            var obj = JSON.parse(response);
            key = obj.access_token; // store the value of the accesstoken
            token_ = key; // store token in global variable "token_"
            alert(token_); //test if token is stored
        }
    }
}

I have put some alerts in there just to test things; I get "script loaded" and "button pressed", but not the alert with the token.

I have also tried with AJAX/jQuery to no avail, also no alert pop up:

<script type="text/javascript">
        $(document).ready(function() {
            $(".btn").click(function() {
                alert("Script loaded");
                const Data = {
                    "username" : document.getElementById("username").val(),
                    "password" : document.getElementById("password").val()
                }

                $.ajax({
                    url : "https://api.dummyurl.test",
                    type : "POST",
                    data : Data,
                    contentType : "application/json; charset=utf-8",
                    dataType : "json",
                    success : function(result) {
                        alert(result)
                        console.log(result)
                    },
                    error : function(error) {
                        console.log(error)
                    }
                })
            })
        })
    </script>

I load the page and get "script loaded", then I enter a valid username and password, then I get "button pressed". The page just refreshes and I get "script loaded" again with the last username already typed in. None of the questions I've read have had an answer that works for me. Do you see any problems with my code? Also, as a last note; I'd like to use the first script example as that one is much easier to understand and work with for me.

Update

So, it's kind of working. I didn't know Postman generated code I could copy. As mentioned, I have tested the API with Postman and it works. Here's what the script looks like now:

$(document).ready(function() {
    var settings = {
            "async" : true,
            "crossDomain" : true,
            "url" : "https://api.dummyurl.test",
            "method" : "POST",
            "headers" : {
                "Content-Type" : "application/json",
                "cache-control" : "no-cache"
                    },
                    "processData" : false,
                    "data" : "{  \r\n\"Username\":\"someUsername\",\r\n\"Password\":\"somePassword\"\r\n}"
                    }
    $.ajax(settings).done(function(response) {
        console.log(response);
        });
    })

I actually got the access token from this. The problem now is that username and password is hardcoded (not from html input) and that the script runs as soon as the page is loaded. Any ideas how I can make the script run only after I press the button? And how I can replace the hardcoded username and password with the values from the input fields? Postman generated code with so many \\ and ", can I still use variables and not strings inside that line of code?

I just tried reformatting the data to {"Username":"someUsername","Password":"somePassword"} and it wouldn't work that way, so I guess the \\r\\n is necessary?

Answer 1

Your forgot the method on your form element, While serialize method will get form values, try to set your form like this:

   <form class="form-signin" method="post">
        <h2 class="form-heading">Send POST request</h2>
        <div class="form-group">
            <input type="text" id="username" class="form-control" placeholder="Username" autofocus /> 
            <input type="password" id="password" class="form-control" placeholder="Password" />
            <button class="btn btn-lg btn-primary btn-block" type="submit" onclick="return getToken(this.form)">Log in</button>
        </div>
    </form>


   <script type="text/javascript">
      $(document).ready(function() {
        function getToken(form){
          var formData = $(form).serialize();
          $.post("https://api.dummyurl.test", formData).done(function(result){
            alert(result);
            console.log(result)
          })
          return true;
        }

      })
   </script>