如何在本机反应中从 api 获取访问令牌答案

【问题标题】：How to get access token from api in react native如何在本机反应中从 api 获取访问令牌
【发布时间】：2019-05-30 21:47:12
【问题描述】：

我正在使用本机反应，我想从使用 oAuth 2 身份验证在 django 中创建的 api 获取访问令牌

我正在传递所有必需的详细信息，但我不知道为什么我会收到不受支持的授权类型的错误

fetch('MyApiUrl', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: JSON.stringify({
                'grant_type': 'password',
                'username': 'MyUserNameSettedInApi',
                'password': 'PasswordSettedInApi',
                'client_id': 'MyClientId',
                'client_secret': 'MyClientSecret',
                'scope': 'read Write'
            })
        })
            .then((response) => response)     <----tried response.json() but giving same error of grant type
            .then((responseData) => {
                console.log(responseData);
            })

我的预期结果是我希望显示访问令牌我得到的是

Response {type: "default", status: 400, ok: false, statusText: undefined, headers: Headers, …}
headers: Headers {map: {…}}
ok: false
status: 400
statusText: undefined
type: "default"
url: "http://MyUrl"
_bodyInit: "{"error": "unsupported_grant_type"}"
_bodyText: "{"error": "unsupported_grant_type"}"
__proto__: Object

请帮忙提前致谢

【问题讨论】：

标签： react-native oauth-2.0 fetch access-token

【解决方案1】：

tried response.json() but giving same error of grant type - 这是来自您的 oauth 服务器的答案。

response.json() 将您的响应数据转换为 json 解码字符串。

将您的代码更改为：

let formData = new FormData();
formData.append('grant_type', 'password');
formData.append('username', 'MyUserNameSettedInApi');
formData.append('password', 'PasswordSettedInApi');
formData.append('client_id', 'MyClientId');
formData.append('client_secret', 'MyClientSecret');
formData.append('scope', 'read Write');

fetch('MyApiUrl', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: formData
})
.then((response) => response.json())
.then((responseData) => {
    console.log(responseData);
});

【讨论】：

感谢您的快速响应，但 api 在使用授权类型密码的邮递员上正常工作
检查我更新的答案，并检查您在邮递员中使用的内容类型以及数据是如何推送的。
还检查该线程：github.com/RealmTeam/django-rest-framework-social-oauth2/issues/…
在邮递员内容类型是 application/x-www-form-urlencoded 所以我应该在接受中写这个类型
如果你使用了 application/x-www-form-urlencoded 那么不要发送 JSON 而是 form-data (developer.mozilla.org/en-US/docs/Learn/HTML/Forms/…)。如果您想在代码中将其作为 json 发送，那么您需要将 content-type 设置为 application/json 并激活在 oauth 中处理 json 数据，就像在我的示例中一样。您的代码中现在有混合格式和内容类型。

【解决方案2】：

安装qs库

npm install qs

将其导入您的应用程序，然后您就可以发送它了。如下图使用qs.stringify

fetch('http://localhost:8888/o/token',
       {
         method: 'POST',
         headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/x-www-form-urlencoded;'
         },
         body: qs.stringify({
           'grant_type': 'password',
            'username': 'MyUserNameSettedInApi',
            'password': 'PasswordSettedInApi',
            'client_id': 'MyClientId',
            'client_secret': 'MyClientSecret',
         })
       })

【讨论】：

【解决方案3】：

我也遇到了同样的问题"{"error": "unsupported_grant_type"}"，我只是直接传递所有的body参数而不使用JSON.stringify({});它对我有用，在下面找到示例代码。

body: 'grant_type=password&username=MyUserName&password=MyPassword'

您只需要更新正文部分。

    fetch('MyApiUrl', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: 'grant_type=password&username=MyUserName&password=MyPassword'
  })
    .then(res => res.json())
    .then(token => console.log(token))
    .catch(err => console.error(err));

希望这会对你有所帮助。

【讨论】：