Facebook ile Giriş Yapma – Kayıt Olma İşlemleri {Javascript SDK}

Selamlar değerli blog takipçilerim. Bir süre önce sizlerle Google hesabı ile giriş yapma adlı makalemi paylaşmıştım. Güzel geri dönüşlerinizi aldım, öncelikle teşekkür ederim. Bugün sizlerle web ve mobil projelerinde sıklıkla kullanılan giriş seçeneklerinden bir diğeri olan Facebook hesabı ile giriş yapma işlemlerini inceleyeceğiz.

Bildiğiniz gibi günümüzde kullanıcılar çoğunlukla sıkıcı bir form üzerinden projelere kayıt olmayı pek arzu etmiyorlar. Sıkıcı ve zaman alıcı olarak görülüyor olabilir. Bana hiç böyle gelmedi ama, herkesin düşüncesine ve alışkanlıklarına saygı duymak gerekir. Bu soruna bir çözüm niteliğindeki bu makalemi sizinle paylaşıyorum. Öyle ki bu makale sonucunda tek klik ile facebook üzerinden paylaşılan kullanıcı datalarını projenize entegre edebilir durumda olacaksınız.

İşlemleri adım adım takip ettiğiniz taktirde işlemi başarıyla sonuçlandıracağınıza eminim. Dilerseniz başlayalım.

Çalışmaya başlamadan önce bilmeniz gerekenler

• Öncelikle projenize facebook SDK entegre edilmiş olmalıdır. (Örnek kod kısmında entegre edilmiş durumdadır)
• Facebook Application ID bilgisine sahip olmalısınız.
• Bir facebook uygulaması oluşturmalı ve uygulamayı aktif hale getirmelisiniz. Detaylar: https://developers.facebook.com/apps

O zaman başlayalım!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

Adım 1:

Kod betiklerimizi jQuery ile oluşturacağımız için sayfamıza import etmeliyiz. Örnek formu bootstrap ile oluşturacağım için ben bootstrap javascript dosyasını da import ediyorum. Bu tamamen size kalmış bir durum.

Adım 2:

Güzel görünüm ve test için basit bir HTML kayıt formu oluşturalım.

 <form class="form-signin" role="form">
            <div id="status"></div>
        <h2 class="form-signin-heading">Kayıt Ol</h2>
        
        <label for="inputFname" class="sr-only">Ad</label>
            <input type="text" id="inputFname" class="form-control" placeholder="Ad" required autofocus>
        
        <label for="inputLname" class="sr-only">Soyad</label>
            <input type="text" id="inputLname" class="form-control" placeholder="Soyad" required >
            
        <label for="inputEmail" class="sr-only">Email adresi</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email adresi" required >
        
        <label for="inputPassword" class="sr-only">Şifre</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Şifre" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Beni hatırla
          </label>
        </div>
        
        <button class="btn btn-sm btn-primary btn-block" type="submit">Kayıt Ol</button> <button class="btn btn-sm btn-primary btn-block" onclick="_login();" type="submit">Facebook ile Kayıt Ol!</button>
      </form>

Adım 3:

Ve tüm işlemleri yapacağımız javascript bölümü. Burada facebook ile bağlantı kurup, kullanıcı bilgilerini kendi tarafımıza alacağız, sonrasında işlemleri dilediğiniz gibi kendinize göre düzenleyebilirsiniz.

 <script>
  // facebook SDK entegrasyonu
  (function(thisdocument, scriptelement, id) {
    var js, fjs = thisdocument.getElementsByTagName(scriptelement)[0];
    if (thisdocument.getElementById(id)) return;
    
    js = thisdocument.createElement(scriptelement); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js"; //url
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
    
  window.fbAsyncInit = function() {
  FB.init({
    appId      : '1449392918617564', //Buraya uygulama appID bilginizi tanımlayınız.
    cookie     : true,  // çerezleri etkinleştirerek sunucunun erişmesine izin verelim
                        // session
    xfbml      : true,  // bu sayfadaki sosyal eklentileri ayrıştırılım
    version    : 'v2.1' // version 2.1
  });

  // Dönüş işlemlerine başlayalım.
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });

  };
    
  // hesabın facebook bağlantı durumunu kontrol edelim.
  function statusChangeCallback(response) {
    if (response.status === 'connected') {
      // Facebook ile giriş yapılmış.
      _i();
    } else if (response.status === 'not_authorized') {
      // Bu arkadaşın facebook hesabı açık, fakat sizin uygulamanıza henüz izin vermemiş. Yani henüz giriş yapmamış.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    }
  }  
  
  function _login() {
    FB.login(function(response) {
       if(response.status==='connected') {
        _i();
       }
     }, {scope: 'public_profile,email'});
 }
 
 function _i(){
     FB.api('/me', {fields: 'first_name,last_name,email'}, function(response) {
        //response dizisi içerisindeki bilgileri artık kullanabilirsiniz.
        document.getElementById("inputFname").value = response.first_name;
        document.getElementById("inputLname").value = response.last_name;
        document.getElementById("inputEmail").value = response.email;
    });
 }

</script>

Vakit ayırdığınız için teşekkür ederim. Bir sonraki makalede görüşmek üzere, sağlıcakla ve huzurla kalın.