12 thoughts on “Angular (2 & 4) authentication – JWT ve Kullanıcı yönetim işlemleri

  1. Hocam birçok Yabancı içerik okurum angular2 ile alakalı gerçekten çok kaliteli içerik üretmişsiniz yabancı kaynaklarda bu kadar detaylı anlatılmamıştı çok teşekkür ediyorum aynen devam etmenizi temenni ediyorum.

  2. merhaba;
    çok faydalı ve içi dolu bir yazı oldu teşekkür ederim. sadece sorum
    acaba yazdığınız kodda locale kayıt ettiğimiz
    this.saveToLocal(‘user’,message.user)
    güvenlik açığı oluşturmaz mı?

    iyi günler

    1. Merhaba, Tesekkurler.

      Isin ozunde, web soz konusu oldugu icin mecburen kullanici bilgisini bir sekilde istemciye ulastirdigimizda, gorunur olacaktir.

      Bunu localStorage da tutmasakda web icin tamamen gizleme imkanimiz yok zaten.

      Bu ornekde, istemcinin tokeni kullanarak tekrar sunucuya kullanici profil bilgisini almak icin cagrida bulunma zorunlulugunu ortadan kaldirmak icin, kullanici ile ilgili hassas olmayan bilgileri de tokenle birlikte gondermis olduk. (gondermeseydikte, istemci bu bilgileri yine sunucudan bir sekidle tmein edip bir yerde tutmak zorundaydi.)

      Galiba onemli olan nokta zaten ister localstorage a ister session storage a istersek cookie benzeri bir yerde saklayalim bilgileri `tam olarak gizleme imkanimiz yok.`

      Onun icin kullanici oturum actiginda istemciye bu bilgileri islerini kolaylastirsin diye yollarken veya daha sonrasinda her seferinde sunucudan istek bile , hassas bilgileri (sifreler kredi karti vs. gibi) istemciye gondermemek.

      Burda onemli olan kisim, tokenin guvenligi zaten, token ele gecirilirse sunucuda dikkatli olunmadiysa guvenlik zaafiyeti her zaman problem olur, tipki session/cookie lerin ele gecirilmesi gibi.

      1. Merhaba,
        Bu konulara yabancı olduğumdan birşey sormak istiyorum.
        Token için süreyi nasıl ayarlayabiliriz ? Google amca pek bulamadım yada ne arattırmam gerekli.
        Belli tarihten sonra o token kullanılmasını istemiyorum.
        Teşekkürler

        1. Merhaba,

          Token icin `expiration` gecersiz kalma suresi istemci tarafinda degil (web/mobile/angular) backend/sunucuda tanimlanir, yani istemci tarafinda kullanicinin insiyatifinde olan bisey degildir. Kullandiginiz backend/server `kullanim gecerlilik suresini` nekadar atadiysa sunucu o sure boyunca o tokeni kabul edecektir.

          Istemci tarafinda ise, belirli araliklara sunucuya token hal agecerlimi diye sorabailirsiniz yada, sunucuda atanan sureyi biliyorsaniz , tokeni login islemi gerceklesip aldiktan sonra o sureyi istemci tarafinda timer/interval atayarak takip edip sure dolduktan sonra silebilirsiniz. Bu durumun bi istisnasi bir cok sunucu tokeni her kullandiginizda gecerlilik suresini uzatir (ornegin token varsayilan oalrka 30dk gecerliyse, 30 dk icinde her kullandiginizda sunucu tekrar size yeni bir 30 dakika verir, taki istemci 30dk boyunca hic kullanim yapmayana dek)

          Ozetle, Token, istemci tarafinin degil, sunucu tarafinin kontrolundedir.

          Kolay Gelsin

          1. Bunu JWT ile halletim süper oldu 🙂
            Birde token ile ilgili olarak aşağıda HttpClient ten bahsetmiştiniz inceledim denedim süper birşey oldu bir de erroHandling yapıp sunucudan login ol uyarısını aldığımda loginForm a yönlendirdim vallahi süper oldu 🙂
            Çok teşekkürler.

  3. Merhaba
    Angular 1 de local storage’daki token değerini $http interceptor ile her zaman sunucuya gönderebiliyorduk. ama angular 2 de böyle bir yapı göremedim.
    Token değerini her seferinde headera nasıl yazabiliriz.
    Teşekkürler

    1. Angular 4.3 ile birlikte yeni bir HttpClient eklendi, eger angular 4 un herhangi bir versiyonunu kullaniyorsaniz bu yeni HttpClient e gecebilirsiniz bu module ile http interceptor yapisi kolayca saglanmakta. (daha onceki surumlerde, angular 1.x de olan $http interceptor e esdeger bir yapi yok, RequestOptions da o kadar verimli/kolay bir kullanima sahip degil)

      Yeni HttpCLient ile gelen interceptor a bu adresten bakabilirsiniz,
      https://angular.io/guide/http#intercepting-all-requests-or-responses (setting new headers kismi)

      Eger bu yeni Http modulu kullanamayacaksaniz, servis icin de bir metod tanimlayip header i her requestten once set edebilirsiniz,

      getHeader() : Header{
      let headers =new Headers();
      let token = localStorage.getItem('token')
      headers.append('Authorization'`Bearer ${token}`);
      return headers;
      }

      Http istegi yaptiginiz yerde de asagidakine benzer bir sekilde kullanabilirsiniz,

      let url = "http://sunucu.com/urunler"
      http.get(url,new RequestOptions({headers:this.getHeader()}))
      .subscribe(response => {
      // yetkilendirilmiş bir web isteği için header kullanımı
      console.log(response.json());
      });

      yada cok tavsiye etmesemde, RequestDefaultOption sinifini override edebilirsiniz,
      asagidakine benzer bir yapi olabilir mesela :

      requestDefaultOptions.ts


      import {Injectable, Injector} from '@angular/core';
      import {RequestOptions, BaseRequestOptions, RequestOptionsArgs, Headers} from '@angular/http';

      @Injectable()
      export class DefaultRequestOptions extends BaseRequestOptions {

      constructor() {
      super();
      }

      merge(options?:RequestOptionsArgs):RequestOptions {

      let headers ;
      if(options.headers){
      headers = options.headers
      }
      else{
      headers ={}
      headers['Content-Type'] = 'application/json'
      headers['X-App-Secret'] = 'X-App-Secret'
      headers['X-App-Key'] = 'X-App-Key'
      }
      if(localStorage.getItem('token')){
      headers['x-access-token']= `${JSON.parse(localStorage.getItem('token'))}`
      }

      options.headers = headers;
      return super.merge(options);
      }

      }

      export const requestOptionsProvider = { provide: RequestOptions, useClass: DefaultRequestOptions };

      sonra root modulde provide etmeniz yeterli olacaktir ,

      providers: [
      requestOptionsProvider,...
      ]

  4. Merhaba,
    Elinize sağlık çok güzel anlatım olmuş.
    Ama ,”Bir sonraki yazıda, inş. JWT token lerimizi her istek ile birlikte sunucuya nasıl gönderebileceğimize ve login sistemimizi routing yapısı ile (Route Guards) kullanım sayflarımızı nasıl koruyabileceğimize bakarak devam edeceğiz.” Buradaki eğitimin linki nerede bulamadım 🙂
    Kolay gelsin.

    1. Merhaba,
      yazi draft olarak bekliyor, egitimlerden vs vakit bulup yayinlayamadim kusura bakmayin, ilk firsatta yayinlayacagim .

      1. Estafurullah ne kusuru sizin bu makaleniz sayesinde 1 haftadır üzerinde kafa patlattığım durumlar yerli yerine oturdu 🙂 Çok teşekkürler.

Leave a Reply

Your email address will not be published. Required fields are marked *