Asp .Net Mvc ile Facebook Login İşlemleri Ve Profil Resmini Çekme
Bu yazımda, Asp.net Mvc ile facebook girişi nasıl yapılır ve giriş yapacak kullanıcının E-posta, İsim ve Profil resmini nasıl çekeceğemizi anlatacağım.
Asp.net Mvc ve Identity seçenekleri ile projemi açtım.
Login işlemlerini yapacağınız adresi almamız gerekiyor. Url’imizi bir yere not alıyoruz.
https://developers.facebook.com/ adresine girin facebook hesabınızla giriş yapın My Apps‘i Tıklayın.Add a new app’i tıklayarak yeni bir app oluşturun.
Facebook Login Set up’ı tıklıyoruz webi seçiyoruz. Sonra Url’ye kendi url’imizi yazıp kaydedelim
Facebook developer sayfamızda oluşturduğumuz appi’i tıklayıp sonra soldan settings > basici tıklayın aşağıdakine benzer bir sayfa gelecek. Aapp id ve showa tıklayarak app secret bilgilerinizi bir yere not alın save changes diyerek kaydedin.
yukarıdan Toolsa tıklayalım permission kısmında user_photos kısmını ekleyelim
Projemize geri dönüp not aldığımız app id ve app secret bilgilerini yazalım. App start içindeki Startup.Auth.cs‘yi açın UseFacebook kısmını yorumdan çıkarın ve bilgilerinizi yazın
IdentityModel’deki ApplicationUser sınıfına profilepath ve display name adında iki tane property ekleyelim
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public class ApplicationUser : IdentityUser { public async Task<ClaimsIdentity> GenerateUserIdentityAsync(UserManager<ApplicationUser> manager) { // Note the authenticationType must match the one defined in CookieAuthenticationOptions.AuthenticationType var userIdentity = await manager.CreateIdentityAsync(this, DefaultAuthenticationTypes.ApplicationCookie); // Add custom user claims here return userIdentity; } public string DisplayName { get; set; } public string ProfilePhotoPath { get; set; } } |
Sonra AccountViewModel sınıfının içinde bulunan ExternalLoginConfirmationViewModel sınıfına aşağıdaki gibi modelde oluşturduğumuz alanları ekleyelim
1 2 3 4 5 6 7 8 |
public class ExternalLoginConfirmationViewModel { [Required] [Display(Name = "Email")] public string Email { get; set; } public string DisplayName { get; set; } public string ProfilePath { get; set; } } |
Aşağıdaki tanımladığımız userIdentifier değişkeni ile giriş yapacak kullanıcının facebook id’sini alıyoruz picturepath ile resiminin yolunu oluşturuyoruz.
1 2 |
var userIdentifier = loginInfo.ExternalIdentity.FindFirst(ClaimTypes.NameIdentifier); var picturePath = $"https://graph.facebook.com/{userIdentifier.Value}/picture?type=large"; |
Account Controller’daki ExternalLoginCallback aksiyonu yukarıda tanımladığımız değişkenleri ekliyoruz ve bu değişkenleri return view kısmında viewmodel’imizdeki yeni alanlara atıyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
public async Task<ActionResult> ExternalLoginCallback(string returnUrl) { var loginInfo = await AuthenticationManager.GetExternalLoginInfoAsync(); if (loginInfo == null) { return RedirectToAction("Login"); } // Sign in the user with this external login provider if the user already has a login var userIdentifier = loginInfo.ExternalIdentity.FindFirst(ClaimTypes.NameIdentifier); var picturePath = $"https://graph.facebook.com/{userIdentifier.Value}/picture?type=large"; var result = await SignInManager.ExternalSignInAsync(loginInfo, isPersistent: false); switch (result) { case SignInStatus.Success: return RedirectToLocal(returnUrl); case SignInStatus.LockedOut: return View("Lockout"); case SignInStatus.RequiresVerification: return RedirectToAction("SendCode", new { ReturnUrl = returnUrl, RememberMe = false }); case SignInStatus.Failure: default: // If the user does not have an account, then prompt the user to create an account ViewBag.ReturnUrl = returnUrl; ViewBag.LoginProvider = loginInfo.Login.LoginProvider; return View("ExternalLoginConfirmation", new ExternalLoginConfirmationViewModel { Email = loginInfo.Email, DisplayName=loginInfo.DefaultUserName, ProfilePath=picturePath }); } } |
Action kısmımız hazır şimdi görüntüleyeceğimiz view kısmını düzenleyelim. Yukarıdaki koda bakınca ExternalLoginConfirmation aksiyonuna ait View’e yönlendirdiğini görüyoruz şimdi o kısmı düzenleyelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="form-group"> @Html.LabelFor(m => m.DisplayName, new { @class = "col-md-2 control-label" }) <div class="col-md-10"> @Html.TextBoxFor(m => m.DisplayName, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.DisplayName, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(m => m.ProfilePath, new { @class = "col-md-2 control-label" }) <div class="col-md-10"> <img src="@Model.ProfilePath" alt="Alternate Text" /> </div> </div> |
Form’un içine Emaile ek olarak iki kısmı ekleyelim ve projemizi çalıştıralım.
Ve son olarak görüntü böyle olacktır
Lütfen görüş ve yorumlarınız belirtmeyi unutmayın
