LinkedIn ile Giriş Yapma – Kayıt Olma İşlemleri – JavaScript SDK

LinkedIn bildiğiniz üzere iş dünyası için dünyanın en popüler sosyal ağı. Bununla birlikte LinkedIn, web-mobil uygulamalarındaki oturum açma deneyimini zenginleştirmek için çeşitli API’ler sunar. LinkedIn hesabı ile oturum açma özelliği, kullanıcıların web sitenizde yeni bir hesap oluşturmadan LinkedIn hesabıyla oturum açmalarını sağlar. Giriş sistemini uygulamak daha fazla kayıt almak için zaman kazanılmasına yardımcı olur.

Daha önce blog sayfam üzerinden sizinle Facebook ile Giriş Yapma – Kayıt Olma İşlemleri ve Google Hesabı ile Kayıt Olma makalelerini paylaşmıştım. Bu makale ile birlikte Facebook ve Google‘dan sonra LinkedIn sosya ağ hesabı API user kontrol işlemlerini öğrenmiş olacaksınız.

LinkedIn JavaScript SDK, sayfanın yenilenmesi olmaksızın tek bir sayfada LinkedIn hesabıyla kullanıcı girişini gerçekleştirmenin kolay bir yoludur. Bu yazıda, JavaScript SDK kullanarak LinkedIn API’yi nasıl entegre edebileceğinizi göstereceğim. Kullanıcının LinkedIn hesabıyla kimliğini doğrulayacağız ve JavaScript SDK kullanarak LinkedIn’den kullanıcı profili verilerini alacağız. Aşağıda sizler için açıklayıcı bir infografik hazırladım.

LinkedIn Uygulamasını Oluşturmak

JavaScript SDK kullanabilmek için LinkedIn üzerinde bir uygulama oluşturmanız gerekiyor. Henüz kayıtlı bir uygulamanız yoksa, öncelikle buradan bir LinkedIn uygulaması oluşturun.

Mevcut bir uygulamanız varsa, JavaScript SDK’yi kullanmak için aşağıdaki ayarları yapmanız gereklidir.

Uygulamalarım Üzerinde Uygulamalar sayfanızı seçin.
Sol menü panelinden JavaScript bağlantısını tıklayın.
JavaScript Ayarları altında Geçerli SDK Alan Adlarını belirtin. Ardından güncelle butonunu tıklayın.

Dikkat: localhost üzerinde test etmek için bu etki alanını ekleyin: http://localhost

Ardından, Kimlik Doğrulama sayfasına gidin, daha sonra komut dosyasında kullanmak üzere İstemci Kimliğini kopyalayın, bunu kullanacağız. Burası önemli.

Javascript

SDK işlevselliğini kullanmak için, web sayfanıza LinkedIn JavaScript kütüphanesini ekleyin ve LinkedIn App API key bilginizi belirtin.

api_key: App_Client_ID

authorize: true

onLoad: onLinkedInLoad

scope: r_basicprofile r_emailaddress

</script>

Aşağıdaki JavaScript fonksiyonları, LinkedIn oturum açma işlemini tek bir sayfaya entegre etmek için kullanıldı.

onLinkedInLoad() – Kimlik doğrulaması tamamlandıktan sonra bir API isteği yapmak için tanımlandı.
getProfileData() – Üyenin profil verilerini talep etmek için tanımlandı.
displayProfileData() – Web sayfasındaki üye profil bilgilerini görüntülemek için tanımlandı.
logout() – Kullanıcıyı LinkedIn üzerinden çıkış yaptırmak için kullanıldı.
removeProfileData() – Profil bilgilerini web sayfasından gizlemek için kullanıldı.

// API isteğinden başarılı geri dönüş geldiğinde neler olmalı?
    function displayProfileData(data){
        var user = data.values[0];
        document.getElementById("picture").innerHTML = '<img src="'+user.pictureUrl+'" />';
        document.getElementById("name").innerHTML = user.firstName+' '+user.lastName;
        document.getElementById("intro").innerHTML = user.headline;
        document.getElementById("email").innerHTML = user.emailAddress;
        document.getElementById("location").innerHTML = user.location.name;
        document.getElementById("link").innerHTML = '<a href="'+user.publicProfileUrl+'" target="_blank">Visit profile</a>';
        document.getElementById('profileData').style.display = 'block';
    }

// API isteğinden hata döndüğünde neler olacak?
    function onError(error) {
        console.log(error);
    }
    
    // LinkedIn üzerindeki kullanıcı session bilgilerini uçurur.
    function logout(){
        IN.User.logout(removeProfileData);
    }
    
    // Profil bilgilerini sayfadan siler.
    function removeProfileData(){
        document.getElementById('profileData').remove();
    }
</script>

// Kimlik doğrulaması tamamlandıktan sonra bir API isteği yapmak için bir olay dinleyicisi ayarlayın

function onLinkedInLoad() {

IN.Event.on(IN, "auth", getProfileData);

}

// Üyenin profil verilerini talep etmek için kullanılır

function getProfileData() {

IN.API.Profile("me").fields("id", "first-name", "last-name", "headline", "location", "picture-url", "public-profile-url", "email-address").result(displayProfileData).error(onError);

}

// API isteğinden başarılı geri dönüş geldiğinde neler olmalı?

function displayProfileData(data){

var user = data.values[0];

document.getElementById("picture").innerHTML = '<img src="'+user.pictureUrl+'" />';

document.getElementById("name").innerHTML = user.firstName+' '+user.lastName;

document.getElementById("intro").innerHTML = user.headline;

document.getElementById("email").innerHTML = user.emailAddress;

document.getElementById("location").innerHTML = user.location.name;

document.getElementById("link").innerHTML = '<a href="'+user.publicProfileUrl+'" target="_blank">Visit profile</a>';

document.getElementById('profileData').style.display = 'block';

}

// API isteğinden hata döndüğünde neler olacak?

function onError(error) {

console.log(error);

}

// LinkedIn üzerindeki kullanıcı session bilgilerini uçurur.

function logout(){

IN.User.logout(removeProfileData);

}

// Profil bilgilerini sayfadan siler.

function removeProfileData(){

document.getElementById('profileData').remove();

}

</script>

HTML

LinkedIn ile Oturum Aç butonunu oluşturalım.

1 2	<!-- sign in with linkedin button --> <script type="in/Login"></script>

Üyenin kullanıcı verilerini (profil resmi, ad, soyad, e-posta adresi, başlık, yer ve genel profil URL) burada göstreceğiz. Ayrıca, burada kullanıcıyı LinkedIn hesabından çıkmak için bir oturum kapatma bağlantısı göstereceğim.

<p><a href="javascript:void(0);" onclick="logout()">Çıkış Yap</a></p>

</div>

Gördüğünüz üzere LinkedIn üzerinden gelen verileri basit biçimde kendi tarafımıza aldık ve işlem yaptırdık. Siz dilerseniz entegrasyonu genişleterek, kullanıcı önce kendi sisteminize kayıt edebilir, sonra da giriş yaptırabilirsiniz. Bu size kalmış. Oldukça basit şekilde açıklamaya çalıştım. Sabrınız için teşekkür ederim.

Bir sonraki makalede görüşmek üzere, mutlu, huzurlu, sağlıklı günler dilerim.