Asp.NET’te Facebook Login Uygulaması

Günümüz popüler sitelerinde ziyaretçilere kolaylık olması açısından yeni sistemler geliştirilmektedir.Web siteleri yapısal anlamda kullanıcı giriş çıkışlarını kontrol ederken ziyaretçilere büyük emek ve zahmet ettirmektedirler.Böyle bir durum ziyaretçiler açısından kalite ve prestij kaybı demektir.Hele hele günümüz teknolojik yapısı, iletişim hızı ve internetin büyük hız limiti, kullanıcı ve ziyaretçiler açısından zaman olarak minimize edilmiş bir işlemsel yapı beklentisi doğurmaktadır.Bu beklentileri karşılayabilmemiz için web sitelerinde kullanıcı giriş ve çıkışlarını hızlandıracak sosyal platformlar devreye sokulmuştur.Sitemize giriş yapmak isteyen ziyaretçilere varsa Facebook profilleri sayesinde giriş yapma olanağı tanınmaktadır.Bunun yanında manuel olarak kullanıcı kayıt ve giriş işlemleride ziyaretçilere sunulabilmektedir.Bizler bu yazımızda Asp.NET’te yapılan web projelerinde Facebook Login’in teknik anlamda nasıl yapılacağını inceleyeceğiz.

Öncelikle, konumuza değinirken örneklendireceğimiz bir Asp.NET projesi açtığımızı varsayalım.

Asp.NET ile Facebook Login işlemini gerçekleştirebilmemiz için “Facebook” isimli SDK’ya ihtiyacımız bulunmaktadır.O yüzden ilk olarak, projemize sağ tıklıyoruz ve “Manage NuGet Packages” yazan sekmeye tıklıyoruz.

Karşımıza çıkan pencerede sağ üst köşedeki arama kutusuna “facebook” anahtar sözcüğünü yazıyor ve aratıyoruz.Tabi burada dikkat etmeniz gereken sol menüdeki “Online” -> “Search Results” kategorisi seçili olması gerekiyor.

Yukarıda gördüğünüz gibi arama sonucunda Facebook SDK sı karşımıza çıkmaktadır.”Install” diyerek kurulum yapıyoruz.

Evet, Facebook SDK kurulumunu projemizde gerçekleştirdik.

Şimdi Facebook’ta yeni bir uygulama oluşturacağız ve o uygulama üzerinden sitemiz Facebook ile iletişim sağlayacaktır.Facebook’ta ki profillerin kullanıcı izinlerini ve kullanıcıların bilgilerine erişim hakkını bu uygulama ile elde edeceğiz.

Facebook’ta uygulamalar https://developers.facebook.com/apps/ adresinden oluşturulmaktadır.Bu adrese girin ve karşınıza çıkan erkanda “+ Create New App” butonuna tıklayarak yeni bir uygulama oluşturmaya başlayabilirsiniz.

Benim oluşturacağım uygulamanın adını “Gençay Yıldız | Makalelerim” olarak ayarlıyorum ve kategorisini ise “Eğitim” olarak seçiyorum.Burada dikkat etmeniz gereken husus uygulama adınız sitenizin adıyla ya aynı ya da benzer yapıda olması daha makbuldür.Bunun sebebini yazımızını ilerisinde göreceksiniz.

Bilgileri yukarıdaki gibi doldurduktan sonra “Uygulama Oluştur” butonuna tıklıyoruz.

Uygulamayı oluşturduktan sonra yukarıdaki gibi “Dashboard” sayfasının gelmesi gerekmektedir.
Burada gördüğünüz “App ID” ve “App Secret” değerleri bu uygulama ile projemiz arasındaki bağlantıyı sağlayacak değerlerdir.Tabi bu değerleri yazımızın ileri satırlarında kullanacağız.

Evet artık elimizde sitemizle Facebook bağlantısını kuracak Facebook uygulaması hazır.

