Angular 2+ ve rest api authorization

67 views
Skip to first unread message

Murat Kürtün

unread,
May 10, 2018, 4:54:30 PM5/10/18
to İstanbul Coders
Merhabalar,
Çalıştığım bir projede müşteri button bazında yetkilendirme istiyor,
Örneğin; "Kullanıcı detay sayfasına gitsin ama yetkisi yoksa güncelle butonuna tıklayamasın yada göremesin" gibi.
Böyle bir durumda nasıl bir yol izlemek gerekir? Ya da siz nasıl yapardınız?
API kısmı c# ve .net core 2.0 ile yazılıyor. Ön yüz ise angular.
Benim aklıma şöyle bir çözüm geldi. 
API üzerinde controller içerisindeki her link için policy key veriyorum;
[Authorization(Policy="XYZ")]
yetkilendirme sırasında kullanıcını yetki tablosuna bu key i ekliyorum.
Kullanıcı login olduğunda yetkilerini (sadece key' leri) local storage de tutuyorum.
Kullanıcı sayfaya gittiğinde ilgili button için key değeri local storage de var mı diye kontrol ediyorum.
O kadar çok iş varki açıkçası yanlış yapıyorum gibi geliyor.
Daha önce böyle bir soruna çözüm getirmiş arkadaş varsa yol gösterebilir mi?
Ya da makale tavsiyesi verebilecek olan varsa sevinirim.
İyi çalışmalar.



Serkan Köse

unread,
May 10, 2018, 4:59:18 PM5/10/18
to istanbu...@googlegroups.com
Ayni işi şuan angular1 ile yapmaktayım.
Kullanıcı tipi geliyor api den ve o kullanıcıya göre yetkilendirme yapıyorum ama tamamen mantıksız bu iş bence onun yerine companent bazlı yetkilendirme yapılmadı daha mantıklı yanş şöyle apiden yetkilendirme ile ilgili data gelicek ve buna göre companentler açılacak 

10 May 2018 Per, saat 23:54 tarihinde Murat Kürtün <murat....@gmail.com> şunu yazdı:
--
İstanbul Coders Grubu Kurallarını okuyun: https://groups.google.com/forum/#!topic/istanbul-coders/LuV8_2lSO0w
---
Bu iletiyi Google Grupları'ndaki "istanbul-coders" grubuna abone olduğunuz için aldınız.
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-code...@googlegroups.com adresine e-posta gönderin.
Daha fazla seçenek için https://groups.google.com/d/optout adresini ziyaret edin.

Murat Kürtün

unread,
May 10, 2018, 5:25:01 PM5/10/18
to İstanbul Coders
Selam,
Anladığım kadarıyla kullanıcı button u görsün, tıklasın ama yetkisi yoksa hata alsın gibi bir şeyi kastediyorsun?
Bunu angular2+ da router üzerinde guard yardımıyla ile yapabiliyorsun.
Haklısın öyle olmalı ama adam şunu isteyebiliyor.
Malzeme tablosunda "Ali satış fiyatını görsün ama alış fiyatını görmesin. Veli her ikisinide görebilsin. Ayşe sadece malzemenin adını görsün."
Bu durumda her yetki için API tarafında ayrı bir GET metodu yazacaksın yada Client tarafında dediğim gibi bir yapı kuracaksın.
Bir de projenin büyüklüğü var tabi,
Mesela benim projemde yetki tablosu 300-350 satırdan oluşuyor.

Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-coders+unsubscribe@googlegroups.com adresine e-posta gönderin.

Daha fazla seçenek için https://groups.google.com/d/optout adresini ziyaret edin.

--
İstanbul Coders Grubu Kurallarını okuyun: https://groups.google.com/forum/#!topic/istanbul-coders/LuV8_2lSO0w
---
Bu iletiyi Google Grupları'ndaki "istanbul-coders" grubuna abone olduğunuz için aldınız.
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-coders+unsubscribe@googlegroups.com adresine e-posta gönderin.

Serkan Köse

unread,
May 10, 2018, 5:32:09 PM5/10/18
to istanbu...@googlegroups.com
Mesela bizim sistemde 5 tane kullanıcı tipi var ve kullanıcı tiplerine göre client tarafında yetkilendirme yapıyoruz ve gösterip yada göstermiyoruz.
Mesela kullanıcı sisteme kayıt olurken tipinide girmek gerekiyor 
11 May 2018 Cum, saat 00:25 tarihinde Murat Kürtün <murat....@gmail.com> şunu yazdı:
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-code...@googlegroups.com adresine e-posta gönderin.

Daha fazla seçenek için https://groups.google.com/d/optout adresini ziyaret edin.

--
İstanbul Coders Grubu Kurallarını okuyun: https://groups.google.com/forum/#!topic/istanbul-coders/LuV8_2lSO0w
---
Bu iletiyi Google Grupları'ndaki "istanbul-coders" grubuna abone olduğunuz için aldınız.
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-code...@googlegroups.com adresine e-posta gönderin.

Daha fazla seçenek için https://groups.google.com/d/optout adresini ziyaret edin.

--
İstanbul Coders Grubu Kurallarını okuyun: https://groups.google.com/forum/#!topic/istanbul-coders/LuV8_2lSO0w
---
Bu iletiyi Google Grupları'ndaki "istanbul-coders" grubuna abone olduğunuz için aldınız.
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-code...@googlegroups.com adresine e-posta gönderin.

Murat Kürtün

unread,
May 10, 2018, 5:47:20 PM5/10/18
to İstanbul Coders
Benim tarafta kullanıcı tiplerinide müşteri oluşturuyor ve yetkileride bu tiplere dağıtıyor.
Örneğin Depo Görelisi diye bir rol oluşturuyor ve bu role yetkileri veriyor.
Benim önceden bildiğim tek şey bahsettiğim key ler ve buların nerede kullanılacakları.

Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-coders+unsubscribe@googlegroups.com adresine e-posta gönderin.

Daha fazla seçenek için https://groups.google.com/d/optout adresini ziyaret edin.

--
İstanbul Coders Grubu Kurallarını okuyun: https://groups.google.com/forum/#!topic/istanbul-coders/LuV8_2lSO0w
---
Bu iletiyi Google Grupları'ndaki "istanbul-coders" grubuna abone olduğunuz için aldınız.
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-coders+unsubscribe@googlegroups.com adresine e-posta gönderin.

Daha fazla seçenek için https://groups.google.com/d/optout adresini ziyaret edin.

--
İstanbul Coders Grubu Kurallarını okuyun: https://groups.google.com/forum/#!topic/istanbul-coders/LuV8_2lSO0w
---
Bu iletiyi Google Grupları'ndaki "istanbul-coders" grubuna abone olduğunuz için aldınız.
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-coders+unsubscribe@googlegroups.com adresine e-posta gönderin.

Daha fazla seçenek için https://groups.google.com/d/optout adresini ziyaret edin.

--
İstanbul Coders Grubu Kurallarını okuyun: https://groups.google.com/forum/#!topic/istanbul-coders/LuV8_2lSO0w
---
Bu iletiyi Google Grupları'ndaki "istanbul-coders" grubuna abone olduğunuz için aldınız.
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-coders+unsubscribe@googlegroups.com adresine e-posta gönderin.

Erman Afacan

unread,
May 10, 2018, 6:59:32 PM5/10/18
to istanbu...@googlegroups.com
Bende benzer bir yapi uzerinde calisiyorum

Yetkilendirme icin `Permissions-api` dedigimiz bir servisimiz var
Resource ve Permission sisteme seed seklinde giriliyor ornegin Company resource icin Create Update Delete Read yapabilir seklinde tanimlar baslangicta elimde. Sonra Admin role olusturuyor ve bu rollere Permissions atiyor ornegin Company admin rolu CRUD islemlerini yapabilir diye seciyor  ve  sistemdeki kullanicilara tanimliyor.

Simdi bu yetkiyi SPA app ile paylasmanin bildigim kadariyla iki yontemi var ben de bunlardan birtanesini kullaniyorum.

1. rolleri authentication yapilan servisten  claims seklinde yollayabilirsin (aspnet Identity server ornekleri var)
   roller authentication token icerisinde geliyor olabilir ama permission mantigi custom bir yapi oldugu icin muhtemelen zor olacaktir
2. authentication token i aldiktan sonra datayi donecek servisin ilgili enpointine bir CustomAttribute  yazarak giris yapmis bir killanicinin bu isleme yetkisi var mi diye sorgula. Ornegin endpoint Update islemi yapacak ama kullanicinin update yetkisi yok ozaman UI tarafinda engellediginiz gibi BE tarafinda da guvenligi saglamis olursunuz

kanimca policy tanimlama isi cok static bir yapi ve code degistirmeden yonetemessiniz. dolayisiyla ben ikinci yapiyi kullaniyorum ve yetkilendirme ile alakali hic bir problem yasamadim.

Umarim faydali olmustur


---------------------------------------------------
Cagdas Erman AFACAN
Founder of Develoopers.Ltd. 
Principal Software Developer

Ozan Saral

unread,
May 10, 2018, 7:14:07 PM5/10/18
to istanbu...@googlegroups.com
Merhabalar,
Nasıl isimlendireceğiniz ve modeli tasarlayacağınız size kalmış fakat konsepti anlatmak için, erişebildigi module lere rights, o modul altındaki izinlerine permissions diyelim. Kullanıco auth olduktan sonra bu bilgileri edindiğinizi var sayalım. Bir permiasion servisine ihtiyacınız var bu veriyi okuyup, hangi module e ve o module altında hangi yetkiye sahip olduguna dair methodlar içermeli.
Angular routerda canactivate ve canactivate child şeklinde iki abstract method var, bunları yarattığınız servise entegre ettikten sonra yarattığınız her route için permission servisinden sorgulama yapabilir, dinamik bir yapı kurabilirsiniz.(Route guard)
Module içinde bir containerde hangi componenti görebiliri denetlemenin en dinamik yolu baait bir directive yaratmanız. Bu directive örneğin hasPermission=module.permission seklinde yolladıgınız yetkiyi, yine permission servisine ulasıp, orada bu module altında bu yetkiye sahip mi yi sorgulayığ, ngIf gibi bir logic ile render eder ya da etmez. Bunu herhangi bir yerde gizlemek istediginiz bir bölümğ o div e bu directive i tanımladıgınızda, altındaki gizleme işlemini dinamik olarak gerçekleştirmenizi saglayacaktır.
Bir de son olarak http interceptor yazmanız gerkiyor. Bu interceptor, apiden gelen hata kodlarına göre aksiyonlar almalı. Örneğin 403 statua code döndüğünde home sayfaaına redirect et gibi. Ya da 401 döndügğnde state te logout durumuba düşür ve login e dön gibi. Böylece uçtan uca bir kontrol mekanizmasına sahip olacaksınız. Unutulmaması gereken, client side da asla gerçekten güvenli bir sistem yaratılamayacağı gerçeğidir. Servisiniz in her zaman güvenliğini api tarafında ayrıntılı şekilde çalışmanız gerekiyor, hangi request e hangi veriyi hangi kullanıcı tipi için nasıl dönüyorsunuz konusunu, client ta nasıl olsa engelliyorum gibi düşünerek boşlamayın.

Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-code...@googlegroups.com adresine e-posta gönderin.

Daha fazla seçenek için https://groups.google.com/d/optout adresini ziyaret edin.

--
İstanbul Coders Grubu Kurallarını okuyun: https://groups.google.com/forum/#!topic/istanbul-coders/LuV8_2lSO0w
---
Bu iletiyi Google Grupları'ndaki "istanbul-coders" grubuna abone olduğunuz için aldınız.
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-code...@googlegroups.com adresine e-posta gönderin.

Daha fazla seçenek için https://groups.google.com/d/optout adresini ziyaret edin.

--
İstanbul Coders Grubu Kurallarını okuyun: https://groups.google.com/forum/#!topic/istanbul-coders/LuV8_2lSO0w
---
Bu iletiyi Google Grupları'ndaki "istanbul-coders" grubuna abone olduğunuz için aldınız.
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-code...@googlegroups.com adresine e-posta gönderin.

Daha fazla seçenek için https://groups.google.com/d/optout adresini ziyaret edin.

--
İstanbul Coders Grubu Kurallarını okuyun: https://groups.google.com/forum/#!topic/istanbul-coders/LuV8_2lSO0w
---
Bu iletiyi Google Grupları'ndaki "istanbul-coders" grubuna abone olduğunuz için aldınız.
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-code...@googlegroups.com adresine e-posta gönderin.

Daha fazla seçenek için https://groups.google.com/d/optout adresini ziyaret edin.

--
İstanbul Coders Grubu Kurallarını okuyun: https://groups.google.com/forum/#!topic/istanbul-coders/LuV8_2lSO0w
---
Bu iletiyi Google Grupları'ndaki "istanbul-coders" grubuna abone olduğunuz için aldınız.
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-code...@googlegroups.com adresine e-posta gönderin.

Daha fazla seçenek için https://groups.google.com/d/optout adresini ziyaret edin.

--
İstanbul Coders Grubu Kurallarını okuyun: https://groups.google.com/forum/#!topic/istanbul-coders/LuV8_2lSO0w
---
Bu iletiyi Google Grupları'ndaki "istanbul-coders" grubuna abone olduğunuz için aldınız.
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-code...@googlegroups.com adresine e-posta gönderin.

Ali KOCA

unread,
May 11, 2018, 4:26:40 AM5/11/18
to istanbul-coders
Merhabalar;
Client tarafında hiç bir müdahalede bulunmasak. Çünkü sonuçta kullanıcı da client tarafındaki kodu değiştirebilir.
Bunun yerine bütün yetkileri veritabanında tanımlasak. Client tarafından gelen API talebi sırasında o talebi karşılama yetkisi varsa işlemi yapsak (select, update, ...) yoksa hata mesajı göndersek.
Çok mu kullanışsız olur?



10 Mayıs 2018 Perşembe 23:54:30 UTC+3 tarihinde murat kurtun yazdı:

Serkan Köse

unread,
May 11, 2018, 4:30:43 AM5/11/18
to istanbu...@googlegroups.com
Selam Ali
Dediğin olay daha mantıklı ama atıyorum bi companentim var ve
içerisinde 3 tane buton var kişilere göre bu 3 butonu gösterip
göstermeme yapıyorsan mantıksız oluyor. Ama direk companent gizleyip
açma gibi bir olay varsa api tarafından yetkilendirme yapmak daha
mantıklı.
Bizim sistem site-user-permisson diye bi endpoint var user tiplerine
göre bütün companentleri ekliyoruz. Kişi login olduktan sonra
site-user-permisson u tekrardan çağırıp companent servisimizi
tekrardan çalıştırıyoruz ve bu şekilde kişinin yetkisi yoksa hiç bir
işlem yapamıyor.

11 Mayıs 2018 11:26 tarihinde Ali KOCA <yavuz.sel...@gmail.com> yazdı:

Ali KOCA

unread,
May 11, 2018, 4:53:27 AM5/11/18
to istanbul-coders
Merhabalar Serkan Bey;
Cevabınız için teşekkürler.
Bu teknolojileri yeni kullanmaya başlıyorum.
Soru zaten benim de zihnimi kurcalayan bir konu idi. Ama bu tarz bir çözüm düşünmükteydim.
Cevabınızdaki çözümü denemeyi düşünüyorum.
Peki daha önceki söylediğime ek olarak (API üzerinde yetkisini de kontrol etmek şartıyla) ilgili buton ve bileşenlerin ng-show özellilerini sayfanın ilk yüklenmesi aşamasında ayarlasak...
Sizin bahsettiğiniz yöntemi uygulamış olur muyuz?


10 Mayıs 2018 Perşembe 23:54:30 UTC+3 tarihinde murat kurtun yazdı:
Merhabalar,

Enes Faruk Meniz

unread,
May 11, 2018, 5:36:08 AM5/11/18
to istanbu...@googlegroups.com
ng-show degil de ng-if daha uygun konuya :)

