How to get URL Scheme myapp:// to work with Instagram API redirect uri
我是移动开发新手。
我有一个具有 Instagram 身份验证的应用程序。
我的 URL 方案正在运行。当我打开 Safari 并键入
当我尝试在 Instagram API 中添加
如何让这个重定向 URL 起作用?作为 Instagram 重定向 URI,我应该拥有什么?
提前谢谢你。
首先,这个问题只存在于 ios,而不是 android,因为在 android 中我们可以保存这样的 url 方案: AndroidManifest.xml 文件中的
对于 ios,我们需要这样的东西:
就我而言,当我遇到类似问题时,以下是我的应用程序的状态:
- 我正在使用 react-native 的 Linking api 在浏览器中打开 Instagram 登录页面;
-
使用正确的登录凭据提交表单后,我可以在浏览器中看到一个带有 access_token 的新页面,如下所示:
http://myApp/#access_token=asa2dcc…’ - 但后来它从未从浏览器重定向回我的应用程序
所以,我能够获得令牌,但它没有自动重定向回我的应用程序。所以我手动处理了这个重定向部分,如下所示:
-
首先,我使用了 react-native 的 WebView api 而不是
Linking ;它的作用是在您的应用程序中而不是在浏览器中打开一个 Web 视图,因此您可以完全控制应用程序内的导航 - 我没有在 instagram/developer 网站上为 ios 添加任何重定向 url,我为 android 添加的那个就足够了
- 解决这个问题的关键是得到这个道具,我可以在其中获取带有 access_token 的 url,以便可以将其取出并用于进一步的 api 调用
-
我使用 react-navigation 导航到带有 WebView 的屏幕,还传递了一个回调,该回调将接收一个令牌,该令牌又可用于进行其他 api 调用:
1
2
3
4
5
6
7
8navigation.navigate(‘InstaWebView’, {
callback: (err, access_token) => {
if (!access_token) {
return Alert.alert(‘Error in fetching insta token’);
}
// make api calls
},
}); -
InstaWebView 组件从渲染函数返回以下 WebView:1
2
3
4
5
6
7
8
9
10
11
12<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();
}}
/>
查看此代码以获得更多帮助
希望这对某人有帮助!
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/268639.html