Ali Afshar: Hi everyone.
Welcome to Google Developers Live.
My name's Ali Afshar.
Today, I'm going to be talking to you about to the new Google
sign in button, along with Google Drive.
Now, I'm really excited about this.
So this week, we launched a way for users to sign in to
your application, authorize their data with your
application, that comes in the form of a button, OK, and has
a number of awesome features.
Mostly, it's a well trusted and good thing to
have on your site.
It's branded to Google.
And when users see it, they know that what they're
getting, the way they're logging in, that's official
and that's good.
OK.
So it was primarily launched for Google+.
It provides some features of knowing the user's profile,
and also provides a really cool feature of allowing you
to initiate an over the air install of your application on
a mobile device when the user is logged into the web.
So all those features are cool.
I'm just going to show you, quickly, today, how to get it
running for your Google Drive API application.
So the process I'm going to do, well, the Plus team
produced a set of really great quick starts.
So they're just quick start applications, which you can
clone the code from GitHub.
And you can get the code in your language and start it.
So today we're going to be using Python.
We're going to be using Python and JavaScript.
Obviously, there are JavaScript components to this.
So I'm just going to go to their page, developers.googl
e.com/plus/quickstartpython, and I'm going to see how we're
going to do this.
So the first thing it tells me is that I need to install some
requirements to get this running.
This uses the flask web application framework, which
is something I've hacked on a lot at this.
Like probably my favorite web application framework.
It's very simple to get started, and from a Google
point of view, if you something like App Engine, you
can easily host it there.
This is just very nice because I can run stuff from the
command line.
So as with any online, live demos
everything could go wrong.
If that happens, that would be really exciting and fun, so
I'm looking forward to it.
So let's have a look.
So here, we've got a shell.
Let's just clear it and have a look.
What I've done is I've cloned the repository.
OK.
So I haven't done it in exactly the
order they've said.
I'm a geek.
I don't like to follow directions.
That's fine.
So I've cloned this repository.
And I've done a couple of the steps at the start where I've
put in my own client ID and client secret.
I've set my authorized JavaScript origins.
And I've set them up to work, already, for this.
Otherwise, we'd be going through a few forms worth of
clicking stuff, and if you've ever done that before, you
know how to do it.
It's very simple.
So this takes you through that.
And let's have a look.
What's in our repository?
Well we've got a client secrets dot JSON file.
That contains information about your client, your client
ID, your client secret, any redirect URIs, any origins.
All of that is configured in the client secrets dot JSON.
You can download that directly from the API console if you'd
like, if you don't want to create yours.
But one is provided with a quick start, and you just need
to modify your information.
Then we've got a script, signin.py.
OK.
That runs the entire web app.
And then, we have some templates, and inside
templates, there's a single template that is the index.
OK.
So that's a bit of a mish of HTML and JavaScript, but
really good for getting you up and running.
I expect when your application is working, or you have a
prototype built, you would actually extract the bits into
separate JavaScript files, just to be a bit neater.
But it's perfect for now, for what we're doing.
Well, let's just run it at the moment.
For now, all it does is it makes calls
against the plus API.
We're going to extend it slightly to make calls against
the drive API, but you see it's exactly the same thing.
So right, firstly, let's install a virtual environment.
You should really do this if you're testing stuff out.
I don't want to install flask for the whole system.
That would be bad.
So we've create call it ve, and we're going to run pip,
the installer, from inside there to make sure that it's
installed in the right place.
Install flask.
OK.
So this goes off to py py, and it will install flask for you.
Really ignore the warnings, OK.
There's lots of them, but just ignore them.
Then we also want to install the Google API Python client.
So we can install that, as well.
And now these are installed in my virtual environment.
And I'm actually ready to run the quick start.
So, ve/bin/python.
I'm running Python from inside the virtual em, this ensures
that it has the right environment, the right Python
part, for the libraries.
So ve/bin/python, signin.py.
OK.
And you see that starts it on all ports, on all hosts on
port four, five, six, seven.
OK.
So let's have a look at that.
And there we go.
So I don't know if you can see that.
There's a beautiful sign in button there.
I really like the red button, but that's
actually for dark themes.
So we have a kind of a light theme on this blank page.
So, first thing we'll do is we'll
start to tweak it slightly.
OK.
So let's look at the source code where
this button is defined.
Well, we know it's going to be in the HTML somewhere.
Not in their head, in the body.
And there, we can see it.
OK.
So how do you do it?
Well, you just this chunk of HTML in your page.
It's remarkably simple.
You have to make sure you've loaded the library, and the
library will go through and convert this stuff.
So let's have a look.
Well, one first thing we notice here is the data scope.
Now, I've been a bit cheeky, and I went through and I
edited this.
So this is saying, when you sign in, please, in addition
to asking for the scope for the profile, ask for the drive
file scope.
So applications will be authorized to use and access
files in the user's drive.
OK.
So that's the first thing.
OK.
Secondly, we'll look at the access type.
This is offline access.
So this may be ringing like, we have scopes, we have an
access type.
This is OAuth 2, essentially, but with a nice front end to
start using it.
OK.
And configurable.
So we see the theme is there, dark.
So let's set it to light.
And let's refresh this page.
And there we go.
So we have a nice, white button.
Actually, you know what, even on this white page, I think I
prefer the dark one.
So there are many, many parameters for this.
And it's really configurable how you like.
I like the Google branding.
I think that looks really nice.
So we just going to leave that on our page.
And there it is.
So let's start it.
Let's run it.
Let's see what happens.
So the first thing I see is, I get this pop up button.
OK.
Google Drive sign in app, that's what I've described
this app as in the API developer console.
And you can see it's beautiful, it's really nice.
In addition to the regular OAuth 2 descriptions, where we
have, here, view and manage files and documents in your
Google Drive-- that's what you would show if you
used regular OAuth--
we have these extra two parts.
And these two parts, the first one is allowing your user
information and your circle information to be accessed by
the application.
So the application doesn't know what you circles are
named, or anything like this.
They just know the list of people in that profile.
And I can edit that list.
And you can see that I've used this button before.
And I'm quite tight on privacy.
I don't like anyone to know anything about me.
I certainly don't want this application to know who's in
my circles.
That's fine.
So I've unselected these.
And this is really nice.
This is actually sticky, and it remembers
what I did last time.
So I have no circles selected.
OK.
The other part is allowing people in the circles to see
that I use this application.
Again, I don't really want people to know, so
I've put only me.
OK.
So this will get my profile information, but
nothing else, really.
Now, I'm very privacy conscious myself.
I've told you I hate giving my information out to people.
And as my friend, Vick Friezel says, I don't know of an
application that isn't made better, that cannot be
improved, by knowing something about the user.
OK.
That is just, I think, inherent.
So a quality application will know about the user.
It will be tailored to them.
It will be socially applicable to them.
So I think that's a really useful thing.
Let's press accept and see what happens.
So we accept, and a number of things happen.
OK.
So, again, this page is showing what happened on the
authorization, and it's showing a bit of information
about my profile.
As I say, the app, whatever your app is, will be better if
it knows about the user.
So how does this work?
Well I've got the Python Quickstart.
And this is something we call the hybrid flow
for the sign in.
I've managed to authorize on the client, in the browser,
and also send a code over to the server to
exchange for a token.
So I've now got offline access on the server, and I've got
online access in the browser.
So that's really cool.
I've authorized in both places.
Now, I like to make my API calls from
Python, from the server.
That's absolutely fine.
I'm going to do that.
So this loads the Plus library, makes a JavaScript
call to fetch this profile information--
and let's have a look at the code--
and then, goes through and calls, eventually, after
loading the stuff, a function called connectServer.
OK.
And here it is.
So what does connectServer do?
Well, it's got the token.
It will send me the token, the code that I can
exchange for a token.
That's here.
So it's going to post.
And in the body of the post, it's got the code.
And at the same time, it's going to pass some state, that
actually, that's built into the Quickstart really good.
So the Quickstart is using state to make sure that the
person who's making the request is actually the person
who initiated it in the first place.
So that's really good to prevent all kinds of forgery
and stealing, this.
So it just sends that to the connect
endpoint on the server.
OK.
So switching back over to the web application, we can see--
and this is beautiful, this is why flask is so nice--
we have this route that is on connect.
And it accepts posts.
OK.
So at some point in this function, we're going to go
through, and we're going to make an auth flow.
OK.
And how's it going to do that?
It's going to create an auth flow in Python, and it's going
to exchange the code.
Just like you would do if you had initiated the flow
yourself by redirecting someone somewhere.
So it's basic OAuth.
Uses the same libraries, but it does the
first half for you.
So that's really great.
So we've got the code.
This will store in a session.
OK.
And eventually, this will get around to
calling the people endpoint.
OK.
The people endpoint is just a dummy, there, to show you how
to make an API call from the server.
So the people endpoint gets called.
And it adds some information to the page when it
responds with that.
OK.
So let's have a look at the people endpoint.
It's a lot shorter, and a lot simpler.
So we're fetching the session for the
credentials from the session.
That's where you stored them from the connectServer point.
And then, as we go down--
this should be familiar to you if you've ever used the Python
client library before--
it builds a service, it makes a request, and it gets the
results of that.
OK.
And pumps it back into the page as a bit of JSON.
OK.
So that's perfect.
So this looks like a good place where we're going to
start writing our code.
OK.
So firstly, let's build a drive service.
Drive equals build.
So the name of the API, which is Drive.
The version of the a API, v2 is the latest.
And we pass out authorized HTTP instance in there.
Then, what shall we do?
Well, a simple call just to get-- let's
get the about feed.
OK.
So I'm going to import the [INAUDIBLE] printer.
So you can see what happens.
So about equals drive dot about dot get dot execute.
OK.
And we'll print that to the screen.
OK.
So that's every time this thing connects, every time it
asks for the people, then it should do this.
OK.
So let's try that out.
So we're still signed in.
The app's really nice.
It recognizes that you're signed in.
It doesn't offer you the button again.
And if we look, on the output, you see our about feed.
Now they about feed is something that happens for all
users in Google Drive.
There's metadata about the user itself, what roles they
have, what kind of files they can format, what formats they
can export or import their files from, their quota, other
information about their applications,
their permission ID.
This kind of thing that is useful for your application.
So there we go.
We've just made an API call.
So let's disconnect.
And let's show you.
So, small bit of HTML to do this.
Calls Google's flow, sends the code to the server.
The server exchanges the code for a token and saves the
token in the session.
Then, the front end makes an Ajax call to the server, and
we see output again.
OK.
So getting the about feed, that's not that useful.
What if you want to do something else like, I guess,
make a file.
So file equals--
or let's not call it file, because that's a
Python built in--
drive dot files dot insert.
And let's see.
Body equals title "Hello GDL!!" There we go.
Drive dot files dot execute.
And [INAUDIBLE]
that.
So let's do that again.
And this time, it should be making a file.
Let's have a look there.
That's that.
And then we go.
There's the file that it's created.
It should have the right title.
But that's the metadata output.
Now, in the real world, what would you do.
Well, you'd pump this back to the front end, then you'd
display it in a nice way.
Or whatever you wanted to do with it.
Or whatever your application does do with Google Drive.
There are 101 use cases there.
So let's have a look in the Google Drive.
Here's my Drive.
Let's refresh that.
And there we go.
There's our file empty.
Doesn't have anything in there but
"Hello GDL!!" OK.
So what have we done here today?
We've shown how you can use the sign in button for your
Google Drive API application.
OK.
Whether it be on the client, because this authorizes into
the client, or whether it's on the server.
Which your application might be one or the other.
What we haven't talked about is on the mobile device, on
Android, and iOS, this is also covered there.
And maybe, soon, we'll have a GDL showing you how to do
that, as well.
So key points to take away.
Google+ sign in button isn't just for Google+.
It's for all Google APIs that use OAuth 2.
And that includes the Drive API.
OK.
That's the first one.
Second one, it's really easy to use.
Grab the quick start for your language.
You will be able to get started,
literally, in 10 minutes.
I cut a few steps, so it was even shorter than that.
So yeah, really good.
Please use it.
We recommend that it's the best way to do it.
It's a nice, branded button.
And we recommend you do that with your application.
OK.
So thanks very much for joining me today.
Been really great.
And if you have any questions, please
follow up on stack overflow.
Thanks very much.
Bye bye.
[MUSIC PLAYING]