如何获取 URL Scheme myapp:// 以使用 Instagram API 重定向 uri答案

【问题标题】：How to get URL Scheme myapp:// to work with Instagram API redirect uri如何获取 URL Scheme myapp:// 以使用 Instagram API 重定向 uri
【发布时间】：2017-05-14 22:11:58
【问题描述】：

我是移动开发新手。

我有一个具有 Instagram 身份验证的应用程序。

我的 URL 方案正在运行。当我打开 Safari 并输入 myapp:// 时，它会打开应用程序。

当我尝试在 Instagram API 中添加 myapp:// 作为重定向 URL 时，它会出错并显示 Enter a valid website。

如何让这个重定向 URL 起作用？作为 Instagram 重定向 URI，我应该拥有什么？

提前谢谢你。

【问题讨论】：

我也陷入了困境。仍在考虑另一种解决方法.... Instagram 现在只接受带有 http 前缀的 url。

标签： android ios react-native

【解决方案1】：

首先，这个问题只存在于 ios，而不是 android，因为在 android 中我们可以保存这样的 url 方案：http://myApp 在 AndroidManifest.xml 文件中，它是https://www.instagram.com/developer/@
对于 ios，我们需要这样的东西：http//myApp://，它在 safari 中运行良好，但不是 instagram 表单中的有效 url

就我而言，当我遇到类似问题时，我的应用程序的状态如下：

我正在使用 react-native 的 Linking api 在浏览器中打开 instagram 登录页面；
使用正确的登录凭据提交表单后，我可以在浏览器中看到一个带有 access_token 的新页面，如下所示：http://myApp/#access_token=asa2dcc...'
但它从未从浏览器重定向回我的应用程序

所以，我能够获得令牌，但它没有自动重定向回我的应用程序。所以我手动处理了这个重定向部分，如下所示：

首先，我使用了 react-native 的 WebView api 而不是 Linking；它的作用是在您的应用程序中而不是在浏览器中打开一个 Web 视图，因此您可以完全控制在应用
我没有在instagram/开发者网站上为ios添加任何重定向url，我为android添加的就足够了
解决这个问题的关键是得到这个prop，我可以在其中获取带有access_token的url，以便可以提取它并用于进一步的api调用

我使用react-navigation 通过 WebView 导航到屏幕，还传递了一个回调，该回调将接收一个令牌，而令牌又可用于进行其他 api 调用：

navigation.navigate('InstaWebView', {
  callback: (err, access_token) => {
    if (!access_token) { 
      return Alert.alert('Error in fetching insta token');
    }
    // make api calls
  },
});

InstaWebView 组件从渲染函数返回以下 WebView：

<WebView
      ref={WEBVIEW_REF}
      style={{ flex: 1 }}
      onNavigationStateChange={
          this.onNavigationStateChange.bind(this)
      }
      source={{ uri: instaUrl }}
      onError={() => {
        Alert.alert('Error in loading WebView..Please try again');
        return navigation.goBack();
      }}
    />

查看this code 以获取更多帮助

希望这对某人有所帮助！

【讨论】：