通過將 POST 請求中的 HTML 表單發送到私有 API 來獲取 JWT

Question

我創建了一個非常簡單的 html 頁面，其中包含 2 個輸入和一個按鈕（用戶名、密碼和登錄/提交）。 當我按下提交時，用戶名和密碼被轉換為 JSON，並作為 POST 請求的正文發送到我無法控制的私有 API。 然后，API 應使用另一個包含 JWT 訪問令牌的 JSON 進行響應。 然后我需要將此令牌放入 GET 請求（不記名令牌）的請求標頭中，但我還沒有做到這一點，因此我在這里。

我已經用 Postman 測試了 API，它按預期完美運行。 我現在正在嘗試做 Postman 所做的事情，只是在我自己的小型 Web 應用程序中。

我需要發送的 JSON 是這樣的：

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

響應是這樣的：

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

到目前為止，這是我的代碼：

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 這個網址不是真的

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
        }
    }
}

我在那里放了一些警報只是為了測試； 我收到“腳本加載”和“按鈕按下”，但沒有收到帶有令牌的警報。

我也試過 AJAX/jQuery 無濟於事，也沒有彈出警報：

<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>

我加載頁面並“加載腳本”，然后輸入有效的用戶名和密碼，然后“按下按鈕”。 頁面剛剛刷新，我再次使用已輸入的最后一個用戶名“加載腳本”。我讀過的所有問題都沒有對我有用的答案。 你看到我的代碼有什么問題嗎？ 另外，作為最后一點； 我想使用第一個腳本示例，因為它對我來說更容易理解和使用。

更新

所以，它有點工作。 我不知道 Postman 生成的代碼我可以復制。 如前所述，我已經用 Postman 測試了 API 並且它有效。 下面是腳本現在的樣子：

$(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);
        });
    })

我實際上從中獲得了訪問令牌。 現在的問題是用戶名和密碼是硬編碼的（不是來自 html 輸入）並且腳本在頁面加載后立即運行。 有什么想法可以讓我在按下按鈕后才運行腳本嗎？ 以及如何用輸入字段中的值替換硬編碼的用戶名和密碼？ 郵遞員生成的代碼有這么多 \\ 和 "，我還能在那行代碼中使用變量而不是字符串嗎？

我只是嘗試將數據重新格式化為{"Username":"someUsername","Password":"somePassword"}並且它不會那樣工作，所以我猜 \\r\\n 是必要的？

Answer 1

您忘記了表單元素上的方法，雖然序列化方法將獲取表單值，但請嘗試像這樣設置表單：

   <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>