Question

我正在使用Ruby on Rails后端构建一个Ionic 3（Angular 4）应用程序。

我正在使用angular2-token和devise_token_auth进行用户和API调用身份验证，这些身份验证可以一起使用。

他们的工作方式很简单：他们在每个API调用标头上创建并跟踪某些字段（即auth-token，client，uid和expiry）。

它与电子邮件注册/登录完美配合。我现在想要为我的应用程序实现Instagram OAuth登录，这在常规的Angular Web应用程序中应该是没有用的，但是在Ionic中我无法控制路由或URL，因此要采取的策略是启动{ {1}}并在其上设置事件以检测它何时到达我的API回调网址。

基本上：

我在InAppBrowser

myapi.com/auth/instagram

Instagram登录，重定向到回调网址
InAppBrowser加载InAppBrowser并检测到它。

此时，我的后端已根据Instagram数据成功创建了一个用户。

问题是，我不知道如何在客户端处理这个问题。

当我使用电子邮件/密码登录时，myapi.com/omniauth/instagram/callback?code=57...所做的是angular2-token，请求标头包含POST /auth/sign_in和东西，然后处理它并将其存储以供后续调用。现在，OAuth流程一直存在auth_token实例中，超出了我的控制范围......

我真的很沮丧，因为我看到OAuth流在后端工作，而前端部分可以在InAppBrowser之外的常规Web应用上轻松完成。

我将复制一些前端和后端代码以提供更多上下文，希望这有助于理解问题

处理OAuth流程的前端：

InAppBrowser

后端，创建用户并处理回调URL的部分：

  public logInWithInstagram(): Promise<any>{
    var callbackURL = environment.token_auth_config.apiBase + "/omniauth/instagram/callback";
    var oauthURL = environment.token_auth_config.apiBase + "/auth/instagram";
    var parsedResponse = {};

    return new Promise(function(resolve, reject) {
      var browserRef = window.cordova.InAppBrowser.open(oauthURL, "_blank", "location=no,clearsessioncache=yes,clearcache=yes");
      browserRef.addEventListener("loadstart", (event) => {
        if ((event.url).indexOf(callbackURL) === 0) {
          browserRef.removeEventListener("exit", (event) => {});
          browserRef.close();
          var responseParameters = ((event.url).split("?")[1]).split("&");
          var parsedResponse = {};
          for (var i = 0; i < responseParameters.length; i++) {
            parsedResponse[responseParameters[i].split("=")[0]] = responseParameters[i].split("=")[1];
          }
          if (typeof(parsedResponse["code"]) !== 'undefined' && parsedResponse["code"] !== null) {
            // Successful Instagram OAuth, backend has already created the user by now
            resolve(parsedResponse);
          } else {
            reject("Problem authenticating");
          }
        }
      });
      browserRef.addEventListener("exit", function(event) {
        reject("The sign in flow was canceled");
      });
    });
  }

我真的很感激任何帮助，策略或想法。非常感谢你！

Answer 1

Angular2-token在alpha中，并且还没有处理返回到inAppBrowser的凭据。

我们最终分配了项目并在angular2-token包中添加了逻辑分支来处理问题。

它仍然有点笨拙（例如oAuthLogin还没有返回一个可观察的，你必须轮询登录成功），但它确实有效。

如果你想尝试一下，这个包就在这里：https://github.com/chadnaylor/angular2-token-ionic3

除了离子逻辑之外，它与angular2-token基本相同。希望我们可以将它合并到一次我已经清理了一下。

如果您想尝试自己调整一下，我们改变的位置如下：

browser.on('loadstop').subscribe((ev: InAppBrowserEvent) => {
        if (0 === ev.url.indexOf(this.atOptions.oAuthBrowserCallback)) {
          browser.executeScript({code: "requestCredentials();"})
            .then((credentials) => {
              // alert(JSON.stringify(credentials[0]));
              this.getAuthDataFromPostMessage(credentials[0]);

              let pollerObserv = Observable.interval(400);

              let pollerSubscription = pollerObserv.subscribe(() => {
                if(this.userSignedIn()){
                  pollerSubscription.unsubscribe();
                  browser.close();
                }
              });

            })
        }

      });

使用Ionic 3和Rails的OAuth（devise_token_auth）

1 个答案: