Tip:
Highlight text to annotate it
X
[MUSIC PLAYING]
JOANNA SMITH: Hey everybody, and welcome to Google+
Developers Live.
Come code with us.
I'm Joanna Smith, and I'm a Google+
Developer Programs Engineer.
SILVANO LUCIANI: And I'm Silvano Luciani, and I'm also
a Developer Programs Engineer for Google+.
And what we want to do today is show you how easy it is to
integrate the Google+ Sign-In in your application by doing
some live coding demo.
JOANNA SMITH: So we're very excited to do that, but before
we begin, I want to mention once again our Google+ Sign-In
boot camps that are happening all around the globe.
Silvano and I are both very, very stoked to be able to
participate in this, and we are actually looking at nine
cities, five continents, five weeks, 180 partners, 8 and 1/2
time zones, and I'm only going to bring one pair of shoes.
SILVANO LUCIANI: Wow.
Google engineer truly loves numbers, huh?
JOANNA SMITH: I think we do.
All right, let's go ahead and get started.
So the first thing that we need to do is create a project
on the Google API's console.
And many of you have already seen our explicit instructions
for this, but we want to show you, once again, how to do it.
And we're going to create a Client ID for our web
application, and then we're going to enable the Google+
API for our project.
Silvano, take it away.
SILVANO LUCIANI: So let's navigate to the console, which
you can reach by developers.google.com/console.
And when you are in the console, you can see on the
top left, there is a selection box where all your projects
are listed, and all the actions that
you can do are listed.
And in this case, we want to create a brand new project for
our demo, and let's call it Demo GDL.
And this is a name that you can use to remind what the
project is about.
After we've done this, the console is
creating our project.
Our project is now ready, and now we need to enable the
Google+ service.
So we just scroll the list down to Google+ API, and then
we click on, and it's done.
When you will do this for the first time, you will be shown
the terms of service of the Google+ API.
Please read our terms of service carefully before
enabling the service.
JOANNA SMITH: We are going to hold you to them.
SILVANO LUCIANI: So now that this is done, the last step is
create the Client ID, and that's really, really easy.
Just go to API Access, see the big blue button, Create an
OAuth 2.0 Client ID, click it.
At this point, we need to input the branding
information.
So this is what your users will see when they are shown
the content dialog by Google.
So please use a meaningful name for your app, use a
product logo, which I'm not doing now for the sake of the
demo, and also add the homepage URL for your
application.
In the next page, we can choose which type of
application the Client ID is for.
Our demo is a web app, so it's a web application.
And very important, your site or hostname.
name.
This would be used to authorize your website as an
authorized origin for our JavaScripts.
So careful with the scheme, which is important, and
careful with the hostname.
In the case of our demo, this is localhost, and it's done.
Create Client ID, and we are ready to go.
JOANNA SMITH: And at this point, it's actually very,
very easy to go ahead and extend your app to use other
Google services as well.
For example, to add the Google Drive API to your project, all
you have to do is enable that under the Services tab and,
later on, add the correct scope.
SILVANO LUCIANI: Let me show you.
It's faster.
JOANNA SMITH: All right, go ahead.
SILVANO LUCIANI: So if you go to Services, once again, let's
scroll to Drive SDK.
Let's click On, and we are ready to go.
We can use Google Drive.
JOANNA SMITH: And so you see it's really easy to get access
to all of our Google services.
All right, so let's go ahead and start coding.
SILVANO LUCIANI: Yeah, let's see some code now.
As you can see, this is a very basic
skeleton of our HTML page.
We will now fill in the empty spaces using code snippets
from our documentation site.
And as you will see, there's very little
that you need to do.
So let's go to our documentation on the Google+
Sign-In, and you will find the steps for the configuration
that we just showed you--
Create Client ID, Create Client [INAUDIBLE].
And now the first thing that we need to do in our code is
load our JavaScript.
So we can just copy the snippet and
paste it in our source.
JOANNA SMITH: And you see, these snippets actually are
littered throughout our entire documentation, and we did that
intentionally to make it as easy as possible for all of
our developers.
And of course, if you want more details, you can always
check out our samples to see more context
for how they're used.
But we'd love your feedback on if these are helpful, or if
these need work.
Definitely let us know, because we're trying to make
sure integration is simple for all of you.
SILVANO LUCIANI: So let me make this a bit more tidy.
And now, the second step.
We need to actually place the button in the page.
And again, we have a snippet ready to do this for you.
So let's copy it, let's paste it in the
body of the HTML page.
As you can see, the snippet comes preconfigured with some
of the parameters that you will need.
There is only one change that you need to do at this point,
and it's using your Client ID, the one that we just created.
So let's go back to the API console, let's go back to the
API Access Pane.
And now we can copy my Client ID and paste it back in the
source code.
JOANNA SMITH: Now Silvano, since we're pretty much ready
to go, can you take a moment to explain what these other
attributes mean?
SILVANO LUCIANI: Yes, of course.
So the class, which you can see is g-signin, is the most
important one because using this specific class, g-signin,
you're telling the library that when the dom has finished
loading, all the elements with this class should be rendered
as a Sign-In button.
The callback, as we will see in a second, is what will be
called after the outflow has been executed.
And that's where you decide, for instance, if a login has
been successful and you take actions as hiding the Sign-In
button, or if there have been problems in the login, so for
instance, the user has clicked Cancel instead of Accept, and
you can show them a message saying, you will need to click
Accept if you want to do more stuff with my app.
Client ID, we already saw it.
Cookie Policy, it's an advanced parameter.
You can find a lot of documentation
on it on our site.
For now, just stick with single_host_origin for the
sake of this demo, and we will probably do another GDL just
on this and other sign-in and sign-out related topics.
JOANNA SMITH: Yes, definitely.
SILVANO LUCIANI: Request Visible Actions, your app will
be able to write app activities to the app activity
stream of your user, and this is where you can specify which
types of app activities the app will be able to write.
JOANNA SMITH: And we actually have a selection of 10
different app activity types right now, and they're all
based on schema.org.
But if you can't find one that perfectly suits your needs,
let us know in the Issue Tracker, and we'll definitely
be considering new app activity types, just as we
were considering new moment types during our Developer
Preview for History.
So just keep us informed.
SILVANO LUCIANI: And last, we have this Code Parameter,
which in this case is just asking for the authorization
for the plus.login scope.
But at this point, we can add Drive here, for instance.
So I don't remember the Drive scope.
Let me go to the Drive docs.
Drive, they have a lot of different scopes to let you
have a fine grained control on what the app can do.
We will just take the umbrella one.
And if you want to specify more scopes, you just need to
separate them with space and add it to this parameter.
And we are almost set.
The only thing that is missing, as we mentioned
before, is a callback so that we can do something after the
authentication flow has been executed.
Once again, in our docs, we have a snippet ready for you.
JOANNA SMITH: This is a very simple callback function.
You should definitely be customizing and enhancing it
for your own app, but it's here for you to get started.
And that's our goal right now, is to help you get started on
your integration and see how simple it really can be.
SILVANO LUCIANI: And it's just a matter of seconds, so let's
go back to the app and copy the callback in that.
As you can see, is not doing much at this moment.
It's just checking that if we have an access token, that
means that the user is logged in, so we can
hide the Sign-In button.
And otherwise, an error has happened, and for instance we
can log it to the console and check what was wrong.
So now I can save it.
Last thing that I want to do is let me add another
parameter, which is the theme for the button.
And this is just because if I specify a dark theme, the
button will be red, and even if we have a white background,
it will be easier for you to see it.
JOANNA SMITH: We do offer several options for sizes of
buttons, as well as the theme, the red versus a lighter
theme, and you can see all of them in our Branding
Guidelines on our documentation.
And you can also see information about if you
wanted to make your own button, which we're going to
show you how to do at the end of the episode.
SILVANO LUCIANI: So now when I load the demo, you can see our
big red Sign-In button.
And when I click over it, it's opening the Consent dialog.
This is now opened in another window because we are in full
screen, but if I wasn't in full screen, it would be a
pop-up dialog.
An important thing here to notice is in the first line,
it's telling the user that the app wants to know a name,
basic info, a list of people they're
connected to on Google+.
And this comes from the plus.login scope.
The second line, because we added the Google Drive scope,
is telling the user that the app also wants to view and
manage the files and documents in their Google Drive.
JOANNA SMITH: So this is actually a good thing to note
because no matter how many Google services your app needs
to use, your user only needs to log in one time.
SILVANO LUCIANI: Correct.
And at this point, if we click Accept, bam.
We're done, and we are logged in.
Now, you can't see a lot happening, because, as we saw
with the callback, it's just hiding the Sign-In button
after a successful login.
We can try to do something more in the callback.
So for instance, we can try to get data on the profile of the
user and show it on the screen.
So let me add to the body a pre element where we will add
the profile info.
OK, there I am.
Sometimes I forget how to use a computer.
And now, we can use the Google API JavaScript Library, which
is bundled when we load the JavaScript library to render
the Sign-In button.
So the first thing that we need is to load the definition
of the Plus API in the client, and we can do this in this
way, and then the callback that will be called after the
library has been loaded.
At this point, we can call on the client,
gapi.client.plus.people.get.
And we can specify as user ID, we can use me because the user
is logged in, so this will be resolved to the user
that is logged in.
And after we execute it, we can add another callback,
which will be return the result, which is the profile
info of the user connected.
And now, we can add this in the pre element that we added
before to the page.
So let me find it by ID, and this is a profile,
.innerHTML=, and now let's add the stringified representation
of the JSON object, result, and we can make it a little
bit prettier.
JOANNA SMITH: All right, let's take a look.
SILVANO LUCIANI: So now if we go back and we reload, I'm
signed in, so if you see the button has appeared for a
while, then it's been hidden after I was successfully
logged in, and now I can see info from my
profile on the page.
This is a good time to tell you a small best practice.
It would be better to hide the button in the beginning, and
then when you check if the user is logged in, you don't
do anything.
If they're not logged in, you show the button to the user.
So in this way, you will avoid this little effect
that we've just seen.
JOANNA SMITH: Yeah, the little flash.
So what you can see is we have the button is fully
acclimated.
We've already got all that working, and you already have
user info back about the user that logged in.
But last week, we told you guys about over the air
installs, and I want to stress again how incredibly simple it
is to add these once you have sign-in done.
And so at this point, to drive downloads for your app, for
your Android app for your users, all you have to do is
add a single line of code and make one change to the
configuration of the API console, and Silvano's going
to do that for you right now.
SILVANO LUCIANI: Yeah, so let me show the steps which are,
as Joanna said, really easy.
Let's go back to our project in the API console.
In the same project that we were using, we need to add
another Client ID, which will be the Client ID of our
Android app.
So let's click Create Another Client ID.
This time, it's not a web application.
It's an installed application, and we can
choose the Android type.
At this point, all we need to add is the Package Name for
our app, which, for instance, could be com.example.myapp,
and then we will need to add the fingerprint certificate
for our application.
And you can find instructions on how to generate the
certificate on our docs in the Getting Started for Android,
and it's a very easy to follow procedure.
JOANNA SMITH: It is.
And this is a good time to mention that there are three
things to keep in mind when doing over the air installs.
One is that you need to own the app that you're going to
try to drive install support, which is why you have to
generate the certificate.
And if it doesn't match, if the fingerprint doesn't match
the original app, then you're not going to be able to push
the over the air install.
And that's why we've already had some questions online,
people trying to test over the air installs with our sample
apps, and it's not going to work for this reason.
The other thing to keep in mind is, like Silvano
mentioned, if you don't have both of these Client IDs for
installed and web applications living in one project, they're
not going to match, and so you're not going to be able to
drive the over the air install that way.
So make sure that they live in one API console project.
And finally, we do have quality control because we are
Google, and we are Google+, and we want to make sure that
we aren't crossing the line toward anything
spammy for our users.
And so if you have a brand new app, it might not work for
over the air installs right away.
You do need to get some reviews from your users and
some really good ratings before we'll start pushing
that for you.
But just keep trying, get your users started,
and it'll work fine.
I guarantee it.
SILVANO LUCIANI: And it's a powerful way of getting your
app downloaded to a lot of devices.
JOANNA SMITH: That's true.
SILVANO LUCIANI: There's only one change that is needed in
the code of the Sign-In button.
So back to the code, we just need to add the
data-apackagename Parameter, and you can do it here.
Let me see, package name.
And here, you will specify the package of your Android app,
so for instance, com.example.myapp, to follow
what I did before.
Now, we're going to show this to you.
We have an already prepared demo which is using an app
that we already have, and it's already passing our--
JOANNA SMITH: Quality control.
SILVANO LUCIANI: --quality threshold so that we can show
you how it's actually working.
JOANNA SMITH: And some of you have already seen this app.
It's our PhotoHunt app.
We've been using this for demos all across Google+ and
Google Developers Live.
And also, you can see all of this code in its entirety
through our GitHub repository, because we want you to be able
to see an end to end implementation.
Let's take a look.
SILVANO LUCIANI: So to our sample.
So I forgot to disconnect, and this is why you
didn't see the OTA.
Let me do it.
So I can also show how to disconnect applications.
You need to go to your Profile page, About, and then if you
scroll at the end, you will find the apps that are
connected to your profile.
In this case, it's PhotoHunt, and what I want to do is
disconnect the application.
So I actually need to go to the list of apps to do that.
And once I'm in the list, I can now disconnect PhotoHunt.
And sorry for this, but we are live.
JOANNA SMITH: Hold on, Silvano.
Just wait one minute.
I need to make sure the tablet is turned on before we try to
show off over the air installs.
How are we looking, [? Lewis? ?]
MALE SPEAKER: The tablet is definitely on.
Little bit of screen flicker, but it'll work for our demo.
JOANNA SMITH: All right, we're just going to show you guys
the install, so it'll be fine.
SILVANO LUCIANI: OK, so now when I reload the page, I can
see the Sign-In button.
When I click on the Sign-In button, this is the new
Consent for PhotoHunt, and it's similar
to what we saw before.
When I click Accept before, because we have the Android
app, now Google Play is telling me, hey, we have an
Android app.
Do you want to download it?
And it's showing me which are my devices.
So in this case, it's a Samsung Nexus 10.
If I had other devices, it would show
me a list of devices.
And I finally can click Install to have the app
downloaded to my Nexus 10.
Just see it.
JOANNA SMITH: Fair warning, it is flickering, but you guys
can at least see the install happen.
And look at that.
It's already here.
I didn't touch the tablet.
I didn't have to accept anything,
because I own this tablet--
or Silvano owns the tablet, and his account is
associated with it--
we have the app that automatically appears on the
Home screen.
Whoops, shouldn't have touched it.
We also have a notification letting us know that PhotoHunt
has been successfully installed.
And it's that simple to drive downloads for your users with
your Android app.
All you have to do is add one line of code and make one
configuration change, and it's done when they log in for the
first time.
SILVANO LUCIANI: And I'm a new PhotoHunt user.
JOANNA SMITH: Yes, this is great.
So moving on, hey, Silvano?
The Google+ Sign-In button is really cool, but in my
website, I like to fine tune every single detail, and I
have very strict requirements.
Does that mean that I can't use the button if I'm not
happy with the ones that Google provides?
Said every developer ever.
So how do we respond?
SILVANO LUCIANI: Don't worry, Joanna.
Don't worry, every developer ever.
You can still have your own markup, and you can still have
all the functionalities of the Sign-In button.
I will show you how to do it.
There's several ways of doing it.
I will now show you the easiest one.
But first, let me disconnect the demo so that--
JOANNA SMITH: We'll see the button again.
SILVANO LUCIANI: We'll see the button again.
Now, back to the code.
The easiest way of doing it is inside this pane, where you
are applying the class g-signin, you can add an image
or another span or a button, where you will style your own
Sign-In button.
And this will be picked up by our JavaScript and the
behavior will be attached to that element.
So in this case, I can show you a very simple thing.
I have a g+32.png.
I downloaded this from our Branding Guidelines page,
where you can find a whole set of icons that you can use for
your buttons, and most importantly, you can find the
branding guidelines which you will need to follow when
customizing the markup for your button.
Now that this is done, back to our demo.
I can reload it.
Let me reload the correct one.
JOANNA SMITH: Good catch.
SILVANO LUCIANI: And now as you can see,
the icon has changed.
You will need to style everything, so in this case,
if I hover over the button, it's not changed to a hand,
it's still a cursor, but it's very easy to do with CSS.
And you can see that if I click, all the
functionalities are there.
And if I add an Android app and a valid app package name
in the button, the OTA install would pop up after
accepting the app.
JOANNA SMITH: It's easy quick, just as we promised.
And if you want some examples also of some custom buttons
that are already out there in the world, you can check out
any of our launch partners, which you can find as case
studies on our documentation, to see what they did with
theirs, because a lot of them did want a custom button.
It's very common.
And of course, you can find details and explanations in
our documentation at developers.google.com/plus.
If you have any questions, please don't hesitate to raise
them in our Google+ Developers community, because, like I
said, we hang out there, and we love to answer questions.
And we're happy to provide advice and let you know.
And if you aren't sure if you meet the branding guidelines,
just ask us.
We're more than happy to help.
SILVANO LUCIANI: Or if, like me, code is your thing and
you'd like to see more examples, check out our
organization at GitHub, github.com/organ
ization/google+.
We have the kick starts for almost
every existing language--
Java, JavaScript, Python, PHP, Go, Ruby, C Sharp.
And also, as I mentioned before, we added PhotoHunt,
which is our end to end sample application.
You can now find Java back end and JavaScript front end
written in AngularJS and also the two mobile clients,
Android and iOS, and we are working very hard to add more
languages and more back ends.
JOANNA SMITH: Yeah, so we're looking forward to all of that
and helping you guys out as much as we can.
And of course, if you have an issue in your own development,
you can raise a question on Stack Overflow using the
Google+ tag, and we check that daily, if not more often.
And finally, if you find an actual bug in anything in the
APIs, in our Quick Starts, raise it in our Issue Tracker.
Let us know.
And if you find a bug someone else found, star that issue.
We use the stars to gauge how many people are affected by a
particular bug, and also how many people are wanting the
same feature request.
So let us know and tell us what you think in our Issue
Tracker, and we definitely will take a look at that and
use that moving forward.
SILVANO LUCIANI: And remember that we are touring the world.
We are around the world in different locations on
different dates, so check out if any of the upcoming
locations and dates are suitable for you and come code
with us, because we will be really happy to code with you
and help you build awesome integration
with Google+ Sign-In.
JOANNA SMITH: It's true, so we'll see you in the next
hemisphere.
[MUSIC PLAYING]