Up next in 10
Buy the full source code of application here:
https://procodestore.com/index.php/product/how-to-build-python-django-google-oauth2-login-system-using-mongodb-in-browser/
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
Uh, hello guys. In this video, I will
0:02
actually show you how to implement
0:04
Google authentication in Django.
0:07
Django is a very popular Python
0:09
framework. And we will look at how to
0:11
implement Google authentication, all the
0:13
three types, in MongoDB database. All
0:16
the user information will be stored in
0:18
MongoDB database. This is the actual
0:20
directory structure.
0:22
This is the main manage.py file of
0:24
Django.
0:26
So,
0:27
these are the actual HTML files.
0:30
JavaScript, and we also are using CSS.
0:33
This is a full directory structure.
0:36
Uh, let me run the project. Go to the
0:38
terminal.
0:42
So, we simply write python manage.py run
0:46
server.
0:47
This is the command to run Django
0:49
projects. So,
0:52
all the source code is given in the
0:53
description.
0:55
You can directly purchase the source
0:57
code. Uh, once you purchase it, you will
0:59
get the source code from Google Drive
1:01
automatically.
1:02
So, as you see, our local server is
1:05
running on http localhost 8000.
1:09
So, if I try to visit that,
1:13
so, now the interface looks something
1:15
like this.
1:16
We have Google login.
1:18
All the three types are supported. This
1:20
is one tap login, where it automatically
1:22
detects your Google account that is
1:24
already logged in. The second one is
1:26
Google Identity Services, which actually
1:28
opens a one tap auto pop-up window. The
1:32
third one is OAuth redirect.
1:35
So, where you simply click the button,
1:37
and it will redirect you to actually
1:39
select accounts in a new window. Let me
1:41
try this with a one tap login.
1:44
As soon as you do this, you will be
1:46
redirected to the dashboard page
1:48
automatically, where we actually show
1:51
all the information, such as profile
1:53
picture, email address,
1:56
display name,
1:58
the date of joining, last login.
2:00
It also returns as a JSON response as
2:02
well. So,
2:03
right here we are storing everything
2:05
inside MongoDB database.
2:07
If I refresh it,
2:09
it will create this table as you see
2:11
Google login Django.
2:13
Inside this we have collection or table
2:16
called users.
2:17
And all this information as you see has
2:20
been successfully stored. The email
2:22
address, display name, profile picture,
2:25
Google ID, everything.
2:27
So, it's a complete application. So, you
2:29
will save a lot of time
2:31
once you purchase it, you will get to
2:33
know that I how how I coded this.
2:36
So, this is the main file manage.py.
2:40
It starts everything once you call this.
2:42
It's the main server file.
2:45
And this is your index login page as you
2:47
see.
2:49
And this is your dashboard page. All the
2:51
templates stored inside the templates
2:53
folder.
2:54
And then we have this static folder
2:56
which actually store your CSS and
2:58
JavaScript code. So, this is your auth
3:00
file
3:01
which contains all the logic for your
3:03
Google login.
3:05
And this is your CSS file.
3:08
So, once you get the source code guys,
3:09
you can easily customize it and add more
3:11
features on top of this as well.
3:14
Inside this, these are all the views
3:17
folder.
3:21
Here we have the logout function,
3:23
callback function, everything for auth
3:25
login, everything.
3:29
So, this is a model file where we
3:35
And now once you purchase it guys, you
3:38
need to go to this file
3:41
which is
3:42
contained in the config folder and you
3:44
need to open the settings.py file. And
3:47
right here
3:49
inside this file, you need to paste
3:52
Google client ID and client secret. You
3:54
can even open readme file as well for
3:57
easily I created this readme file for
4:00
total beginners.
4:02
So, it will actually guide you how to
4:04
implement this once you purchase it. So,
4:07
you need to go to Google Cloud Console
4:09
and get these two details, client ID,
4:11
client secret. In the origin, you simply
4:14
paste the URL on which you are running
4:16
the project. And this is the callback
4:18
URL.
4:21
And for this, you need to edit the
4:22
google_config.py file, which is located
4:25
inside the config folder.
4:32
Sorry, this is located in the base
4:34
folder, google_config.py file. So, right
4:37
here, all the config details are related
4:39
to your application. This is your
4:42
base URL. You can also change this as
4:44
well, the app name.
4:46
Then we have this Google client ID,
4:48
client secret.
4:50
So, for this, you need to go to Google
4:51
Cloud Console.
4:54
I've already done that. So, as you see,
4:56
we pasted
4:58
localhost:8000 so, in the authorized
5:00
JavaScript origins. So, this is the base
5:02
URL of your application.
5:04
In the redirect URI,
5:07
you basically paste
5:08
http://localhost/auth/callback.
5:12
This is the
5:14
redirect URI. And click on save, it will
5:16
give you your client ID, client secret.
5:19
You simply need to paste this. That's
5:21
all that you need to do.
5:24
You can even change the database name as
5:26
well in MongoDB.
5:28
So, for database, we are using MongoDB
5:31
Compass,
5:32
which is actually a specific Windows
5:35
software,
5:36
which runs MongoDB as a GUI software.
5:43
We can even try this with a different
5:46
account as well.
5:53
Same thing we This time let me show you
5:55
this pop-up authentication. So, once you
5:57
click this, a new pop-up window will
5:59
open.
6:01
Same thing you will do. You select your
6:03
account.
6:05
And then it redirect you to the
6:06
dashboard page.
6:21
And now the third one is also very
6:23
simple like OAuth2 redirect.
6:27
It redirects you to a new window where
6:29
you select your account.
6:33
And again redirect you to the dashboard
6:35
page.
6:36
Once you do this, a new entry will be
6:38
added in the database as you see.
6:41
Everything, profile picture, email
6:43
address is inserted.
6:46
So, this is a complete project Python
6:48
Django project.
6:52
It will automatically detect that you're
6:54
already logged in and redirect you to
6:55
the dashboard page. We also have log out
6:58
button as well.
7:07
So, definitely [snorts] check this out
7:09
guys this project. The link I've given
7:11
in the description.
7:13
You can directly purchase it.
7:15
This project.
7:18
All the configuration is located in the
7:21
google_config.py file.
7:23
Uh it's very easy for you to customize
7:26
it add or new features as well.
7:29
And thank you very much for watching
7:30
this.
Jobs & Education