BitlyAPI如何完整串接範例教學

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

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

取得通行證(Access token)

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

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

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

註冊APP

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

註冊成功以後即可取得 Client ID和 Client 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，作為後續請求使用。

參考資料

• Introduction | Bitly Developer