WEBVTT 00:03.940 --> 00:05.530 Hey, did everyone had their share? 00:05.530 --> 00:10.480 And in this video, since we have to work with the Google log in, we need the Google consent screen. 00:10.480 --> 00:15.460 And whatever the application you are going to be working, there is a developer console or kind of a 00:15.460 --> 00:18.610 console that application name or developer or application name. 00:18.610 --> 00:22.960 So there is a developer dot facebook.com, there is a console cloud google.com. 00:22.960 --> 00:26.260 Every single application has some way to provide you these API keys. 00:26.260 --> 00:30.370 If they don't provide the API keys, we cannot proceed further in that application. 00:30.460 --> 00:34.720 So as the time of recording of this video, Instagram doesn't give you any option. 00:34.750 --> 00:40.030 Option by the convention means that log in with Instagram, it rather gives you login with Facebook. 00:40.030 --> 00:43.720 So that is possibilities and not possibilities that are things there. 00:43.930 --> 00:49.660 So please visit this console dot cloud, dot google.com or console developer google.com. 00:49.660 --> 00:54.610 I believe they both take you on to the same Google Cloud platform and this is where how we can create 00:54.610 --> 00:55.210 the API. 00:55.210 --> 00:58.450 Zapier signing up for the Google account is up to you. 00:58.450 --> 01:00.160 I believe that's the easiest thing. 01:00.160 --> 01:05.530 So in case you are not able to find it, just look at all the menu of the Google Cloud itself and we 01:05.530 --> 01:07.420 want to go into the APIs dashboard. 01:07.420 --> 01:10.950 So this is the easiest way to access this screen where we want to. 01:11.020 --> 01:15.550 Now, in my case, it says, Hey, I have already this my GitHub, but in case yours is saying that 01:15.550 --> 01:18.190 I don't have it, you will be finding this new project. 01:18.190 --> 01:22.420 Just click on it and it will take you on to the screen and you can just fill up these details and that's 01:22.420 --> 01:22.900 pretty much it. 01:22.900 --> 01:26.320 Just go ahead and add in your location and just that's it. 01:26.350 --> 01:30.820 I won't be creating another project, although this is a dummy account that I use for just the teaching 01:30.820 --> 01:32.860 purposes, but still I don't want to fill it up. 01:33.040 --> 01:37.660 So in this case we have already got an app and whatever the app you are having no big deal. 01:37.660 --> 01:39.340 We can actually work with that. 01:39.520 --> 01:44.500 Now in this account I have a OAuth consent screen which is not yet configured, so you can see that 01:44.500 --> 01:46.660 this is not configured and we have to do it. 01:46.750 --> 01:52.090 The idea behind showing the consent screen that we want to have this credentials and through this credential 01:52.090 --> 01:54.370 we want to actually access the web application. 01:54.370 --> 02:00.760 So if I go ahead and try to confirm any of this, just notice here it says, remember to configure your 02:00.760 --> 02:04.600 consent screen so you can reach out to the same screen from any of those places. 02:04.600 --> 02:06.400 Now, this app is going to be external. 02:06.400 --> 02:08.950 That means it will be eventually be published. 02:08.950 --> 02:11.860 I guess that's the goal of your application as well. 02:11.860 --> 02:16.420 So always use the external, you can actually click on internal as well, but this will be inbuilt just 02:16.420 --> 02:17.680 within your organization. 02:17.680 --> 02:19.720 What do I mean by those organization? 02:19.720 --> 02:25.090 So right now this account is logged in with to learn code online and we use the Google account and the 02:25.090 --> 02:26.410 Google Cloud quite a lot here. 02:26.410 --> 02:31.300 So in the in the case we don't want other users to use it, only add the rate learn code online user, 02:31.300 --> 02:33.940 then we can create this as internal type of application. 02:33.940 --> 02:35.410 So that can be worked up here. 02:35.410 --> 02:39.790 And in most of the cases, you want other people to sign up from outside the organization or from the 02:39.790 --> 02:40.570 regular Gmail. 02:40.570 --> 02:41.740 So that's what it means. 02:41.890 --> 02:44.740 I'm going to go ahead and choose external and click on the create. 02:45.340 --> 02:48.610 Now this is the place which gives a lot of trouble to the people. 02:48.610 --> 02:50.830 You can give you an app name, whatever the app name. 02:50.830 --> 02:57.010 In this case, this is a project, blah blah stuff we are going to call this one is simply my AE app. 02:57.010 --> 02:58.060 That seems to be good. 02:58.060 --> 02:59.500 One Support email. 02:59.500 --> 03:01.840 It just suggests me whatever the email I am logged in. 03:01.840 --> 03:06.070 That is something that you should be picking up logo you can definitely pick up. 03:06.070 --> 03:09.610 It will show up at the time of whenever the consent screen is being shown. 03:09.610 --> 03:11.440 I am not much interested in that. 03:11.440 --> 03:14.980 Now here comes is the authorized domains and a whole lot of other things. 03:14.980 --> 03:16.780 You really don't want to touch this one. 03:16.780 --> 03:19.660 A lot of people try to just add local host and everything up here. 03:19.660 --> 03:22.060 No, this is not the place where you add these things. 03:22.060 --> 03:24.010 Let's go ahead and click on Save and Continue. 03:24.010 --> 03:26.920 So this is going to be a developer contact information. 03:26.920 --> 03:28.510 Please go ahead and take my email. 03:28.510 --> 03:29.620 No problem at all. 03:30.550 --> 03:32.080 Learn code online, dot in. 03:32.110 --> 03:32.650 There we go. 03:32.980 --> 03:35.290 Let's go ahead and click on Save and Continue. 03:35.680 --> 03:40.990 And when we comes on to this, a scope application, this is where we can add or remove the scope and 03:40.990 --> 03:42.700 this is the most important screen. 03:42.700 --> 03:46.990 This will allow you to have that what kind of application access you want to have in this case? 03:46.990 --> 03:50.380 Let's just say you want to have the user email, so I'll just get the email. 03:50.410 --> 03:52.360 I also want to get the user profile. 03:52.360 --> 03:55.720 It's up to you how much more you want to have, how much less you want to have. 03:55.750 --> 04:00.640 In most of our application, what we design, we actually just take the email information, not even 04:00.640 --> 04:06.640 the profile, because we don't have to do anything with your username or maybe your photo. 04:06.670 --> 04:10.270 We actually don't need that much of access, but in some cases these are required. 04:10.270 --> 04:13.450 So these are the most two that most of the developers use, including us. 04:13.450 --> 04:15.430 So we're going to go ahead and pick these ones. 04:15.430 --> 04:17.980 Now, scroll that and make sure you click on update here. 04:18.730 --> 04:20.170 Now these two scopes are added. 04:20.170 --> 04:22.360 Now you can access email and profile here. 04:22.390 --> 04:23.620 Now how to access that? 04:23.620 --> 04:25.570 Don't worry, we are going to learn that part. 04:25.990 --> 04:27.700 We're going to click on Save and continue. 04:27.700 --> 04:28.840 It says optional info. 04:28.840 --> 04:30.430 No, I don't have any optional info. 04:30.430 --> 04:33.400 I'm going to save and continue and it's going to give you the summary of it. 04:33.400 --> 04:35.170 And now we can click on Back to Dashboard. 04:35.170 --> 04:35.740 That's it. 04:35.740 --> 04:36.820 That's your consent screen. 04:36.820 --> 04:38.140 That is already there. 04:38.440 --> 04:41.290 Now let's go ahead and click on Create Credential. 04:41.320 --> 04:44.800 Now after the consent screen, we can create the credential. 04:44.800 --> 04:46.660 So let's click on Create Credential. 04:46.660 --> 04:49.900 I want OAuth client ID, not the API key. 04:49.930 --> 04:55.210 Remember OAuth client ID and this is where you actually add all the details up here. 04:55.210 --> 05:01.720 So application type, my application is web application and the client name is going to be. 05:02.150 --> 05:08.510 My ae kind of a on tap. 05:08.750 --> 05:10.400 Yeah, that's kind of a decent name. 05:10.850 --> 05:14.330 So yeah, whatever that name is, we are going to go ahead and use this one. 05:14.660 --> 05:20.620 And then it comes to the UI for the authorized JavaScript origin and the redirect directory. 05:20.720 --> 05:24.470 If you remember, I told you there is always, always a two way path here. 05:24.470 --> 05:27.590 Show the content screen, send the token and send the information. 05:27.590 --> 05:32.210 And this is why both these two domains are actually required up here. 05:32.240 --> 05:33.500 Let's go ahead and add this one. 05:33.500 --> 05:38.030 So here I'm going to go ahead and say HTTP, colon, slash, slash, and this is going to be simply 05:38.120 --> 05:39.980 local host and that's it. 05:39.980 --> 05:41.480 I want to have this one up here. 05:41.810 --> 05:45.140 And as soon as you click outside of it, that's going to just take it as it is. 05:45.140 --> 05:49.610 Now, what it says is, Hey, now you want to have authorized redirect Uris as well. 05:49.640 --> 05:54.530 I will talk quite in depth about this one, but right now just go ahead and add this one HTTP, colon, 05:54.530 --> 06:02.780 slash, slash, and we're going to go ahead and say local host colon 4000 and we are going to go ahead. 06:02.780 --> 06:09.200 And after that we're going to say slash, auth, slash, and we're going to go ahead and say Google 06:09.200 --> 06:11.210 slash callback. 06:11.630 --> 06:14.540 And again, this URL can be anything that you want. 06:14.570 --> 06:18.770 Right now, you don't have that much of we haven't actually talked that much that I can show you how 06:18.770 --> 06:19.610 you can change that. 06:19.610 --> 06:21.260 So go ahead and keep this as it is. 06:21.260 --> 06:26.360 Let's go ahead and also make this one that authorized URL is going to be colon 4000. 06:26.360 --> 06:27.350 That is fine. 06:27.350 --> 06:27.980 In this case. 06:27.980 --> 06:28.730 We don't need to. 06:28.730 --> 06:30.290 But let's go ahead and add this one. 06:30.290 --> 06:31.940 Let's go ahead and create this one. 06:32.630 --> 06:37.430 Now, this is going to give you this all information that, okay, now everything is done and you can 06:37.430 --> 06:42.350 actually download this JSON file, which I'm going to go ahead and do this one and I'm going to call 06:42.350 --> 06:51.050 this one as my download JSON so that I can remember this one and you can actually copy your client ID 06:51.050 --> 06:53.030 and the client secret directly from here. 06:53.270 --> 06:54.470 Feel free to go ahead and do that. 06:54.470 --> 06:56.660 I'll actually copy that. 06:56.660 --> 06:59.900 I'll take it directly from the JSON, but this is where you actually get it. 07:00.300 --> 07:01.490 Let's go ahead and click on. 07:01.490 --> 07:01.970 Okay. 07:02.210 --> 07:06.890 And that's all that's all you need from this consent screen and everything. 07:06.890 --> 07:10.640 So all the setup that is required is all necessarily is done. 07:10.640 --> 07:12.080 Let's go ahead in the next video. 07:12.080 --> 07:15.680 Let's go ahead and create a new application and work on the social login.