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

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 去監聽也行。

js


步驟四: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
Publisher Logo

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *