iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 27
0
Modern Web

我每天都接一個API系列 第 27

[30apis] Day 26 : Iconfinder API

Iconfinder 是一個提供免費跟付費的 icon 的平台,可以選擇不同檔案格式的 icon 跟下載同作者的 icon set,還可以上傳自己做的 icon 給他人使用或購買,是個相當好用的資源。

使用 Iconfinder API 的話,可以取得裡面所有的免費 icon,如果想要使用付費的 icon 的話,就必須使用付費的 API。關於付費的 API 可以在上圖 Getting Started 裡找到。
要注意的是,即使可以取得所有的免費 icon,需不需要註明作者或可不可以商用,都還是依照個別 icon 的授權而定,不能隨便使用。

現在來申請一個帳號:

申請完帳號當然是創建一個 Application,然後拿到 Client Id 跟 Client Secret。

然後就可以來看文件了~

Overview 那邊都先跳過,有需要再回來看。
來看看Authentication 要怎麼做。

Iconfinder API 有分成 Public 的跟 Private 的。如果使用 Public 的話,使用者能夠使用的功能就跟在未登入的時候使用圖像介面化的 Iconfinder 服務一樣,Private 得到了其他使用者的授權能夠做的操作則是多許多。

文件裡的 Authentication 寫的都是 private 的做法,也就是 OAuth。而 public 的做法,雖然沒有在特定地方寫明,(經過我一番亂試浪費許多時間之後 ˊ_>ˋ)其實就是在 request URL 上將 Client ID 跟 Client Secret 當作參數放入。

而使用 Iconfinder 可以取得的資源,有:

  • categories:icon 的分類
  • authors:icon 創作者
  • users:平台使用者
  • icons:iconfinder 上的 icon
  • icon sets:同個作者發表的 icon 套組叫做 icon set,比方說教育 APP 的 icon 組合
  • licenses:不同授權資料
  • styles:icon 的風格

所有 API 的 base URL 都是 https://api.iconfinder.com/v3/

現在就來使用 Iconfinder 的 Search 功能來實作。

使用 Search endpoint 來搜尋 Iconfinder 的 icon 資料庫,必須放入的參數只有

  • query:搜尋關鍵字

可選的參數有:

  • count:回傳結果的數量

  • offset:回傳結果的起始點

  • premiumall 或沒有輸入此參數,回傳所有 icon

  • 0 or false ,只回傳免費 icon,但依然可能需要購買某種 license

  • 1 or true ,只回傳付費 icon

  • vector

    • all 或沒有輸入此參數,回傳所有 icon
    • 0 or false ,只回傳點陣 icon
    • 1 or true,只回傳向量 icon
  • license

    • none 或沒有輸入此參數,會回傳所有 icon 不管 license 的授權如何
    • commercial 回傳可商用的icon,但依 icon 而異可能需要註明作者跟授權
    • commercial-nonattribution回傳可商用又不需要註明作者跟授權的 icon
  • category:icon 的分類

    var url = "https://api.iconfinder.com/v3/icons/search?query=cat&coun=30&client_id=7MpE7ptXq0cYWNcRP8nsBFY5fSqjNbUuWMVDm5cthx97VPF4Tz1bNo39VS95iIRD&client_secret=GpUgS5utkjnVQUFdqWnuUqk6Yf3xcbPtlWEAcYSTvZbICfmqWBuoLxIC6UL3ijAW&premium=false"

    var xhr = new XMLHttpRequest();
    xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
    var response = JSON.parse(this.responseText);
    console.log(response);
    }
    });

    xhr.open("GET", url);
    xhr.setRequestHeader("Cache-Control", "no-cache");

    xhr.send();

結果:

Codepen 連結


上一篇
[30apis] Day 25 : Foursquare Places API
下一篇
[30apis] Day 27 : Dropbox API (待補)
系列文
我每天都接一個API30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言