AUTHENTICATION(KİMLİK DENETİMİ):

 

Asp ortamında kullandığımız güvenlik yapısını MVC ortamında da kullanabiliriz. Böylelikle istediğimiz sayfalara erişim sağlayabiliriz. Yetkisiz kişiler ise istemediğimiz sayfalara giremez. İlk olarak otomatik olarak kimlik denetimi yapan bir uygulama ile başlayacağız. Aynı zamanda FaceBook,Google gibi yapıları da projemize dahil edeceğiz. Bunun bir uygulama ile açıklayalım.

 

UYGULAMA:

 

1) Uyg13 isimli bir uygulamayı bu sefer SinglePage Application kalıbını seçerek yapalım.

 

 

 

 

 


 

MVC ve Web API otomatik olarak işaretli gelir.

 

 

 

 

 

 

 

 

 

 

 

 

 

2) Projemizi direk olarak çalıştırırsak karşımıza şekildeki login ekranı gelecektir.

 


 

3)  Programı sonlandıralım ve HomeController.cs  dosyasını açalım. Burada sadece Index action’ı vardır. Buraya aşağıdaki iki action’ı ekleyelim.

        public ActionResult a()

        {

            return View();

        }

 

       

 

        public ActionResult b()

        {

            return View();

        }

 

4) Action içinde sağ tuşa basarak Add View seçeneği ile iki tane a ve b isimli View ekleyelim.

 

 

 

       

 

 

 

 

 

 

 


 

5) Şimdi ilk önce a.cshtml dosyasını seçerek sağ tuş View in browser ile yükleyelim. Ardından da b.cshtml dosyası için aynı işlemi yapalım.

 

 

 

 

 

 

Her ikisinde de aynı Index.cshtml dosyasında olacağı gibi karşımıza  Login ekranı gelecektir.

 

 

 

 


 

6) Bunu sağlayan sebebi ilk önce bulalım. Bunun için HomeController sayfasını açalım ve Tüm Actionları kapsayan [Authorize] ifadesinin Class üzerinde yazdığı göreceksiniz. Bu varsayılan olarak vardı ve biz Classlar içine Actionlar koydukça onlarda bu yapıdan etkilendi.

 

 

 

 

 

 

 

 

 

 

 

 

7) Eğer bazı sayfaları kimlik denetimi dışına taşımak isteseniz, yapacağınız iki şey var. Ya tepedeki [Authorize] ifadesini sileceksiniz ve bu ifadeyi kimlik denetim yapılması istediğiniz Action’ların başına yazacaksınız veya benim yaptığım gibi yukarıya dokunmadan sadece yapılmasını istemediğiniz sayfaların üstüne [OverrideAuthorization] ifadesini yazacaksınız.

 

 

 

 

 

 

 


 

8) Index ve b View’larını yüklediğinizde kimlik denetimi ekranı devreye girecektir. Ancak a sayfasını yüklediğinizde kimlik denetim ekranı devreye girmeyecektir.

 

 

 

 

 

 

 

 

 

9) Şimdi tekrar login ekranınıza dönelim ve bir kullanıcı kaydı yapmak için Register as new user linkine tıklayalım.

 

 

 


 

 

10) Burada şifre girerken en az 6 karakter olması gerekir. Bunun yanı sıra en az bir tane sayı olacak ve en az bir tane büyük ve küçük harf olacak. Ayrıca $ gibi bir karakterde kullanılması gerekir.

Örneğin Oha$11

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

11) İlk kayıt ekranından sonra veya daha sonraları girdiğinizde gideceğiniz sayfa şekildeki sayfadır.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

12) Ben ufak bir değişiklik yaptım ve sayfa yüklenince karşıma yukardaki şeklin yerine aşağıdaki şekil geldi. PEKİ bu nasıl oldu??????????

 

 

 

 

 

 

 

 

 

 

13) Varsayılan olarak bir projede hangi sayfanın ilk olarak yükleneceğini daha önce belirtmiştik. Bunun için App_Start içindeki RouteConfig.cs dosyasını açıyoruz.

 

 

 

 

 

 

 

 

 

 

Burada yolun Home kontrolü içindeki  altındaki Index action’ı olduğunu öğreniyoruz. Dolayısı ile bununla aynı isimde olacak  Index.cshtml dosyasına bakmam gerekiyor.

 

 

 

 

 

 

 

14) Index.cshtml dosyasını açtığımda ise şekildeki görüntü ile karşılaşıyoruz. Buradan bir Partial dosyasına yönlendirme yapılmış oda _Home isimli bir sayfa o zaman onu bulmam gerekiyor.

 


 

15) _Home sayfasında şekildeki değişikliği yaparsanız benim yakaladığım görüntüye ulaşabilirsiniz.

 

 

 

 

 

 

