BitlyAPI如何完整串接範例教學
是一個常見的短連結平台，提供所有使用者把原始網址轉換成較為簡短的連結字數，同時該平台也提供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 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}
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，作為後續請求使用。
參考資料
分享至
成為作者繼續創作的動力吧！
© 2024 vocus All rights reserved.