Web app with REST api data layer

Question

I need to have a RESTful API that I can call from an MVC5 web app to initially do just simple authentication/authorization against local sql server exclusively. I need to be able to pass login credentials from the web app to the api to get the header token etc. Then I need to be able to check the token for any requests to pull data or save data back to the db. I'm using the tutorial sample app Here right now until I understand the functionality.

the web side is just a form with a button and some jquery to catch the submit button being clicked:

$(document).ready(function () {

    var register = function() {
        var dataa = {
            Email: "[email protected]",
            Password: "password",
            ConfirmPassword: "password"
        };

        $.ajax({
            type: 'POST',
            url: 'api/Account/Register',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(dataa)
        });
        return false;
    }

    $('#btnRegister').click(register);
});

and then here is the controller on the api itself:

[Authorize]
[RoutePrefix("api/Account")]
public class AccountController : ApiController
{
    [AllowAnonymous]
    [Route("Register")]
    public async Task<IHttpActionResult> Register(RegisterBindingModel model)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        var user = new ApplicationUser() { UserName = model.Email, Email = model.Email };

        IdentityResult result = await UserManager.CreateAsync(user, model.Password);

        if (!result.Succeeded)
        {
            return GetErrorResult(result);
        }

        return Ok();
    }
}

And it's giving me a 404 error now when I try to click it.

Creating a Web Application with Visuat Studio by enabling Web API, MVC and Authentication (Individual USer Accounts) gives you a project that has basically everything and it's quite a starting point. And there are a lot of tutorials on the Web about Web API and Web API security. Apart from that your question is too broad to answer, you need to focus on what does not work for you. — infiniteRefactor
– infiniteRefactor, Commented Oct 21, 2016 at 14:24
So the problem I have is I create a new Web API with the Individual User Accounts and it has it all setup, but I'm struggling to understand how to make just a simple login page that communicates the username/password to that api. The tutorials I've found seem to help with either the web facing app or the api's authentication but not necessarily the connection between the two. For me it's just I need to better understand the concepts, which is why I left it vague, I don't know the right questions to ask. — Dylan Schmidt
– Dylan Schmidt, Commented Oct 21, 2016 at 14:30
Stack Overflow isn't really meant to provide tutorials (nor links to tutorials). It's really more about help with code. If you've gotten far enough that you have code to share, that's probably the best route. — Heretic Monkey
– Heretic Monkey, Commented Oct 21, 2016 at 15:14
Updated to add code for a more specific question based on the example suggested by @infiniteRefactor — Dylan Schmidt
– Dylan Schmidt, Commented Oct 24, 2016 at 14:51

infiniteRefactor · Accepted Answer · 2016-10-21 14:51:14Z

2

Authentication on WebAPI is based on token based OAuth authentication.

There is an authentication URL (/Token for the default created project) and when you make a POST request to that URL with username and password you get a token in response. Your client application should store this token and attach it to each request in order to get Authorized.

Under the hood this token generation and token recognition process is provided by OWin components that are attached to you application pipeline. You can study StartUp.Auth.cs for the initialization of these components.

Your login form has nothing special. It will just post username and password to authentication URL.

How you'll store the token on client side may vary according to your design. Most preferred ways to store the token are using a cookie or a specific token storage in Javascript.

You can check out this tutorial for an example and discussion on basics.

answered Oct 21, 2016 at 14:51

infiniteRefactor

2,14017 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dylan Schmidt Over a year ago

So I have the sample app for that tutorial loaded, but it's all in 1 project and for my purposes I need the api and the web app separate. So I add a new project to the solution and copy over the home controller and the index view, but it's using

Dylan Schmidt Over a year ago

<form data-bind="submit: register"> <form data-bind="submit: login"> so how do I alter that to hit the api?

Collectives™ on Stack Overflow

Web app with REST api data layer

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related