16) Veya a sayfanızın ilk olarak gelmesini isterseniz. App_Start içinde aşağıdaki değişikliği yapmanız gerekir.

 

 

 

 

 

 

 

17) Bu sayfamız da kimlik denetimi yoktu buradan login olmak isterseniz üsteki login linkine tıklayabilirsiniz.

 

 


 

18) Login olduğunuzda tekrar karşınıza a.cshtml dosyası gelecektir. Yalnız dikkat edin ilk önce bir Index.cshtml dosyasına uğruyor sonra belirtiğimizsayfaya gidiyor. Bunu b.cshtml içinde yapsanız yine aynı şey olacak.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

19) Bu ara geçişleri önlemek için Index.cshtml dosyasını açarak  aşağıdaki iki satırı silin. Benim tavsiyem boş bir sayfa getirip adını Index.cshtml yaparak ondan sonra yürümeniz. Ancak var olan Index.cshtml dosyasında da böyle bir şey yapabilirsiniz. Veya partial içindekileri de değiştirebilirsiniz. Ozaman Route.config içide bir değişiklik yapmanıza gerek kalamaz.

 

 

 

 

 

 

 

 

20) Ben çalıştırınca ilk olarak karşıma a.cshtml dosyasının gelmesini istiyorum ki bunu nasıl yapacağımızı biliyoruz ve bu sayfada kimlik denetimi olmadığı için direk yüklenecektir.

 

 

 

 

 

Ardından log on olunca beni b.cshtml dosyasına göndersin.

 

21) Bunun için ilk olarak AccountControllers.cs dosyasını açalım.

 


 

22) Dosyanın içinde aşağıdaki satırı bulalım. En altta Helpers diye bir bölüm var onun başındaki artıyı açarsanız bulabilirsiniz.

 

 

 

 

 

 

 

 

23) Index yazısını b olarak değiştirelim.

 

 

 

 

 

 

 

24) Çalıştırdığımızda karşımıza a sayfası gelecektir.

 


 

25) Sağ üst köşedeki Login ekranına tıklayarak Login bilgilerini girerseniz karşınıza b ekranı gelir.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

26) Log off olunca tekrar login sayfasına dönersiniz.

 

 

 

 

 

 

27) Ben log off olunca güle güle yazan bir ekran gelsin. Bunun için HomeController içinde c action’ını basit şekilde oluşurun. Ancak [OverrideAuthorization] yapmayı unutmayın. Bununla ilgili View’ı oluşturun ve içine GÜLE GÜLE yazın.

[OverrideAuthorization]   

public ActionResult c()

        {

            return View();

        }


 

 

 

 

 

 

 

 

 

 

 

 

28) AccountControllers.cs dosyasını açalım. Aşağıdaki satırı bulalım ve bunu c olarak değiştirelim.

 

 

 

 

 

 

 

 

 


 

29) Çalıştıralım. İlk olarak a sayfası yüklenerek. Login olunca b sayfası yüklenecek ve Log off olunca  c sayfası yüklenecek.

 

 

 

 

 

 

 

 

 

30) Şimdi şu login ekranını Türkçeleştirelim. Ben burayı Türkçeleştireceği m siz de diğer kısımları yaparsınız. Unutmayın bant için _Layout sayfasını kullanacaksınız. Yapamazsanız yuksel1968@yandex.com adresine mail atınız.

 

 

 


 

Bunun için ilk olarak Model klasörünü bularak buradan AccountViewModel  içine girelim. Bir çok şeyin buradan değiştirileceğini anlayacaksınız.

 

 

 

 

 

 

 

 

 

31) LoginViewModel kütüphanesini bularak şekildeki değişiklikleri yapın.

 

 

 

 

 

 

 

 

 

 

 


 

32) Sayfayı yüklediğinizde görüntü şekildeki gibi olacaktır.

 

 

 

 

 

 

 

 

 

 

 

 

 

33 )Her şey Türkçe olmadı mı o zaman Login.cs dosyasını açarak kalanları da oradan yapınız.

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

34) Ve bu kadar diğer kısımlar için ise _ExternalLoginsListPartial sayfasına gidiniz.

 

 


 

 

 

 

 

 

 

 

 

 

 

35)  Bu kısım için son olarak şunu söyleyeyim ondan sonra External Auyhentication yapısına geçeceğim. Üye kaydı yaparken hatırlarsanız Şifre en az 6 karakter olması gerekiyordu ve bir çok büyük harf küçük harf istiyordu. Eğer bunu istemiyorsanız App_Start altında bulunan IdentityConfig.cs dosyasını açalım.

 

 

 


 

36) Aşağıdaki alanlarda istediğimiz değişiklikleri yapalım. Ben her şeyi iptal ettim. Sadece 1 karakter şifre zorunluluğu bıraktım.

 

 

 

 

 

 

 

 

 

 

 

 

 

