Dribbble Api Kullanımı

Merhaba arkadaşlar, bu konuda sizlere dribbble api kullanımını göstermek istiyorum.
Geçenlerde uzman cevap’ta sorulan bir soru üzerine böyle bir ders hazırlama gereği duydum.

Esasında tüm API’ler projelerde aynı mantıkta çalışır. Kullanıcı hesabına yetki verilir ve oluşturulan token ile sorgular oluşturulur.

Sırasıyla bu adımları görelim ????

1) Uygulama oluşturma

Öncelikle https://dribbble.com/account/applications/new adresine girerek yeni bir uygulama oluşturun.
Burada önemli olan Callback URL adresiniz. Çünkü daha sonra bunu kullanacağız. Çalışan bir siteniz üzerinde bir Callback URL oluşturursanız iyi olur sizin için.

Uygulamanızı oluşturduktan sonra şu değerlere sahip olacaksınız, bunları saklayın!

2) Uygulamaya İzin Verme

Oluşturduğumuz uygulamayı kullanmak için mevcut dribbble hesabımız ile bu uygulamaya izin vermek gerekiyor. Şimdi şöyle bir link yapısı oluştuacağız;
https://dribbble.com/oauth/authorize?client_id=CLIENT_ID&redirect_uri=REDIRECT_URL&scope=public&state=123456

Buradaki değerleri açıklayayım;
client_id – İlk adımda uygulamayı oluşturduktan sonra sahip olduğumuz Client ID değerimizo olacak.
redirect_uri – Uygulamayı oluştururken kullandığımız Callback URL olacak.
scope – Burada biz genel bilgilere ulaşacağımız için public olarak belirledik. Diğer değerler için şuraya bakabilirsiniz.
state – rasgele üretilmiş bir değer girin.

Şimdi yukarıdaki linke girdiğimizde hesabımız için uygulamaya izin vermemizi isteyecek.

İzin verdikten sonra bizi callback url’e gönderecek ve burada code değerini alacağız.

Örneğin ben yaptığımda şöyle bir url oluştu;
http://www.erbilen.net/?code=b83001d95d2182918bdc530d3b8fd056b0a1d14808071597b9fe17c008a5d741&state=123456

Buradaki code değerini alıp 3. adıma geçebiliriz.

3) Token Oluşturma

Bu adımda https://dribbble.com/oauth/token bu url’e post yapmamız gerekiyor.

Post olarak göndereceğiz değerler;

client_id – Uygulamayı oluşturduktan sonra sahip olduğumuz Client ID.
client_secret – Uygulamayı oluşturduktan sonra sahip olduğumuz Client Secret.
code – 2. adımda sahip olduğumuz code değeri.
redirect_uri – Uygulamayı oluştururken belirlediğimiz Callback Url

Ben Postman yardımıyla bu post işlemini gerçekleştirdim ve sonucunda ise kullanacağım access_token’a sahip oldum.

Lazım olur diye jquery ve php’de post işlem kodlarını paylaşıyorum

PHP kodu:

 "https://dribbble.com/oauth/token",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => "-----011000010111000001101001\r\nContent-Disposition: form-data; name=\"client_id\"\r\n\r\nc13ba2b61a1d18e25cb9ae8f280bef14db688b705159dfa6edb4320fba00277d\r\n-----011000010111000001101001\r\nContent-Disposition: form-data; name=\"client_secret\"\r\n\r\n7015568247e0f0dd875d004ddab3911c2d426ba2fad7b7995f973b0eebfd1680\r\n-----011000010111000001101001\r\nContent-Disposition: form-data; name=\"code\"\r\n\r\nb83001d95d2182918bdc530d3b8fd056b0a1d14808071597b9fe17c008a5d741\r\n-----011000010111000001101001\r\nContent-Disposition: form-data; name=\"redirect_uri\"\r\n\r\nhttp://www.erbilen.net\r\n-----011000010111000001101001--",
  CURLOPT_HTTPHEADER => array(
    "cache-control: no-cache",
    "content-type: multipart/form-data; boundary=---011000010111000001101001"
  ),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}

jQuery Kodu:

var form = new FormData();
form.append("client_id", "c13ba2b61a1d18e25cb9ae8f280bef14db688b705159dfa6edb4320fba00277d");
form.append("client_secret", "7015568247e0f0dd875d004ddab3911c2d426ba2fad7b7995f973b0eebfd1680");
form.append("code", "b83001d95d2182918bdc530d3b8fd056b0a1d14808071597b9fe17c008a5d741");
form.append("redirect_uri", "http://www.erbilen.net");

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://dribbble.com/oauth/token",
  "method": "POST",
  "headers": {
    "cache-control": "no-cache"
  },
  "processData": false,
  "contentType": false,
  "mimeType": "multipart/form-data",
  "data": form
}

$.ajax(settings).done(function (response) {
  console.log(response);
});