Ionic 2 如何使 InAppBrowser 和其他插件在浏览器中运行时工作

Question

我正在 Ionic 2 中创建一个应用程序，它使用现有网站的 Web API。要使用这个 API，我必须通过以下方式进行身份验证（类似于 Facebook 登录）：

• 我在 InAppBrowser 组件中调用 API 登录页面，发送正确的密钥和返回 URL。
• 用户在显示的表单中输入登录名和密码，API 将对其进行验证并进行身份验证。
• API 调用返回 URL 并传递授权令牌。
• 我将此重定向“劫持”到 InAppBrowser“loadstart”事件中的返回 URL，并提取并存储授权令牌。
• 在以下对 API 的调用中，我在标头中发送授权令牌。

这在模拟器中一切正常，但在浏览器中不起作用（使用离子服务），因为当我调用 InAppBrowser 时，它实际上调用 window.open，并且事件不起作用。我无法检测到在打开的窗口中进行的重定向操作。

我想在浏览器中进行此操作，因为最好在浏览器中调试应用程序。我的第一个想法是发送“http://localhost:8001”作为返回 URL，但我找不到在 ionic 应用程序中捕获令牌参数的方法。

有谁知道我如何捕获此参数或任何其他方式使此登录在浏览器中工作？它仅用于开发和调试目的，因此严格的安全性不是问题（我可以在生产版本中注释掉任何不安全的代码）。

---

编辑：Hayden Braxton 的答案没有解决我的问题，但由于它是因为我的应用程序独有的东西，并且它确实可以帮助那些想要使插件工作的人，所以我将其保留为选定的答案。

除此之外，我将分享我找到的问题解决方案，以防它可以帮助任何人。其实很简单：

• 我传递“http://localhost:8001”作为 API return_uri 参数
• 检查登录名和密码后，API 将重定向到 http://localhost:8001?token=MY_AUTH_TOKEN。
• 这将重新加载应用程序并再次调用登录页面。
• 在登录页面中，我调用

  this.platform.getQueryParam("token");

  来获取令牌。

Answer 1

添加

"browser": "ionic-app-scripts serve --iscordovaserve --sourceMap source-map  --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build",

到 package.json 的脚本部分。然后不做离子服务，而是运行

npm run browser

我们在我工作的地方使用 ionic2 来开发应用程序，这是我们经过一番研究后得出的结论。

使用此功能之前，您需要添加浏览器平台。您可以通过以下方式完成此操作：

ionic add platform browser

如果已经添加了浏览器平台，为了安全起见，请从平台目录中删除浏览器目录，然后运行添加平台命令。