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!

Are you building a Hangout app, but are struggling with XSS problems?

Why do I have XSS issues?

[ Please note that hangoutiframer.appspot.com has the latest info on using the hangoutiframer; this post is left up for historical reasons.

You define Hangout apps using an XML gadget spec.  Google reads that spec and rehosts it on googleusercontent.com.  We do this partially for efficiency and partially to help protect against XSS attacks.  That's the good part, and for straightforward gadgets, that's enough.

This means everything that's inside the .xml (and any loaded .js files) are served from googleusercontent.com, not from your server.  This may cause problems, such as:

• My app has lots of Ajax, but it can't seem to write back to itself without XSS errors.
• I'm writing a Flash app and I don't want to do 'Security.allowDoman("*")' because it lets malicious people abuse my .swf, but I'm plagued by security sandbox errors.
• I'm using an HTML5 canvas and I want to get the bits off it, but I keep getting
  
  SECURITY_ERR: DOM Exception 18

You could write a gadget spec that includes an iframe to your own site. Then the items inside the iframe would be hosted on your site! However, then your iframe would be isolated from the hangout itself, and you'd have to come up with some kind of transit mechanism to pass data from the googleusercontent.com iframe to your iframe.

This isn't fun. So much more fun? Using our iframe solution instead!

How iframing a Google+ Hangout App works

In a Hangout app using the iframe solution, you do not write an .xml file.

Instead, you provide a link to your app in an html page served from your own server.  We have a service that will create a gadget spec for you automatically.  You then include two .js files in your .html, and you have access to the Hangout API!

Let's be specific.  Let's assume I'm making an app whose iframe is hosted at:

https://mediakit001.appspot.com/static/basicHangoutApp.html


(The https is important; you do not want mixed content!)

1. Go to https://code.google.com/apis/console/
2. Choose your project.
3. Make sure you have turned on Google+ Hangout API in the "Services" tab.
4. Go to your Hangouts tab and enter the following (and hit Save):

https://hangoutiframer.appspot.com/forward/gadgetspec?u=https://mediakit001.appspot.com/static/basicHangoutApp.html

You can follow that link to see if your XML is really there, and you're all set!  Click "Enter a Hangout" to try it out!

You'll need to add some specific scripts to your hangout:

<script src="//hangoutsapi.talkgadget.google.com/talkgadget/apps/gadgets/js/rpc.js"></script>
<script src="//hangoutsapi.talkgadget.google.com/hangouts/api/hangout.js?v=1.0">
</script>

And you will also likely want a function called on app startup.  In this case, let's say you want to call onClientReady() on startup:

<script src="https://apis.google.com/js/client.js?onload=onClientReady">
</script> 

The Files You Need

Sample files and instructions are available at this site:

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


This post edited for v1.1 release.

Look, it's fish!