Login And SignUp In Xamarin.Forms

Introduction

Login

Login is a process of logging in to an application, database, or device etc. Most of the login pages require an email and password to be entered by the users.

SignUp

 

SignUp is a process of signing in to an application. Another term used for SignUp is registration. A user can provide his/her credentials to register himself/herself into the application. A signup form requires a username, email, password, DOB, gender and other such details for registration.

 

Procedure

1. First of all, create a new Web project. In that project, add a class in Models. For this, go to the Solution Explorer, right click on the model -> add -> class. Give a suitable name to that class say “User”. In user.cs, add the following by writing property and double tap on it. Set the datatype and property for that.
   

   public class User
        {
           public int Id { get; set; }
           public string Email { get; set; }
           public string Password { get; set; }
         }
   }

2. Now, build the solution before adding a Controller to that model class. After building add a Controller. For this, go to the Solution Explorer, right click on controller->add->controller. Add MVC 5 with views using entity frameworks using same name as in model class click on add. A controller is added into your solution. Now run your solution. Type http://localhost:61525/Users/Create on browser after creating you will be able to edit, create new, delete etc.
   
   
3. For webApi add a controller again by following same procedure and select WebApi 2 controller with actions using entity frameworks. Using same name as used for previous controller. A new controller will be added named “User1conroller”. Run your solution. Type http://localhost:61525/api/Users1 this on your browser. You will see,
   
   Output

 

Procedure for combining Login services to this WebAPI

1. Go to your computer’s task bar. Right click on Visual Studio and open a new project. Select cross platform. Right click on your project in solution explorer and add a class with same name “User”. Add same properties to that class.
   

   public class User
           {
           public int Id { get; set; }
           public string Email { get; set; }
           public string Password { get; set; }
        }
   }

2. In MainPage.Xaml Design your Login page’s front end. Add the following piece of code:
   

   <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
           <Entry Placeholder="Email" x:Name="Email"/>
           <Entry Placeholder="Password" x:Name="Pass"/>
           <Button Text="Login" x:Name="Login" Clicked="Login_Clicked"></Button>
   </StackLayout>

