Inicio de Sesion

🔐

Documentación de Inicio Sesion

✈

En esta sección encontraras la documentación sobre el inicio de sesion, el cual encontraras api rest realizado en el proyecto de Xamarin.

Instalación de Nuget En este apartado antes de iniciar a implementar el código necesario para el uso del inicio de sesion, necesitaremos implementar un nuget en el proyecto para realizar el uso del proyecto en api en JSON. Para realizar la instalación le das clic derecho a la solución del proyecto y le das importacion de nugget y buscas en la opcion de examinar o buscar con el nombre que se muestra a continuación.

Creación de clase Inicio de Sesion En este apartado se realiza la clase Login.cs que se crea en una carpeta llamada encuentra en apartado.

📁 models que se

/// <summary> /// made by Olman Sanchez Zuniga /// email=andreyszcr@gmail.com /// </summary> /// Json var and public var [JsonProperty("Cedula")] public string Cedula { get; set; } [JsonProperty("Contraseña")] public string Contrasena { get; set; } [JsonProperty("ID_Aeropuerto")] public string IdAeropuerto { get; set; } //method cosntructor public Login(string _Cedula, string _Contrasena, string _IdAirport) { if (Application.Current.Properties.ContainsKey("Cedula") || Application.Current.Properties.ContainsKey("Contraseña") || Application.Current.Properties.ContainsKey("ID_Aeropuerto")) {

var id = Application.Current.Properties["Cedula"]; Cedula = id.ToString(); var password = Application.Current.Properties["Contraseña"]; Contrasena = password.ToString(); var IdAirport = Application.Current.Properties["ID_Aeropuerto"]; IdAeropuerto = IdAirport.ToString(); _Cedula = Cedula; _Contrasena = Contrasena; _IdAirport = IdAeropuerto; } } //method to use on API public string toJsonString() { return JsonConvert.SerializeObject(this, Formatting.None); } public override string ToString() { return toJsonString(); } //method string to return values public string ID() { return Cedula; } public string Password() { return Contrasena; } public string IDAirport() {

Documentación de Inicio Sesion

1

return IdAeropuerto; } }

✈ Creación de clase Inicio Sesion Una vez creado la clase de Login.cs en la carpeta dentro de esa carpeta creamos una clase llamado que se muestra a continuación.

📁📄Userservices.cs models, creamos una llamada 📁Services, para hacer el consumo del api

Variables //Url on Heroku private static string UrlLog = "https://ciiadhel-api-rest.herokuapp.com/api/users/login"; //Url used on apui rest on node.js //private static string UrlLog = "http://localhost:3033/api/users/login/"; /// made by andreyszcr@gmail.com #region Var to Log in ///local var to connect with textbox.

String cedula; String IDAeropuerto; public string msj2 { get; set; } #endregion

Método Post Login #region Method post public string[] PostLOGIN(Login login) { string json = login.toJsonString();// var connected by class User using (var client = new System.Net.Http.HttpClient()) { var task = Task.Run(async () =>{ return await client.PostAsync( UrlLog + "/" + login.Cedula + "/" + login.Contrasena, new StringContent(json, Encoding.UTF8, "application/json"));//paramereters Post , to login. }); HttpResponseMessage msj = task.Result; //if post is correct if (msj.StatusCode == System.Net.HttpStatusCode.OK) { //as soon as the post is correct var task2 = Task<string>.Run(async () =>{ return await msj.Content.ReadAsStringAsync();// get back the content }); string resultstr = task2.Result; JObject parseResponse = JObject.Parse(resultstr);//get data from request cedula = parseResponse["cedula"].ToString();// get ID JObject airport = JObject.Parse(parseResponse["airport"].ToString());// get IdAirport IDAeropuerto = airport["ID_Aeropuerto"].ToString(); string[] session = new string[2]; session[0] = cedula; session[1] = IDAeropuerto; return session; } else if (msj.StatusCode == HttpStatusCode.NotFound)//if id is not found { //error management throw new Exception("no esta registrado el usuario:" + login.Cedula); } else { throw new Exception("Error mientras se logueaba");//error management } } } #endregion

Validación login #region Validations Login public bool ValidationLogin(Login login) { string json = login.toJsonString();// data to get data from class login using (var client = new System.Net.Http.HttpClient()) { var task = Task.Run(async () =>{ //paramereters Post , to login. return await client.PostAsync( UrlLog + "/" + login.Cedula + "/" + login.Contrasena, new StringContent(json, Encoding.UTF8, "application/json")); }); HttpResponseMessage msj = task.Result; // in case username and password is correctly if (msj.StatusCode == System.Net.HttpStatusCode.OK) { var task2 = Task<string>.Run(async () =>{ return await msj.Content.ReadAsStringAsync(); }); string resultstr = task2.Result;//result of api JObject parseResponse = JObject.Parse(resultstr); JObject airport = JObject.Parse(parseResponse["airport"].ToString());

Documentación de Inicio Sesion

2

//IdAirport IDAeropuerto = Convert.ToString(airport); if (IDAeropuerto == "{}") // IdAirport is more than 0 { return false; } else { return true; } } else {return false;} } } #endregion

✈ Front-end y Backend de Loginpage.xaml 📜

Una vez terminado las clases, se implementa el codigo para realizar el diseño de la pagina llamada Loginpage.xaml

