Imgur API：upload, load 上傳、讀取 心得筆記

這篇是從一年前自己寫的 GitHub 頁面上搬過來的，原本有提供 Demo 連結，但發現被大大們玩太兇了，傳了一些奇怪的圖 XD~ 就決定文章搬到這，並關閉 Demo 頁面。
照著這篇的步驟執行，就可以順利接 Imgur API。建議自己動手寫一個來玩。

---

雖然說一些國外的 Blog 都說 Imgur API 的文件寫得很齊全，但實際在使用的時候，覺得很麻煩啊！尤其拿 token 還得下載 Postman，第一次用為了找他的一個按鈕還摸索了一陣。

這篇是接 Imgur API 時的心得及筆記，覺得不記下來下一次要用一定會忘記。

本篇參考資源如下：

Imgur API document：官方說明文件
Imgur App 註冊頁面：點此註冊
Postman下載：點此進下載頁面

---

步驟一：註冊 Imgur App

在參考資源裡，有附上 Imgur App 註冊頁面的連結。有了 Imgur 帳號，點進去就可以開始註冊：

Authorization type 選擇第二個不用回傳 URL。再輸入完 email 後按下 submit，就可以看到 App 的 ID、secret：

secret 先另外記起來，因為之後再進 App 看，只會看到 ID，secret 要看就要重新產生一組新的。

註冊了 App 後，在個人設定（settings）的 Applications 中，就會看到了：

接著很重要的一步，是等等拿 token 時會用到的（在這步卡很久），在 Redirect 那欄，點下那個 edit ，輸入：

https://www.getpostman.com/oauth2/callback

然後按下 update。

這樣之後在拿 token 的登入帳號步驟就不會卡關了。

---

步驟二：生出 token

下載 Postman，並安裝。安裝完後開啟 Postman，選擇新建 Request：

接著 type 選擇 OAuth 2.0，再點 Get New Access Token：

選完後會出現一個燈箱，以下是填寫的資訊：

• Callback URL：https://www.getpostman.com/oauth2/callback
• Auth URL：https://api.imgur.com/oauth2/authorize
• Access Token URL：https://api.imgur.com/oauth2/token
• Client ID、Client Secret：填入步驟一那邊註冊完 App 後頁面上顯示的

填完後按下 Request Token，就會出現一個要登入 Imgur 帳號的視窗：

Imgur 是用 Email 註冊的話，輸入完信箱、密碼，按下 allow 就行了。

但，如果是用社群帳號就會有很大的問題，按下去會沒反應。

朋友提供的解法是，先進入 Imgur 登入頁面，如果是登入狀態的請登出。

登入頁面上，按下密碼旁邊的 forgot? ，沒錯，就是要重設密碼。

重設完密碼，登入時就可以用一般輸入帳密的方式登入了。這樣在 Request Token 時就可以順利登入並取得 token。

取得 token ，會顯示在一個燈箱裡：

把 Access Token 記下來，在讀取跟傳送圖片時會用到。

---

步驟三：Upload 上傳 程式範例

有了 token，接著就可以開始寫上傳圖片的程式了。

補充一下，如果要設定上傳的圖片放到指定相簿裡，就會需要相簿的 ID。

假設相簿的網址是：https://imgur.com/a/XXXXXXXX

那相簿的 ID 就是 XXXXXXXX。

以下使用 jQuery、Vue.js。

HTML

如果對 Vue.js 不熟，把 showFile、submit 這兩個事件另外寫成 function，在用 jQuery 的 on 去監聽也行。

JavaScript

---

步驟四：Load 讀取 程式範例

這邊的範例是抓特定相簿中的圖。

---

補充說明

這篇用到的 token、Client ID，都寫成明碼，因為是用純前端的方式去呼叫。

如果要讓隱私性的部份不外露，就需要後端配合，改由後端去 GET、POST。