HTTP Request with basic auth returns 401 - issue with headers on Angular 4

Question

this is an edited post. I am trying this simple http request from an API with basic auth (like user and pass) and a params object (bind to a form); I've read the docs, checked out several posts, but nothing seem to work; I always get a 401 as a response...

Can some give me a help? (i'm new at this)

This is what I've got:

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Http, Headers} from '@angular/http';
import {response} from '../../models/response';
import {HttpErrorResponse} from '@angular/common/http';
import {HttpHeaders} from '@angular/common/http';

@Component({
  selector: 'app-testing',
  templateUrl: './testing.component.html',
  styleUrls: ['./testing.component.css']
})

export class TestingComponent implements OnInit {

  //OPTIONS
  selectedColor:string;
  selectedFont:string;
  selectedSize:string;

  //INTERFACE
  results: response;


  params = {
    "handwriting_id": "8X3WQ4D800B0",
    "text": "",
    "handwriting_size": "",
    "handwriting_color": "",
  }

  constructor(private http: HttpClient) { }

  ngOnInit() {
    }

    onSubmit(f){

      console.log(this.params);

      this.http.get<Response>('https://api.handwriting.io/render/png?' + this.params,{
        headers: new HttpHeaders().set('7Q0ZBC889M7WRGRM','N6BQK4Z8PZ1HYYT4'),
      }).subscribe(data => {
         this.results = data['results'];
        console.log(this.results);

        },(err: HttpErrorResponse) => {
          if (err.error instanceof Error) {
            console.log('An error occurred:', err.error.message);
          } else {
            console.log(`Backend returned code ${err.status}, body was: ${err.error}`); 
          }
        });
    }

  //OPTIONS

  changeFont(){
      document.getElementById("output-text").style.fontFamily = this.selectedFont;
         }
  changeColor(){
    document.getElementById("output-text").style.color = this.selectedColor;
         }
  changeSize(){
    document.getElementById("output-text").style.fontSize = this.selectedSize;
         }
      }

Where are you using the environment data? it doesn't look like it gets send with the request. Perhaps add it to the headers object? — Ric
– Ric, Commented Oct 27, 2017 at 15:21
Adding some values to the environments won't magically send the credentials as headers with your HTTP requests. You need to read the documentation of Http and send the appropriate headers. And you'll find theur value(s) in the environment. Note that Http is soon to be deprecated. You'd better learn how to use HttpClient. — JB Nizet
– JB Nizet, Commented Oct 27, 2017 at 15:22
Done it @FRECIA, but still wont accept HttpHandler as provider... — Mellville
– Mellville, Commented Oct 27, 2017 at 18:24

Mellville · Accepted Answer · 2017-10-29 18:57:26Z

1

I found the solution thanks to this post. Here's the main difference:

After:

headers: new HttpHeaders().set('7Q0ZBC889M7WRGRM','N6BQK4Z8PZ1HYYT4'),
      }).subscribe(data => {//etc

Now:

headers: new HttpHeaders().set('Authorization', 'Basic ' +
        btoa('STRSKVENJVBD0JDS:4ZN6VD256FEBHSM1'))
      }).subscribe(data =>//etc

answered Oct 29, 2017 at 18:57

Mellville

1,0973 gold badges20 silver badges43 bronze badges

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

Comments

Lucas · Accepted Answer · 2017-10-29 20:05:09Z

1

I dont know if I get how you are supposed to get your data to the service endpoint... but if you sent it with postman through headers, then you want to do it the right way, you should use angulars new feature, interceptors. This way you can provide a simple interceptor to your main app.module and use the new httpClient in your service ... this way the headers will be added automatically to every request done by the service.

Here is a simple walkthrough you should refactor for your case:

1) create interceptor:

import {Injectable} from '@angular/core';
import {HttpRequest,HttpHandler,HttpEvent,HttpInterceptor} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class Interceptor implements HttpInterceptor {
  constructor() {}
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        request = request.clone({
           setHeaders: {
              Authorization: `Bearer ${YOUR_TOKEN}` <-- the API should expect a token here
           }
        });

    return next.handle(request);
  }
}

2) Provide interceptor in your main module (usually app.module.ts):

import {HTTP_INTERCEPTORS} from '@angular/common/http';
import {Interceptor} from './path/to/interceptor';
@NgModule({
  bootstrap: [AppComponent],
  imports: [...],
  providers: [{provide: HTTP_INTERCEPTORS,useClass: Interceptor,multi: true}]
})

export class AppModule {}

3) Apply interceptor to your service with new HttpClient (angular 4.3):

import { HttpClient } from '@angular/common/http'; <-- IMPORTANT new httpClient

export class DataService {

  constructor(public http:HttpClient) {

   }

    getPNG(){
        return this.http.get('https://api.handwriting.io/render/png')
            .map(res => res);
    }

      addHand(user){
        return this.http.post('https://api.handwriting.io/render/png', user)
            .map(res => res);
      }
    }

edited Oct 29, 2017 at 20:05

answered Oct 27, 2017 at 16:20

Lucas

10.4k6 gold badges45 silver badges55 bronze badges

5 Comments

Mellville Over a year ago

Thanks for the grat answer @FRECIA, but how can I generate an interceptor via cli?

Mellville Over a year ago

I've followed your instructions but I still have some issues: Ate interceptor.ts file import { AuthService } from '../services/data.service'; I get red underline in AuthService At app.module i get this one underlined: import {TokenInterceptor} from './interceptor/interceptor';

Mellville Over a year ago

I still get the 401...I mean, the credentials are not being sent...isn't is their place? ` request = request.clone({ setHeaders: { key:"7Q0ZBC889M7WRGRM", secret:"N6BQK4Z8PZ1HYYT4" } });`

Mellville Over a year ago

I've edited my post with your solution @FRECIA, take a look, it doesnt compile this way because httpClient is not accepting json...I dont get it, many thanks, you're being great

Mellville Over a year ago

now it's complaining that I dont provide httpHandler, but if I do all the list, NgModule gets underlined...

Collectives™ on Stack Overflow

HTTP Request with basic auth returns 401 - issue with headers on Angular 4

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related