📜 Front-end

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:CIIADHEL_CR.CustomRenderer" x:Class="CIIADHEL_CR.pages.LoginPage"> <StackLayout BackgroundColor="#e6e6e6"> <ScrollView> <Grid> <StackLayout Padding="0" Margin="0" HorizontalOptions="FillAndExpand"> <Frame HeightRequest="200" BackgroundColor="#4486FF" Padding="0" Margin="0"> <Image Source="avion_img.png" Aspect="AspectFill" Margin="0"/> </Frame> </StackLayout> <StackLayout Padding="0" Margin="10,180,10,0" HorizontalOptions="FillAndExpand"> <Frame BackgroundColor="White" HeightRequest="500" HasShadow="True" Padding="0" Margin="0"> <StackLayout> <Frame BackgroundColor="White" HeightRequest="160" WidthRequest="150" CornerRadius="45" HasShadow="False" Margin="5 <Image Source="splash_logo.png" Aspect="AspectFill" Margin="0"/> </Frame> <StackLayout Margin="15"> <Label Text="Iniciar Sesión" TextColor="Black" HorizontalOptions="CenterAndExpand" FontSize="Large" FontAttribu </StackLayout> <StackLayout Padding="0" Margin="15,10"> <Frame BackgroundColor="Transparent" BorderColor="DarkGray" Padding="0" HorizontalOptions="FillAndExpand" Corne <StackLayout Orientation="Horizontal"> <Frame BackgroundColor="SkyBlue" HeightRequest="40" WidthRequest="40" CornerRadius="30" Padding="0" Marg <Image Source="user.png" Aspect="AspectFill" Margin="0"/> </Frame> <local:CustomEntry Placeholder="Identificación" MaxLength="50" x:Name="txtID" TextColor="black" Fon </StackLayout> </Frame> <Frame BackgroundColor="Transparent" BorderColor="DarkGray" Margin="0,15,0,0" Padding="0" HorizontalOptions="Fi <StackLayout Orientation="Horizontal"> <Frame BackgroundColor="SkyBlue" HeightRequest="40" WidthRequest="40" CornerRadius="30" Padding="0" Marg <Image Source="locked.png" Aspect="AspectFill" Margin="0"/> </Frame> <local:CustomEntry Placeholder="Contraseña" MaxLength="50" x:Name="txtPassword" IsPassword="True" Te </StackLayout> </Frame> <Label x:Name="lblResultado" Text="" HorizontalTextAlignment="Center" TextColor="Red" /> <StackLayout Orientation="Horizontal"></StackLayout> <Button Text="INGRESAR" x:Name="btnLogin" Clicked="btnLogin_Clicked" BackgroundColor="#4486FF" TextColor="White </StackLayout> </StackLayout> </Frame> </StackLayout> </Grid> </ScrollView> </StackLayout> </ContentPage>

📜 Backend using Acr.UserDialogs; using CIIADHEL_CR.models; using CIIADHEL_CR.services; using System; using Xamarin.Essentials; using Xamarin.Forms; using Xamarin.Forms.Xaml; namespace CIIADHEL_CR.pages {

Documentación de Inicio Sesion

3

[XamlCompilation(XamlCompilationOptions.Compile)] public partial class LoginPage : ContentPage { ILoginManager iml = null; //connection to internet NetworkAccess currentNetwork = Connectivity.NetworkAccess; Login log; String sCedula = ""; String sPassword = ""; String sIdAirport = ""; public LoginPage() { InitializeComponent(); } public LoginPage(ILoginManager ilm) { InitializeComponent(); iml = ilm;//connecttion with interface } private async void btnLogin_Clicked(object sender, EventArgs e) { /// email=andreyszcr@gmail.com sCedula = txtID.Text;//var to connect on Api sPassword = txtPassword.Text; log = new Login(sCedula, sPassword, sIdAirport); //connection with services files UserServices userServices = new UserServices(); log.Cedula = sCedula; log.Contrasena = sPassword; if (currentNetwork == NetworkAccess.Internet) { //conddition in case the textbox are empty if (string.IsNullOrEmpty(txtID.Text) || string.IsNullOrEmpty(txtPassword.Text)) { lblResultado.Text = "Usuario o Contraseña no pueden estar vacios"; UserDialogs.Instance.HideLoading(); } //method bool in case the username or pasword does not exist else if (userServices.ValidationLogin(log) == true) { lblResultado.Text = ""; //clear message string[] session = userServices.PostLOGIN(log);//session var y method post log.Cedula = session[0]; log.IdAeropuerto = session[1]; App.Current.Properties["Cedula"] = log.Cedula; App.Current.Properties["Contraseña"] = log.Contrasena; App.Current.Properties["ID_Aeropuerto"] = log.IdAeropuerto; App.Current.Properties["IsLoggedIn"] = true; await this.Navigation.PushModalAsync(new UpdateAirportPage(log.Cedula, log.Contrasena, log.IdAeropuerto));//pass to ano } else { txtID.Text = ""; txtPassword.Text = ""; lblResultado.Text = "Usuario o Contraseña incorrectos!"; //display error on screen } } else { await DisplayAlert("Advertencia", "No tienes conexion a internet.", "OK");// error on screen sin internet } } } }

📱 Visualización De esta manera se visualizara la aplicacion al momento de ejecutar la aplicacion.

Documentación de Inicio Sesion

4

Documentación de Inicio Sesion

5