1 00:00:00,560 --> 00:00:03,520 In the last section we generated our oath Client ID. 2 00:00:03,630 --> 00:00:08,160 So now the next thing we're going to do is install the Google API library into our project. 3 00:00:08,160 --> 00:00:14,160 Now unfortunately Google themselves do not offer this library over NPM So we're not going to install 4 00:00:14,160 --> 00:00:15,210 it via NPM. 5 00:00:15,360 --> 00:00:18,890 Instead we're just going to add a manual script tag into our index. 6 00:00:18,920 --> 00:00:20,030 It's simple file. 7 00:00:20,220 --> 00:00:24,960 So to get started I'm going to open up my code editor or find my public directory and open up the index. 8 00:00:24,990 --> 00:00:28,330 A html file inside there or then find the head tag. 9 00:00:28,590 --> 00:00:36,240 And anywhere inside of the head tag I'm going to add in a script tag like so. 10 00:00:36,300 --> 00:00:39,290 And then I'm going to give it a source of HTP. 11 00:00:39,330 --> 00:00:42,770 Yes Colon slash slash a.p eyes. 12 00:00:42,840 --> 00:00:48,930 Google dot com slash J.S. slash API Dutchie us like so. 13 00:00:49,340 --> 00:00:50,920 And that's pretty much it. 14 00:00:51,060 --> 00:00:55,850 Then I'll save this and then flip back over to the browser. 15 00:00:55,870 --> 00:00:59,620 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 16 00:00:59,680 --> 00:01:07,150 up my javascript console once they have this open I should be able to write out the API like so. 17 00:01:07,330 --> 00:01:09,060 And I should see an object like this right. 18 00:01:09,070 --> 00:01:15,460 You're a peer So this object right here is the Google API that is available to us on the windows scope 19 00:01:15,610 --> 00:01:17,040 inside of our browser. 20 00:01:17,380 --> 00:01:22,030 So we're now going to create a new Riak component that's going to essentially wrap this Google Library 21 00:01:22,270 --> 00:01:25,870 and Usher our user through the entire process. 22 00:01:25,900 --> 00:01:30,550 We're going to have a discussion later on about how much this stuff should be included inside of redux 23 00:01:30,550 --> 00:01:31,420 versus react. 24 00:01:31,480 --> 00:01:35,570 But right now we're just going to get our waterflow working in re-act alone. 25 00:01:35,890 --> 00:01:41,850 So in sodomite code editor I'm going to find my component's directory and insight there I'll make a 26 00:01:41,850 --> 00:01:44,650 new file called Google off. 27 00:01:44,700 --> 00:01:46,430 J.S. like so. 28 00:01:46,650 --> 00:01:51,300 And then inside if you're going to put together some boilerplate for a class based component so let's 29 00:01:51,300 --> 00:02:02,450 say import re-act from re-act or then define a class of Google off extends re-act dot component I'll 30 00:02:02,480 --> 00:02:06,970 put together my render method all return. 31 00:02:06,980 --> 00:02:11,880 For right now a simple div that says Google Earth. 32 00:02:12,120 --> 00:02:16,830 And then of course I'll do my export default Google auth at the bottom. 33 00:02:16,840 --> 00:02:18,810 Next up I'm going to flip back over to my app. 34 00:02:18,920 --> 00:02:20,280 Actually not the app file. 35 00:02:20,310 --> 00:02:24,790 You can flip over to the hetter because you want to eventually show a button related to authentication 36 00:02:24,790 --> 00:02:25,570 in the header. 37 00:02:25,690 --> 00:02:30,260 So we're going to hook up this component right here inside of our head or component or open up heterodoxy 38 00:02:30,290 --> 00:02:31,000 Yes. 39 00:02:31,270 --> 00:02:40,920 And in the very top I'll put an import Google off from Google off like so or then find the div with 40 00:02:40,920 --> 00:02:42,810 the class name of right menu. 41 00:02:42,840 --> 00:02:45,300 Inside there is the one link tag right now. 42 00:02:45,300 --> 00:02:53,430 And so right next to that I'm going to create an instance of my Google off Riak component. 43 00:02:53,430 --> 00:02:53,790 All right. 44 00:02:53,820 --> 00:02:54,940 Let's save that. 45 00:02:54,960 --> 00:02:56,050 We'll flip back over. 46 00:02:56,100 --> 00:02:59,730 And I'm just going to make sure I see the text Google off the pier and sudden my application inside 47 00:02:59,730 --> 00:03:01,850 the headers specifically and there it is right there. 48 00:03:01,860 --> 00:03:03,600 That looks pretty good. 49 00:03:03,600 --> 00:03:07,440 All right so now that we've got a component put together I want to tell you a little bit more about 50 00:03:07,440 --> 00:03:10,030 how this Google API library works. 51 00:03:10,260 --> 00:03:15,390 You see this GAAP thing right here is a multipurpose Google API library. 52 00:03:15,390 --> 00:03:20,280 And we can use it to interact with the waterflow but we can also use it to work with all different types 53 00:03:20,280 --> 00:03:22,320 of Google services. 54 00:03:22,320 --> 00:03:30,570 Now this GAAP library is incredibly used are incredibly well distributed across the Internet a tremendous 55 00:03:30,570 --> 00:03:32,880 number of Web sites load up this library. 56 00:03:32,880 --> 00:03:36,940 So as such Google tries to keep this library as small as possible. 57 00:03:37,230 --> 00:03:41,790 So any time that we want to use some particular aspect of functionality in this library we have to first 58 00:03:41,820 --> 00:03:47,100 literally load up the javascript code related to the part of the library that we want to use when you 59 00:03:47,510 --> 00:03:48,540 print out GAAP. 60 00:03:48,540 --> 00:03:53,410 Right now you'll see that it only has a single function tied to it called load load right. 61 00:03:53,410 --> 00:03:59,610 You're literally means load up some internal library by making a follow up request over to Google servers 62 00:03:59,670 --> 00:04:04,260 and fetching some additional amount of javascript code and then adding it essentially to this Google 63 00:04:04,260 --> 00:04:05,020 Library. 64 00:04:05,430 --> 00:04:13,110 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 65 00:04:13,350 --> 00:04:16,230 off to like so. 66 00:04:16,300 --> 00:04:21,310 Now if you open up your network request tab before running that and clear your counsel or cleared the 67 00:04:21,310 --> 00:04:26,560 log right there and make sure you're filtering by all we can then run that line of code and we'll see 68 00:04:26,560 --> 00:04:31,540 this additional request automatically made to fetch some additional javascript code and load it up into 69 00:04:31,540 --> 00:04:32,900 that library. 70 00:04:32,950 --> 00:04:39,570 So now that that request has been completed we can then do a GA API doc client. 71 00:04:39,620 --> 00:04:44,170 RC let's just print out the API by itself and you'll very quickly see that it has some additional properties 72 00:04:44,170 --> 00:04:45,330 inside that object. 73 00:04:45,550 --> 00:04:49,060 So your shape API now in addition to that load function. 74 00:04:49,180 --> 00:04:52,460 We also have a couple of other functions inside of your as well. 75 00:04:52,480 --> 00:04:55,920 We have something called off to and client and so on. 76 00:04:55,930 --> 00:05:02,700 And as you might guess that to stuff is pretty darn relevant for what we're going to be trying to do. 77 00:05:02,860 --> 00:05:09,610 So after we load up that additional library we can then register or initialize it with our off client 78 00:05:09,610 --> 00:05:14,250 id by calling API client dot net. 79 00:05:14,380 --> 00:05:20,680 And then we can pass in an object with Client ID and we'll put our client ID in there. 80 00:05:20,920 --> 00:05:24,250 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 81 00:05:24,250 --> 00:05:24,880 up doing. 82 00:05:25,580 --> 00:05:25,950 OK. 83 00:05:25,990 --> 00:05:30,580 So we're going to essentially flip back over to our Google Earth component and go through this series 84 00:05:30,580 --> 00:05:31,800 of steps right here. 85 00:05:32,140 --> 00:05:36,970 Now remember we probably only want to initialize that library or kind of like load up the client portion 86 00:05:36,970 --> 00:05:37,710 of the library. 87 00:05:37,780 --> 00:05:41,800 One time when this component is first rendered onto the screen. 88 00:05:41,800 --> 00:05:49,310 So with that in mind I'm going to define a component did MT lifecycle method inside of the Google off 89 00:05:49,360 --> 00:05:55,820 component and then inside of here we would call window G API. 90 00:05:55,910 --> 00:06:02,700 Load client colon off to like so now we have the window on here to make sure that it's really clear 91 00:06:02,780 --> 00:06:08,270 that this is a variable g API that is available on Windows scope inside of our browser. 92 00:06:08,270 --> 00:06:14,180 If you leave off the window Daut and save this then you're going to very quickly see a warning message 93 00:06:14,180 --> 00:06:20,600 saying Hey this variable right the API is not known even though you and I know that it is available 94 00:06:20,600 --> 00:06:21,760 on Windows scope. 95 00:06:21,890 --> 00:06:26,610 So we saved that and then flip back over you're going to very quickly see exactly that error right there. 96 00:06:27,020 --> 00:06:33,510 So all we have do is prefix it with window and then react create react up is going to say oh OK I get 97 00:06:33,510 --> 00:06:33,840 it. 98 00:06:33,870 --> 00:06:36,440 This variable is available on Windows scope. 99 00:06:36,460 --> 00:06:41,020 So if we flip back over everything is working again OK. 100 00:06:41,040 --> 00:06:46,020 So now any time that our component is rendered onto the screen we're going to try to load up that client 101 00:06:46,020 --> 00:06:47,530 portion of the library. 102 00:06:47,610 --> 00:06:52,350 Now when we load up that library it takes some amount of time for the library to reach over to Google 103 00:06:52,350 --> 00:06:55,340 servers and download some additional Javascript code. 104 00:06:55,470 --> 00:06:59,400 So we need to essentially get a callback of when that process is complete. 105 00:06:59,670 --> 00:07:05,970 So to add in a callback we can add in a second argument year of an arrow function and this function 106 00:07:05,970 --> 00:07:11,460 is only going to be called after this client or to library has been successfully loaded up into the 107 00:07:11,460 --> 00:07:12,350 API. 108 00:07:13,060 --> 00:07:20,750 So then inside of this callback function we're going to call window GA API client dot in that we'll 109 00:07:20,810 --> 00:07:28,890 pass in an object and this object is going to have our client ID. 110 00:07:29,060 --> 00:07:33,350 So after we successfully load up the client library we're going to initialize our application with the 111 00:07:33,350 --> 00:07:37,020 client id that we had generated in the last video. 112 00:07:37,070 --> 00:07:42,230 So I'm going to flip over to that other file that we had created with my client ID inside of it and 113 00:07:42,230 --> 00:07:47,750 I went to copy the entire client id right here and then I'll paste it in for my client id right there 114 00:07:47,810 --> 00:07:50,430 like so. 115 00:07:50,550 --> 00:07:55,120 Now there's one other option we have to pasted in here in addition to the Client ID. 116 00:07:55,270 --> 00:07:57,680 So I'm going to put a comma at the end of that line. 117 00:07:57,900 --> 00:08:03,410 And then on the next line down I'm going to say scope right here we're going to specify the different 118 00:08:03,410 --> 00:08:08,120 scopes that we want to load up when we take that user or that we want to fetch when the user goes through 119 00:08:08,120 --> 00:08:10,340 the process as a reminder. 120 00:08:10,370 --> 00:08:15,830 Scope's stuff is essentially talking about what different parts of the user's profile or the user account 121 00:08:15,830 --> 00:08:17,570 that we want to get access to. 122 00:08:17,570 --> 00:08:21,800 So in our case we're just going to say that we want to get access to the user's e-mail member. 123 00:08:21,800 --> 00:08:25,070 We're not actually using their e-mail or their profile or anything like that. 124 00:08:25,070 --> 00:08:29,910 I just want to give you an example of how we can somehow access their email. 125 00:08:29,920 --> 00:08:30,190 All right. 126 00:08:30,190 --> 00:08:34,330 So scope right here as a string will out in e-mail. 127 00:08:34,330 --> 00:08:34,590 All right. 128 00:08:34,600 --> 00:08:35,910 So that's pretty much it. 129 00:08:35,980 --> 00:08:38,460 Now this right here is just going to initialize the library. 130 00:08:38,470 --> 00:08:41,560 It's not going to actually take the user through the process. 131 00:08:41,560 --> 00:08:43,110 Let's take a quick pause right here. 132 00:08:43,120 --> 00:08:48,040 When we come back the next section we're going to talk about how we can actually use this now initiated 133 00:08:48,210 --> 00:08:51,930 G API client thing to initiate the A D awat process. 134 00:08:51,940 --> 00:08:54,040 So quite possible see you in just a minute.