benbaran / adal-angular4

Angular 4/5/6/7 ADAL Wrapper
MIT License
86 stars 104 forks source link

Unable to call secure WebApi #56

Closed elena89rossi closed 6 years ago

elena89rossi commented 6 years ago

Hi all, I've update my app from angular4 to angular6, and now I'm unable to call secure web api. In angular4 I call Web Api using Adal4HttpService, and all works fine:

import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { Adal4HTTPService } from 'adal-angular4';

import { environment } from '../../../environments/environment'; import { Employee, IEmployee } from './models';

@Injectable() export class EmployeeService {

constructor(
private http: Adal4HTTPService

) { } public getEmployees(): Observable<Array> { return this.http.get(${environment.apiUrl}) .map(response => { const tmp = <any[]>response.json(); return tmp.map(e => new Employee(e)); }); } }

In adal-angular4 v 3 (for angular 6) the AdalHttpService doesn't exist. there is someone who can help me?

web265p3 commented 6 years ago

You have to use the Interceptor or attach your token manually

    private prepareOptions(token: string): any {
        let headers = new HttpHeaders();
               headers = headers
                   .set('Content-Type', 'application/json;odata=verbose')
                   .set('Accept', 'application/json;odata=verbose')
                   .set('Authorization', `Bearer ` + token);
               return { headers };
       }

I cannot tell you, why the HttpService was removed...

elena89rossi commented 6 years ago

I have already try to use a PrepareOptions method to setup HttpHeaders but I've always HttpResponse "Unauthorized". Here my code

import { Component, OnInit } from '@angular/core'; import { AdalService } from 'adal-angular4'; import {HttpHeaders, HttpClient} from '@angular/common/http'; // import { Observable } from 'rxjs'; import {environment} from '../../environments/environment'; import { map, switchMap, throttle } from 'rxjs/operators';

@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit {

// user: any; activities:any; constructor(private adalService: AdalService,private http:HttpClient) { }

ngOnInit() { this.getActivities(); }

getActivities():any{ return this.http.get(${environment.apiUrl},this.prepareOptions()) .subscribe(res=>this.activities=res,error=>console.log(error))

}

private prepareOptions(): any {

let headers = new HttpHeaders();
       headers = headers
           .set('Content-Type', 'application/json;')
           .set('Accept', 'application/json;')
           .set('Authorization', `Bearer ` +` ${this.adalService.userInfo.token}`);
       return { headers };

} }

elena89rossi commented 6 years ago

If i try to use Http_interceptor without PrepareOption Method as a parameter of Http call, I've this error: core.js:1601 ERROR Token renewal operation failed due to timeout:

Here the code:

app.module:

@NgModule({ declarations: [ AppComponent, HomeComponent, ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MaterialModule, HttpClientModule ], providers: [AdalService, AdalGuard, { provide: HTTP_INTERCEPTORS, useClass: AdalInterceptor, multi: true }, ActivityService

] , bootstrap: [AppComponent] }) export class AppModule { }

ACTIVITYSERVICE.TS import { Injectable } from '@angular/core'; import { AdalService } from 'adal-angular4'; import {HttpHeaders, HttpClient} from '@angular/common/http'; import {environment} from '../environments/environment';

@Injectable({ providedIn: 'root' }) export class ActivityService { constructor(private http:HttpClient,private adalService:AdalService) { } getActivities():any{ return this.http.get(${environment.apiUrl}) } }

HOME.COMPONENT this.activitiesService.getActivities().subscribe(res=>console.log(res));

.