Merhabalar arkadaşlar.

Bu yazıda size Angular üzerinden korumalı bir web service’e nasıl erişebiliriz onu göstereceğim.

İlk olarak elimizdeki mevcut web service’den bahsedeyim. Web service’miz bir GET hizmeti sunuyor ve bu GET hizmetini sadece ADMIN rolüne sahip kullanıcı alabiliyor. Sistem içinde bir de USER rolüne sahip kullanıcı var. Onunla da sisteme erişim denediğimizde 403 hatası almamız gerekiyor. Bu iki kullanıcı dışında tanımlı olmayan kullanıcı ile de gidersek 401 hatası alacağız. Elimdeki web servis doğrulama ve yetkilendirme işini Basic Authentication ile yapıyor.

Şimdi Angular içerisinde ne yapmamız lazım buna bakalım.

Daha önce http://ilkaygunel.com/blog/2017/angular-2-webservice-get-post/ adresinde Angular üzerinden Restful Web Service’e erişim konusunu anlatmıştım. Bu yazıda da oradaki temeli baz alacağım.

Yukarıdaki linkteki yazıda driver.service.ts dosyası içerisinde getAll() metodu web service’e istek atıp ilgili datayı getiriyor. Burada yapılması gereken şey atılan bu GET isteğine bir header eklemek ve header içerisinde Basic Authentication bilgilerini eklemek. driver.service.ts dosyası ayrıca içerisinde getHeaders() metodunu içeriyor. Basic Authentication tanımını orada yapacağız.

getHeaders() metodunu şu şekilde değiştirebiliriz:

private getHeaders(){
    let username: string = 'standartUser';
    let password: string = 'standartUserPassword';
    let headers = new Headers();
    headers.append("Authorization", "Basic " + btoa(username + ":" + password));
    headers.append('Accept', 'application/json');
    headers.append('Content-Type', 'application/json');
    return headers;
}

getHeaders() içerisinde bir username ve bir password tanımladık. username ve password nesnelerine atanan değerler USER rolüne sahip kullanıcı değerleri.

Akabinde headers.append(“Authorization”, “Basic “ + btoa(username + “:” + password)); satırı ile bir bir yetkilendirme işlemi yapılacağını ve bu yetkilendirmenin Basic olacağını söylüyoruz. btoa() metoduna username + “:” + password şeklinde bilgiyi geçirerek Base64 encode şekilde Header içerisinde yetkilendirme verisinin taşınacağını söylüyoruz.

Bu noktadan sonra yapılması gereken getAll() metodunda gerekli değişikliği yapmak olacak.

  getAll(){
    let options = new RequestOptions({ headers: this.getHeaders() });
    return this.http.get(`${this.baseUrl}/memberList/`,options).map((response:Response)=>response.json());
  }

getAll() metodu içerisinde bir RequestOptions nesnesi oluşturuyoruz ve yapılandırıcısına this.getHeaders() ile headers options nesnesine headers bilgisini ekliyoruz. this.http.get ifadesi ile GET metodu çağırımı sırasında isteğin atılacağı URL’in yanında options nesnesini de parametre olarak geçiriyoruz.

Böylece korunmuş bir restful web service’e erişmek için hazırız.

Şimdi demo yapalım.

Az önce de bahsettiğim gibi standartUser USER rolüne sahip bir kullanıcı ve sisteme erişim yetkisi yok. Bu nedenle Restful Web Service 403 hatası dönüyor bize.

Şimdi getHeaders() metodu içerisindeki username ve password’ü TEST1234 olarak değiştirip kaydedelim. Otomatik olarak değişiklik deploy edilecek.

Bu durumda da restful web service tanımlı olmayan kullanıcı ile gelindiği için 401 hatası dönüyor.

Şimdi getHeaders() metodu içerisindeki username ve password’ü adminUser ve adminUserPassword olarak değiştirelim.

Gördüğünüz gibi web service bir hata dönmedi ve gerekli datalar Angular’a iletildi, o da dataları ekranda gösterdi.

Bu yazıda anlatacağım bu kadar arkadaşlar. Angular ile Basic Authentication işlemini bu şekilde gerçekleştirebiliyoruz.

Görüşene kadar sağlıcakla kalın.

Selam ve Sevgilerimle