1 00:00:05,300 --> 00:00:09,110 Welcome back everyone to part two of our Google example for flask. 2 00:00:09,310 --> 00:00:10,790 Authorization with flask. 3 00:00:10,800 --> 00:00:15,800 That's the main part we're going to be focusing on and this lecture is actually getting our client id 4 00:00:15,950 --> 00:00:21,440 in our secret ID keys so we should always do is check out the flask dance documentation to see if there's 5 00:00:21,500 --> 00:00:23,120 any updates to the API. 6 00:00:23,330 --> 00:00:26,890 So let's go ahead and go back to that QuickStart documentation for Google. 7 00:00:27,320 --> 00:00:32,100 OK so here we are with flask dance and notice for every single Quickstart Guide. 8 00:00:32,150 --> 00:00:37,100 For example if you open up the hub or the Quick Start guides there's instructions on how to actually 9 00:00:37,100 --> 00:00:38,540 set up the application. 10 00:00:38,540 --> 00:00:41,400 So this instructions before the code is what you need to do. 11 00:00:41,720 --> 00:00:43,900 And we're going to be doing it for Google. 12 00:00:43,910 --> 00:00:47,420 So the first thing it tells us do is visit the Google developer's console. 13 00:00:47,480 --> 00:00:52,550 Now keep in mind when you visit this console your formatting may look different than mine because Google 14 00:00:52,760 --> 00:00:54,430 is constantly updating you. 15 00:00:54,470 --> 00:01:00,140 However there should be some sort of API has an authorization section and will want to set up some credentials. 16 00:01:00,140 --> 00:01:04,260 So it's going to do that open up console that developers that Google dot com. 17 00:01:04,490 --> 00:01:06,580 And that should take you to a page that looks like this. 18 00:01:06,710 --> 00:01:10,470 Eventually you should be asked if you're not already to sign into the Google platform. 19 00:01:10,490 --> 00:01:11,690 So let me sign in. 20 00:01:11,690 --> 00:01:12,410 All right. 21 00:01:12,410 --> 00:01:17,120 Once you've actually signed in to the developers console you should see some sort of dashboard. 22 00:01:17,120 --> 00:01:23,000 Keep in mind as I keep mentioning Google's dashboard UI and interface may change often so your screen 23 00:01:23,000 --> 00:01:26,290 may look different but the same information should be here. 24 00:01:26,420 --> 00:01:29,690 That's all we're looking for is where we actually set up credentials. 25 00:01:29,690 --> 00:01:33,590 And in this iteration of dashboard it's over here under API and services. 26 00:01:33,650 --> 00:01:37,060 There's a little key here that says credentials go ahead and click on that key. 27 00:01:37,310 --> 00:01:40,750 And then if you haven't set up any credentials you'll get something that looks like this. 28 00:01:40,790 --> 00:01:45,560 So we want to create credentials so I'm going to click Create credentials and I'll say oh off client 29 00:01:45,560 --> 00:01:47,840 id or click on that. 30 00:01:47,840 --> 00:01:53,540 And then when you actually set up a auth client id we actually set a consent screen. 31 00:01:53,700 --> 00:01:58,580 So it says you must first set a product name on the consent screen so they can feel your consent screen 32 00:02:00,620 --> 00:02:02,110 right here. 33 00:02:02,190 --> 00:02:05,510 You'll have your e-mail address shown product name shown to users. 34 00:02:05,520 --> 00:02:10,310 I'm going to say my flask test home page you are l. 35 00:02:10,320 --> 00:02:12,730 That would be actually linked to your deployed your URL. 36 00:02:12,780 --> 00:02:15,780 You can go ahead and just keep that blank for right now. 37 00:02:15,780 --> 00:02:16,890 Product logo. 38 00:02:16,950 --> 00:02:19,020 Again we can keep it blank. 39 00:02:19,290 --> 00:02:22,290 Essentially all these optional until you add the player app. 40 00:02:22,290 --> 00:02:26,670 Terms of Service So all these you are are going to be optional but you'll link them to whatever you're 41 00:02:26,670 --> 00:02:28,980 deployed you are ELAS suddenly click save here. 42 00:02:30,510 --> 00:02:35,240 Save that and then now that I set that up I can finally create my own client ID. 43 00:02:35,310 --> 00:02:37,270 So we're setting up a web application. 44 00:02:37,410 --> 00:02:40,220 The name here we'll go in and say web client 1. 45 00:02:40,410 --> 00:02:46,500 And as far as restrictions the main one we need to focus on is this authorized redirect you are I and 46 00:02:46,500 --> 00:02:51,030 every QuickStart if we come back here will tell us what you should actually pasan. 47 00:02:51,090 --> 00:02:56,050 So it says once you've done that you'll see two new fields authorized javascript origins and authorized 48 00:02:56,050 --> 00:02:57,020 redirects. 49 00:02:57,030 --> 00:03:02,910 So when you do is we need to put this localhost log into Google authorized into authorized redirect 50 00:03:02,940 --> 00:03:10,540 your eyes starting to copy this come back to client id and paste it in from my redirect your. 51 00:03:10,570 --> 00:03:16,260 We don't need to worry about the javascript open Origin's so click on Create and then that will create 52 00:03:16,260 --> 00:03:22,040 that link and then click on Create one more time then you should see a screen telling you hey here's 53 00:03:22,040 --> 00:03:24,550 your client id and here's your client secret. 54 00:03:24,550 --> 00:03:29,590 We're going to copy those and stick them into our application so I'll copy my client I.D. and come back 55 00:03:29,590 --> 00:03:31,670 to Adam where we were setting it up. 56 00:03:31,690 --> 00:03:32,960 So let me bring in the item. 57 00:03:33,000 --> 00:03:35,520 So right here I have made Google blueprints. 58 00:03:35,530 --> 00:03:37,290 I still need my client I.D.. 59 00:03:37,300 --> 00:03:38,310 So let's set that up. 60 00:03:38,340 --> 00:03:43,000 I'm going to pasan or paste in the client id that I just created and then the next one I'm going to 61 00:03:43,000 --> 00:03:49,690 do here is pasand the secret silts go back to our Google app and then we're going to copy the client 62 00:03:49,750 --> 00:03:50,320 secret. 63 00:03:50,320 --> 00:03:51,540 So copy that as well. 64 00:03:51,760 --> 00:03:53,340 And then let's bring in Adam again. 65 00:03:55,950 --> 00:03:57,720 And then I'm going to paste that in. 66 00:03:57,720 --> 00:04:01,680 So there I have my client ID and my secret ready to go. 67 00:04:01,680 --> 00:04:07,200 So essentially all we have to do now as a quick note you will typically set these as environment variables 68 00:04:07,260 --> 00:04:11,820 at the command line instead of pasting them in and having them here in our blueprint. 69 00:04:11,820 --> 00:04:15,270 So my client idea set up in my client secret is set up as well. 70 00:04:15,270 --> 00:04:19,920 Let's save these changes and then I'm actually going to run my Python application and see if everything 71 00:04:19,920 --> 00:04:20,670 worked out. 72 00:04:21,030 --> 00:04:27,580 So say Python app thought pie or any flask examples or Ruby up in to save this run that. 73 00:04:27,710 --> 00:04:30,750 And whoops let me make sure that I actually ran this. 74 00:04:30,870 --> 00:04:34,050 Looks like I forgot to actually run this at the bottom so let's set that up. 75 00:04:34,080 --> 00:04:41,910 So at the very bottom as always we'll say if name is equal to me take my app and run it and notice I'm 76 00:04:41,910 --> 00:04:48,270 going to not run it in debug mode because I want this welcome to actually return an internal server 77 00:04:48,300 --> 00:04:48,660 error. 78 00:04:48,660 --> 00:04:53,380 If I have it in debug mode it'll help me debug it but I actually want that bug to show up. 79 00:04:53,400 --> 00:04:58,170 Basically I want the internal server error so make sure when you say if name is local to Main just say 80 00:04:58,200 --> 00:05:00,260 app run don't have it in debug mode. 81 00:05:00,270 --> 00:05:00,470 OK. 82 00:05:00,480 --> 00:05:04,170 Now let's say that and actually run this there we go so looks like it's running. 83 00:05:04,170 --> 00:05:08,990 Let's bring in our browser and make sure that all worked out OK here and in my browser. 84 00:05:09,150 --> 00:05:12,470 Let's first see if I'm able to visit this welcome page without logging in. 85 00:05:12,480 --> 00:05:16,630 So if I click welcome page here they'll say internal server error sorry. 86 00:05:16,680 --> 00:05:18,240 Encountered an internal error. 87 00:05:18,330 --> 00:05:20,850 Unable to complete your request as a quick note. 88 00:05:20,910 --> 00:05:27,060 I would recommend that you try to log out of your Google services and view this in incognito browsing 89 00:05:27,090 --> 00:05:28,440 or private browsing. 90 00:05:28,440 --> 00:05:32,140 That way it doesn't accidentally sync up in case you're already logged into Google somewhere. 91 00:05:32,310 --> 00:05:36,800 So we should get an internal server error on this welcome because I'm not logged into Google yet. 92 00:05:36,990 --> 00:05:38,570 So let's revisit the home page. 93 00:05:38,580 --> 00:05:41,260 Come back to my home page and then it says here log in here. 94 00:05:41,280 --> 00:05:41,640 Google. 95 00:05:41,640 --> 00:05:44,440 So let's click that now you'll notice I actually got an error. 96 00:05:44,460 --> 00:05:51,420 It says redirect your mismatch as hey the either and you or I and the request was this one. 97 00:05:51,420 --> 00:05:53,320 1 2 7 0 0 0 1 0 0 0 0. 98 00:05:53,340 --> 00:05:54,780 Log into authorized. 99 00:05:54,840 --> 00:05:57,300 It doesn't match the one that we set in the off client. 100 00:05:57,300 --> 00:06:03,330 Now this because in the O off client we set local hosts instead of this you or I want to 7 zeros are 101 00:06:03,330 --> 00:06:04,410 1 5 0 0 0 0 0. 102 00:06:04,590 --> 00:06:07,080 So what you need to do is because we're testing this out locally. 103 00:06:07,080 --> 00:06:10,110 I'm going to add in this your I that showed up here. 104 00:06:10,250 --> 00:06:13,640 So going to copy that in and I'm going to add that in as a redirect. 105 00:06:13,660 --> 00:06:14,920 Your option. 106 00:06:15,030 --> 00:06:17,910 So let's go back to our dashboard and add that in. 107 00:06:17,910 --> 00:06:22,020 All right so here I am back on my dashboard Let me zoom in just a little bit and we're going to come 108 00:06:22,020 --> 00:06:23,150 back here to credentials. 109 00:06:23,160 --> 00:06:27,950 Go ahead and click on that and we should see now is the web client credential that we created earlier. 110 00:06:27,960 --> 00:06:29,580 Go ahead and click on that one. 111 00:06:29,880 --> 00:06:32,920 And then underneath authorized redirect your eyes. 112 00:06:32,970 --> 00:06:35,150 The basic one is localhost 5000. 113 00:06:35,160 --> 00:06:41,700 But because we're actually testing this locally we're going to add in this 1 2 7 0 0 5000 as well. 114 00:06:41,700 --> 00:06:46,590 This and this are essentially the same thing except one is kind of more clarification when you're testing 115 00:06:46,590 --> 00:06:47,690 this locally. 116 00:06:47,730 --> 00:06:50,660 So click save and then that's added in. 117 00:06:50,680 --> 00:06:54,070 So we can click Save again just to make sure that's saved then. 118 00:06:54,320 --> 00:06:58,200 And now let's jump back and try to log in again with Google. 119 00:06:58,200 --> 00:07:04,310 So going to minimize this and it come back to my office to air Shurmur we have this redirect your your 120 00:07:04,400 --> 00:07:04,960 mismatch. 121 00:07:04,960 --> 00:07:07,780 So let's come back and revisit our Web site. 122 00:07:07,780 --> 00:07:11,930 So we're now back at the home page and then to click again log in here of Google. 123 00:07:12,550 --> 00:07:14,960 And now you should see something that looks like this. 124 00:07:14,960 --> 00:07:17,240 It says Choose an account or log in. 125 00:07:17,290 --> 00:07:20,530 So are Mordy have my default fill them all click. 126 00:07:20,530 --> 00:07:23,310 Choose an account pasand your password here. 127 00:07:23,590 --> 00:07:26,730 Then click next and then it should take you back to the home page. 128 00:07:26,840 --> 00:07:29,640 Menow it's really cool when you click on the welcome page here. 129 00:07:29,890 --> 00:07:32,960 You should see welcome Google user and your e-mail. 130 00:07:33,220 --> 00:07:33,940 OK. 131 00:07:33,940 --> 00:07:36,490 So again that specific fix for the your eye. 132 00:07:36,670 --> 00:07:41,250 We only really had to do that because we were testing things locally on a local computer. 133 00:07:41,350 --> 00:07:46,390 The general local host you or I that should work when you actually deployer Web site and are using open 134 00:07:46,390 --> 00:07:47,500 authorization. 135 00:07:47,770 --> 00:07:48,440 OK. 136 00:07:48,520 --> 00:07:49,690 That's really the basics. 137 00:07:49,690 --> 00:07:54,600 Notice how this code is essentially just lifted straight off from the QuickStart guide. 138 00:07:54,790 --> 00:07:59,680 I would really recommend that you always use the floss that's QuickStart guides and they have more extensive 139 00:07:59,680 --> 00:08:05,470 guides for adding in things like logging management or multiple open authorisations. 140 00:08:05,700 --> 00:08:06,210 OK. 141 00:08:06,430 --> 00:08:08,910 If you have any questions feel free to post the Q&A forums. 142 00:08:08,920 --> 00:08:10,210 We'll see you at the next lecture.