Artık sıra bu işi programatik olarak çözmeye geldi.Öncelikle Facebook bilgileriyle sitemize girecek olan kullanıcının hangi değerlerini tutacaksak ona göre bir Facebook profil entitysi oluşturalım.

    public class FacebookProfil
    {
        public string ID { get; set; }
        public string Adi { get; set; }
        public string Soyadi { get; set; }
        public string KullaniciAdi { get; set; }
        public string EMail { get; set; }
        public string ProfilResmi { get; set; }
    }

Şimdi ise Facebook kullanıcı girişi yapma talebine karşı işlemlerimizi yürütecek olan sınıfımızı yazalım.

    public class FacebookIslemleri
    {
        /*

        Facebook uygulamamızdaki AppID ve AppSecret değerlerini buraya
        yazmayı unutmamalıyız.
        
        */
        string AppID = "253805618153090";
        string AppSecret = "6086406f8f02992c6e5ff1fb86918000";

        string CallBackUrl = "http://localhost:9640/Profil.aspx";
        /*
         
         Facebook Login için kullanıcıyı Facebook'a yönlendirirsiniz.Daha sonra
         kullanıcı gerekli izinleri verdikten sonra Facebook o kullanıcıyı size
         yeniden yönlendirecektir.CallBackUrl değeri ile Facebook'a, kullanıcı
         izin verdikten ve senle işi bittikten sonra şu adresime yönlendir.
         
         */

        string Scope = "user_about_me, email";
        /*
         
         Kullanıcının hangi bilgilerine ihtiyaç duyduğunuzu Scope ile belirtirsiniz.
         Başka bir deyişle kullanıcının hangi bilgilerine ulaşmak istiyorsanız
         o bilgileri size ulaştıracak anahtar sözcükleri Scope'a yazarsınız.
         
         Tabi kullanıcı onayı olmadan buradaki bilgilerin hiçbirine ulaşım söz
         konusu değildir.
         
        */

        FacebookClient FacebookIslem = new FacebookClient();
        //FacebookClient SDK'nın sağladığı sınıftır.

        public Uri CrateLoginUrl()
        {
            /*
             
             Bu metot da kullanıcıdan Facebook login talebi geldinğinde
             kullanıcıyı yönlendireceğimiz Facebook linkini oluşturuyoruz.
             
             */

            return FacebookIslem.GetLoginUrl(
                                new
                                {
                                    client_id = AppID,
                                    client_secret = AppSecret,
                                    redirect_uri = CallBackUrl,
                                    response_type = "code",
                                    scope = Scope,

                                });
        }

        public dynamic GetAccessToken(string code, string state, string type)
        {
            /*
             
             AccessToken Facebook'un size verdiği erişim kodudur.OAuth
             konusuna bakarsak ne olduğunu daha iyi anlayabiliriz.
             En kısa tanımla OAuth, kullanıcıların üyesi oldukları
             bir site yada platformun şifresini üye oldukları başka
             bir web sitesi yada platformla paylaşmadan, izin verdiği
             bilgilere diğer site tarafından ulaşılmasını sağlayan
             bir kimlik doğrulama protokolüdür.
              
             Yani, AccessToken kodu ile istediğimiz kullanıcı bilgilerini
             çekebiliyoruz.Ne de olsa bu kod, kullanıcının istediğimiz
             bilgilerini elde etmemize izin verdiğini gösteriyor.
             
             */

            dynamic result = FacebookIslem.Post("oauth/access_token",
                                          new
                                          {
                                              client_id = AppID,
                                              client_secret = AppSecret,
                                              redirect_uri = CallBackUrl,
                                              code = code
                                          });
            return result.access_token;
        }

        public FacebookProfil GetUserInfo(dynamic accessToken)
        {
            //Kullanıcı bilgilerini çektiğimiz metod.

            var client = new FacebookClient(accessToken);
            var profile = new FacebookProfil();

            dynamic me = client.Get("/me");
            /*
             
             "/me" yerine kullanıcının Facebook ID'sini de yazabilirsiniz."me"
             o anki kullanıcıyı temsil etmektedir.Yani değişen birşey yok.
             
             */

            profile.KullaniciAdi = me.username;
            profile.Adi = me.first_name;
            profile.Soyadi = me.last_name;
            profile.ID = me.id;
            profile.EMail = me.email;
            profile.ProfilResmi = string.Format("https://graph.facebook.com/{0}/picture", profile.ID);
            return profile;
        }
    }