3. Go to solution explorer add a folder of name ServiceHandler and add a class to that folder of name LoginService. Add following code,
   

   RestClient<User> _restClient = new RestClient<User>();
   Public async Task<bool> CheckLoginIfExists(string email, string password)
      {
         var check = await _restClient.checkLogin(email, password);
         return check;

   Certain type of errors occur. If you take your pointer to Task<bool> a flash bulb appears click on it and add a threading method.

4. Now add a folder by following same method with name RestApiClass and add a class in it named RestClient. Add following piece of code,
   

   classRestClient < T > {
       Private
       const string MainWebServiceUrl = "https://jammovies.azurewebsites.net/";
       Private
       const string LoginWebServiceUrl = "https://jammovies.azurewebsites.net/api/UserCredentials/";
       Public async Task < bool > checkLogin(string email, string password) {
           var httpClient = new HttpClient();
           var response = await httpClient.GetAsync(LoginWebServiceUrl + "email=" + email + "/" + "password=" + password);
           return response.IsSuccessStatusCode;
       }
   }

   Give permission to HttpClient going to flash bulb and by clicking first option. You have to type <T> after classRestClient.

5. Now go to MainPage.xaml.cs add the following piece of code in the event created in Login Button.
   

   Private async void Login_OnClicked(object sender, EventArgs e) {
       LoginService service = new LoginService();
       var getLoginDetails = await service.CheckLoginIfExists(Email.Text, Pass.Text);
       if (getLoginDetails) {
           await DisplayAlert("Login Successfull", "Username or Password is correct", "Okay", "Cancel");
       } else if (Email.Text == null && Pass.Text == null) {
           await DisplayAlert("Login failed", "Enter your Email and Password before login", "Okay", "Cancel");
       } else {
           await DisplayAlert("Login failed", "Username or Password is incorrect or not exists", "Okay", "Cancel");
       }
   }

6. Open WebApi project and in User1conroller add the following piece of code,
   

   [HttpGet]
   [Route("api/UserCredentials/email={email}/password={password}")]
   Public async Task < IHttpActionResult > UserDetailsLogin(string email, string password) {
       User login = await db.Users.Where(x => x.Email == email && x.Password == password).SingleOrDefaultAsync();
       if (login == null) {
           return NotFound();
       }
       return Ok(login);
   }

   Run WebApi and copy the link from browser and pase it in http:// links in RestClient class,
   

   classRestClient < T > {
       Private const string MainWebServiceUrl = http: //localhost:61525/;
       Private const string LoginWebServiceUrl = http: //localhost:61525/api/UserCredentials/;
           Public async Task < bool > checkLogin(string email, string password) {
               var httpClient = new HttpClient();
               var response = await httpClient.GetAsync(LoginWebServiceUrl + "email=" + email + "/" + "password=" + password);
               return response.IsSuccessStatusCode;
           }
   }

Run WebApi first. Then run xamarin solution. If you type correct email and password I will show a display alert like this,

 

And if you type incorrect Email ad Password it will show the following display alert,

 

Procedure of Combining SignUp services to WebApi

1. First of all, create a new Web project. In that project add a class in Model. For this go to solution explorer right click on model -> add -> class. Give a suitable name to that class say “User”. In user.cs add he following by writing prop and double tab on it. Set data type and property for that.
   

   public class User
   {
       public int Id { get; set; }
       public string FirstName { get; set; }
       public string LastName { get; set; }
       public string Email { get; set; }
       public string Password { get; set; }
       public string ConfirmPassword { get; set; }
   }

2. Build your solution and add MVC AND WebApi controllers by following same procedure as described above. Run your solution. Register yourself by creating. After adding MVC and after adding WebApi controller you can see your signup form
   
   
3. Now open a new project with cross platform. First of all add a class with same name “User” and give same properties o ha class as given in web project.
   
   
4. Go to MainPage.xaml and add signup frontend as,
   

   <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
           <Entry Placeholder="First Name" x:Name="First"/>
           <Entry Placeholder="Last Name" x:Name="Last"/>
           <Entry Placeholder="Email" x:Name="Email"/>
           <Entry Placeholder="Password" x:Name="Pass"/>
           <Entry Placeholder="Confirm Password" x:Name="Confirm"/>
           <Button Text="Register" CornerRadius="3" x:Name="Register" Clicked="Register_Clicked"></Button>
   </StackLayout>

5. Methods for adding ServiceHandler and RestApi are same.
   
   
6. Go to MainPage.xaml.cs and add he following piece of code in button event,
   

   LoginService service = new LoginService();
   var getLoginDetails = await service.CheckLoginIfExists(Email.Text, Pass.Text);
   
   if (First.Text==null && Last.Text==null && Email.Text == null && Pass.Text == null && Confirm.Text==null )
               {
                   await DisplayAlert("Registration Failed", "Enter your details", "Okay", "Cancel");
               }
               else if (getLoginDetails)
               {
                   await DisplayAlert("Registration Failed", " Already have an account", "Okay", "Cancel");
               }
               else
               {
                   await DisplayAlert("Registration successful", "Thanks for using our app", "Okay", "Cancel");
               }
           }
       }
   }

7. Open WebApi project and in User1conroller add the following piece of code,
   

   [HttpGet]
   [Route("api/UserCredentials/email={email}/password={password}")]
   Public async Task < IHttpActionResult > UserDetailsLogin(string email, string password) {
       User login = await db.Users.Where(x => x.Email == email && x.Password == password).SingleOrDefaultAsync();
       if (login == null) {
           return NotFound();
       }
       return Ok(login);
   }

7. Run WebApi and copy the link from browser and paste it in http:// links in RestClient class,
   

   classRestClient < T > {
       Private
       const string MainWebServiceUrl = “http: //localhost:50226/”;
           Private
       const string LoginWebServiceUrl = “http: //localhost:50226/UserCredentials/”;
           Public async Task < bool > checkLogin(string email, string password) {
               var httpClient = new HttpClient();
               var response = await httpClient.GetAsync(LoginWebServiceUrl + "email=" + email "/" + "password=" + password);
               return response.IsSuccessStatusCode;
           }
   }

This is the whole procedure. Thank You.