Sent from my iPhone

Ali KOCA

unread,
May 11, 2018, 6:48:49 AM5/11/18
to istanbul-coders
Merhabalar;
Aşağıdaki gibi düşünmüştüm. Böyle yanlış mı olmuş?
<!DOCTYPE html>
<html lang="tr">

<head>
<meta charset="UTF-8">
<title>Yetki</title>
</head>
<body ng-app="Uygulama">
<div ng-controller="AnaController">
<button ng-show="y_gorme">Göster</button>
<button ng-show="y_silme">Sil</button>
</div>
</body>
<script>
var uyg = angular.module("Uygulama", []);
uyg.controller("AnaController", function($scope) {
//Bu değişkenlere API den çektiğimiz yetki durumlarına göre atama yapıyoruz.
$scope.y_gorme = true;
$scope.y_silme = false;
});
</script>
</html>


10 Mayıs 2018 Perşembe 23:54:30 UTC+3 tarihinde murat kurtun yazdı:
Merhabalar,

İsmail Arılık

unread,
May 11, 2018, 10:02:23 AM5/11/18
to istanbu...@googlegroups.com
Murat Kürtün bey, bence hazır çözümlere yönelin. Auth meselesi doğası gereği karışık. Deneyimim olmadığı için bir kütüphane öneremiyorum.
Ali KOCA bey, UI'ı kullanıcının değiştirebileceğini unutarak hareket etmek en doğrusu bana göre. UI'da dediğiniz gibi kullanıcı her şeyi değiştirebilir. Ancak bunu yaparak sadece kendi başına dert açar. Çünkü arka uç her zaman UI'dan gelecek garip garip isteklere hazırlıklı olmalı.

11 May 2018 Cum, 13:48 tarihinde, Ali KOCA <yavuz.sel...@gmail.com> şunu yazdı:
--
İstanbul Coders Grubu Kurallarını okuyun: https://groups.google.com/forum/#!topic/istanbul-coders/LuV8_2lSO0w
---
Bu iletiyi Google Grupları'ndaki "istanbul-coders" grubuna abone olduğunuz için aldınız.
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-code...@googlegroups.com adresine e-posta gönderin.
Daha fazla seçenek için https://groups.google.com/d/optout adresini ziyaret edin.
--

İsmail Arılık - https://forum.yazbel.com/

Serkan Köse

unread,
May 11, 2018, 11:55:26 AM5/11/18
to istanbu...@googlegroups.com
Aynen Ali Bey
Api den user diye bi data gelir ve kişinin yetkisi varsa ng-show yada
ng-if ile gösterip göstermeme olayını halledebilirsiniz. (ng-if
kullanırken dikkat etmek gerekiyor. )

11 Mayıs 2018 11:53 tarihinde Ali KOCA <yavuz.sel...@gmail.com> yazdı:
Reply all
Reply to author
Forward
0 new messages