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:

App 的 ID、secret
App 的 ID、secret

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

註冊了 App 後,在個人設定(settings)的 Applications 中,就會看到了:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

settings -> Applications
settings -> Applications

接著很重要的一步,是等等拿 token 時會用到的(在這步卡很久),在 Redirect 那欄,點下那個 edit ,輸入:

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

然後按下 update。

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


步驟二:生出 token

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

安裝完postman,點選Request
安裝完 Postman,點選 Request

接著 type 選擇 OAuth 2.0,再點 Get New Access Token:

選擇OAuth2.0
選擇 OAuth2.0

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

  • 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 後頁面上顯示的
OAuth2.0要填寫的資訊
OAuth2.0 要填寫的資訊

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

登入Imgur
登入 Imgur

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

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

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

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

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

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

取得 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。

Summary
Imgur API:upload, load 上傳、讀取 心得筆記
Article Name
Imgur API:upload, load 上傳、讀取 心得筆記
Description
本篇大綱:註冊 Imgur App、生出token、Upload 上傳 程式範例、Load 讀取 程式範例。這篇是從一年前自己寫的github頁面上搬過來的,原本有提供demo連結,但發現被大大們玩太兇了,傳了一些奇怪的圖XD~就決定文章搬到這。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Google Others

Youtube Iframe API 常用功能

Front-End

TestCafe 學習筆記 – 1:自動化測試會員登入

API

接氣象局 API、跨網域 AJAX 資料

Google Sheets

Google Sheets 略過空白格重整資料

Analytics Google

GA 報表:電子商務 內部宣傳 報表

Vue

D3.js、Vue 畫一個台灣地圖

Bot Telegram

Telegram Login Widget,製作用 Telegram 登入功能

WordPress

用 Auth0 在 WordPress 上做會員註冊、登入功能

Firebase Google

用 Firebase Authentication 做一套簡易會員系統 – 電子郵件 密碼

Front-End

幾個方便開發的 Console API 應用

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
7 Comments
最舊
最新
Inline Feedbacks
看所有留言
Nathan
Nathan
1 年 之前

步驟三範例code裡面
Vue的el有問題
這樣選不到所有的元素
僅有id為upload的那一行而已

Nathan
Nathan
11 月 之前

還有在你的submit()裡面
settings的async設置為false的話會讓chrome畫面凍結
影響整個網頁
設置為true才能避免

lin
lin
3 月 之前

請問 ” oauth2 ” 是怎麼來的?@@

peiyun
peiyun
1 月 之前

請問,我在使用postman,Get New Access Token時會出現以下錯誤,該如何處理呢?

Could not complete OAuth 2.0 login. Check Postman Console for more details.