Asp.NET Core Identity – Google Login
Merhaba,
Bir önceki Asp.NET Core Identity – Facebook Login başlıklı makalemizde Asp.NET Core Identity mimarisi ile Facebook üzerinden login işlemlerinin nasıl yapıldığını ele almıştık. Bu içeriğimizde ise yine benzer mahiyette ilgili mimari ile Google login işlemlerini ele alacağız…
Herşeyden önce şunu bilmenizi isterim ki, Asp.NET Core Identity mimarisinde “Üçüncü Taraf Kimlik Doğrulama” yapılanmaları tüm sosyal ağlar için birebir aynı olmak kaydıyla geçerlidir. Yani Google login yapabilmek için Facebook, Twitter vs. loginler de ne yaptıysak birebir aynısını yapmamız gerekmektedir.
Bu sebepten dolayı ben bu ve bundan sonraki tüm üçüncü taraf kimlik doğrulama makalelerimde yukarıda adresini verdiğim Facebook login makalesinde oluşturduğum proje üzerinden anlatım sergileyeceğim. Neticede genel çatıyla birlikte temeli anlamlandırdığınız taktirde istediğiniz herhangi bir sağlayıcı tarafından kimlik doğrulama özelliğini uygulamanıza kazandırmanızın ne kadar basit olduğuna sizde şahit olacaksınız.
Google Developer’dan Uygulama Yapılandırma
İlk olarak tüm sağlayıcılarda olduğu gibi karşı tarafta uygulamamızı temsil edecek bir proje yapılandırmamız gerekmektedir. Bunun için https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin adresine tıklayarak uygulamanıza Google Authentication özelliğini entegre edecek bir yapılandırmada bulunabilirsiniz.
İlgili bağlantıya tıkladıktan sonra açılan sayfa üzerinden aşağıdaki önergeleri adım adım uygulayınız;
- Adım 1
Açılan sayfada bulunan ‘Configure a project‘ butonuna tıklayarak açılan pencerede uygulama adını belirttikten sonra ‘Next‘ butonuna tıklayınız.
- Adım 2
Bir ürün ismi belirleyiniz ve ‘Next‘ butonuna tıklayınız.
- Adım 3
Sıradaki pencerede ‘Where are you calling from?‘ yazan alanda ‘Web Browser‘ sekmesini seçiniz ve ardından aşağısında çalışma yapılan uygulamanın adresini belirledikten sonra ‘Create‘ butonuna tıklayınız.
- Adım 4
Nihai olarak karşınıza “Client ID” ve “Client Secret” değerlerini barındıran aşağıdaki pencere gelecektir.
Her ne kadar bizlere lazım olan bu veriler elde edilmiş olsada daha işimiz bitmedi 🙂 5. adımdan devam ediniz… 🙂 - Adım 5
Google ürününü oluşturduktan sonra https://console.cloud.google.com/ adresine giriniz ve soldaki menüden ‘API’ler ve Hizmetler‘ kategorisine gelerek ‘Kitaplık‘ sekmesine tıklayınız.
- Adım 6
Açılan pencerede arama çubuğuna “Google+” yazınız ve gelen sonuçlar arasından ‘Google+ API‘ kütüphanesini Google projenizde etkinleştiriniz.
- Adım 7
Google+ API kütüphanesini aktifleştirdikten sonra sırada bu uygulamaya ait kimlik bilgileri oluşturmaya gelmiştir. Bunun için soldaki menü üzerinden ‘API’ler ve Hizmetler‘ kategorisine gelerek bu sefer ‘Kontrol Paneli‘ sekmesine giriniz.
- Adım 8
Açılan pencerede aşağıdaki listede bulunan Google+ API kütüphanesine tıklayınız.
- Adım 9
Ve ardından sağ üst köşedeki ‘Kimlik Bilgileri Oluştur‘ sekmesine tıklayınız.
- Adım 10
Açılan sayfada ‘Google+ API’ seçiniz ve ardından ‘Hangi kimlik bilgilerine ihtiyacım var?‘ butonuna tıklayınız.
- Adım 11
Kimlik bilgilerinin oluşturulduğunu gördükten sonra ‘Bitti‘ butonuna tıklayınız.
- Adım 12
Şimdi sıra OAuth istemci kimliği oluşturmaya geldi. Bunun için yine ‘API’ler ve Hizmetler‘ kategorisindeki ‘Kimlik bilgileri‘ sekmesi üzerinden ‘Kimlik bilgilerini oluştur‘ menüsü altındaki ‘OAuth istemci kimliği‘ sekmesini açınız.
- Adım 13
Açılan pencerede aşağıdaki ekran görüntüsünde de olduğu gibi uygulama türünü ‘Web uygulaması‘ olarak seçiniz, yetkilendirilmiş sayfa olarak web uygulama adresinizi belirtiniz ve geri dönüş yolunuda Identity mimarisinin Google API için varsayılan olarak belirlediği “signin-google” şeklinde belirtiniz.
- Adım 14
Tüm bu işlemler neticesinde, nihai olarak uygulamaya dair aşağıdaki gibi “Client ID” ve “Client Secret Key” bilgileri edinilmiş olacaktır.
Adım 4‘te elde ettiğimiz id ve secret keyler yerine bizim esasında bu değerleri kullanacağımızı bilmenizi isterim.Şimdi yapmamız gereken işlem projemize sağ tıklayarak ‘Manage User Secrets‘ sekmesi üzerinden secrets.json dosyasını açarak bu elde edilen verileri oraya eklemektir.{ "FacebookAppId": "464106821187753", "FacebookAppSecret": "eb9e2bbeab7a28ee97cbdbc20935ed97", "GoogleClientId": "711179820585-85gbprstal7kqra3aph8vp1ir7bombm9.apps.googleusercontent.com", "GoogleClientSecret": "QTddNtWLxBrqGV1hXsgZRKGg" }
Makalemizin başında da bahsettiğim gibi bir önceki Facebook login ile ilgili makale üzerinden örneklendirme yapıyor olduğumuzdan dolayı ilgili dosya içerisinde Google uygulamasının dışında da diğer uygulamalara dair kodların bulunması oldukça doğaldır…
Tüm adımları tamamladıktan sonra artık Google uygulaması oluşturulmuş ve login işlemleri için hali hazır hale getirilmiş bulunmaktadır.
Şimdi ilk olarak yapmanız gereken Google authentication yapılanmasını kullanabilmek için Microsoft.AspNetCore.Authentication.Google kütüphanesini projenize yükleyiniz.
Ardından “Startup” dosyasındaki “ConfigureServices” metodu içerisinde aşağıdaki çalışmayı gerçekleştiriniz.
public class Startup { public IConfiguration Configuration { get; set; } . . . public void ConfigureServices(IServiceCollection services) { . . . services.AddAuthentication() .AddFacebook(x => { x.AppId = Configuration["FacebookAppId"]; x.AppSecret = Configuration["FacebookAppSecret"]; x.CallbackPath = new PathString("/User/Hata"); }) .AddGoogle(x => { x.ClientId = Configuration["GoogleClientId"]; x.ClientSecret = Configuration["GoogleClientSecret"]; }); . . } }
Yukarıdaki kod bloğunda 20 ile 24. satırlar arasına göz atarsanız eğer “AddGoogle” fonksiyonu ile uygulamamıza Google Authentication eklenmiştir. Böylece ilgili uygulamada Facebook olduğu gibi Google login işlemide gerçekleştirilebilir vaziyettedir.
Sırada Google login talebinin sorumluluğunu üstlenecek olan action metodun geliştirilmesi vardır. Bunun için “User(Controller).cs” dosyasında “GoogleLogin” isimli bir action oluşturunuz ve içeriğini aşağıdaki gibi doldurunuz.
public IActionResult GoogleLogin(string ReturnUrl) { string redirectUrl = Url.Action("ExternalResponse", "User", new { ReturnUrl = ReturnUrl }); //Google'a yapılan Login talebi neticesinde kullanıcıyı yönlendirmesini istediğimiz url'i oluşturuyoruz. AuthenticationProperties properties = _signInManager.ConfigureExternalAuthenticationProperties("Google", redirectUrl); //Bağlantı kurulacak harici platformun hangisi olduğunu belirtiyor ve bağlantı özelliklerini elde ediyoruz. return new ChallengeResult("Google", properties); //ChallengeResult; kimlik doğrulamak için gerekli olan tüm özellikleri kapsayan AuthenticationProperties nesnesini alır ve ayarlar. }
Yukarıdaki kod bloğuna göz atarsanız eğer 5. satırdaki hangi platforma login talebinde bulunulduğunu belirttiğimiz “ConfigureExternalAuthenticationProperties” metodunun birinci parametresine verilen “Google” değerinin birebir aynı olması gerektiğine özen gösteriniz.
Bu işlemden sonra artık son olarak Google login talebi neticesinde dönen sonucun işlenmesi ve gerekli giriş yahut kayıt işlemlerinin yapılması gerekmektedir. Bunun için yukarıdaki “GoogleLogin” metodunda oluşturduğumuz redirect url’de ki “ExternalResponse” isimli metodunu aşağıdaki gibi inşa ediniz.
public async Task<IActionResult> ExternalResponse(string ReturnUrl = "/") { ExternalLoginInfo loginInfo = await _signInManager.GetExternalLoginInfoAsync(); //Kullanıcıyla ilgili dış kaynaktan gelen tüm bilgileri taşıyan nesnedir. //Bu nesnesnin 'LoginProvider' propertysinin değerine göz atarsanız eğer hangi dış kaynaktan geliniyorsa onun bilgisinin yazdığını göreceksiniz. if (loginInfo == null) return RedirectToAction("Login"); else { Microsoft.AspNetCore.Identity.SignInResult loginResult = await _signInManager.ExternalLoginSignInAsync(loginInfo.LoginProvider, loginInfo.ProviderKey, true); //Giriş yapıyoruz. if (loginResult.Succeeded) return Redirect(ReturnUrl); else { //Eğer ki akış bu bloğa girerse ilgili kullanıcı uygulamamıza kayıt olmadığından dolayı girişi başarısız demektir. //O halde kayıt işlemini yapıp, ardından giriş yaptırmamız gerekmektedir. AppUser user = new AppUser { Email = loginInfo.Principal.FindFirst(ClaimTypes.Email).Value, UserName = loginInfo.Principal.FindFirst(ClaimTypes.Email).Value }; //Dış kaynaktan gelen Claimleri uygun eşlendikleri propertylere atıyoruz. IdentityResult createResult = await _userManager.CreateAsync(user); //Kullanıcı kaydını yapıyoruz. if (createResult.Succeeded) { //Eğer kayıt başarılıysa ilgili kullanıcı bilgilerini AspNetUserLogins tablosuna kaydetmemiz gerekmektedir ki //bir sonraki dış kaynak login talebinde Identity mimarisi ilgili kullanıcının hangi dış kaynaktan geldiğini anlayabilsin. IdentityResult addLoginResult = await _userManager.AddLoginAsync(user, loginInfo); //Kullanıcı bilgileri dış kaynaktan gelen bilgileriyle AspNetUserLogins tablosunda eşleştirilmek suretiyle kaydedilmiştir. if (addLoginResult.Succeeded) { await _signInManager.SignInAsync(user, true); //await _signInManager.ExternalLoginSignInAsync(loginInfo.LoginProvider, loginInfo.ProviderKey, true); return Redirect(ReturnUrl); } } } } return Redirect(ReturnUrl); }
Derleme, Çalıştırma, Test Etme
Şimdi sıra geliştirilen uygulamayı test etmeye gelmiştir. Bunun için uygulamayı derleyip, çalıştırdığınız vakit aşağıdaki ekran görüntüsünde olduğu gibi Google login yapılanmasını test ettiğiniz taktirde kusursuz çalıştığını görebilirsiniz.
İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…
Not : Örnek çalışma projesini indirebilmek için buraya tıklayınız.
TEbrik ederim ilk yorum benden gerçi okumadım ama neyse
Merhaba Asp.Net Core Kurumsal Katmanlı Mimari Repository Design ile Sosyal Login, SMS Login, Google Capta ve RSS işlemleri nasıl oluyor ? Ayrıca hocam Asp.Net Core Kurumsal Katmanlı Mimari CDN, Podcast, Dinamik SiteMap Oluşturulması hakkında bilgi verebilme imkanınız var mı ?
Saygılar sunarım
Merhaba,
Sorduklarınızın her biri ayrı ayrı başlıklar altında uzun uzun değerlendirilmesi gereken yöntemler, stratejilerdir. Önceki makalelerime göz atarsanız eğer yer yer meramınız olan bazı başlıklar üzerine derinlemesine makaleler ele almış bulunmaktayım. Size önerim, komple bu başlıkları taramak yerine parça parça internette araştırarak kaynaklar edinebilir ve hepsini okuyup gerekli pratikler neticesinde iyice sindirdikten sonra bütünsel olarak kullanabilirsiniz.
Kolay gelsin.
Merhaba , IdentityServer4 vb kütüphaneler ile SSO yapısı örnekleri kurabilir misiniz ? Yada bununla ilgili elinizde mevcut yazılar var mı ?
Merhaba,
Notu aldım 🙂 Umarım en kısa zamanda ilgili konuya dair bir içerik oluşturabilirim.
hocam aspnet core ile dinamik sitemap yapımı hakkında da bir yazı yazar mısınız?
Asp.NET MVC – RSS Oluşturma
Belki bu içerik ihtiyacını giderebilir.
Hata 400: redirect_uri_mismatch
The redirect URI in the request, https://localhost:44367/signin-google, does not match the ones authorized for the OAuth client. To update the authorized redirect URIs, visit: https://console.developers.google.com/apis/credentials/oauthclient/${your_client_id}?project=${your_project_number}
sürekli bu hatayı veriyor anlamadım 🙁
Google Apps’de https://localhost:44367 url’iyle eşleşen bir uygulama oluşturmanız ve öyle denemeniz gerekmektedir.
Merhaba,
local ortamda sizin kodu kullanarak google login girişi yapabilmekteyim fakat kendi domain adresim de hata almaktayım. Hata https://www.domain.com/User/ExternalResponse#
HTTP ERROR 404
Merhaba,
Demek ki dönüş yaptığınız adres hatalı. Yani yanlış bir rotaya sahip. Kontrol etmenizi öneririm.
Sanırım goole bazı değişiklikler yaptı Facebook çok güzel çalışıyor ama google ne yaparsam yapayım hep
Hata 400: redirect_uri_mismatch
The redirect URI in the request, https://localhost:44367/signin-google, does not match the ones authorized for the OAuth client. To update the authorized redirect URIs, visit: https://console.developers.google.com/apis/credentials/oauthclient/${your_client_id}?project=${your_project_number}
Bu hatayı veriyor. Bir türlü çözemedim sorunu muhtemelen google tarafında ayarlarda bir kaç değişiklik daha yapılması lazım
Google tarafında şu adres konfigürasyonunu kontrol ediniz. https://localhost:44367/signin-google
Eğer bir problem göremiyorsanız genel konfigürasyonlara detaylı göz atmakta fayda var.
Google ın arayüzü değişmiş. kod kısmı değil de google ın sitesinde ki ayarlamaları yeni arayüz de ki haliyle tekrar yapıp güncelleseniz harika olur