Tip:
Highlight text to annotate it
X
JOANNA SMITH: Hello everybody, and welcome back to Google+
Developers Live.
I'm Joanna Smith, and I'm a developer programs engineer
for Google+.
And today I have our fantastic intern Sam Stern, who wrote
the documentation we published this morning at
developers.googl e.com/+/web/facebook.
And what we wrote here is an article on how to add Google+
to an existing Facebook integration.
So Sam, why don't you tell us about your project.
SAM STERN: Thanks, Joanna.
So the idea of my project is that we have a lot of great
resources on our developers site for how to get started
with Google+ if it's your first identity provider.
But where there was a gap was what if Google+ is not your
first identity provider, and specifically, what if you
already have Facebook integrated into your website?
How can you get started with Google+, and overcome the
unique challenges that you run into when Google+ is your
second or third identity provider?
JOANNA SMITH: So how did you, as an intern, gain this
perspective and come to understand this point of view?
SAM STERN: So the easiest way to pretend to be a Facebook
developer with Facebook integrated into their app is
to build an app with Facebook integration.
Which is what I spent my first few weeks here doing.
And from there, I went to add Google+ on top, making note of
what was easy, what was hard, or just what was different
that might be interesting to a developer going through the
same experience.
JOANNA SMITH: OK.
So I guess the next logical question is,
what did you learn?
What was different?
What was easy?
What was hard?
SAM STERN: There are three main things you have to do.
The first thing is you have to get started.
You have to add the Google+ JavaScript to your web page.
You've got to get the sign in button on your page.
And some basic things that are a little bit different from
the perspective of a Facebook developer.
From there, there are a couple pain points that you're going
to want to tackle, such as authentication on the server
side, and on the client side.
And after that, it goes into translating features.
If you're sharing on Facebook, how do you share on Google+?
And beyond that, what can you do that's unique to Google+,
and how can you really make the user experience better by
adding Google?
JOANNA SMITH: So it sounds like there's a
lot of content there.
But let's break it down, and let's talk about
authentication.
What did you learn about managing multiple identity
providers across multiple platforms?
SAM STERN: So the first thing I did with authentication--
I tried to jump right in, and the code got messy.
And what I learned quickly is you have to
separate your concerns.
You want to keep your Google+ code in one place, your
Facebook code in another place.
And the code that holds it all together is what you should
really focus on.
That's where you should manage your authorization.
So in the article I'll show an example of how you can do this
with your client side login on a page that has the sign in
with Google button, and the log in with Facebook button.
And we can go to the code now.
I'll give an overview of the code here, but make sure to
look at the article after the episode and
take a deeper look.
So what you can see here is something that, in this case,
is called AuthStates.
And it's a central place to manage authorization.
You can see on the screen the code for when the user clicks
on log in with Facebook button.
What you would normally do, is initiate the login process
right in that block of code.
But when you're dealing with multiple providers, it's
easier to offload your authorization state to this
[INAUDIBLE] code that we've written here and centralize
your choice of log in.
So for instance, in this case, we want to let the user make a
choice between Google and Facebook when
they're signing in.
But we also want to keep the flow going quickly.
So the code here gives an example of what you'd do if
the user is logged into Google and Facebook.
In this case, we're going to go ahead and log the user in
with Google.
Of course, you can customize this to your preferences.
But what you can really see here, and what the point is,
that none of the authorization logic is mixed together.
And you don't have any of these nasty
if-Google-else-Facebook statements.
You centralize it, and then you can go on to add three,
four identity providers and push all the authentication to
this one central location.
Instead of creating messy code that's hard to maintain.
JOANNA SMITH: OK.
And so when you were creating this central location, this
glue that holds everything together, was there anything
about it that was particularly difficult?
Or did you find that it started to make sense once you
really had your mind around it?
SAM STERN: So I think you'll see--
once you implement a framework like this--
that it all starts to make sense when you think of your
providers as just ways a user can connect to your website.
And don't try to let the providers handle
each other's logic.
If you centralize it, you'll see that you can take the flow
you had in your mind and really implement it quickly in
your application.
And then you won't have to maintain the same separate
pieces of code over an over.
You can do it all in one place.
JOANNA SMITH: OK.
Social identity providers have a lot more than just
authentication, right?
And I guess my next question is, how do some of these
features that are really similar between Facebook and
Google+-- how did you handle that?
SAM STERN: So in the feature translation section of the
article, you'll see a breakdown of if you're doing
something with Facebook, how you can do the same thing or
similar thing on Google+ to keep it a consistent
experience for users.
One particular example is, if you're used to publishing
information on the open graph on Facebook, you should be
publishing app activities to Google.
Which is Google's way of sharing structured data from
your application about actions the user has taken.
A user has listened to a song, or rented a room.
Things like that that you might have been pushing-- the
open graph you should push to app activities on Google.
JOANNA SMITH: OK.
And then how did you handle the user experience across
multiple different feature sets?
Did you have custom UIs?
Did you surface certain buttons at certain times?
How did you really handle that?
SAM STERN: So what the developer really should focus
on is making your app shine.
But also highlighting the identity provider that your
user chose.
So you want to present the correct set of features at any
given time based on how the user's signed in to your
application, without creating a fragmented user experience.
For instance, if the user is on a page that is sharable on
Facebook, you might want to have Facebook's share button.
Whereas with Google, you might want to have
an interactive post.
And this is something that you can also discover in the
feature translation section, about how to give a consistent
user experience without missing
what makes each network--
each social identity provider-- different.
Or why the user chose to sign in with the
provider that they did.
JOANNA SMITH: OK.
And on that note, what are some things that are different
about Google+ that you think Facebook developers might be
interested in?
SAM STERN: So there were three main things that I was able to
add to my application after I [INAUDIBLE] with Google that I
couldn't get before.
The first thing was over the air installs, which is
something really powerful--
that if you have a user sign in on the web, you can offer
them the opportunity to sign in--
to install your Android application to their device at
the same time.
When a user signs in to your service once, they're signed
in on all their devices.
And this is a way to create a really great user experience,
and get users to where they actually want to be going in
your application.
And the third one is interactive posts, which at
first might seem like a share that a lot of
other providers have.
Interactive posts allow you to really call the user to an
action on your application.
And this also goes with deep linking, where you can bring
the user directly to what they want to do on your app or on
your website.
Rather than just sharing content, which is more
powerful and allows the user to act more quickly.
JOANNA SMITH: Fantastic.
So let's go back to this article that you wrote, right?
It seems to be pretty long.
There's a lot in there.
What can developers expect to learn from this article?
What resources are available to them there?
SAM STERN: So like you said, there's a lot of content in
this article.
And hopefully what a developer can see is that is a very
customizable framework for managing multiple providers in
your application.
There's a lot of code here that will work for you, but it
doesn't have to be set in stone.
You can expand what's in the article to fit the needs of
your application.
And hopefully you can go from zero to hero with
Google+ very quickly.
And start from having just Facebook on your website, to
have a fully functioning Google+ integration by the end
of the article.
JOANNA SMITH: So before we go, before we sign off, I want to
put you on the spot.
And I want to know your favorite part about interning
with us here in Mountain View was, as well as your least
favorite part.
SAM STERN: So favorite part is easy.
I sit about five feet from a Foosball table, and I got
pretty good at Foosball playing with everybody.
And I'm going to cheat and have two favorite parts.
I also really like the food, which I think everybody who
comes to Mountain View says.
And my least favorite part, coming from the East coast,
would be the tech bubble of the Silicon Valley.
It's hard to go anywhere within 50 miles without
hearing about the latest app or website.
Which sometimes it can be a little much.
JOANNA SMITH: That's a very true statement.
Well, thank you so much for joining us today, Sam.
We really appreciated you taking the time to do this
episode before you go back to school.
And once again, everyone watching at home, if you'd
like to see the full scope of what Sam did this summer, you
can go to developers.googl e.com/+/web/facebook.
And of course, all of our
documentation is there as well.
And you can learn everything you wanted to know about the
Google+ platform, or how to get started if you're a
Facebook developer primarily.
And then of course, if you have questions about this, ask
them to us.
We'll answer.
On Stack Overflow, if you use the tag Google-+, we'll be
able to find it.
And then if you'd like to see some code of how our samples
work, or how to sign in, or how the button works, check
out our GitHub repository at github.com/google+.
And then if you find a bug, or if you have a feature request,
let us know in our issue tracker.
And all of these resources are available in our documentation
at developers.google.com/+.
So thank you for joining, and I hope you all have a
wonderful week.