Instagram API 在没有警告的情况下为本地主机重定向 URI SSL

Instagram API Redirect URI SSL for localhost without the Warning

Instagram API 要求重定向 uris 具有 SSL 证书(HTTPS 连接)。

我将 Instagram API 用于我的移动应用程序,OAuth 响应应首先调用应用程序中的过程。

我可以创建一个服务器来在本地(在 127.0.0.1 上)捕获此调用,但是对于证书,我只能创建一个自签名的。问题是浏览器不信任它,并在一开始就警告用户潜在的危险,这对用户体验来说是不可接受的。

我在 Whosebug 上看到了几个类似的问题,但不幸的是,我无法理解他们是否解决了我的问题。

如何避免这个警告?

基本上,即使他们对 https 发出警告,您也可以使用 api。我遇到了同样的问题,但我只是尝试 运行 https 端口上的应用程序而不是 localhost 上的 http 并且它有效。所以,答案是您只需要 运行 在 https 上提交您的应用程序。

我有针对我的具体情况的解决方案;我将 Flutter 用于移动应用程序。但总的来说,您也可以在其他情况下找到类似的东西。

最初,我使用 url_launcher 包启动 Instagram 授权 window。基本上,对于 iOS 它会在应用程序内启动 url,但在 Safari Web 视图中。这样我就无法控制这个网络视图中的流程。所以,我想做的是在应用程序中的 运行 本地服务器完成授权时捕获对 127.0.0.1 的请求。它确实有效,但由于自签名证书而发出有关安全隐患的警告,因为 Instagram 要求使用 https127.0.0.1 不能拥有受信任的证书。

相反,现在我使用 webview_flutter 通过自定义 WebView 在应用程序内启动 Instagram 授权 window。它提供了更大的灵活性,但最重要的是我可以跟踪导航。所以现在,Instagram 将我的用户重定向到我网站上不存在的页面,该页面具有受信任的证书(但这并不重要),但上述 WebView 可以检测到此重定向,解析 URL 以检索需要的代码并通过关闭此 Web 视图来防止实际重定向。所以,最终,我在应用程序中获得了想要的代码,所以我可以将它与额外的用户 ID 参考一起发送到我的后端。

所以,基本上,工作流程如下所示:

  1. 用户点击应用中的按钮连接 Instagram 帐户;
  2. 该应用启动自定义网页视图并打开 Instagram 授权页面;
  3. 授权后,Instagram 将用户重定向到虚拟 URL,并将所需代码作为查询参数;
  4. 自定义 Web 视图检测到此重定向;
  5. 从 URL;
  6. 中检索代码
  7. 关闭网络视图(returns 到主应用程序屏幕)。