如何使用 Ionic 自定义身份验证处理登录错误? [英] How to handle login errors with Ionic custom auth?

问题描述

我正在尝试使用 Ionic Cloud 的身份验证服务实现用户登录，并且不希望在 AppBrowser 中显示 Cordova.如果出现身份验证错误(例如密码错误)，我希望错误处理程序会触发，但由于某种原因，这似乎从未发生过.

I'm trying to implement a user login with Ionic Cloud's Auth Service, and would prefer to no show the Cordova inAppBrowser. In case of an authentication error (e.g. wrong password), I would expect the error handler to fire, but for some reason this never seems to be the case.

我的登录组件中的方法包含这个:

The method in my login component contains this:

let loginData = {
  email: this.email,
  password: this.password
};
let loginOptions: AuthLoginOptions = {
  inAppBrowserOptions: {
    hidden: true
  }
};
this.auth.login('custom', loginData, loginOptions).then(() => {
  console.log('login success');
}, (err) => {
  console.log('login error', err); // <-- this never gets executed.
});

我确保我的身份验证服务器响应 HTTP 状态 401 和包含错误属性的 JSON 正文.这是代码(PHP，Laravel 3):

I made sure that my authentication server responds with an HTTP status of 401 and a JSON body that contains an error property. This is the code (PHP, Laravel 3):

  public function get_login()
  {
    try {
      $redirect_uri = CustomAuthentication::process(
        $_GET['token'],
        $_GET['state'],
        $_GET['redirect_uri']
      );
      return Redirect::to($redirect_uri);
    } catch (Exception $e) {
      return Response::json(array(
        'ok' => false,
        'error' => $e->getMessage(),
        'code' => $e->getCode()
      ), 401);
    }
  }

我在 github 上发现了两个似乎相关的问题:

I found two issues on github that seem relevant:

• https://github.com/driftyco/ionic-cloud/issues/53
• https://github.com/driftyco/ionic-cloud-angular/issues/22

显然，当 inAppBrowser 被隐藏时，目前没有办法让它工作.还是有其他选择?

Apparently there is no way to get this to work at the moment, when the inAppBrowser is hidden. Or is there another option?

如果目前没有办法实现这一点，还有什么替代方案，以便为用户提供良好的登录流程，为他们提供有意义的错误消息，以防止登录尝试失败?

In case there's no way to achieve this for now, what would be an alternative, in order to provide the users with a nice login flow, that shoes them a meaningful error message for unsuccessful login attempts?

我应该尝试使用可见的 inAppBrowser 来实现吗?如果是这样，我在哪里可以找到文档或示例?

Should I try to implement this with a visible inAppBrowser? If so, where can I find docs or an example?

不幸的是，官方文档并没有提供太多信息(http://docs.ionic.io/services/auth/custom-auth.html#login)和我发现的教程已经过时了.

Unfortunately the official docs don't tell much (http://docs.ionic.io/services/auth/custom-auth.html#login) and the tutorials I found are outdated.

推荐答案

我也遇到了同样的问题！！

I had the same issue!!

在您的服务器中，当出现身份验证错误时，您必须重定向而不是呈现 JSON.

In your server, you have to redirect when there is an authentication error instead of rendering a JSON.

类似这样的:

public function get_login()
  {
    try {
      $redirect_uri = CustomAuthentication::process(
        $_GET['token'],
        $_GET['state'],
        $_GET['redirect_uri']
      );
      return Redirect::to($redirect_uri);
    } catch (Exception $e) {
        $redirect_uri = $_GET['redirect_uri'] . '&' . http_build_query([
            'error' =>  $e->getMessage(),
            'state' => 401,
            'code' => $e->getCode(),
        ]);
        return Redirect::to($redirect_uri);
    }
  }

(对不起，如果代码有错误，我不知道 Lavarel ;))

(Sorry if there is an error in the code, I don't know Lavarel ;))

此代码基于 https://github.com/ionic-team/ionic-cloud/issues/53#issuecomment-296369084

在 Ruby on Rails 世界中:

In the Ruby on Rails world:

error_params = { error: error, state: 401 }
url = "#{params[:redirect_uri]}&#{error_params.to_query}"
redirect_to url

在我对服务器进行此更改后，离子应用程序立即开始工作.

Immediately after I made this change on my server, the ionic application started to work.

这篇关于如何使用 Ionic 自定义身份验证处理登录错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！