BitlyAPI如何完整串接範例教學

Nosegates
鼻爾蓋茲
Published in
Jan 6, 2023

Bitly是一個常見的短連結平台,提供所有使用者把原始網址轉換成較為簡短的連結字數,同時該平台也提供API給使用者串接使用

大概看過官方提供的api文件,算是功能齊全,只要本身帳號權限夠高,所有操作皆可在API中進行

自己也是有少量使用過bitly平台,那就嘗試動手串接一下API看看

取得通行證(Access token)

所有的API在請求時都需要在header中夾帶使用者token才能請求成功,所以取得token就是首要條件

文件中有很完整的提供各種授權的方式,其中最簡單的方式是前往帳號中的後台輸入密碼後點擊 Generate token按鈕即可取得一組Access token,放入請求的header中即可開始測試API

其他取得token方式有提供像是OAuth,直接給使用者輸入帳號密碼等等,算是相當多元,這裡主要是選擇OAuth的方式作為串接首選,相對較安全的一種登入方式

註冊APP

前往後台 Developer setting的地方註冊一個app,主要就是輸入APP名字,APP網域名稱和多個跳轉的路徑,作為授權成功取得code的路徑

註冊成功以後即可取得 Client IDClient secret,這些在之後跳轉連結和取得token的過程會使用到

組成跳轉連結

組成連結前需要幾項必要資料

  • client_id(必要) 在註冊app時會取得
  • redirect_uri(必要) 使用者在授權頁面操作完以後跳轉回來的頁面路由
  • state(選填) 可填入任意字串,授權後會原內容返回,作為驗證用途

大致上組出來的url會像下面這樣

https://bitly.com/oauth/authorize?client_id={client_id}&state={state}&redirect_uri={redirect_uri}

授權後請求token

使用者透過連結前往bitly頁面接受授權以後,bitly會跳轉回當初設定的redirect_uri頁面,並且帶有code參數,若跳轉連結帶有state參數,則也會將state帶回

拿到code先別高興太早,還需要將code和app金鑰等等送出請求真正的Access token

要請求token需要準備以下資訊

  • client_id 註冊的app提供
  • code 路由上帶回的參數
  • redirect_uri 與跳轉去授權頁面相同的路由
  • client_secret 註冊的app提供

準備好內容後即可送出請求token,下方以fetch範例

fetch('https://api-ssl.bitly.com/oauth/access_token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
Accept: 'application/json'
},
body: new URLSearchParams({
client_id: CLIENT_ID,
code: code,
redirect_uri: REDIRECT_URL,
client_secret: CLIENT_SECRET
})
})

內容無誤的話即會成功回傳token,作為後續請求使用

參考資料

--

--