Flutter login/Registration using secure server calls from ASP.NET using OAUTH

There are lots of articles on providing Login/Register services using back ends like Firebase. This article uses ASP.NET Membership services as an alternative back end where OAuth Tokens are used to secure calls. Now much of the login/registration is baked into ASP.NET so the developer does not have to replicate code that has been written many times. There is nothing wrong with using Firebase for back end services but many of us have a .NET background that we would like to use with Flutter. Then we have a great combination of Flutter for our UX and .NET services on the background. see my article

Now these membership services store the user information in a SQL database but as it uses Entity Framework all the SQL operations are abstracted into C#. The default services are not secure but membership services include OWIN which implements OAUTH a token based authorization framework. It should be noted that you can use third party logins such as Facebook also.This article will examine key parts of the server side and Flutter code that allows use to use the Membership services. Now I will not dive too deep into the Flutter code as my code is very similar in structure to many other firebase based articles such as .

Of course I have to describe the .NET service so lets do that now. I will assume a working knowledge of Visual Studio , Entity Framework and of course C#. Now we open up a new ASP.NET Web Application as we are using RESTFUL services. I am using the traditional ASP.NET which can only be hosted on Windows and not ASP.NET Core that can be run on Macs and Linux. so after hitting New we should see:

Then we have hit the Change Authentication button and we see :

Now make sure that the Individual User Accounts is checked and hit the OK. Now we have the basis of a ASP.NET web api service with all the MemberShip services including OAuth baked in and the SQL database setup for us. If I hit the Visual Studio Run button the app will be built and a the new web application launched using the local Web server as we are working against LocalHost for this article. we will now see :

Note that we are opening app on http://localhost:64584/. This will be come important later when we configure out Flutter client. Now if click the API button we will see the services (web api calls) that are hosted by the application. So we see something like :

API methods

At this point I will switch to my finished server app called FlutterBackEnd. I should mention that the SQL Database is also generated for us and looks like in SQL server Object Explorer:

A knowledge of SQL is nice but not really necessary as the code has been generated to use Entity Framework. I assume working knowledge of this Object Relational tool. Now the generated application implements the Model View Control (MVC) and the key model that is generated for us is ApplicationUser that extends IdentityUser and as a result has properties like Email , PhoneNumber and hashed password. The ApplicationUser class is found in the IdentityModels.cs file where you will also find the key DBContext.

public class ApplicationDbContext:IndentityDbContext<ApplicationUser>

Again I am assuming knowledge of the Entity Framework but the context provides the glue between the object world of C# and SQL and will map the ApplicationUser to the User table in the database.

All the Web API methods that we saw in API methods above are generated for us in AccountController.cs. we will only look at Register and GetUserInfo. below I show the key parts of this C# file :

On line 1, the [Authorize] attribute is what secures our API methods. If this is not present then all the methods are available to anyone. if it is present then the only calls that contain the OAuth token in the HTTP header can access the method.

Line 2 contains the RoutePrefix that will apply to all the methods in the controller. e.g web api post api/account/register when received by the ASP.NET will result in the above register method being called. Note it will be always available as it is decorated with AllowAnonymous and GetUserInfo does not have this decoration so it is secure.

So I could show how this works from any HTTP service such as PostMan but lets jump right into Flutter. as we are running on Windows 10 I have to use the an Android emulator. Now there is an issue in reaching LocalHost from the Android emulator as we need to do as ASP.NET only runs on Windows. it turns out that the emulator will map 10.0.2.2 to localhost so that is the target host we need to use in forming our HTTP requests in Flutter. My simple login looks like:

so when we press the Create Account Button the following Dart code is called:

So this Register method is async as we are returning a Future and received a user object that contains the input email and password. we first call jsonEncode to create the JSON string we need to pass to .NET. Then form our target Url that is ‘http://10.0.2.2:<your port>/api/Account/Register'. Again note the use of 10.0.2.2 to allow the emulator to Post to LocalHost. Then we do our Post placing the above JSON in the Post content. This results in the Register method being called in the Account controller in our .NET app as

The input model contains the username and password sent by the content of the Flutter POST and I use this to populate the same fields in my ApplicationUser model. Then call the create method of UserManager to create a new user for jj@j.com. of course this adds a new row to the User table.

so when we issue a POST to the register method a new account will be created as a new row is added to our user table. the password that we use will be hashed so the new row will look much like below except the email is jj@j.com

So now you would expect to call a Login method in Account Controller but you would be wrong as there is none. We use the Token endpoint that is generated for us in our .NET app and pass it the username and password . If our the credentials are validated then an OAuth token will be returned to our Flutter code. So lets see how this works in my signin method.

in line 66 I build the URL to make our web api call and set the body to ‘UserName=’ + email + ‘&Password=’ + password +
‘&grant_type=password’. This is a OAuth requirement! Note the path is set to the Token endpoint.

Then in line 77 I make my POST to the Token endpoint . The .NET code will authenticate my credentials and if it passes return the oAuth token that I save in a Global variable {line 87)for future use as all secure methods need this.

to see how this works I have added the GetUserInfo method to my C# controller and it looks like:

Now this method is secure so we must include the oAuth token in our Dart Http call as shown below:

line 148 is key as we must pass the token preceded by the string ‘Bearer ‘ as a header to our .NET method. Then and only then will our Get succeed.

I have developed a series of videos on this subject on my blog if you prefer videos. Also the flutter project and .NET server code are on GitHub.Hope this helps in building the case that .NET can be a great back end for Flutter apps especially for developers like me that embrace that world also.