Question

我正在使用Fetch API触发组件中的implicit login flow for the Instagram API。

但是我的代码在其响应中返回force_login URL（这是200状态）。

当我从此处更改代码时，我只收到访问令牌：

  onLoginClick(){
    //https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token
    var resource = instagramAPI+"?client_id="+this.props.clientId+"&redirect_uri="+this.props.redirect_uri+"&response_type="+this.props.type;
    fetch(resource)
    .then(function(data){
      console.log("fetched the data!")
      console.log(data.url);
      //window.location.href=data.url;
    })
    .catch(function(error){
      console.log(error);
    })
  }

......对此：

  onLoginClick(){
    //https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token
    var resource = instagramAPI+"?client_id="+this.props.clientId+"&redirect_uri="+this.props.redirect_uri+"&response_type="+this.props.type;
    fetch(resource)
    .then(function(data){
      console.log("fetched the data!")
      console.log(data.url);
      window.location.href=data.url;
    })
    .catch(function(error){
      console.log(error);
    })
  }

为什么我需要添加window.location.href=data.url;行？为什么我无法在fetch上运行data.url并在响应数据中填充了网址？

Answer 1

原因是因为令牌不会出现在返回标头中的响应数据中。如果身份验证成功，Instagram会在标头中发出重定向。此重定向中包含访问令牌。

当您使用window.location.href时，您告诉浏览器执行该操作，它将转发到重定向，因此包含访问令牌。

如果您想要转发令牌，请查看data.headers。我没有使用JS来获取，所以我不确定标题的确切名称。可能＆＃34;重定向＆＃34;。尝试：

console.log(data.headers);

使用FetchAPI时，隐式OAuth不会重定向或提供回调网址

1 个答案: