In Phimpme app we wanted to allow a user to upload an image into their personal Imgur account. To achieve this I have to authenticate the user Imgur account in our Phimpme android app and upload the image to their account. In this post, I will be explaining how to upload an image on Imgur from Phimpme Android app from user account using authentication token.
Let’s get started
Step – 1: Register your application on Imgur to receive your Client ID and Client Secret.
Register your application on Imgur from here and obtain the Client-Id and Client-Secret. Client-Id will be used to authenticate user account.
Step-2: Authenticate the user
Well, This is the tedious task as they haven’t provided any direct API for Java/Android or any other language to authenticate. So, I achieved it via WebView of Android, in Phimpme app we asked user to login into their WebView and the we intercepted network calls and parsed URL to get the access token once the user logged in.
a.) Load below URL in WebView with your application’s client id.
WebView imgurWebView = (WebView) findViewById(R.id.LoginWebView);
imgurWebView.setBackgroundColor(Color.TRANSPARENT);
imgurWebView.loadUrl(IMGUR_LOGIN_URL);
imgurWebView.getSettings().setJavaScriptEnabled(true);
imgurWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.contains(REDIRECT_URL)) {
splitUrl(url, view);
} else {
view.loadUrl(url);
}
return true;
}
b.) Now, It will ask the user to enter the Imgur username and password after that it will redirect to the URL, which we added as a callback URL while adding our app in Imgur dashboard. In Phimpme I added https://org.fossaisa.phimpme as callback URL.
c.) After logging in WebView it will redirect to the callback URL with the following parameters: access_token, refresh_token, authorization_code:
https://api.imgur.com/oauth2/authorize?client_id=YOUR_CLIENT_ID&response_type=REQUESTED_RESPONSE_TYPE&state=APPLICATION_STATE
Step -3
To obtain the access token from the right URL we have to intercept each and every URL is getting loaded in webview and detect the right URL and parse it. For which I have overridden the shouldOverrideUrlLoading of webViewclient and pass on it to splitUrl method.
private void splitUrl(String url, WebView view) {
String[] outerSplit = url.split("\\#")[1].split("\\&");
String username = null;
String accessToken = null;
int index = 0;
for (String s : outerSplit) {
String[] innerSplit = s.split("\\=");
switch (index) {
// Access Token
case 0:
accessToken = innerSplit[1];
break;
// Refresh Token
case 3:
refreshToken = innerSplit[1];
break;
// Username
case 4:
username = innerSplit[1];
break;
default:
}
index++;
}
Now we have user access token of the user to access API to Imgur to do operations(read, write) for that particular user.
Note: Authentication token is valid for 28 days only, after 28 days you will have to get the new access token.
Step- 4: Upload image using authentication token
Now we are ready to upload images on Imgur on the behalf of user’s account and to upload we need to send requests to Imgur API to this URL with authentication header and body image. The body will contain the imageString, title and description.
When we post image on Imgur anonymously, we need to add header as Authorization Client-Id {client-id} but to upload image on imgur from an account, we need to add header Authorization Bearer with value equals to access-token and image data in base64 string as request body, as we did in our previous post on upload image on Imgur.
Imgur Account Image uploads
That’s it.
The problem I faced:
I have noticed that one token is valid for 28 days only, so after 28 you will need to ask the user to log in again in Imgur app.
To avoid this what I did is before 28 days I do send a request to get a new access token which is again valid for next 28 days.
Resources:
- Official Imgur API documentation: https://apidocs.imgur.com/#4b8da0b3-3e73-13f0-d60b-2ff715e8394f
- Upload image Imgur Blog: https://help.imgur.com/hc/en-us/articles/210076663-Upload-Images
- StackOverflow resource to upload image: https://stackoverflow.com/questions/17352866/imgur-api-uploading