Yukarıdaki sınıfı biraz açıklayalım.Kullanıcıdan Facebook login talebi geldiği zaman “CrateLoginUrl” isimli metodumuz ile Facebook’a yönlendirilecek linki oluşturuyoruz ve o linke kullanıcıyı yönlendiriyoruz.Facebook işlemlerini bitirdikten sonra “CallBackUrl” değişkeninde bulunan linkimize geri yönlendirme sağlamaktadır.”CallBackUrl” değerine yönlendirirken Facebook belirli değerler üzerine eklemektedir.Bu değerleri kullanarak “GetAccessToken” isimli metodumuzda kullanıcının bilgilerini paylaşmasına izin verdiğini sembolize eden kodu elde etmekteyiz.Bu kodu ise “GetUserInfo” isimli metodumuzda işleterek, kullanıcıdan meşru bir şekilde istenen bilgiler elde edilmektedir.

Şimdi ise bu sınıfları kullanacağımız .aspx dosyalarımızı hazırlayalım.

Default.aspx sayfamızın kodları;

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FaceBookLogin.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button ID="btnFacebookBaglan" runat="server" Text="FACEBOOK BAĞLAN" BorderColor="#CC0099" ForeColor="#3333FF" Height="71px" Width="183px" OnClick="btnFacebookBaglan_Click" />
    </form>
</body>
</html>

Default.aspx sayfamızda kullanıcının Facebook ile bağlantısını tetikleyecek butonumuz bulunmaktadır.

Profil.aspx sayfamızın kodları;

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Profil.aspx.cs" Inherits="FaceBookLogin.Profil" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div style="text-align: center;">
            <asp:Label ID="lblKullanıcıAdSoyad" runat="server" BorderColor="Black" BorderStyle="Dotted" Font-Bold="True" ForeColor="#CC0000"></asp:Label>
            <table width="50%" align="center">
                <tr>
                    <td>ID</td>
                    <td>:</td>
                    <td>
                        <asp:Label ID="lblID" runat="server"></asp:Label></td>
                </tr>
                <tr>
                    <td>Kullanıcı Adı</td>
                    <td>:</td>
                    <td>
                        <asp:Label ID="lblKullaniciAdi" runat="server"></asp:Label></td>
                </tr>
                <tr>
                    <td>E-Posta</td>
                    <td>:</td>
                    <td>
                        <asp:Label ID="lblEPosta" runat="server"></asp:Label></td>
                </tr>
                <tr>
                    <td>Profil Resmi</td>
                    <td>:</td>
                    <td>
                        <asp:Image ID="imgProfilResmi" runat="server" /></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

Profil.aspx sayfamızda ise Facebook profilinden çekilen bilgileri listeyeceğiz.

Default.aspx sayfamızın programatik kodları aşağıdaki gibidir.

    public partial class Default : System.Web.UI.Page
    {
        FacebookIslemleri Face = new FacebookIslemleri();
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void btnFacebookBaglan_Click(object sender, EventArgs e)
        {
            var Link = Face.CrateLoginUrl().ToString();
            Response.Redirect(Link);
        }
    }

Gördüğünüz gibi, kullanıcı Facebook ile giriş talep ettiği anda kullanıcıyı Facebook’a yönlendirecek linki oluşturuyor ve o linke Redirect ediyoruz.Bu yönlendirme sonucunda biliyorum ki Facebook kullanıcıyı “http://localhost:9640/Profil.aspx” linkine yönlendirecektir.

