Good news, Hangout Hackers!  hangoutiframer is now at v0.4.  Your app URLs will look like this:

https://hangoutiframer.appspot.com/forward/v0.4?u=https://[yourfile]

There are new features since v0.2: dynamic height and an additional scope argument.

Dynamic Height

You may have noticed that hangoutiframer apps get an iframe that's exactly 1000px high.  NO MORE!  Now it will size to the available space.

Try it out with this app URL in your API console:

https://hangoutiframer.appspot.com/forward/v0.4?u=https://wolffexperiments.appspot.com/static/app-that-resizes.html

Additional Scope Parameter

If you want another OAuth 2.0 scope for your Hangout App, you can request it in the API console.  After that, you need to tell hangoutiframer to request it for you, like so:

https://hangoutiframer.appspot.com/forward/v0.4?u=https://wolff.com/myapp.html&scope=https://www.googleapis.com/auth/myawesomescope

That will change the .xml hangoutiframer creates to include this additional scope.

(Note: If you need two or more additional scopes, you will need to cut'n'paste the output of hangoutiframer, edit to add all your scopes, and host it yourself.)

Deprecation notice

In 30 days, I will be deprecating the v0.0 version of hangoutiframer, which are URLs in this form:

https://hangoutiframer.appspot.com/forward/gadgetspec?u=[URL]

Please upgrade to v0.4 at your earliest convenience. Note that if you have not already, you will need to create an OAuth 2.0 client ID in your API Console.

Good luck!

Slight update to the OAuth 2.0 examples in hangout-experiments.

I added a new sample, minimalistAuth.xml that uses the Standalone Auth Client.  It loads slightly less JS on startup, but cannot make use of the full Google JS Client API.  Thus, the example only retrieves the access token and doesn't make any further calls.

This can be a little lighter-weight if you are only using your access token for verification---that is, you're using it to tell that the request came from a particular user, rather than using the token to retrieve new data.

I also took the liberty of updating the old experiments to use v1.1 of the hangouts.js library.

I'd like to share the source for my Giant Floating Robot Head demo!  It's an app that lets you control a 3D robot head by moving your own head, and uses volume to control the robot's mouth.

Demo is available here:



Code is available here:

http://code.google.com/p/hangout-experiments/source/browse/#git%2Fface

Outside of showing off some relatively straightforward three.js, the app also demonstrates the value of smoothing.  The app keeps a 5-frame window of values for tilt/pan/roll and then takes a weighted average of them to choose the face position for that frame.  Key source snippets are here:

Good news, everyone! I upgraded the experimental hangoutiframer!

hangoutiframer.appspot.com provides a simple interface for you to automatically generate an .xml file that wraps an HTML file and puts it in an iframe in your Hangout. It's convenient for developers who have AJAX or Flash in their Hangout Apps, as it means your app is running on *your* website, not googleusercontent.com.

One of the new features in Hangout Apps is providing support for OAuth 2.0 access tokens. Once you create a Client ID for your Hangout App (a required step to release the app in public), users must give permission to your app to run. You can retrieve an access token from the gadget without further permissions or authentication.

Now, hangoutiframer can retrieve your access token, too! It also now supports appending data to the hangout URL for startup.

Sample Code

Try out our sample app!

http://plus.google.com/hangouts/_?gid=60353041584

You can find the code and instructions here:

http://code.google.com/p/hangout-experiments/source/browse/#git%2Foauth%2Fiframe

Passing data into a hangout iframer app

With today's upgrade, you can also pass in data from a startup URL, like so:

https://plus.google.com/hangouts/_?gid=60353041584&gd=SomeStartupData

and it will appear in your iframed Hangout app as a parameter to the iframe's URI. Give it a try!

Using OAuth 2.0 access tokens

Authentication and OAuth 2.0 can be complicated. For many apps, especially apps that have all of their state stored in the Hangouts API shared state, you probably don't need to worry about this. However, if you need to be sure someone is who they say they are, read on! You can (and should!) find out more about how OAuth 2.0 works at the Google OAuth 2.0 documentation.

A big reason to use an OAuth 2.0 access token in your hangout is to make verified actions on your server. That is, when a given participant makes some irreversible action, you want to know that it was really this participant, authorized for this app, to make that action.

One example might be looking at your cards in a card game---you don't want to put your cards in the Hangout shared state or a clever hacker can just look at them using the Chrome Javascript debugger! Instead, you will want each Hangout participant to talk to a server, and you want your server to be sure it's really that participant talking, not someone else in the Hangout who happens to know about this game. This is what an access token can provide.

If participants wants to see their cards, their running Hangout App can pass the OAuth 2.0 token to the server along with a request to be verified. Your server then can verify that it's them acting on behalf of your app using the validate token endpoint. Once the server has validated the token, it doesn't need to again for that particular Hangout instance. Your server then should send the client an app-specific authentication tokens for conversations between the Hangout App and your server.

The TokenInfo endpoint will return the valid scopes, the users G+ id, and the application that runs it. As a technical note, the 'audience' field of that token will contain a modified application id as it is running inside a gadget. The first part of the audience field should contain your app ID.

The tokens will expire, usually in about an hour. Right now, hangoutiframer doesn't support refreshing your access token when it expires, so it's good to validate the token early on in the client's relationship to the server.

As always...

Feel free to ask questions! hangoutiframer is still experimental, but it can get you started building Hangout Apps very quickly!

We had a great question about using OAuth2 in a hangout.

As we are still in Developer Preview, we're still working out the final details of our authentication system.  Right now, you can use the Google JS API client (google-api-javascript-client) to get an OAuth2 token.

I've added some sample code in a Hangout Experiments project on Google Code, as this is still something to experiment with (and, indeed, the js client is also still in alpha).  However, if you need to "do the oauth dance" in a Hangout, feel free to give this a spin.

http://code.google.com/p/hangout-experiments/

I've included two versions.  One for running in an iframe on your site (as mentioned in this blog previously), and one uses the standard gadget spec

In the iframe version, you must specify your client ID and API key. 

In the gadget version, the gadget server will take care of that for you, but you still need to go to the "API Access" tab in the developer console to create a client ID and API key.

Good luck!  Post questions here or on Google+!

This is a link to the source code I wrote during the talk at the UW Hangout Hangout Hack.

 

http://lggwg.com/wolff/google/basicHangoutApp.xml

Crafty

http://craftyjs.com/demos/tutorial/tutorial.html

This is something for my pals at UW!