Vaadin with Instagram API

General
1

Hi all

I am new to vaadin and I am testing it out by writing a simple app using the Instagram API.

To use the app, the user must log in to their instagram account and give my app permission to access their information.

Once this is done, a URL with a code attached to the back will be returned (e.g. www.google.com/code=123456789).

The code is the exchanged for an access token.

My question is:

Can my app automatically get the code from the url and use it instead of the user having to copy and paste it in?

Thank you for reading!

Code:

TextField code = new TextField("Enter Code: ");

Button button = new Button("Click here to authenticate");

String callbackUrl = "http://reveal-it.appspot.com/oauthtest";

String clientID = "XXX";

String clientSecret = "XXX";

Token EMPTY_TOKEN = null;

InstagramService service = new 
InstagramAuthService().apiKey(clientId) .apiSecret(clientSecret).callback(callbackUrl).build();

String authorizationUrl = service.getAuthorizationUrl(EMPTY_TOKEN);



button.addClickListener(new Button.ClickListener() {

    public void buttonClick(ClickEvent event) {
        getUI().getPage().open(authorizationUrl, "_blank");
        next();
}

        });

public void next(){
    
String verifierCode = code.getValue();

Verifier verifier = new Verifier(verifierCode);

Token accessToken = service.getAccessToken(EMPTY_TOKEN, verifier);

Instagram instagram = new Instagram(accessToken);

UserInfo userInfo = instagram.getCurrentUserInfo();    

}

Step 1: Authenticate User

Step 2: Get URL with code attached at the back that user has to copy and paste into textfield
(This is a test url that prints the code)

2

Anyone?

3

You can read URL parameters in your UI’s init method.

protected void init(VaadinRequest request) {
   String code = request.getParameter("code");
   ...
4

Hi,
Thanks for the reply.
The problem is that piece of code will give me the URL that redirects to the instagram log in.
The URL that I want is the one that the user is redirected to AFTER they log in.

Any ideas?

5

Added images to clarify my question.

Any ideas anyone?

6

How is the Instagram implemented in your App?
Are you handling sending the user data yourself, is it an Embedded Browser Component or maybe using Page.open(Url)?

7

I used this to open the link:

getUI().getPage().open(authorizationUrl, "_blank"); Not sure if this is what you wanted to know, but I have edited my first post with my code, which should be able to answer your question.

Feel free to take a look.

8

Does anyone have any ideas?

9

Is the user returned to your Vaadin app after logging in? If yes, does he get a new UI instance or the old one? What is the URL of your Vaadin app when the user returns?

10

Yup the user is returned to the app with the same UI instance and same URL(www.myapp.com).

11

In that case, where is the code?

12

Just to clearify more; the process looks like this right?:

  • User opens www.myapp.com in his Browser
  • User clicks Button
  • Popup or new Tab opens in Browser containing the Instagram login
  • User logs into Instagram
  • Popup or new Tab shows code in url
  • User closes Popup/new Tab to return to the app(which is still open) and enter the code

Am i correct with this assumption or is it different?

13

Currently I am opening the redirect url that provides the code in a new browser window (e.g.www.freehost.com/?code=123456789) and the user has to copy this code from the url and paste it into the text box.

14

Yes that is exactly correct. Sorry if my post was not clear

15

All URL parameters can be read through the VaadinRequest. If you have the same UI instance, then the init() method won’t be called again. If you are using Vaadin 7.2, then you can override the refresh method from the UI. Refresh will also get the VaadinRequest and from there you should be able to get the code, in case it is as a URL parameter to your app upon returning from the login.

16

Thanks for the help, but Im sorry I dont really understand how to go about doing that as I am quite new to Vaadin.
Is there anywhere that I can see an example of what you just said?
Thanks again!

17

@Kim: I think you might not understand the OP’s case fully. As far as i understand it the Instagram Login is happening in a seperate Popup Window (or Tab). The Url changes only happen inside that window and not in the Vaadin App’s Url. That’s why i don’t think you’ll be able to capture a request containing those parameters or even get the event of closing the new Window/Tab.

I’m a bit out of ideas here too. I also don’t really have time to think about it. There are currently only 2 things coming to my mind:
First: Maybe using an IFrame and native Javascript you may have better control about the Url changes inside the frame then using Page.open or an Embedded.
Second: Maybe there is a way to get these parameters by doing the Login manually (probably needs an interface made by Instagram though) and then just send an ajax call to the Instagram Server returning the Code Parameter.

18

Ok i think I’ve figured it out.

Now I need to retrieve the value of the string “code” outside the init method and use it in a different method.

Is this possible?

If yes, how?

Thanks for the help.

Code:

protected void init(VaadinRequest request) {
main();
String code = request.getParameter("code");
if (code != null){
System.out.println("Code: " + code);
next();
    }
}