How to handle login errors with Ionic custom auth?

问题:

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

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

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

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?

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

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.

回答1:

I had the same issue!!

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

Something like this:

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

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

This code is based on https://github.com/ionic-team/ionic-cloud/issues/53#issuecomment-296369084

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.

回答2:

anyErrors : any;

in the controller.ts file

this.auth.login('basic', details).then(() => {
    this.isUserLoggedIn = true; // <------ Debug here (1)
   this.currentUserData = this.user;
   console.log(this.currentUserData);
    return this.currentUserData;
}, (err: IDetailedError) => {
this.anyErrors= err; // map the error here

});

in the html file

<div >
      <ion-row >
        <ion-item  >
          <ion-label text-wrap color=red color="primary" >
    {{anyErrors}}
    </ion-label>
  </ion-item>
      </ion-row>
    </div>

So any error in ionic .ts will flow the the html page I use this for the login page. i.e below the login submit button, i have the above div code. if there is no error the msg will not display, if there is an error msg it will display.