Ayrıca E-mail istemiyorsak hemen bu satırların üstünde bulunan E-Maille ilgili kısmı da false yapalım.

37) Bu işlemden sonra yeni bir kayıt oluşturduğunuzda tek karakteri kabul etmeyecektir. Ancak 111111 gibi hepsi sayı veya rakam olan şifreler girebileceksiniz.

 

 


 

38) Peki karakter sayısını nasıl ayarlayacağız. Yani hem email girmeyeceğim hem de sadece 1 karakter gireceğim. Boş geçersem şekildeki gibi uyaracak.

 

 

 

 

 

 

 

 

 

 

 

 

39) Bunun için Model klasörü altında bulunan AccountViewModels klasörünü açalım.

 

 

 

 

 


 

40) Şekildeki seçili alanlardaki değişiklikleri yapalım.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



 

41) Artık giriş yapabiliriz. Ancak doğru kayıt yaptığımız zaman Index sayfasına gidiyor. Bu durumda da b sayfasına gitmesini istersek tekrar AccountController.cs dosyasını açalım ve şekildeki değişikliği yapalım.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

EXTERNAL AUTHENTICATION:

 

Bu kısımdan itibaren FaceBook, Google gibi dış ortamları kullanarak kimlik denetimi yapacağız.  Aynı uygulamadan devam ediyoruz.

 

42) Varsayılan olarak external kimlik denetimlerinin hepsi kapalıdır. Bunu görmek için App_Start kalsörünü açalım ve Startup.Auth.cs dosyasını seçelim.

 

 

 

 

 

 

 

En altta açıklama satırı şeklinde görülmektedir.

 

 

 

 

 

 

 


 

FACEBOOK:

 

Başlamadan önce en son güncellemeleri gerçekleştirelim.

 

 

 

 

 

 

 

 

 

 

 

 

 

Veya bu uzun sürecekse bu işlemden sorumlu olan OWIN packages’leri bulup bunları güncelleyebilirsiniz.

 

 

 

 


 

42)  Facebook için ilk olarak bir App_Id ve App_Secret bilgisine ihtiyacımız var eğer daha önce almamış iseniz  http://go.microsoft.com/fwlink/?LinkID=252166. Adresine gidiniz.

Şekildeki linke tıklayarak diğer şekildeki işlemleri adım adım gerçekleştiriniz.

 

 

 

 

 

 

 

https://developers.facebook.com/apps

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Sol kısımdan Settings kısmına girin.

 

 

 

 

 

 


 

43) Basic kısmından Add Platform butonuna tıklayın.

 

 

 

 

 

 

 

 

 

 

 

 

44) Web Site seçimi yapın.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

45) AppID ve App Secret bilgilerini not edin. Site URL’ye bu yapının çalışacağı URL’yi girin bizim ki local de çalışacağı için onu girdik. Siz de Port numarası değişiklik gösterebilir. Internet ortamına yollarken bunu değiştirmeniz gerekir veya Yeni bir APP ID üretmeniz gerekir. Her şey tamamsa Save Changes butonuna basabilirsiniz.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

46) App_Start klssörünü içindeki  Startup.Auth.cs dosyasının içinde aşağıdaki alanı bulalım.

 

 

 

 

 

 


 

47)  Bu satırı açarak Facebook’dan elde ettiğimiz AppId ve AppSecret değerlerini yazalım.

 

 

 

 

 

 

 

 

 

 

 

48) F5 ile projemizi çalıştırıp Login linkine tıkladığımızda görüntü şekildeki gibi olacaktır.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

49) Buradan Facebook linkine tıklayınız ve giriniz.

 

 

 

 

 

 

 

 

 

 

50) Uyarı ekranını Tamam ile geçelim.

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

51) Devam ettiğiniz zaman Facebook login sayfasına gideceksiniz. Burada kullanıcı adı ve şifresini giren herkes sisteme login olabilecek.

 

 

 

 

 

 

 

 

 

 

52 )Yukarıdaki ekrana Facebook kullanıcı adı ve şifrenizi gireceksiniz.

 

53) Facebook hesabınızla ilişkilendirmek için SignUp butonuna basacaksınız

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

54) Ve web sayfanız karşınızda;

 

 

 

 

 

 

 

 

 

 

 

Güvenlik için projenizin özelliklerinden SSL yapısını aktif hale getirebilirsiniz

 

 

 

 


 

Güvenliği açtığını zaman proje adı üzerinde sağ tuşa basıp Web sekmesinden yolunuzu şekildeki gibi https’li yazmanız gerekir. Server lokalde olduğu için IIS Express’dir.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Ayrıca Facebook sayfasında ID ve şifre oluşturduktan sonra buradaki URL’ye https’li yazmanız gerekir.

 

 

 

 

 

 

 

 

 

 

 

 

Böylelikle Facebook ve Google bağlantılarını güvenli yapmış olursunuz.