如何从网页 html 或 javascript 获取 Box 访问令牌？答案

【问题标题】：How to get Box access token from a webpage html or javascript?如何从网页 html 或 javascript 获取 Box 访问令牌？
【发布时间】：2015-01-15 18:40:21
【问题描述】：

您好，我正在尝试让用户从网页登录到 Box.com。我通过一个简单的 HTML 表单提交完成了第一部分：

<form action="https://www.box.com/api/oauth2/authorize" type="POST" enctype="application/x-www-form-urlencoded">
    <input type="text" name="response_type" value="code">
    <input type="text" name="client_id" value="[REMOVED]">
    <input type="text" name="state" value="vexhax97td8xf_SomeTemporaryValueForTesting">
    <input type="submit">
</form>

这很好用，我使用 javascript 从查询参数中获取授权码。然后我尝试同样的方法来获取访问代码（身份验证代码由页面加载时的 javascript 设置）：

<form action="https://app.box.com/api/oauth2/token" type="POST" enctype="application/x-www-form-urlencoded">
    <input type="text" name="grant_type" value="authorization_code">
    <input id="auth-code" type="text" name="code" value="">
    <input type="text" name="client_id" value="[REMOVED]">
    <input type="text" name="client_secret" value="[REMOVED]">
    <input type="submit">
</form>

但我收到“无效的 grant_type 参数或缺少参数”错误。另外，无论如何显示响应 json 都不是一个好的用户体验。我在没有enctype="application/x-www-form-urlencoded" 的情况下尝试过，得到了同样的错误。

Box 教程使用 curl 来完成，这显然不是网页上的选项。如何在不出现“无效...”错误的情况下获取访问令牌，有没有办法通过幕后的 javascript 做到这一点？

【问题讨论】：

标签： javascript oauth box-api box boxapiv2

【解决方案1】：

对于访问令牌交换的授权码，缺少“redirect_uri”参数。但这不是真正的问题。

交换应该在服务器端进行，而您在客户端（浏览器）进行。也许您可以通过 AJAX 调用进行交换以正确处理 JSON 回复，但前提是 box.com 允许 CORS（我对此表示怀疑）。

这样你也会在你的网页上公开你的 client_id 和 client_secret（那么你为什么犹豫将它发布到 stackoverflow 上呢？）。

【讨论】：