Profil.aspx sayfamızın programatik kodları ise;

    public partial class Profil : System.Web.UI.Page
    public partial class Profil : System.Web.UI.Page
    {
        FacebookIslemleri Face = new FacebookIslemleri();

        protected void Page_Load(object sender, EventArgs e)
        {
                string code = Request.QueryString["code"];
                string state = "";
                string type = "";
                dynamic token = Face.GetAccessToken(code, state, type);
                FacebookProfil Profil = Face.GetUserInfo(token);
                Session.Add("Profil", Profil);

                lblEPosta.Text = Profil.EMail;
                lblID.Text = Profil.ID;
                lblKullaniciAdi.Text = Profil.KullaniciAdi;
                lblKullanıcıAdSoyad.Text = Profil.Adi + " " + Profil.Soyadi;
                imgProfilResmi.ImageUrl = Profil.ProfilResmi;
        }
    }

Burada da gördüğünüz gibi Facebook’un Profil.aspx sayfasına yönlendirmesi sonucu ve yönlendirirken gönderdiği ek bilgiler sonucu(gönderilen ek bilgi genellikle “code” isimli QueryString değişkenindedir) meşru bir şekilde kullanıcı bilgilerini çekmekte ve istediğimiz şekilde kullanmaktayız.

Evet artık projemiz bitti.Şimdi projemizi derleyip çalıştıralım.Buraya kadar yazıyı uzatmamın sebebi sizlere çalıştırma zamanında bir olası durumdan bahsetmek istediğimdendir.Devam edelim…

Default.aspx sayfamız açıldı.”Facebook Bağlan” butonuna tıklıyorum ve….

hatasını alıyoruz..
Hata mesajı metinsel olarak şöyle;
“Uygulama yapılandırması verilen URL’ye izin vermiyor.: Uygulamanın ayarları verilen URL’lerden bir veya daha fazlasına izin vermiyor. URL’ler İnternet Sitesinin URL’si ve Kanvas URL’si olmalıdır veya domain uygulamanın domainlerinden birinin altdomaini olmalıdır.”

Bu olası hatayı bilerek aldığımı bildirmek isterim.Çünkü bu makalenin amacı bir parça anlatmak değil, parçaları birleştirip bir bütün teşkil ederek bir yapıyı anlatmaktır.

Bu olası hatanın sebebi, Facebook’ta açtığımız uygulamamızdaki bir ayar eksikliğinden doğmaktadır.
Facebook uygulamamıza girerek sol taraftaki menüden “Settings” kategorisine tıklayarak çıkan ekranda “Add Platform” butonuna tıklayarak platform eklememiz gerekmektedir.

Website platformunu ekledikten sonra ise aşağıdaki gibi platform ayarlanmalıdır.

Gördüğünüz gibi Site URL alanına, bu uygulamanın hangi domainde çalışacağını belirtmemiz gerekmektedir.Eğer localde çalışacaksanız projenizin portunu sabitlemeyi unutmayınız.Zırt pırt port değişikliği olabilme ihtimali olduğundan dolayı sürekli hata alırsınız ve sonu olmayan başka çözümlerin peşine gidersiniz.

Evet artık bu hatadan kurtulduk…
Tekrardan projemizi derleyip çalıştıralım 🙂

Gördüğünüz gibi Facebook login talep sonucunda kullanıcıdan bilgilerine erişim için izin istemektedir.Şimdi biz bilgilerimize erişimi onaylayıp “Tamam” butonuna basalım.

Gördüğünüz gibi onaylanan kullanıcıyı Facebook belirtilen adrese yönlendiriyor ve kullanıcı bilgileri istediğimiz şekilde yayınlanıyor.Tabi bu arada Facebook belirttiğimiz adrese yönlendirme yaparken “code” QueryString değerinide gönderdiğine dikkatnizi çekerim…

Sonuç olarak bu Facebook bilgilerini veritabanınıza kaydedebilir ya da başka işlemlerde kullanabilirsiniz.Artık kullanıcılar sitenize Facebook üzerinden giriş yapabilmektedirler ve siz ona göre kullanıcı profili tanımlar veya kontrolü sağlarsınız.

Evet arkadaşlar, uzun olduğu kadar anlaşılır ve gür bir yazı oldu.Elimden geldiği kadar sizlere detaylandırıp konuyu aktarmak istedim.

Örnek çalışma projesini buradan indirebilirsiniz.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar dilerim…