User Login Module

Question

I am beginer in AngularJS 6 and ASP.NET MVC5. I am trying to Develop one Project in above technology. I have buit AngularComponent for Client Side and MVC for Server Side. I want User to login with their credential and password should be encrypt. I tryied with lots of way but cant succeed. Desperately waiting for help from anyone expert... Regards, NJS

Munesh Sharma · Answer

https://theinfogrid.com/tech/developers/angular/sign-in-with-google-angular/

Ninad Shinde · Answer

We have created login component file on client side using vs code Login.html We have created login component file on client side using vs code Login.html div class = "panel-header panel-header-sm" > div > div class = "main-content" > div * ngIf = "isLoginError" class = "red-text center error-message" > i class = "material-icons" > errori > Incorrect username or password div > div class = "col-md-12" > div class = "card" > div class = "card-header" > h5 class = "title" > Loginh5 > div > div class = "card-body" > form name = "EditClient" role = "form" (submit)="saveClient(UserName.value,UserPassword.value)" # f = "ngForm" novalidate > div class = "row" > div class = "col-md-8 pr-1" > div class = "form-group " > label > Usernamelabel > i class = "material-icons prefix" > account_circlei > input type = "text" class = "form-control" #UserName ngModel name = "UserName" placeholder = "Username" required > div > div > div > div class = "row" > div class = "col-md-8 pr-1" > div class = "form-group" > label > Passwordlabel > i class = "material-icons prefix" > vpn_keyi > input type = "password" class = "form-control" #UserPassword ngModel name = "Password" placeholder = "Password" required > div > div > div > div class = "row" > div class = "input-field col s12" > button [disabled]="isInProgress" class = "btn-large btn-submit" type = "submit" > Loginbutton > div > div > form > div > div > div > div > Now we have Angular Code - Client Side Code Login.ts Login.ts import { Component, OnInit } from '@angular/core' ; import { Router } from '@angular/router' ; import { UserService } from 'services/user.service' ; import { HttpErrorResponse } from '@angular/common/http' ; import { CustomizeService } from 'services/customize.service' ; @Component({ selector: 'app-login' , templateUrl: './login.component.html' , styleUrls: [ './login.component.scss' ] }) export class LoginComponent implements OnInit { // itemResource = new DataTableResource([]); items = []; itemCount = 0; entryMode = false ; validationMessage = '' ; showValidation = false ; isInProgress = false ; deleting = false ; itemToEdit = { "UserID" :1, "UserName" : "" , "UserPassword" : "" , }; messages: {}; isLoginError : boolean = false ; error: HttpErrorResponse; constructor( private userService : UserService, private customizeService: CustomizeService, private router : Router) { this .loadMessages();} ngOnInit() { } saveClient(UserName,UserPassword){ this .userService.userAuthentication(UserName,UserPassword).subscribe(data => { alert( this .messages[ 'msg_login' ]); this .router.navigate([ '/customers' ]); }, (error : HttpErrorResponse)=>{ this .isLoginError = true ; this .error = error; }); } loadMessages(){ this .customizeService.getMessages().subscribe(data => { this .messages = data; }); } } User.service.ts import { Injectable } from '@angular/core' ; import {Router} from '@angular/router' ; import { Http, Response, Headers, RequestOptions } from '@angular/http' ; import { throwError } from 'rxjs' ; import { catchError, map } from 'rxjs/operators' ; import { environment } from '../environments/environment' ; import { Observable, of } from 'rxjs' ; import { delay, tap } from 'rxjs/operators' ; @Injectable() export class UserService { isSessionVaild = true ; constructor( private http: Http, public router: Router) { this .isSessionVaild = true ; } userAuthentication(userName,UserPassword){ let headers = new Headers(); headers.append( 'Content-Type' , 'application/json' ); headers.append( 'Access-Control-Allow-Origin' , '*' ); headers.append( 'Access-Control-Allow-Methods' , 'GET, POST, PUT' ); return this .http.post(environment.apiUrl + 'User/VerifyUser/?UserName=' + userName + '¶m=' + UserPassword, { headers: headers }) .pipe(map(data => data.json()), catchError((error: any) => { throw error; })); } } Server side code using asp.net mvc5 User.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace DomainDb.Models { public class User { public int UserID { get ; set ; } public int UserDetailsID { get ; set ; } public int LocationID { get ; set ; } public string LocationName { get ; set ; } public int ClientID { get ; set ; } public string ClientName { get ; set ; } public string UserName { get ; set ; } public string UserPassword { get ; set ; } public string AuthenticationType { get ; set ; } public string DefaultStore { get ; set ; } public string DefaultSubStore { get ; set ; } public int EmployeeID { get ; set ; } public int DoctorID { get ; set ; } public string DefaultReceiptBook { get ; set ; } public int UserRightsID { get ; set ; } public int ModuleID { get ; set ; } public bool Activate { get ; set ; } } } IUserRepository.cs using DomainDb.Models; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace DomainDb.Repository { public interface IUserRepository { //Getting All User information List Get(); //Getting particular User information User Get( int ID); //Add or Update User information void Post(User value); object VerifyUser( string UserName, string param); //Removing particular User information void Delete( int ID); } } UserRepository.cs public object VerifyUser( string UserName, string param) { List userList = new List (); query = "select * from mstuserheader where UserName = '" + UserName + "' and UserPassword = '" + param + "'" ; using (MySqlConnection ConnEpion = new MySqlConnection(ConnStr)) { ConnEpion.Open(); using (MySqlCommand objCmd = new MySqlCommand(query)) { objCmd.Connection = ConnEpion; using (IDataReader objReader = objCmd.ExecuteReader()) { while (objReader.Read()) { userList.Add( new User() { UserID = objReader.GetInt32(objReader.GetOrdinal( "UserID" )), UserName = objReader.GetString(objReader.GetOrdinal( "UserName" )), UserPassword = objReader.GetString(objReader.GetOrdinal( "UserPassword" )), } ); } } } } return userList; } UserController.cs public object VerifyUser( string UserName, string param) { return _userRepository.VerifyUser(UserName,param); }

Muthu Kumar · Answer

Hi Ninad Shinde, Here is an reference link for Social Login like, Google, Facebook, Linked in https://www.npmjs.com/package/angular-6-social-login https://theinfogrid.com/tech/developers/angular/sign-in-with-google-angular/ https://stackoverflow.com/questions/38846232/how-to-implement-signin-with-google-in-angular-2-using-typescript