无效的Redirect_uri对于使用react native的instagram登录 [英] Invalid Redirect_uri For instagram login using react native

问题描述

我正在将 react-native-instagram-login 用于React Native.

I am using react-native-instagram-login for React Native.

这是我的代码

<InstagramLogin
  ref={instagramLoginRef}
  appId='***********'
  appSecret='*******************'
  scopes={['user_profile', 'user_media']}
  onLoginSuccess={(data) => console.log("Success")}
  onLoginFailure={(data) => console.log("Fail " +  JSON.stringify(data))}
/>

我遇到以下错误

{"error_type": "OAuthException", "code": 400, "error_message": "Invalid redirect_uri"}

在Instagram开发者控制台中，我应该添加什么作为重定向Uri，因为这不是网站，而是React Native应用.

In Instagram Developer Console what should I add as redirect Uri as this is not a website but an react native app.

推荐答案

来自

有效的OAuth重定向URI

输入您网站的URL.通常这 将是一个专用的URI，可以捕获重定向查询字符串 参数，但是对于本教程，您网站的URL会很好.

Enter your website’s URL. Normally this would be a dedicated URI that can capture redirect query string parameters, but for this tutorial your website’s URL will be fine.

例如:https://socialsizzle.heroku.com/auth/

输入URL后，保存更改并再次检查URL；我们 可能会根据您的网址附加一个斜杠 结构体.将完整的URL复制到某处，因为您将需要它 后续步骤以获取授权码和访问令牌.

After you enter a URL, save your changes and check the URL again; we may have appended a trailing forward slash depending your URL structure. Copy the complete URL somewhere since you will need it in later steps to get authorization codes and access tokens.

在此示例代码，我们会看到redirectUrl='https://www.google.com'，这意味着您可以设置任何所需的内容.这对于收集登录数据统计信息并具有用于记录日志的后端端点很有用.

At this example code, we see the redirectUrl='https://www.google.com', which means that you can set whatever you want. It is useful for collecting login data statistics and to have a backend endpoint for logging.

<InstagramLogin
  ref={instagramLoginRef}
  clientId="931cca1d0c154de3aafd83300ff8b288"
  redirectUrl="https://google.com"
  scopes={['basic']}
  onLoginSuccess={token => this.setState({ token })}
  onLoginFailure={data => this.setState({ failure: data })}
/>

也请查看此问题完成后无响应" 表示redirectUrl必须以www开头，因为react-native-webview中存在错误.同样在此问题上，您将看到用户示例代码具有Firebase函数端点URL redirectUrl="https://us-central1-xxx.cloudfunctions.net/url_get&response_type=token"，因此它使用Firebase记录/反馈登录请求.

Also have a look at this issue "no response when completed" which it says that redirectUrl has to start with a www because of a bug in react-native-webview. Also at this issue, you'll see that the user example code has a Firebase function endpoint URL redirectUrl="https://us-central1-xxx.cloudfunctions.net/url_get&response_type=token" so it uses Firebase to log/feedback login requests.

最后，在 Facebook开发者控制台中，您只需输入有效的OAuth重定向URI :

Finally, in Facebook Developer Console, you just enter the Valid OAuth Redirect URIs:

，这意味着您输入接受API重定向的URL；它更像是一种安全机制，但是您必须在此处输入重定向URL，否则API将无法正常工作.

which means that you enter which URLs you accept for the API to redirect; it's more like a security mechanism but you have to enter your redirect URL there, or else the API won't work.

这篇关于无效的Redirect_uri对于使用react native的instagram登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！