使用 Ionic 3 和 Rails 的 OAuth (devise_token_auth)

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，所以要采取的策略是启动一个 @ 987654327@ 并在其上设置事件以检测它何时到达我的 API 回调 URL。

基本上：

1. 我在InAppBrowser 中加载myapi.com/auth/instagram
2. Instagram 登录，重定向到回调 URL
3. InAppBrowser 加载 myapi.com/omniauth/instagram/callback?code=57... 我检测到它。

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

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

当我使用电子邮件/密码登录时，angular2-token 所做的是POST /auth/sign_in，请求标头包含auth_token 和内容，然后处理它并将其存储以供后续调用。现在 OAuth 流程存在于 InAppBrowser 实例中，不受我的控制...

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

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

处理 OAuth 流程的前端：

  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");
      });
    });
  }

Backend，创建用户和处理回调URL的部分：

class Users::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCallbacksController

  def redirect_callbacks    
    @user = User.from_omniauth(request.env["omniauth.auth"])

    if @user.persisted?
      sign_in_and_redirect @user
    else
      session["devise.instagram_data"] = request.env["omniauth.auth"]
      redirect_to new_user_registration_url
    end

  end

  def failure
    redirect_to root_path
  end
end

我非常感谢任何帮助、策略或想法。非常感谢！

Answer 1

Angular2-token 处于 alpha 阶段，尚未处理返回给 inAppBrowser 的凭据。

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

它仍然有点麻烦（例如 oAuthLogin 还没有返回 observable，您必须轮询登录成功），但它可以工作。

如果您想尝试一下，包就在这里：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();
                }
              });

            })
        }

      });