在 Ionic 中为外部 API 处理重定向 Uri

Question

所以我已经构建了一个 web 应用程序，并在 Ionic 中制作了一个相应的移动应用程序。我想制作一个渐进式网络应用程序，因为它会让我的生活更轻松，但我想 Apple 还不支持这个。

（ps我对这个东西很陌生）

所以我使用 id.me api 来验证军事服务，它在重定向 uri 中发回一个访问令牌以发出 api 请求。

有两种方法可以做到这一点，通过我的服务器或通过客户端。

这是他们的网络流 https://developer.id.me/documentation#oauth-overview

这就是我迷路的地方 Ionic ....

因此，要启动 webflow，我必须将用户发送到 id.me 的授权端点，我将在 inappbrowser 中执行此操作

https://api.id.me/oauth/authorize?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token&scope=SCOPE

id.me 在重定向时发回访问令牌...

从那里，我可以获取令牌，将其保存到本地存储并关闭 inAppBrowser。我不知道在哪里设置uri？是本地主机吗？当您在您的平台上构建 Ionic 时，是否在本地服务器上运行？

我会做这样的事情吗？

angular.module('myApp', ['ionic', 'ngCordova']).controller('AppCtrl', 

function($rootScope, $ionicPlatform, $cordovaInAppBrowser) {
    var callback = 'http://localhost:8100/callback';
    $scope.idAuth = function() {
      $ionicPlatform.ready(function() {
        var options = {
          location: 'yes',
          clearcache: 'no',
          toolbar: 'yes'
        };
        $cordovaInAppBrowser.open('https://api.id.me/oauth/authorize?client_id=CLIENT-ID&redirect_uri=callback&response_type=token&scope=SCOPE', '_blank', options)
      });
    };


    $rootScope.$on('$cordovaInAppBrowser:loadstart', function(e, event) {
      //and this function is called, so you do something like
      if(event.url === callback){;
        let token = event.url.match(/\#(?:access_token)\=([\S\s]*?)\&/)[1];
        $window.localStorage.setItem('token', token);
        $cordovaInAppBrowser.close();
      }
    });

现在，如果该回调 uri 被击中，它会运行该函数吗？

还有，这就是我迷失的地方。我知道这将如何在本地开发中工作，但是当您构建并将其放在设备上时，该回调 uri 是否仍然存在？Ionic 是否在设备本身的本地服务器上运行？

Answer 1

Ionic 正在监听http://localhost/[YourCallBackURI]。默认情况下，它在设备上的端口 80 上运行，除非您以其他方式更改配置。在模拟器模式下运行时会使用其他端口。