In the last section we generated our oath Client ID.
So now the next thing we're going to do is install the Google API library into our project.
Now unfortunately Google themselves do not offer this library over NPM So we're not going to install
it via NPM.
Instead we're just going to add a manual script tag into our index.
It's simple file.
So to get started I'm going to open up my code editor or find my public directory and open up the index.
A html file inside there or then find the head tag.
And anywhere inside of the head tag I'm going to add in a script tag like so.
And then I'm going to give it a source of HTP.
Yes Colon slash slash a.p eyes.
Google dot com slash J.S. slash API Dutchie us like so.
And that's pretty much it.
Then I'll save this and then flip back over to the browser.
Now once I'm back over here I'm going to make sure that I refresh the page and then I'm going to open
up my javascript console once they have this open I should be able to write out the API like so.
And I should see an object like this right.
You're a peer So this object right here is the Google API that is available to us on the windows scope
inside of our browser.
So we're now going to create a new Riak component that's going to essentially wrap this Google Library
and Usher our user through the entire process.
We're going to have a discussion later on about how much this stuff should be included inside of redux
versus react.
But right now we're just going to get our waterflow working in re-act alone.
So in sodomite code editor I'm going to find my component's directory and insight there I'll make a
new file called Google off.
J.S. like so.
And then inside if you're going to put together some boilerplate for a class based component so let's
say import re-act from re-act or then define a class of Google off extends re-act dot component I'll
put together my render method all return.
For right now a simple div that says Google Earth.
And then of course I'll do my export default Google auth at the bottom.
Next up I'm going to flip back over to my app.
Actually not the app file.
You can flip over to the hetter because you want to eventually show a button related to authentication
in the header.
So we're going to hook up this component right here inside of our head or component or open up heterodoxy
Yes.
And in the very top I'll put an import Google off from Google off like so or then find the div with
the class name of right menu.
Inside there is the one link tag right now.
And so right next to that I'm going to create an instance of my Google off Riak component.
All right.
Let's save that.
We'll flip back over.
And I'm just going to make sure I see the text Google off the pier and sudden my application inside
the headers specifically and there it is right there.
That looks pretty good.
All right so now that we've got a component put together I want to tell you a little bit more about
how this Google API library works.
You see this GAAP thing right here is a multipurpose Google API library.
And we can use it to interact with the waterflow but we can also use it to work with all different types
of Google services.
Now this GAAP library is incredibly used are incredibly well distributed across the Internet a tremendous
number of Web sites load up this library.
So as such Google tries to keep this library as small as possible.
So any time that we want to use some particular aspect of functionality in this library we have to first
literally load up the javascript code related to the part of the library that we want to use when you
print out GAAP.
Right now you'll see that it only has a single function tied to it called load load right.
You're literally means load up some internal library by making a follow up request over to Google servers
and fetching some additional amount of javascript code and then adding it essentially to this Google
Library.
So to do so we're going to call G API dot load and then we're going to pass in a string of client colon
off to like so.
Now if you open up your network request tab before running that and clear your counsel or cleared the
log right there and make sure you're filtering by all we can then run that line of code and we'll see
this additional request automatically made to fetch some additional javascript code and load it up into
that library.
So now that that request has been completed we can then do a GA API doc client.
RC let's just print out the API by itself and you'll very quickly see that it has some additional properties
inside that object.
So your shape API now in addition to that load function.
We also have a couple of other functions inside of your as well.
We have something called off to and client and so on.
And as you might guess that to stuff is pretty darn relevant for what we're going to be trying to do.
So after we load up that additional library we can then register or initialize it with our off client
id by calling API client dot net.
And then we can pass in an object with Client ID and we'll put our client ID in there.
I'm not going to actually put it in there I just want to give you an idea of what we're going to end
up doing.
OK.
So we're going to essentially flip back over to our Google Earth component and go through this series
of steps right here.
Now remember we probably only want to initialize that library or kind of like load up the client portion
of the library.
One time when this component is first rendered onto the screen.
So with that in mind I'm going to define a component did MT lifecycle method inside of the Google off
component and then inside of here we would call window G API.
Load client colon off to like so now we have the window on here to make sure that it's really clear
that this is a variable g API that is available on Windows scope inside of our browser.
If you leave off the window Daut and save this then you're going to very quickly see a warning message
saying Hey this variable right the API is not known even though you and I know that it is available
on Windows scope.
So we saved that and then flip back over you're going to very quickly see exactly that error right there.
So all we have do is prefix it with window and then react create react up is going to say oh OK I get
it.
This variable is available on Windows scope.
So if we flip back over everything is working again OK.
So now any time that our component is rendered onto the screen we're going to try to load up that client
portion of the library.
Now when we load up that library it takes some amount of time for the library to reach over to Google
servers and download some additional Javascript code.
So we need to essentially get a callback of when that process is complete.
So to add in a callback we can add in a second argument year of an arrow function and this function
is only going to be called after this client or to library has been successfully loaded up into the
API.
So then inside of this callback function we're going to call window GA API client dot in that we'll
pass in an object and this object is going to have our client ID.
So after we successfully load up the client library we're going to initialize our application with the
client id that we had generated in the last video.
So I'm going to flip over to that other file that we had created with my client ID inside of it and
I went to copy the entire client id right here and then I'll paste it in for my client id right there
like so.
Now there's one other option we have to pasted in here in addition to the Client ID.
So I'm going to put a comma at the end of that line.
And then on the next line down I'm going to say scope right here we're going to specify the different
scopes that we want to load up when we take that user or that we want to fetch when the user goes through
the process as a reminder.
Scope's stuff is essentially talking about what different parts of the user's profile or the user account
that we want to get access to.
So in our case we're just going to say that we want to get access to the user's e-mail member.
We're not actually using their e-mail or their profile or anything like that.
I just want to give you an example of how we can somehow access their email.
All right.
So scope right here as a string will out in e-mail.
All right.
So that's pretty much it.
Now this right here is just going to initialize the library.
It's not going to actually take the user through the process.
Let's take a quick pause right here.
When we come back the next section we're going to talk about how we can actually use this now initiated
G API client thing to initiate the A D awat process.
So quite possible see you in just a minute.