Angular call API controller with parameters

Question

I have LogInController:

[HttpGet("[action]")]
        public IActionResult Sample(string email, string password)
        {
            var user = new SystemUser();
            if (user.EmailAddress == email && user.Password == password)
                return View();
            else return null;
        }

And I want to call controller from Angular, something like this:

@Injectable()
export class Authentification {
  constructor(private http: HttpClient { }


  AuthentificateUser(email: string, password: string) {
  return this.http.get('https://localhost:44348/api/LogIn/Sample?email=' + this.email + '&password=' + this.password).subscribe((res: Response) => {
          const AuthentificateUser = res.json();
        });
  }
}

On View I have:

<input ng-model="email" matInput placeholder="Email" formControlName="email">
<input ng-model="password" matInput type="password" placeholder="Password" formControlName="password">

How I can authentificate user on simple and clean way, using Angular 5+ This is trivial, I know, but I have to start from somewhere.

Code about to call api is looks good but you have some problem in your controllers action method.Please update your action method. ex:[HttpGet("[action]")] — baj9032
– baj9032, Commented Jun 18, 2018 at 13:01
You should probably also use another HTTP verb than GET, because URLs often get logged and they would countain the password (i.e. use POST and put the credentials in the request body instead of the URL). — Dennis
– Dennis, Commented Jun 18, 2018 at 13:20
Actually it's Asp.Net Core. I think that method is good on backend, because when i call link from postman localhost:44348/api/LogIn/… - I recive the view. My problem is how to bind data from html page to class vars in typeScript, and how to call cotroller from ts. — Nemanja Andric
– Nemanja Andric, Commented Jun 18, 2018 at 13:54

Eliseo · Accepted Answer · 2018-06-18 19:44:11Z

2

If you're using .NET Core 2.0 you can try

[HttpGet("{email}/{password}")]
        public IActionResult Sample(string email, string password){..}

And, when call the api

  return this.http.get('https://localhost:44348/api/LogIn/Sample/'+ this.email +"/"+this.password)

Obviously I hope it's only a sample (send email and password by GET is not a good idea)

To send a values you must make a Form. You can use a reactive form o a Template driven form. You can see the official documentation https://angular.io/guide/forms#forms It's so simple as

//Template driven form
//in .ts Define a model
//Usually we use a unique variable type object with the properties we can use
model={email:"",password:""}; //<--declare a variable
//But we can use two variables
email:string="";
password:string="";

onSubmit()
{
  console.log(this.model);
  return this.http.get('https://localhost:44348/api/LogIn/Sample/'+ this.model.email +"/"+this.model.password)
     .subscribe(res=>{
         console.log(res) //<--here you have the answer to the call
       });

}
//in .html
<form (ngSubmit)="onSubmit()">
<input type="text" class="form-control" id="name"
       required  [(ngModel)]="model.email" name="email">

<input type="text" class="form-control" id="name"
       required  [(ngModel)]="model.password" name="email">

<!--or 
<input type="text" class="form-control" id="name"
       required  [(ngModel)]="email" name="email">

<input type="text" class="form-control" id="name"
       required  [(ngModel)]="password" name="email">
-->
</form>

//ReactiveForm is some more complex

//We create a formControl like
import { Component }              from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

//Declare a FormControl
myForm:any;

constructor(private fb: FormBuilder) { // <--- inject FormBuilder
    this.createForm();
  }

  createForm() {
     this.myForm=this.fb.group({
      password: "", 
      email:""
    });
  }
  onSubmit()
  {
     console.log(this.myForm.value);
      return this.http.get('https://localhost:44348/api/LogIn/Sample/'+ 
     this.myForm.value.email +"/"+this.myForm.value.password)

  }

//The .html
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
   <input formControlName="password">
   <input formControlName="email">
</form>

edited Jun 18, 2018 at 19:44

answered Jun 18, 2018 at 13:15

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

2 Comments

Nemanja Andric Over a year ago

This is ok, but I have problem on Angular side. I don't know how to consume API from Angular..

Eliseo Over a year ago

I update my answer. You can use ReactiveForm or TemplateDriven Form. to get the values of the variables you need. When you make the submit, you use this values. Don't forget subscribe to the get or the post

Haytam · Accepted Answer · 2018-06-18 14:48:39Z

0

If you're asp.net (core?) app is an API and you wanna add authentification between you Angular 5 app and the API, I don't see how returning a View would help you.

One way to do Authentification is to use a cookie, idea:

Client app (angular) will send a login request to API.
API checks login infos, if it's good then it creates a cookie, saves and returns it.
Client app receives result, if token found then save it as a cookie.
Use the cookie in all your next requests from Client app.

You can learn more just by searching the subject, most of the implementations are done using JWT (e.g. JWT Authentication with ASP.NET Core 2 Web API, Angular 5, .NET Core Identity)

(EDIT)
You'll have to create a form in your html part, then either wait for the submit event, cancel it then use your authentification method (which usually should be in a service) or use Template-Driven forms.
After this you'll have the informations you need (login/email and password) and then you can send a POST request to your controller with the "same" code you already have.

edited Jun 18, 2018 at 14:48

answered Jun 18, 2018 at 13:12

Haytam

4,7432 gold badges27 silver badges45 bronze badges

1 Comment

Nemanja Andric Over a year ago

Ok, thanks for answer, can you tell me how to bind data from Html to variables in TypeScript, and after that call Conroller and forward parameters. That I don't know how to do.

Collectives™ on Stack Overflow

Angular call API controller with parameters

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related