Callback url in angularjs with parameters for forgotpassword

Question

Tried scouring the internet to find the solution but had no luck for a couple of days now. I am trying to implement a forgot password feature with web api but am getting stuck with the call back after a reset email link is sent to the user.

Currently in my controller I have

var callbackUrl = new Uri(Url.Link("ResetPasswordRoute", new { userId = cUser.Id, code = code }));

This callback gets sent to the user's email. I would want for the user to click on this link and have a reset page open for him which also passes the userid and code. So a view for entering a new password. Once they submit I would expect it to go into my httpGet resetPassword method shown below with the code, userid, and new pass shown below.

 [HttpGet]
    [Route("ResetPassword", Name = "ResetPassword")]
    public async Task<IHttpActionResult> ResetPassword(string userId = "", string code = "")
    {
        if (string.IsNullOrWhiteSpace(userId) ||        string.IsNullOrWhiteSpace(code))
        {
            ModelState.AddModelError("", "User Id and Code are required");
            return BadRequest(ModelState);
        }
        IdentityResult result = await _repo.ResetPasswordRoute(userId,code);

        if (result.Succeeded)
        {
            return Ok();
        }
        else
        {
            return GetErrorResult(result);
        }
    }

So the question is that I'm really confused on how I set up ResetPasswordRoute to push for a View within webapi when the link is clicked. As well as how angularjs would catch the parameters since the url is a hatched url and since it would require another routing page.

I have created a route:

}).when("/pages/reset", {
            templateUrl: "app/views/pages/reset-password.html"

and I realized that I can't really use $routeparameters. I've read most of the guides but all are for MVC which have a return View() based on string code != null and webapi doesn't use View(). Any help would be appreciated.

Answer 1

I'm not familiar with asp.net, but very familiar with Angular and REST APIs. Hopefully this helps...

In your Angular app, you have a link for a user to reset their password. This should use $http to call to your web API, which generates a token of some sort and emails the user.

It should be up to the API to generate the URL, which will include route- or query parameters with the userId and the reset token. Something like:

https://example.com/reset-password/123456/ABCDEF

-OR-

https://example.com/reset-password?userId=123456&token=ABCDEF

Your Angular app should have a route for this. Assuming you are using ngRoute, your route config would look something like this:

.when('/reset-password', {
  controller: 'ResetPasswordController',
  controllerAs: 'reset',
  templateUrl: 'path/to/template.html'
})

Your controller for this route should look something like this:

function ResetPasswordController($http, $routeParams) {
  var reset = this;
  var userId = $routeParams.userId;
  var token = $routeParams.token;

  reset.submit = function(newPassword) {
    var data = {...};
    var config = {...};
    $http.post('https://api.example.com/reset-password', data, config)
      .then(function onSuccess(res) {...}, function onError(err) {...});
  };
}

And the template for your reset page would call reset.submit() when the password form is submitted.

At this point, you have the userId, reset token and new password. You would need to decide if you are passing this information in an auth header, or the request body, or some combination of the two. You should also use the withCredentials option in your $http config.

This web API endpoint would then need to validate the token and userId, and if valid reset the user's password.

If the API responds with a status code in the 200's, you can redirect the user to the login page. Otherwise, handle the error.

Does this answer your question?