HTTP + JSON 简单 api 请求作为空白发送答案

【问题标题】：HTTP + JSON simple api request being sent as blankHTTP + JSON 简单 api 请求作为空白发送
【发布时间】：2017-05-17 14:03:04
【问题描述】：

我正在尝试发出一个简单的 API 请求，但惨遭失败。

文档说这是提出请求的方法：

POST https://api.yotpo.com/oauth/token
--------------------------------------

{
  "client_id": "### Your client_id ###",
  "client_secret": "### Your client_secret ###",
  "grant_type": "client_credentials"
}

我尝试通过这样的 HTML 表单提交它只是为了测试：

<head>
    <meta http-equiv="content-type" content="application/json; charset=UTF-8">
</head>


<?php


$json ='{"client_id": "creds",
"client_secret": "secret",
"grant_type": "client_credentials"}';



print_r($_POST);
?>

<form action="https://api.yotpo.com/oauth/token" enctype='application/json' method="POST">

    <input type="hidden" name="post_data" <?php echo 'value="'.htmlspecialchars($json).'"'; ?> />
    <input type="submit">
</form>

有人告诉我内容类型必须是我设置的application/json。

我通过 PHP 测试文件在我的服务器上执行此操作，但实际上我愿意以任何可能的方式进行这项工作，然后从那里解决。

当我从当前的 HTML 表单提交时，页面重定向到 yotpo 页面，并且 JSON 数据显示为空白：

{"status":{"message":"Couldn't find Account with app_key = ","code":404,"error_type":"Exceptions::RecordNotFound"}}

提交此 API 身份验证的最简单方法是什么？

【问题讨论】：

我被告知内容类型需要是我设置的 application/json。 不。你没有设置。 enctype 属性不能使 Content-type 为 application/json。它只能设置为application/json 不属于的MIME 类型之一。换句话说，您不能将 JSON 作为form 数据发送。您必须使用 AJAX 来发送此类数据。

标签： javascript html json http

【解决方案1】：

更新

我与 api 的所有交互都应该使用 curl 和 php 完成吗？或者现在只使用 html/jquery 与 api 交互是否“安全” 凭据是以安全的方式生成的。

在这种情况下，使用客户端获取授权是不安全的。即使在获得token 之后，我也不会在客户端将它们用于任何事情。相反，我会创建一些 PHP 页面/api，javascript（ajax 或其他东西）会调用它并完成工作！

返回的 access_token 以 JSON 格式提供给我。我该如何使用我将使用 jquery 中的给定访问令牌？我想我会需要json_decode正确吗？

请查看更新的代码。如果您仍想在 jquery 中使用token，请按照以下步骤操作：

创建 php api，/auth，它执行授权并回显 token。
向/auth 提出一些请求（发布、获取），这将返回token。保存并使用它。

问题是您将数据发布为post_data。所以在接收端，它就像post_data = {...}，他们没有在寻找 apiKey。

此外，公开私钥也不安全。您可以使用纯 PHP cURL 请求来获取授权。

试试这个：

<?php
$json = array(
    "client_id"=> "creds",
    "client_secret"=> "secret",
    "grant_type"=> "client_credentials"
);
$ch = curl_init( "https://api.yotpo.com/oauth/token" );

# Setup request to send json via POST.
$payload = json_encode( $json );

curl_setopt( $ch, CURLOPT_POSTFIELDS, $payload );

curl_setopt( $ch, CURLOPT_HTTPHEADER, array('Content-Type:application/json'));

# Return response instead of printing.
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );

# Send request.
$result = curl_exec($ch);

curl_close($ch);

# Print response.
#echo "<pre>$result</pre>";

# use json_decode method to parse result.
$auth = json_decode($result, true);
echo $auth['access_token']; # Prints token

# For debugging, use var_dump($auth);    

?>

现在你可以建立一个连接文件，它会得到授权密钥，然后所有其他的php文件都可以共享它。

检查 phpfiddle 示例：http://phpfiddle.org/main/code/mpd1-swcn

【讨论】：

好的，非常感谢。有用。我对 curl 有一个非常基本的了解，所以这对我来说看起来很混乱，但我确实理解发生了什么。我现在有 2 个问题来自于此，1. 我与 api 的所有交互都应该使用 curl 和 php 完成吗？或者，既然凭据是以安全的方式生成的，那么仅使用 html/jquery 与 api 交互是否“安全”。 2. 返回的 access_token 以 JSON 格式提供给我。如何在我将使用的 jquery 中使用给定的访问令牌？我想我需要正确的 json_decode 吗？
@Sackling 请查看更新后的答案。希望它能澄清你的疑惑！

【解决方案2】：

将 JavaScript 函数附加到执行 HTTP 请求的按钮

我建议您使用 JQuery 为您发出请求。如果不使用它，您将不得不为每个浏览器制作单独的代码。

如果您使用 JQuery，您将使用类似于此的代码

var data = '{"client_id": "creds",
"client_secret": "secret",
"grant_type": "client_credentials"}'

$.ajax({
  type: "POST",
  url: "https://api.yotpo.com/oauth/token",
  data: data,
  success: function(){"worked"},
  dataType: "application/json"
});

【讨论】：

您声称由于兼容性问题而需要 JQuery for AJAX 的说法已经过时了 5 年。
如果你不使用jquery，你将不得不使用xmlhttprequest，而且你会遇到很多东西的问题，我建议使用AJAX来请求。
AJAX 是一种技术，AJAX 不是 jquery。你能说出我可能遇到的任何问题吗？
你可以在没有 jquery 的情况下使用 AJAX 没有问题

【解决方案3】：

这里是如何使用 javascript 完成的完整示例。但是，请注意 Priyesh Kumar 的回答！ 将您的客户机密 ID 放入 HTML 是危险的。除非这是您的内部工具，否则请使用 PHP 而不是 javascript。

   document.getElementById("myform").addEventListener("submit", function (e) {
        // prevent normal submit
        e.preventDefault();
        e.cancelBubble = true;

        // test if JSON is valid
        var validJSON;
        try {
            validJSON = JSON.stringify(JSON.parse(this.elements["post_data"].value));
        }
        catch (e) {
            alert("Invalid json");
            console.log(e);
            return;
        }
        // Mark field as disabled
        var form = this;
        form.elements["submit"].disabled = true;
        form.elements["submit"].value = "Loading...";
        // Send AJAX
        var xhr = new XMLHttpRequest();
        xhr.open("POST", this.action, false);
        xhr.setRequestHeader("Content-Type", "application/json");
        // this runs after load
        xhr.addEventListener("load", function (data) {
            // print result
            document.getElementById("result").innerHTML = "";
            document.getElementById("result").appendChild(new Text(this.responseText));
            // 
            form.elements["submit"].removeAttribute("disabled");
            form.elements["submit"].value = "Submit";
        });


        // this sends JSON
        xhr.send(validJSON);
    });

<form action="https://api.yotpo.com/oauth/token" id="myform" enctype='application/json' method="POST">

<!-- DO NOT POST YOUR CLIENT SECRET PUBLICLY!
     that's why it's called secret!
-->
    <textarea name="post_data" style="width:100%">
{ "client_id": "creds",
        "client_secret": "secret",
        "grant_type": "client_credentials"
}
    </textarea>
    <input type="submit" name="submit">
</form>
<pre id="result"></pre>

【讨论】：