Python Django Authentication, Login, Register with Facebook Login Step by Step 2021

and welcome to the scholar online youtube channel the channel that is all about learning you can visit our website on https scholar.online you will find more courses on what we teach right here on this youtube channel and much much more remember to like this video subscribe to our channel and turn on notifications so that you'll be notified every time we have new content follow us on facebook instagram and twitter in this video i'm going to show you how to incorporate social login into your jungle application so i'm going to take you from scratch creating a new jungle app and then you'll be able to like do the normal login flow where people just log in or register with their username and password but um people have the option if they decide or choose to rather log in with something like a facebook account or a google account and they can use their profiles to log into your application and they don't have to enter that information this is really useful and a lot of mobile i mean a lot of modern applications have got this feature and i'm going to show you one of the fastest and most effective ways to implement that type of login flow into a python jungle application all right so let's get started we're going to do everything from scratch and i'm going to show you step by step and at the end of this video i will also make this code available on a github that you can go and practice in your own time to integrate this into your own a social um you know application or social flows all right so um the template that we're going to be using is this one over here so i'm not going to build this from scratch and i'm not a believer of you know i mean too minimalistic templates that are that don't make any sense that you wouldn't really build an application on all right so when i do tutorials on this video i like to use realistic templates i like to use um real websites because in the real life you're going to be building real websites so this is a bootstrap template that i got for free from um i think that's the place all right so i think wagon i don't know how good or bad the morgan is i occasionally go there when i don't want to pay for a template and i've got not the best but they'll do the work all right so over here you can just search for like i think i searched for sas because they have that keyword usually associated with dashboard templates so we will expand on this tutorial later on and build a dashboard and do a lot of other things maybe perhaps do something like a crm i haven't quite decided but um we'll see when we get to that point so you can go over there and download this template and um this is a template that i'm using all right it's the majestic template so i have to give credit to the guys it's on my own work and you can just put in your email address of a day and they will send you a link to download this template and then you can get it but for today's tutorial i'll make the code available with just the login and the register page of this template all right if you want the rest you can download it for yourself and then the next um tool that we're going to be using in this tutorial is our scholar online jungle i was going online jungle documentation which i developed recently and i think this is really useful and um you guys i want you to get used to doing this because um over time i'll write i'll write up a lot of the tutorials here and um you can always go back to reference things you know so today we're gonna go on to the jungle part and we're gonna follow the tutorial for creating a jungle application so that even after you watch this video and you wanna go back and remind yourself of something you can follow these steps and remember what you have missed for example so we're gonna follow this part of the tutorial to create a whole new jungle application and then later on maybe i'll update it with the social flows so that you also have that available on this write up okay and over and above this i'm going to make this available in our github page all right so if you go to github.com and you search for scholar online all right um let's go to online i think the invoicing one this is the last one that i did um two weeks ago so over here i'll just create a new repo for social login with django and then i'll the code will be available but i'll put the link in the description below so these are the resources that you're gonna need um for this tutorial so the social login a framework that we're gonna be using is this social earth app jungle all right so i'm gonna go through this documentation here and then we're gonna try it out and then we're gonna see because i've done social login manually in the past um i haven't used one of these apis so today we're gonna do that and then we're gonna see how that um comes together okay so if you're ready pull out your computers the way we do our tutorials is that this is not a view there's no netflix where you watch or from the sofa this is a code as you go so pull out your laptop um get your development environment ready and um you can pause it here and then when you've got your development ready then we can continue what you will need is we're gonna be coding this on a ubuntu machine all right so we're going to be coding this on an ubuntu machine you can code it anywhere but if you really want to follow step by step we're going to be coding using a bundle machine if you don't have one i'll put a link in the description below or you can get one for five dollars from digitalocean you can even um if you use my link you get a discount way for the next for the first i think couple of two months or so you don't pay anything so you can test it out and decide if you like it or not um and then um if you do like it then you will continue paying from month three onwards and even if you do have to pay i wanna you can use a five dollar word and it's really really cheap and i don't think i mean for learning you know a lot of these things because we have to actually um code this app and deploy it you might as well code it in an environment that is ready for deployment instead of on your own personal computer because a lot of the social things are not going to work on your personal computer because you need to have those urls and things like that so you have to deploy this application at the end of the day so you might also code it in a deployment ready environment then um so we're gonna go to uh you can see we are in an empty i also try to like make this uh bigger because i gotta come complain that people can see what i'm typing so i've tried to make this screen bigger that you can see my you know my um where i'm typing and i'm doing my coding a little bit better and um so this is an empty and empty folder that we're in right now we're going to start from scratch with um employ with deploying or a virtual environment and then installing all the libraries that we need and then we're going to start with a brand new django application but um one thing i want to mention as well is that although i'm starting on an empty a page or in an empty folder i've already installed uh you know python 3 and a lot of the python development tools that you need so if you look at our tutorial over here if you installed a whole new virtual server from scratch there are some things you might have to do um you need to install python 3 paper and all these development things that you're going to need for python all right so i'm assuming um you normally do code in here and all of this is already done and already even the postgres sql is already installed in this specific droplet so i'm going to skip a lot of these and i'm just going to start with where we are in um you know creating our new sql database okay we're going to be using postgres sql database because um we are ready to do we're going to build this for deployment we're not building this to run um on the development um database and um so um the the the way to to get that uh started is to follow these instructions here to get your postgres sql database you know and you need that before you can do anything on the jungle because the jungle connects to the database and if you don't have the database ready um you're going to have to use the default development database and we don't want that we want to use this database so let's start with those steps okay so this logs you in as a pseudo user into the postgres um database so that you can create a new uh profile and then you need to enter your uh sudo password so let's enter it there and then you'll see the prompt changes this means you are now inside of the postgres sql um server and you can now create a whole new database here that we're gonna connect our django application to okay so we're gonna create a new database and we're not going to create the database called scholo i'll show you following the code which part of the code you need to change okay so we're not creating a database called called scholar because i think we already have one in this in this virtual server i'm going to create a new one and one of the best methods that i follow is i just work with the name of the application so the name of the application i'm gonna call dashboard all right so um i'm gonna create a database called dashboard so i'm gonna change this over there to dashboard what this code means is that inside of the postgres sql server you are creating a database and this is the name of the database that you're creating and you press enter it must feed you back if there was an error you would have seen an error being fed back to you but it says create database this means the database has been created successfully then we're going to go over there and create a user all right and this is the name of the user that you're creating let's see if i can zoom into this right so i can make this bigger for you to see guys so now we're creating a user and this is the name of the user so you need to change this the name of the user you want to create and then create the password for that user okay so i'm going to copy this just like it is and i will paste it over there and i'm going to change the name of the user instead of scholar user i want to use the same database name that i've got over there and i'm going to call this dashboard user and the password is going to be let's just leave it as as password okay we're going to change this later on i'm not going to run this like this so don't worry so that means that um the the the the role has been created okay then after that we're gonna you need to run this to alter the role to um utf-8 okay um so this is what jungle expects and um remember um to change the user to the user that you're working with all right so i can just sort of copy this so that i make sure i don't get the spelling wrong and avoid any errors so the user client encoding will be utf-8 and it will tell you alter roll if it's you see that it means you're good to go all right then you're going to alter the role of the user again to a transaction root committed okay so these are just standard things you're going to really need to do every time you create a new dash of a new database before jungle and um as usual i'm going to just remove that and use the user that i'm creating now or else it will do something for the other user that i had created before all right that's good alter roll that's done and then the user again time zone to africa johannesburg okay and over here you can use whatever time zone that is relevant for you okay so um depending on where you are you need to change the the time zone to my time zone that is um correct for yourself okay so um and how you know which which time zone is correct for yourself um i've got a link right here on this documentation all right for a list of time zones over there all right let me zoom out a little bit you can um click on this link it will take you to a different page and you can see on the wikipedia page you've got a list of time zones and you can have a look here where you are located so if you are somewhere in i don't know america antigua you can just copy this part and replace this africa johannesburg with that part so depending on where your time zone is this is what you can this what is in this column over here the tz database name this column is the one that you replace over there so for me it's africa johannesburg and for you it can be anything else and then after that you need to then grant all privilege of database the database you just created now to that user that you just created now okay so let's copy that and paste it over there and and remember that uh the database is obviously dashboard database so let's copy that all right that's the database all right and the user is the dashboard user right so let's do that dashboard user and then it says grant then you're good to go right so this is all you have to do to create a database and once you've done that just keeping remember your password all right very very important this password do not forget this password and remember the user because you will need that inside of your jungle application settings page all right so that's good so our um database is set up we can continue to install django right now uh before you install django you need pip and i'm assuming you already have pip installed right i'm assuming also that you already have virtual environment installed if you don't and you're doing this on a brand new um virtual machine go ahead and follow those steps i'm going to skip these because i already have all right then i'm going to go into the the the the the folder that i need to do this on i'm already on that folder by the way and then i'm going to create a new virtual environment okay so to create a virtual environment you basically just type virtual env and the name of the environment that you want to create all right so my environment is going to be dashboard env like that all right you click enter and it has created it you'll remember there was nothing on this folder so if you do ls again now you will see there is dashboard env dashboard env is basically a folder it's an environment folder and inside is all the things and the setup that you need to be able to run python applications so that when you install um packages they get installed inside of this environment so that you can separate environments between applications all right um if i'm building this application i want to use django three point something for example and then there was a different application that was using jungkook two point whatever those jungle versions won't clash with each other because they will be seated in different environments and that is really useful and that is best practice for developing an application so every time you work with with with python always work with virtual environments so that you separate um you know your staff because i've seen when i was still a novice developer i used to get into this problem where i would install everything just randomly like pip in store people install on my whole computer and i had applications that are working just fine and then later i people stole something else and then it changes the version of that you know package and then an app that was running for years breaks and you have no idea why because the things have changed so keep always your stuff inside of your virtual environment now i mean you can look in here you can you can see the into this and see what's in there right if you see the into here you'll see it's it's basically it's just folders it's got a library and a bin all right so it's got just the setup that's necessary for you to install packages all right so i'm on a cd out of there again and i'm gonna clean so that i have an empty there's nothing else in here and then what we need to do now is we need to activate this environment because currently it's not active it's there but we need to activate it so that because if i run pip install now right and people install anything it will basically install this inside of my whole computer right i don't want that i want to pip install inside of my virtual environment so to do that i need to activate the virtual environment first so to do that we need to then go in here and do source all right to activate that virtual environment um whatever the name of that virtual environment is that and then you basically do bill like that so you're going into the bin and then you're going into activating it's going to run that script and activate your virtual environment if you click enter if you are successful you will now see that environment at the beginning of your prompt inside of brackets to tell you in the environment so even if i see it out of here completely right and i was in a different place right um and i ran people stall for as long as this is active it will install it in that environment so i don't have to actually be in that folder to install so as long as your environment is active wherever on the virtual computer you are at if you do pip install or you do whatever you call you run over python code it will be running it off of that environment so let's go back to dashboard because this is where we want to do all of our stuff then when we are in here we're going to start by installing a jungle okay so basically i do peep jungle and you don't need to do pip3 we are using python 3 already in this machine because when you created your virtual environment the first time you you build a python 3 environment and now you just need to do pip inside of the environment it will always use python 3 so it's going to go ahead and install django and everything that jungle needs to run right so let's clear this and if we click ls there's still nothing in there because we haven't actually built a project we need to install this and don't forget that this is not always required but if you're going to work with with with um what we're working in with which is a postgres sql database then you're going to need this because this is what users to connect to that to that database one of the stuff that works in the background so just remember if you're using the postgresql database you need to install this as well so um let's install that cool so that's done and now we're gonna start our project so this is the the command that actually builds a new project right and if you look over here there's nothing there's nothing there's no folders it's just the environment so next environment we're gonna create a new folder for the project right and for that we're going to run this this command right so django admin all right django admin and then the name of the project right so our project is called dashboard you can call your project anything that you like i like to use the same name for the virtual environment for the project so for the database so that if i have multiple sort of jungles in one virtual server i remember which environment is for what project and which project is which you know this and that now um you won't see anything but if you do ls now you will see now there's a new folder called dashboard and if you cd into dashboard like that and you do ls you will see there's the managed py and this dashboard folder so basically this is your whole um you know sort of jungle um well the high level project folder right so we still don't have an application folder we need to create an application folder because currently this is just the the project folder because the way jungle works is i don't know if i have this here on the documentation yes there it is the way jungle works is that when you create that that project over there um inside of that um when were inside of that dashboard uh folder and we ran the start um the start project it created this this this this folder and inside of this folder there is another folder which has the init the settings the urls and usgi to py so inside of here there is this another folder called dashboard again that if you um cd into that folder then you will see your asgi settings urls and wsgi files which are these ones all right so and then um outside of that folder is your manager py file manager qr file is basically the manager of the django application everything runs via or through it is the one that sorts everything out the urls and all the things that that's required that just you don't have to worry about in the background okay so then what we need to do is we need to make all of these changes inside of your um settings those py files for your data for your database and everything but before we do that i just want to quickly um create a um a new app yes to um now that we have basically our you know project folder and our manager py file we want to use that manager py to create a new application so we're going to build the entire authentication flow in its own application the way jungle works is that um you can um what we call a build applications in separate um you know what's the word you know like separate like like like modules in a way you know that that applications everything that that's involved in a certain application will sit in its own module and and the whole idea behind it is that you know um then you can plug and play so you can create an authentication app in here and call and create jungle app and it will be inside of its own folder and everything is situated in day right and that one day if you decided to build another application and you didn't want to rebuild your whole auth flow from scratch you could just take that whole folder into a new jungle project and um just edit a couple of things here and there in the urls and um you know your modularization will be done you know so the apps are meant to be sort of like entire you know systems that you can move around as a whole so um the whole authentication flow we will build it in its own um what we call application so to do that we're going to now run the command of python by the way you don't have to you say python3 you can just say python okay and we're gonna say uh python manager.py we're gonna say start app this is the app that creates a whole new app and inside of that we're gonna put the name of the application that we're building all right we're gonna call it this authentication authentic all right i'm gonna click enter and once we've done that we're gonna do ls and you'll see now there's a new folder called authentication all right if you cd into authentication you will see um there is a couple of things less ls minus l like that listed nicely you will see um this is how a normal um um authentication app looks like it's got your admin.py your apps your models your test and your views or py normally what i like to do over here is to create um a new folder called urls dot apy because i'm going to also you know to promote the whole modularization of the apps is that um i will build the urls of every app inside its own app folder as opposed to doing the urls in in the mainstay approach so that when i move that app it moves with its urls okay so um i'm gonna do that and if you else again that urls should be there all right and we're going to cd out of here and um cd out of here and we are back in the project folder we're going to clear and there's a couple of things we need to do all right so inside of our jungle um we need to do some modifications all right inside of um of the settings of py file we need to then set up our database and then our run migrations and all of those things but if you think about it i've built everything inside of my virtual private server right and in the past in this uh you know in this course or in this channel i have showed you how to i've used like i've been editing the files directly on the on the vps which is a hassle you know and it takes a bit of skill over time so what i'm going to do is instead of editing all the files in here even though i've built them inside of the virtual server and i'm going to run the applications of the virtual server i want to edit the files in my personal computer all right so if you see over here this is my macbook personal computer i want to edit the files in here but i want to run the code in the virtual server because i don't want to run the code in my own personal computer so how can we achieve that because this is a really good way of working and when you get to a point like me where i have like tons of projects like hundreds of projects and i cannot possibly run each and every single one on my personal computer um i would have too many virtual servers and i wouldn't have enough space i mean i would have too many virtual environments and i wouldn't have enough space to run 100 projects on one you know macbook because i want to keep my macbook for other things my personal stuff so i have the code in here and i write it in here because it's easier to edit it in an atom editor on my computer but then i run it and and and implement it inside of the virtual server all right i don't run it in here so i don't even have python installed okay python comes standard but i basically don't have any virtual environment of python inside of my personal computer so what we're going to do for that we're going to use git all right git is really useful and as a developer you the sooner you learn git the better off you'll be i've noticed in my channel my git videos at the least watch the videos but technically if you're a developer they should be the most watched videos because you can't do anything without git today so what i'm going to do now is i've got another part inside of my scholar documentation if you go to cheat sheet right i'll add more code in here as i go but in here i've got like nice code to help you get pull so pull out of your virtual server so everything that's sitting in here i'm going to use git to pull it into my computer so that i can work with it in here and then once i finish working with it in here then i will use git push to push it to the virtual server all right this is my own um you know um thing that i've cooked together and people can comment in here whether they think this is good practice or not but i like to work on my personal computer and do a lot of stuff all right so if you follow the tutorial get in it you need to use this when you want to move files from a virtual server to your personal computer you will need to get installed on both computers and um inside of the virtual server that you're pulling from do this all right so inside of the virtual server where i want to pull from which is in here all right so inside of this folder this i want to pull all of the stuff that's in here i must run git in it all right so git is already installed inside of the virtual server and if you use my link and used the digital ocean virtual server git is pre-installed in that as well but if you're using some other system maybe you might have to install get yourself okay now um once you do this it will tell you i've initialized git in this representation homes development data copy this all right just take this and copy it somewhere let me see we're gonna copy this do i have notes here somewhere just that's this dish okay let me just yeah let me leave it i won't clear it okay i'll get back to it later all right so um once you have um copied that you just need to save it in a safe place all right i don't know my notes is not open right now and i can't save it and then you need to do git add i think there's a misspelling there it's more than two d's i'll just remember to change that so this mustn't be good add like triple d it must be git add with two d's right so what this does is that you've initiated the git repo we are adding to it and once you finish adding to it we are going to commit our initial commit so what this does is that git commit um inside of the master um branch or the main branch and it will um in you know call that commit initial commit right and then all the files that you had before so i mustn't clear this so that i remember that okay so everything that you had before all the files it will add them today and it will commit them all right so once you have done that you're good to go we're gonna go now to our personal computer which is in here which is this is where you see this is an empty folder there's nothing in here so inside of our personal computer we want to pull these files from this git wrapper we've created a repo and then committed to it we want to pull from there in here right so to do that we need to also init a repo in inside of the personal computer so we're going to do git init this side and also make sure in your personal computer you have git installed all right so do get in it and it also tell you initialize git repo in here then once you do that you then need to add a remote repo so this wrapper over there we need to edit in there right so i'm going to copy all of this right and i'm gonna paste it in there and i'll show you what's in here all right so the first thing is git remote add up stream so we're gonna call this remote um repo upstream and then we need to then um get the address to our virtual server because we are calling it from our personal computer we need to give it an address of where that repo is all right so the address we're going to do it manually our username in that server is satosh all right this is a touch whatever your username you're using in a virtual server put that username in there and then this is the ip address of your server if you got a vps you will get your ip address that's the one used to ssh all the time and this command works really well if you've got ssh installed and enabled in the virtual server if you don't check the videos in my channel i've got a video where i'm just showing you how to set up a droplet or a virtual server with ssh so that you can ssh into it from your command line all right so once we've done that i'm going to put in the ip address here all right so my ip address um i think i can see it at the top over there is one seven eight all right and then it's comma six two it's comma seven three is comma two ten right 1786 273 210 and then the address this address that comes the home username test gate this is the address this address at the end here let me make this bigger again wait wait it was before this address over here is the address of your git repo inside of the virtual server all right so don't copy exactly what i have in here in the documentation remember when we created the virtual save saver there i told you to copy this when you initialize empty gate copy this whole route homes are this this is the route to the repo so copy that route right and go back there right and then delete this test stuff and paste this route over there so um everything up until where the ip address ends right paste that in there make sure there's no spaces right and then double check everything is correct okay you get remote add upstream this is the address that you're adding this is a username user username you don't use root because in some cases um i've seen people that use root and it depends on how sort of important on the security of the repo is right if you want to be able to write into that repo as root it means that on the other side you need to write through pseudo commands every time you do something you won't be able to change anything and um if you if it's just for this training you know it's fine i don't need to be rude and after that you add the ip address of your server then you add the route to where your git repo is on the other side okay then you click enter you won't see anything but basically the remote um has been added okay so um that's done okay and to make sure that this works we're gonna now pull that ripple okay we're gonna pull it with this um command which is git pull up stream master remember this upstream is what we called the repo over here over the so whatever you call this um not what you call it whatever you call this sort of like stream okay um is what you're gonna be pulling on the other side okay so i'm going to now say get pull up stream master because i'm pulling the master because when i i saved it over there i saved it under the master branch okay you can have multiple branch by the way in kids and git in in itself deserves its own tutorial but um i'm the only one working on this there isn't a lot of people so i'm just gonna pull the whole master branch okay and um so you do that and um it's gonna say to you um okay it's gonna give you some errors rebase but i haven't done anything else because there's nothing that exists in my thing for now um um so i have an ssh key set up for this address okay if you didn't have an ssh key set up for this address maybe it might ask you for your password but i always work with ssh and with a virtual server you must always work with ssh and follow my tutorials it's for security all right and um so my ssh key also has a password so um so this is the password i'm entering it i'm entering the password to my ssh okay i'm not entering the password to the virtual server and if you created an ssh without a password if you ran that command it would just run it it will just like run it and the files will be there all right because the the ssh key in itself is security enough to have a password over and above is like having a key to your key right so i'm going to clear this right and i'm going to do ls and you'll see this is now my virtual my computer this is my macbook pro right so this is my computer you can see the files are there now this authentication dashboard all right if you go over here a new ls is the same files that are there so i've basically pulled these files from here and i've pulled them over they now they are available on my personal computer and if i do atom like that i can open a new atom um um window right and then i can make the changes to my folders on atom okay so why is this everything so small over here all right this is like how do we zoom in here this is smaller than usual all right so basically this is this is my stuff and you can see the gate is there as well and uh and basically so when i want to make changes i'm going to make changes in here and when i finish making those changes then we'll show you later on how to then push them back because currently we've done a git pull we need to actually create a whole new bare ripple for pushing on the other side now and again everything is in here um inside of the tutorial okay so the git push we will follow this for that okay but for now um let's do the changes that we need to do so if you go back to the previous um uh uh um you know the the jungle one because we had the cheat sheet now we're back to the jungle one and the um installing django and everything so we are now here where we need to make the changes to our database all right so for that we need to go inside of our project um our project folder is the dashboard folder and we need to open the settings.py file right so inside of the settings.py file over here we need to instead of the databases you see this whole thing that says databases you need to change all of this and replace it with that okay so take all of that out and put this in there right and remember this is that uh package we installed earlier on and then you need to put in the name of your database so the name of our database here is dash board right the name of our user remember the user the stuff we created at the beginning right when we were over there when we were creating it here these this this user in this password is what we need now right so basically um we are we are we are installing all of that inside of our application so that jungle knows who to talk to and i think i left the password as password and the local host we're just going to leave it as localhost and the port and we're going to leave it as a port and that's pretty much it okay and then at the bottom of the file you just need to add this all right so i'm going to just go to the bottom and i'm going to do that static url static and the static route is that okay and once we've done that we should basically be able to run and make migrations and create a super user but we need to do this on the other side okay um and and but before we do that okay um there's another thing i want to show you there's some other basic settings that i want to do especially for the templates folder and stuff so i'm going to go to um i think i have it in here the settings okay the jungle settings there you go all right so these are basic settings that i like to keep for my jungle app and these are just useful right so i like to have always the message tags so that i can you know readjust the message tags because the way the jungle message tech comes in it comes in as a warning um as an error and and then but with a bootstrap the red you know um you know tag is usually danger instead of error this is not necessary you don't have to do it but i like to do it all the time because it's just you know then i develop and i code my apps the same way so i'm gonna put it um at the beginning day um next to allowed host okay and then the other thing you have to do as well is you have to fix your allowed hosts all right and um so on allowed hosts um there's a couple of things you need to add in here um i'm gonna do if you do that this is very very um risky but this is probably the fastest way to get started for a new application all right but um i think you can do like localhost all right you can do localhost like that and then you can put in your ip so if you remember what is your ip because um okay so let's put this there and let's remember what is our ip we've typed it in here before um we typed it over there i just want to copy and paste it instead of re-running it when we entered it there it is yeah so you basically want to put all the holes that you're going to be working with um so that you don't have a problem and i think it's also um you know one two seven one two seven point zero point zero zero that one i normally put that one in is the same as localhost so when you get these ips you won't have a problem okay then um the other thing you need to do in your settings or py file is inside of your templates you have to define your um your templates i mean your template directory okay so inside of the templates which is um always templates over here where it says directories there all right where it says doors just put this like that right so instead of theirs we're gonna do that all right what that does is that it says that inside of um your main uh base directory and make sure that the base directory is defined at the top over there and let's import import os all right so uh because we're using our os in there so we have to import it at the top all right so basically what this is doing it's saying is that um you know i'm always part directory based directory templates all right that inside of the base direction we're going to have a new folder that we're going to call templates all right and this template folder is where we're going to put all of our templates okay so already we've got an application called authentication we can create a new folder in here called authentication and then instead of authentication folder this we're going to put all of our html files that that are being used instead of the authentication application right so um so that's what this does okay and then the options let's see options are fine we're not gonna change anything there and then if you have template tags that you're gonna use inside of your application you're gonna record them over here but we don't have template tags when we do create them we will come and we will um in so we will do the template tags like that all right and then we've got the databases and then the time zone you need to define your time zone inside of the jungle app as well most people just leave it as the standard one but if you have it as utc over here i mean in your database is a different time zone you're gonna have a problem okay so create and create the time zone there and then make sure you understand what these means this says use the time zone true okay so if you say use time done true this time zone must be correct or else it's going to be working on the utc time zone for your local application on your base here in johannesburg all right and then leave those as true as well but if you don't want to be a time zone away you can leave that off but one of the lessons i've learned with my years of django development is that always always enable the time zone it's very easy to do all right and it's much much more of a complicated journey trying to do it later when you didn't do it at the beginning and trying to refactor in an application that didn't have time zone enabled it's a flipping nightmare okay so just do it from the beginning even if you think you won't need it because you will need it then once you've done that then there is some of these um i'm gonna just copy these as well static urls so these are like personalized stuff you know so the basic getting started there that we went through um you don't need that right but if you really want to personalize your app like like like the way i like to do it um we're gonna you know um i'm gonna use these these things over there so this is basically the static root the static file directories okay let me make some space over there i don't know why everything is so tiny in here where's my zoom um i can't like zoom in here oh there you go that's better all right so um so this is your static directory and your static files all right this is your media route where all your uploads are going to go all right and i'm going to call that uploads even though i haven't created the directory now it doesn't matter jungle created when it creates uploads if you've defined the media route in here then the other thing that you need to do is that if you're going to send emails right and um we're not gonna send them now because i'm just gonna show you log in and log out without sending emails but this is a standard requirement of any application anyway all right so i'm going to just do it so that it's done okay so that when i'm do send emails i don't have to come back and worry about this again so i'm gonna just paste this in here right so it's basically using an email the jungle email back end right you're gonna put in your host over there so your email host whatever it is and this won't work very well with gmail by the way so you're gonna need like a personal email host let's say you have a hosting account somewhere um wherever your domain is hosted so you're gonna need that email host um that you're gonna put so if your domain was like i don't know um you know career supported.a and you had email enabled with that um whatever your host might be something like mail.com and you're gonna put in your port you're gonna put in your email the username and your email password so i'm going to do this off camera for myself but you do it for yourself in here right then after that we're going to have a we need to also um specify always the login url and redirect url this is standard stuff that you're going to need anyway so my nice documentation tells you the standard thing you're gonna use and you know so feel free to use it okay and um and and i'll think and thank me later right so um the login redirect url this is a url that django will automatically redirect people once they've logged in okay and then the login url is when they log out it will redirect them to that or if you use for example one of those um decorator login require decorator and then the person fails the login required decorator java will look for if you've specified a login url inside of your settings and it will send the people they and if you haven't specified this and you use that decorator um it sends them to some other route that then messes up your application you know so just good practice to always specify this url inside of here and then make sure that then you re you create a a path called login inside of your urls or py or else you're going to have a problem if you don't have a path on login and you've specified this but we will have a path called login and i'll show you how to do that and then if you're gonna be using any form of document of your of of files inside of your jungle application right whether it's people are gonna be uploading profile images okay whether people are going to be doing or you're going to be display especially uploading right um you're going to need this all right and um this is just good practice it's not a requirement right but it's just good practice when people upload images into your application that you resize those images for to save space because you get i've built apps where people you wanna you want someone to upload a profile image and somebody took a profile image from their cell phone with their phone and they've set it up to them to the highest pixels because they want the picture to look nice for facebook and um you go and you upload that picture somebody uploads a picture it's like a four megabyte picture uh for a proper picture and you don't want that you know this is just good practice um you want your picture to be a certain size um space but also um when you're displaying your profile pictures um you don't want somebody to like have uploaded a landscape image and then somebody has uploaded a square image and then somebody has uploaded a different sort of image dimension um and then that becomes problematic because um your app is going to look different so if you had like um where you were maybe having a list of users and then everybody uploaded an image in their own dimensions you're gonna have like the you know your list looking weird so what you want is that right from the beginning is to set up image dimensions and the best way to do it is use jungle resize because it resizes your images as it uploads them into your um your models and you will see the way we define the model if we have an image in there we define it with a resize field so that that image is already in that size that you want it in so it's irrelevant what size a user uploads or whether it's landscape square or whatever you will define the sizes and jungle will automatically in the back and cut the images up for you to the right dimensions so this is what this is used for so for this specific app i don't think we're gonna use it because i'm just showing your login logout um let me see okay we will use this okay we will use this so let's copy this because we will create profiles later on so let's just say it's done okay and i'm gonna just use a random um and by the way if you're gonna use jungle resize like this over here you need to install pillow and you need to install um pip install jungle resize all right so let's do that quickly before we forget okay so let's do pip install jungle resize then go resize like that so i can show you how to find this uh a package all right and then let's do peep install pillow um pillow is is required if you're gonna use any sort of image field in jungle whether you use resize or whatever if you use an image filled inside of jungle you need to install pillow so i'm going to copy that and before i forget i'm going to go into my virtual server i'm going to clear all of this make sure i'm inside of my virtual environment today like that and then i'm gonna just install pillow so that it's done and i don't forget to do it and then i'm gonna do the same for django resized all right then i'm gonna just install that jungle resized so that i don't forget to install it later and then um i'll be good to go using um you know jungle resize there and pillow good then the next thing we're gonna do um um where we um tinymce digitate are we not going to use tinymce this one for sure and um the timezone stuff all right this just explains how the whole time design work timezone works now that you have decided to enable time zone in here if you enable your time zone and you specify your time zone like that and you enable it inside of your uh you know settings with py file like what i've done over there i've enabled the time zone every time you inside of your application this is what this is telling you inside of your application every time you call the time zone you can't just do now daytime.daytime.now because usually normally when you want to know the the the time like let's say we're in here right let's clear that this is my personal computer and i can do python in here and i can have a python a shell and i can install a date time like that no not installment import import date time right import import date time so daytime is imported now right let me just pull this up so you can see what i'm doing now if i wanted to know the current time in python i would normally just say daytime okay date time dot date time like that don't know this is how you can get the current day time in python right now where i am right now is the 9th of september i mean it's the 11th of september oh this is 11th of september today right and this is the the current data but you can't use this ever again instead of your path your django app if you have time zone enabled right and you specify your time zone so this you must never do inside of your jungle app now that you have enabled time zone inside of your jungle app you have to import this all right and then every single time you have to use a time zone away daytime like that right so this is very very important stuff you have the option not to enable timezone but if you enable it every time you use the daytime you must always be time's on our way that's all i gotta say about that then um i think we've now done all the edits to our files i think we've done all the edits that i think are important so off camera i will change all of this um what i want to show you now is how to um push these changes that we've made so the changes we made now they are sitting in my personal computer now right and because i want to now continue with my tutorial over there and i want to now um where was i django install jungle um yeah i've now um done everything okay and i wanna run migrations and i wanna create super user collect static i wanna do all of those nice things currently i can't do that because everything is now sitting in my version in my personal computer and i need to write my code inside of my virtual server like that so i basically need to push these changes over there oh i forgot something inside of installed apps you need to um include um this new app that you just installed here authentication authentication all right so you need to include this as well so um then we need to push the changes so let's go back to our quick start tutorial our i mean our cheat sheet that shows us how to do the git push all right so inside of the virtual server we're going to need to create a bare repo all right so let's do that um let's go to the virtual server this is the virtual server all right and inside of over here we need to now cd because we can't create the bare repo in the same place where we want to push to so this is where our current git repo is so we need to cd out of this and get out of in here so we can see this is where our project is and this is our environment okay this project folder called dashboard is basically the the folder that we want to push from this side so this if you if you let's exit here this folder called dashboard right this folder everything that's in here we want to push to this dashboard folder you understand so this dashboard folder we want to push to that dashboard folder so we need to get out of the folder and create a variable in here all right so i'm going to say mkdir and i'm going to call this repo right and then we're going to cd into that repo right and then just keep keep in mind where we are we are in development dashboard repo and then over there would have been development dashboard dashboard right good so now instead of this repo we're going to create a bare i mean this is a wrapper folder we're going to create a big id ripple so um so we are inside of the repo all right we're gonna get in it a b all right so copy that and um and do that so this is a different from getting it it's um creating a bare apple all right and you'll hear it it will it will report back and say we've created an apple an empty gateway but you'll see it doesn't have a dot kit at the end because this is a big one then ins so this is useful for you know it will just be like a place that helps us to you know to get the you know when we push the things from our personal computer to you know to connect that i don't know it's a lot of good stuff that happens in the background but um once we've done that we need to then edit the post receive so that when it receives the you know the the pull or the push when it receives the information from where we're gonna be pushing it from it knows what to do with it okay so um i'm going to open this okay and um just keep in mind actually before i do that i just want to copy all of this this this path over there this the path to the repo i'm gonna just paste it here okay all right then once i've done that let's copy the post receive now i didn't copy everything copy sudo nano post receive right and it's gonna ask me for my um password and then um it opens a document this is now you are inside of the nano text editor and inside of that text editor we're gonna paste what's in here all right so this is like a bash script that we're gonna paste in there and um so basically the the parts that have you need to like change this to your own so this is that repo path that i just copied right now all right so you need to instead replace this with your repo path when you created the bare repo it showed you the wrapper path which is the one that i copied and i pasted there all right so we need to paste that in there and then that wrapper path is exactly this is similar pretty much to their path that we need to paste in there but this is now the path to the directory or the folder that we need that we need to actually be pushing the information to all right so this is now that dashboard folder all right so i'm gonna paste the same route in there but the difference between the wrapper path and the dashboard path is that when it gets over there it's not dashboard repo it's dashboard dashboard all right so this is the path to the project root the root of the pro of the of the jungle project so this is where we want to push the changes to it's inside of this is the root inside of the virtual server and the second part is the root of my repo okay so if you look at the the code over there let's let's zoom in here this is the working tree okay so wherever your jungle project is this is the way we had the initial gate repo that we pulled from this is that route over there this one is a route to the repo that we just created now so this could this could sit anywhere that could be far apart they don't even have to be next to each other just as long as you get this route correctly right so once you've done that you're going to close this file and save yes all right and then you need to make it executable right so to do that you need to um you know run this line of code over there and don't forget this line of code if you don't run it nothing works that's the magic line so once you've done that okay we're gonna go back to our personal computer and then we're gonna add this remote ripple now we remember we had added that initial um you know um remote um we i think we called it um what did we call it we called it um what did we call it upstream okay now we're gonna call this something else okay we can't give it the same name we're gonna call it uh origin okay so um not origin man yeah instead of upstream all right so we're going to write this line of code gate remote at origin username whatever this is same as what we did before except we're calling it something different because this one is also not going to the get um you know a repo this is going towards the bare repo path so this is the bare rapper directory okay and then this is the um you know the ip address and then you give it a different name okay so we're going to copy that and um and paste it over there all right and let's go through it quickly so over here your username is satosh we're gonna change that so this is the address of the repo that you're going to be adding here so the address there is my username is azatosh as we're logging in we're logging in there's multiple users to this to this virtual server you can have many users and maybe all of them are doing their own you know work so when they're pulling and pushing they're going to be pulling to their own profiles that's why we're doing it like that and then um over here we're gonna add the ip address if i remember what it is over there it's 178 um 62-73 dash two ten like that and then we're gonna uh you know we need the direct the the address of the repo so i'm gonna delete all of this and i need to get that address again i think so one that i pasted here let me just undo that all right and uh paste it over there all right so this is the the root or the path to the ripple okay click enter you don't see anything but basically you've added that that rep that that that ripple then once we do that then we just say git push origin master okay so inside of here okay we want to push this but before you push it you need to add and commit the changes so we're going to say git add all right git commit minus n we're going to commit i don't know let's call this we've updated the settings file with all the settings we need to update all right all right and it shows you all the changes that you've made since the last commit and then once you do that then you can do the git push origin master all right and then i'm gonna have to log into your virtual server again with the ssh keys this is my ssh key um so i'm logging in there and then you will see it's pushing the changes okay and just read what it's saying okay how many kilobytes it is pushed to see if everything is worked well but on the other side you can see the out of your apple and you can see the into your dashboard folder um and um let's just like look at um this the settings for py file in here because that's where you made all the changes so i'm just gonna open um that uh dashboard settings dot py and if you look at it over the let's see import os i know i added that it wasn't there before all right um allowed hosts these are all the changes we made on the other side they were not there before remember the message tasks this wasn't the i made all these changes inside of there and that installed app authentication is also an app i just added and um the templates and everything in them the database dashboard a database dashboard user so the changes have pulled through and jungle resized so i'm gonna um stop this and we're gonna run um now continue with the rest of the tutorial over here which is on the jungle side all right which is over there this one day where we uh make migrations okay so let's test that and see if um everything is good okay messages dot info messages is not defined yes yes messages is not defined over the so i need to import um the messages at the top of the file so you need to basically import it from django control messages import constants as messages all right so we're gonna save that quickly um clear that we need to push those changes again so right so setting up that um when we set up that whole um you know git push you know the origin all of that you only set it up once going forward every time you make a change you basically just add and commit and push all right so you you basically gonna be writing your code every time over here commit push and then that code is gonna be on the side automatically all right and then we're gonna try make migrations again no changes were detected this time all right so at least there's no error so let's try and migrate right so it's running all the migrations and everything around without an issue right and then after that we're going to create a super user that's very important so we can login into the admin panel right so let's create a super user over there um yes um username for the super user right email address write the password all right super user is created then we're going to collect static no such file or directory called static right so let's see yes we do not have it so let's create it right so now we have a static directory who could have created it on the other side as well but it doesn't matter then let's run collect static awesome and it will create static files for you awesome so once you've done that um we can then um run our we can then run our thing so we're gonna allow the firewall to open uh port 5000 on this um you know and then we're gonna run the server on port 5000 right and let us have a look there on pod 5000 um what what what is our ip again one seven eight let me just write it down over day one seven eight six two seven three two ten all right let's go and have a look over here all right this dash is one seven eight six two not triple five five thousand awesome okay it took a bit and some people do it way faster than i do but i i'm showing you guys how to do things the right way the skills you learn here you can go build professional level applications okay not uh youtube tutorials for the sake of youtube tutorials but youtube tutorials to build your portfolio and become a better jungle developer with best practices of how to do things so it takes longer but you're doing it the right way now what we're going to do next is the interesting part of all of this we're going to now incorporate our login templates these templates that you see over here that i showed you earlier on these ones we're gonna build them so we'll just start with building them blank nothing else on them and then then we will do the jungle stuff later on now the plot thickens this is where the tutorial starts to get interesting because we've done all of the basic setting up of our jungle project and you might already have a jungle project of your own of which you would catch up with us at this stage where we're just going to implement the login logout i'm going to start first of all by implementing the standard jungle login and log out process okay so before we even use social login and logout let's first of all create that the user can log in and log out with the normal jungle system to do that um we're going to start with our settings um inside of our project our directory we're going to go into our urls.py this is the the starting point of any application so um let's start there first of all you will if you see new urls.py this would already have been in the creator because the admin panel already exists and then the admin urls have already been created we're gonna create a new sort of like you know set of urls for authentication okay and then we're gonna use the include and for that we're going to include authentication urls and this just looks at the authentication app directory and looks for a file called urls so inside of the authentication directory you need to create that file called urls or py which means we will define all of our authentication urls in them and we want to find them in the main project directory and all of them will start with that authentication um you know piece and then the rest of the url will go there so that's all you need to do over here and include also the settings to debug um sometimes people forget this but this is to help jungle find your media files this is every time you upload a file you might not think you're going to need it now but it's just good practice to do it because later on you'll be running your application and wondering i've uploaded this document why can't i see it okay so make sure you set this up inside of your settings um when it's in the production mode you don't need this anymore you can delete this when your app goes into production so once you've done that at the top there's just a couple of imports you mustn't forget import static we import this static over there because we're using it inside of this function the settings we're using it inside of this function as well include is the one that we use over there path and admin was standard and they were already included um in the all right so um once you've done that you can even say path over there and include because path and include both of them come from jungle urls and then you don't have you don't need that line okay so once you've done that then you need to create this url.py file so you go over there you go to urls to py and you'll see i've already pre-recreated these uh routes that we're going to need we're going to be working with the login register and log out okay just as a start we need these three routes and we're not going to do any class based view or any jungle inbuilt i know they're there to make your life easier but i'm going to do this old school because i want to do a lot of um you know hand you know design i mean like sort of personalization because if you look at my template like it's just a template of its own and i want to build it the way that it is so i'd rather build it from the html side and even though it's a bit more work i don't know it's just a preference for me to be honest and um so i'm going to use normal function based views and i want to do everything old school manually just for the login and the log out and and these other pages then um then after that we're going to create a path for the dashboard uh technically the proper way of doing this is that you would have a different app for your um whether it's going to be dashboard or whatever it is you know so we're going to do like a crm app i think i've decided and maybe you would have a path i mean an application for crm over there and this route would be in there but because we haven't built it yet we're going to have it in here later on we'll change it that's why i have that move later just for this app to work so that we can see when we are logged in and it takes us to the dashboard and then we can see when we log out um that we are up there then once we've done that that's pretty much it okay so we need to then build these views inside of the view because we've imported um from authorization import views actually we don't yeah from authorization import views so this will import views from over there or you could even just say from a dash import views let me just leave it the way that it is and i'll see if it gives me an error okay from actually it's not authorization man from authentication because i'm thinking wait what is this from authentication so this app is called authentication from this authentication app you can import views or you could just say from from that okay from the current working directory uh just import the file called views to be on the safe side so you don't get the spellings and everything wrong this should also work if it doesn't we will we will see it then once you've done that then you need to now work on the views file okay um so from the view file um there's a couple of things that this is just done that i always start with it anonymous required is a standard function i use a lot inside of the authentication application because when someone goes into your login page or they want to go into your research password page or what are going to there are pages inside of your authentication app that you will not want someone who's already logged in to access and then they will need to have their anonymous required decorate on so i just started by defining that and i've discussed this in detail in previous tutorials you will see the code but it's pretty straightforward it just checks that the person is logged out when they're trying to access that path and if they are logged in it will send them to the dashboard then the imports at the top you can have a look at them but it's basically the imports we're going to be using in this view function so the first view function we're going to build is let me just copy all of these because i'm going to build all of these view functions okay so i'm going to go to the bottom here and i'm going to paste all of them here and the log out we've already done the view function for that logout is actually the easiest one to build you just use auth.log out you log out the request and you redirect them to the login page just these two lines of code and um auth is imported at the top over there over there it's imported from contrib auth models import user and import authors from the same place you import user you import the auth and that's the one that you use to log out um at the request okay that's it and this obviously makes it obvious that you shouldn't call any of your apps off by the way all right then once you've done that um that's the lockout is created so um i'm gonna leave the log out at the top and then we're gonna start working on the other view functions okay so the next uh function that we're gonna need to do is our login all right the login takes in the request as well as an object and then it's gonna do some other things and over here is where we will use that login not login required we will use that um anonymous required um you know um what should i call it decorator all right so this will take anonymous required and the same for register okay so there are two parts we're building here it's the login and it's the register page okay both of them will take in anonymous required okay so i can delete that and then we can build the rest of the of the parts okay so they're taking anonymous required and um for the login path um we're gonna build a login page so let's just say we are returning we return a render okay this render that we're returning with retaining that render at the top we should have render in here there it is okay imported from jungle shortcut okay so we render the request we're gonna have the file of the html page that's going to be rendered and then the context okay and for the context for now we're gonna leave it as blank okay so i'm just gonna copy the same thing over there and we're gonna paste it over there as well all right so to get the name of the html file that we're going to be rendering over here we're going to go into our remember we said we will put our htmls inside of the templates folder so instead of the templates folder we have authentication folder for the templates which go into the authentication app then over there we're going to create a new file that we will call our login dot html right and then we'll create another new file that will call a register dot html all right so these new files login and register in fact we'll have another one as well that we will call a dashboard okay later on we'll move that as well because we said we will move it um let's look at our urls we do have that dashboard uh um path which we haven't in the same view folder so let's just build that as well okay so def dashboard also takes in the request okay and for the dashboard we're gonna also render an html file for that and but the difference between the dashboard is that it doesn't take anonymous required because by the time they reach the dashboard they need to be logged in so it needs to take in login required path a decorator so we copy the login required day and put it over there so this login required we're importing at the top over there and it's that login required we're using here so this basically is our paths but they're not complete because we need to specify which html file it needs to render because we haven't built this html file yet it's sitting here it's empty at the top of the html file you're always going to load static okay because pretty much you're using it in all the html so i like to put it at the beginning so i don't forget it later on all right you're always going to load static and then we're going to put the rest of the html file in here remember i told you i'm using this template so i'm basically just going to copy and paste this template if you have copied it from somewhere already and you've downloaded it somewhere you can just go where your template is and you can find it i have it in here all right so this is the index they registered the html this is like the old way of showing the html file not the old way but the traditional html way where you've got the template and it directly links to the to these static files over there um so we're going to copy let's start with is the login so let's start with the login template and we're going to copy that as it is and then we're going to paste it in the login page over there all right and if you look at the login file you'll see at the top already the style sheets is talking to the vendors dot this and that okay the href and the favorite con as well it's sitting over there in the style.css so the way jungle works we need to root these based i mean in the static directory okay so we will have to um because over here we had not created the static directory i'm going to create this new folder there um create a new folder and i'm going to call this static like that then um in here i'm going to then open the the folder which currently the static folders are kept so i want to move the static folders to the static directory for my project so let me just open that all right in this static folder it's empty now i'm going to create a new uh a new folder and i'm going to call this app right and inside this new folder called app i'm going to put all of these static files so this file those files that file that and that you see these files because they're the files that we need to refer to in our folders i'm going to right click copy them and i'm going to paste them inside of this static directory okay that's all you need to do okay then once you've done that we're going to go back if you look at our project directly there now and you look at static you'll see that app is there and those folders are there okay so that's why so then we'll be able to refer to them using static inside of the jungle app to find those uh folders and um so inside of static so if you look at these vendors this vendors um is a folder inside of static instead of study i created another another group called app the reason why i did this is in case i have different sort of html i mean in case i have a different different css libraries because it happens with large apps that you might have a different set of css libraries for your front end and a different set of css libraries for your admin panel perhaps you have a different set of css libraries for your documentation page you know a lot of large apps usually have more than multiple css libraries for depending on the different part of the app and um so it makes more sense instead of holding everything inside of the static folder to create also instead of the static folder multiple app i mean multiple directories for your static so this is all only the static files for app if i had for example a different set of static files for the front and let's say i start building the front end for this app and it uses a whole set of you know css libraries i would create a new project directory here and i would call that um you know front or whatever i want to call it and then i would put the css in day then when i refer it inside of the template i can do it that way so now over here where this was referring to vendors because this was like direct linking to vendors i can remove that you know and i can sorry i can remove this whole thing like that right and i can do it the jungle way referring to the static all right and because now instead of the static this vendor is sitting inside of app first so you need you need to go into app and then it can go into the vendors and everything else then you can paste that in there right and then you can do the same for this as well all right so uh everywhere in this folder where there's an image or whatever a style sheet you will have to go through and refactor it um that way and then you'll have to do it for all these templates all right so i'm gonna do it off camera to save you time and then we'll continue um after i'm done with it um refactoring all the code changing it all to be django format just like i explained to you all the static uh you know stuff that we need the you know the static files we're gonna save them inside of an app directory inside of the static folder so we refer to them this way so replace everywhere and don't forget the images where we're displaying the logos as well so you have to go through the file in great detail like here where we're displaying the the images we also have to do it that way and then at the bottom where we do the javascript as well we have to now refer to it inside of the app.javascript and everywhere there was a url because in the html they would refer to a url like index.html you know href of index.html we can't do that anymore so for the href you have to use a url um you know you know um directory so um we want to um log in for example because we haven't implemented the login we're just gonna say if somebody clicks the login button the url it must take them to the dashboard which is the dashboard of our application and if you see the dashboard if you go to our urls um where is it uh this is where the urls i've got a lot of files open now if you go to the dashboard in the dashboard views you'll see that the dashboard views is just going to display that dashboard.html so the other thing that i've done now that i've completed you doing my htmls i can go back into the view functions and um where this was blank i can put in the name of the html because now it's done so inside of the temp inside of the templates um the authentication folder the template are a dashboard login register so for login we're gonna show the login one for register we're gonna show the register one just make some space over here and for the dashboard one login register we're gonna show them accordingly now we just have to do one more thing because our app needs to have a home page with no one because that's where normally people will start the route of the you know the the application where there's you know before anything else so we're going to go to the original a project directory the dashboard urls.py and over here we're just going to define a blank you know um your path and we're going to save views.home and then we're going to say import views then we need to create a view file inside here so i've created a new file here that i call views.py we're just going to do a quick view for um you know the home page but ultimately what we'll do here in the end is that um we'll probably create another app for their home page you know for the landing page and all of that but for now this is a quick shortcut we're just going to put a views file in here and inside of the views file we're going to define a function over there with the name home to describe the home page if somebody just goes to the homepage of the application and then inside of that view file um we're just going to show redirect to the login page so when someone goes home it redirects them to the login page instead of building the login page on the home page right so that you can still later on um when you want to change it then you can remove this and build the proper landing page and then the landing page have a button that takes you to the login page so for now somebody just goes to the landing page or the blank or the home of the root of the app it will it will redirect them to the login page and if it redirects them to the login page like this one over here the login page with it anonymous is required which means if they are already logged in and it redirects them to the login page this anonymous required will redirect them to that dashboard page so it works either way whether the person is logged in or not if they're logged in and they go home it just takes them to the dashboard if they're not if they're not logged in and they go home it takes them to the login right and once they log in when they finish logging in it will take them the dashboard into the logo from the dashboard takes a blogging so we've got all of that figured out but for now i haven't wired um any of the uh functions you can see this is blank there's no logic inside of here what what is really advisable at this stage and what i like to do at this stage let me not save as save all what i like to do at this stage is to just run my app with the blank htmls nothing on them no jungle logic in them just to check that the html and the static and everything is wired properly so at this stage that's what i recommend you do you know so that you just make sure that the template looks you know fine it can find the static files um it looks properly then you then the next stage will worry about the jungle logic okay so we're going to commit this what are we going to call this wiring off the templates uh master we're gonna push this and after we finish pushing it it's a lot of files this time because we've got all of that static folders that we're taking as well to the other side we're gonna clear this and then um over here i see it has logged me out all right let me just copy this i'll remember where i was okay so that i can re-log in again right then i can see debay okay no such photo directory because i have to cd like that okay all right so now uh we have pushed the changes and you'll see now um this quick way to check i can just check inside of my static and see if the stuff is in there technically you don't really have to check but because i'm doing this tutorial i'm going to check for you to show you that all of the stuff i've added a day all right so let me log out of there and let's run this now or we need to do the the virtual environment first we need to activate the virtual environment or else we won't be able to run anything so let's copy that and let's source that uh bin activate all right and then we can um cd over to the dashboard and we can clear it and then we can run our jungle application and see what happens let's hope there's no errors cross our fingers okay python manage dot py why are we running this um [Music] we're running it on five thousand we open put five thousand okay no errors good so then if we go back remember when we had this on port 5000 when we run this if everything is okay it should take us to the login page right let's see there you go there you go we are now on the login page and the login page is wired correctly it can find the images the html the setup is just the way it should be this is what i want to see okay then i also want to see the register page on the login page over there i have a link to the register url this one create account if you don't have an account they can go to the register so this is a login page in case i didn't have an account they could click on that don't have an account and it will take them to the registration page so this is the registration page the sign up page okay and on the sign up page i think i wired that sign up button that if somebody clicks on it it just takes them to dashboard okay for now we're not logging in anything you know so if someone like clicks this it just takes them to the dashboard okay okay it can't take us a dashboard because it goes to the dashboard and then i've got that login required um root on the on the dashboard and then it realizes i'm not logged in and then it logs me out okay so what i could do to check that the dashboard is is doing well i could log in okay and i will log in using the admin panel remember we created a super user the last time on the admin panel so i'm going to log in without super user okay and if i log in if i can remember my password correctly let's log into the admin panel of our app okay never so now that we're here this is our admin panel of our app we are logged in so if we go back here and we are logged in and everything is working properly technically anonymous is required for the registration page so we shouldn't be on the registration page if we are logged in we should be on the dashboard so i'm going to refresh this and it will pick up that i'm logged in so by the way jungle works if i when i log in on the admin side or whatever it will remember on the browser that i'm logged in okay so if i now refresh this page it should take me to the dashboard because i'm logged in i shouldn't be on the on on the admin panel if i'm logged in and remember we did set up the log out so inside of the views all right where is it inside of our views we have already done the route for the log out okay technically so we can test that that works okay and i think i've got it wired in here so let's technically log out of here and if we log out it takes us back to the login all right and if we are logged out and we try to refresh this page it's going to tell us oopsies you are locked out okay so i cannot actually refresh this when i'm knocked out so whether you're logging on the admin or the user side it does the exact same thing so so far i'm happy everything works the jungle way i can log in on the admin side but now i want to log in here okay so i'm going to do a quick login um for this page and i want to do it old-school way okay all right i'm going to do it old school the same especially if you yeah i don't know this is preference wise because i'm going to close everything so i remember where i am save everything okay just close everything so that we can open one thing at a time all right authentication views all right so i need the view file open that's the first file because i'm going to do the logic in here okay then what i need is the the htmls for registration let's start with the registration okay let us start with the registration and i'm not going to do anything for the check box for now i'm just going to go to um log in don't have an account create so we're gonna work on this page where um a user will give you a username and a password so technically we need two passwords for registration all right because when i double check that the password is correct okay so i'm going to um have two passwords uh go to the terms and conditions i'm going to leave that all right we'll do that now we're not going to do that now and um so you have the password this is the password over here and then this is the username over there and this is the form all right so we're gonna basically wire this form the first thing is um i need to know um where's the input there you go the input type text for the username um all right the placeholder is the username and i'm going to change this username and i'm going to call it email email address okay so i want people to enter the email address i don't want to have those username email which confuses a whole lot of people then people forget what hell the username they use i'm gonna simplify things for people and i'm gonna say enter your email address okay and for the email address um i think we need to um may is this type email can you do that or you can you can use there's a lot of things you can like use to make sure that um they actually enter an email and if you use django email field you don't have to worry about that jungle sources are for you but because i'm doing this manually you'll have to do this manually but i want to skip it for now because that's not the point of this tutorial okay then i'm going to say this is an email address and then this is a type and then i'm gonna give it a name all right i'm gonna give it a name is equals to email and i'm gonna give it an id is equals to email so that i can identify it on the other side then i wanna call this um enter password all right and then i'm gonna this is a type password all right i'm gonna call it name equals password1 and id equals password one right and then the place they'll be oh there's an id here already so let's remove that id so that we have only one id name and id and then once we've done that we're gonna replicate this okay so that the user can enter the password twice and we can confirm that the password is correct okay so enter the password again okay and to enter the password again now this will be password to password two and then everything will be exactly the same and then they'll agree to the terms and conditions the checkbox and i'm not gonna do it actually i'm going to input checkbox we're going to put in the required what are we doing there required all right so the person has to enter the checkbox in order for them to continue and all of these as well we're going to say required all right for password two for password one required and the username as well we're gonna put in the required okay so that you can they cannot submit the form without doing any of that and then um after we've done all of that on the signup over here i think we've got an a i need this to be a button okay so i need this to be a button and i'm just going to copy this whole class over there so that it looks exactly the same all right so the type is going to be type submit okay i don't need a name for it i just need that class which i'm going to paste over there and then i don't need the url anymore okay so it's not the button shouldn't be rooting somebody it should be submitting the form and um what was in there i'm sign up so we can just rewrite the sign up again on the button and then they can be re-routed to the login page all right so basically this is the registration form all right so let me just remember what the what the variables are in here i have email all right let me write it in my little booklet i have email i have password one and i have password to all right and then um once we've done that um we need the error messages we need to display the error messages not even actually we need to display the app messages for now okay these messages that we're going to be displaying the messages from the where these messages okay because i'm going to use messages a lot um let me find a good space to display the messages let me see join us here let's put it under the join us today so underneath here just before the form okay actually we're not gonna display it over there we're gonna display it inside of the form it will be technically the same place the user won't see the difference but i think it's important to have it inside of the form um so i'm gonna paste this from my nice notes so um what this will do is that for messages and messages if we have a message to display it will display that message over there and the alert so this will use like bootstrap alerts okay and whatever the alert is on the bootstrap side and this i think got this template we have has got bootstrap and that's why we did that message tags inside of the settings.py if you remember here instead of teaching those people this is why we did those message tags because now this will transform whatever those messages into this in for success warning or danger and then info success will single danger will go in here so this would be like alert info or less success alert danger whatever and then the message itself will be displayed there and then for every form in jungle we need a csrf token all right so basically this is what we need to do here let me just copy this for the login form as well so this is the register pay form let's have it for the login form just underneath the form over here before the first form group is where we want it okay so we're going to paste it in there as well so if there's a message it'll be displayed and we have the csrf token in there as well okay so basically that's it for our registration form okay i'm not gonna do the jungle forms i'm gonna just skip all of that and then for the username over here again i'm gonna change this username to email all right and then i'm gonna change um the id did we have an id the last time why do we have an id here and we didn't have an id there or did i miss it i added the id myself here but was there no other id on the other side just to make sure i didn't miss it because on over here they have it okay all right okay so that's placeholder password paste placeholder username and then placeholder will be email address because i want them to enter the email address and then on the email over there that's a form group it's going to be email it's going to be a text we're going to call this name is going to be email and id is going to be email right perfect name email id email for that one and then over here as well is a type password um we're gonna have the name is equals to password not password word this time um just password id is also pass word okay so the name is password the id is password that's the placeholder and then um let's see over there so we got that password label then what that password the i mean the email so on the other side we've got just um email and password and then on at this side we've got email password one and password two okay i'm gonna need these tags later on inside of my jungle okay i'm gonna do the facebook login later okay it's gonna be the last thing we do so we're gonna just check the normal login all right so now the html is done we're gonna go into the into the um login so let's start with the registration okay so if i have to let the registration come before the login path so because that's how we are coding it okay we're gonna need to do the registration first and then i'm gonna push all of this to the bottom so that i focus only on this registration okay so for the registration we're gonna have two types of requests okay we're gonna have um if a request dot method is equals to post or get we're gonna start with the get one and um you can have a look also at our documentation here on the jungle thingy and you'll see under the jungle documentation we've got the jungle views all right and typic typical root forms is this one over there so um we need to um i'm actually gonna just copy this for the get method right so with the gate method i'm going to copy that and then i don't have a form like that um so so if request is method we just do that okay then again we don't have to do that we'll just assume that the default is get so the only thing we have to actually look for is post okay so if request dot let me i'd love to copy yeah so let's paste that so if request is post if the method is post we're gonna grab the email the password and the password to you okay so we're gonna say email all right is equals to um request dot post okay dot email all right and then we're gonna do the same for the password one and we're gonna do the same for the for password two all right so it's a request dot post dot password r2 and the same thing we can just copy there as password one all right so password one password two all right so the first thing we wanna check for is if password okay actually before we do that we wanna clean up the email a little bit so we want to remove all the spaces um if somebody like puts an email address with spaces in between so we want to do that remove all the spaces and then we want to lower it okay because you get people that they enter an email address like i mean like i've seen like in like the last app we had like issues i don't know why people do that like they would put in like you know m z t t r you know at you know whatever gmail.com right and you're gonna find that actually okay maybe gmail is is is the wrong one to use here you know maybe something like at um i don't know um let me say scolo.com right and then when they log in right so let's say this is how they enter their email when they log in they will do this and they'll do mddr you know which like makes no sense and so normally what i do is that i just lower everything okay and we enter the email that way because it doesn't matter this is just how we're recording it in our system especially if you're not sending them an email you know so that everything will be standardized because tomorrow when they come in and they enter it a different way you know in our database it will always be stored in the in the lower form so when we compare it because in python if somebody entered like mddr edscolo.com right and then the next time they entered mddr at scholar.com if you run a query um for when you're trying to lock them in and they log in this way when they register that way the the query will return that the user doesn't exist and they can then recreate a different user with the same um you know email address technically because django is case sensitive and then it will it's technically the same email address and then when you're querying that user you're gonna get an error because it's gonna like think it's gonna return to both of them so in some cases so this is to avoid these issues um i just do this then um once i've done that um then you're gonna say if password if password one um is is not equals to password two okay so if it's not okay so you could do it like that if not password one password two or you could take that knot out of there and you could uh put it they okay but the pythonic way of writing it is is like that if not if not password one equals to password two so the passwords are not equal right we need to return an error message okay and i'm gonna copy it from here so i get the the syntax right so if not password one equals to password two we're going to um show an error message right that says passwords do not match like that and then we're gonna return um redirect to um register all right and then it will show them that that error message okay if the passwords are not the same then after that we're going to continue with i'm creating the user so basically to create the user we're going to say new user all right now i want to create a user object which we have um imported at the top over here all right so it's that new user object just making sure my imports are there so we're gonna say um user.object don't create all right you're going to create a new user with the username right username equals to that email right and the the email address is also equals to that email address and the password is equals to password1 because now we know password and password two are the same anyway so we create a new user and when you create actually you shouldn't say create you should say create user all right so if you create this for other other classes that's not the user class okay so you should say uh user objects create user like that so once you've done that then you can say new user save but actually you don't need to do that but i don't know it's just out of habit because um i i have to do it on all the other things when i'm when i'm changing some stuff then once we've created that user then we're gonna log them in because now we've created the user for them and um we're gonna then say auth dot login author login so um it's the same auth class that you're calling here when you're logging out okay so instead of logging out we log in so when you log out you would say auth logout the request when you log in you will say off login the request and then you have to say which user you are logging in okay login new user then once you've done that you can just uh return um redirect i'm gonna redirect now to the dashboard okay so once they've logged in once they have um created a username and password we're gonna redirect them directly to login if you wanted to send them a verification a sort of a registration email saying hey welcome guys congratulations well logged into or whatever you would send the the you know you would send them um send the reg email here okay if you wanted to verify somebody's user email address or whatever like in my other application you know once i register here is before i log the email i send them an email with a code and then they have to go get that code and input it to make sure that they didn't give me the wrong email address okay so but now that's not necessary for this app we're just going to log in then we're going to log them in immediately okay so that's the registration page they're going to register and immediately um we're going to just take all the information you give them the only check we're doing is that the passwords match and then we register that user and we log them in okay then um the login page um on the login page um on the login page which is this one over there um we're gonna do something similar okay so we're not gonna the the the the get request we're just gonna show the form and then um we're going to start here if request method is request to post all right so um if requested method is supposed to post we're going to have a username okay which is the request request dot post don't use the name all right and then we're gonna have the the password actually the username is not the username is the email okay so i think i'll use the email on there on the on on the on the on the form and then the password is um exactly the same thing as we have there request a dot post dot a password all right so we've got a username and password what we're going to do then is we're going to use the auth to authenticate the user okay to do that i'm going to paste um some code over there we're going to get the the user all right and then we're gonna say the user is auth this auth is the same auth over there the same author in the log out okay we're gonna say the auth is we're gonna authenticate the username all right so the username of the user is this email address all right because the email address is the same as when we save the username under the email address all right and then the password is the password so this is going to authenticate that this user is the right user with the username and password so it's going to go check the password in the system and all of that and you know it does all of that in the background then if the user is not none if the user is not none then we're going to log in at the user okay um so if the user is not none which means if the user exists because if you authenticate over there and this user doesn't exist it will be none it will return a none then i'm logging the user and we [Music] return them to the dashboard okay so we redirect them to the dashboard over here and else else means that if it returns none we're just going to have an error message um let me just copy it copy an error message over here all right so if like for example we couldn't authenticate the user we will give them an error message and say you know um you know no such user here no search user and then go to the registration page and register again okay so basically this is it we can test this out and see if this works um this is a simple way of just doing login logout without jungle forms and just the old-fashioned way it will authenticate a user it will create a user it will a log out a user and um you know and you can then maintain the templates the way that you want them all right and to use the old-fashioned way of of working with the templates this is the only reason why i do this with the login and log out and i only do this with a login and logout form all the other forms i always use the jungle forms okay so we're gonna as usual uh push our changes okay and log out okay actually i just remembered something um i might want to you know if you look at our dashboard where's our dashboard yeah like this one over here right um no not this one this dish i can't see it okay um when we log out i mean when you log in i just wanted like some feedback to on the dashboard page to say that you know you've lo you've been logged in so if you look at the dashboard html page let's look for it here where is it this dashboard page this one over here at the top there um where it shows you your email your names you the name of the person okay so um you would be logged in as a user right now and you can access the user from inside the template by just using the user variable the user is going to be the current logged in user so if you say user.email it will show you the email of the user so at least this will give us a nice feedback that we have logged in with the email address so if it does push us to the dashboard page we can see that okay so save save that and then what we're gonna do here is that we're gonna let's push this again here's the email coolio now we're going to run this so there's no errors there is an error if the user is not nine is an indent error okay so let's just have a look here see what's going on there um [Music] uh-huh so this should be like that okay so if it's not nine okay so that was yeah that was a problem so let's push this again right it's gonna rerun the server this time there's no error it's good then um what we're gonna do is not here because um let's go to where we're running our app this is the registration page let's refresh it and we can see now we have that um email address our password and enter password again okay so let's try um administrator online dot online and let's put in a password over here let's put in like another password that doesn't match that password and let's try to log in without agreeing to the terms and it tells us that this is required because i made it required so let's agree to the terms that we have no idea what they are and let's sign up and it brought us back but it's not showing the messages because you can see it brought us back it's it's actually supposed to be showing the messages um let's see if not password1 equals to password2 messages.error that and so technically the messages.error should be showing in here but they're not um but we can see that it's not logging us in because the password didn't match so this is sending us back but i don't see the messages so let's go look at that register thing again all right um unless if we don't have this class that's the only thing i can think of so what i'm going to do is i'm going to just say message like that okay all right let's just yeah put it like that um straw perhaps it's the bootstrap or whatever so if there's a message it just shows the message all right not the alert because the alert is not showing i just want to see that the messages are coming through all right if it's not that then i'll have to troubleshoot off camera not waste the time all right so this then should restart if it doesn't you can just restart it manually but i think it's started anyway in the background so i'm going to just um oh i know what the problem is okay yeah it's not this okay it's not that okay this is what the problem is you see that form over there yeah i can see now the url you see the url okay it's not posting okay so when you do a form when you do a form and that's a problem with not actually creating the form yourself a form normally has an action all right and then it has a method okay your forms must always have a method or else it will post it as a git okay so this form needs a method um and the action can just be blank like that right so let's copy that and put it also in the login form so every time you use a template just double check that it's the because it's easy to miss um when you're not when you didn't create the phone from scratch if i was creating the phone from scratch i would have known to do it but when you um using a template some of these things you assume they're they because who would create a form and not you know make it a post form so um anyway let's do this again okay form [Music] not posting right okay and then just double check that the buttons are also submit buttons right at the bottom here um the input um with the bottom the button um sign up this is a button that type submit on the register page on the login page the button needs to be a button type submit as well um where is it just google create oh yeah you see this this also needs to don't have an account what is it facebook login yeah this this also needs to be a button so we also overlooked that so this is a type submit button all right and then you don't need the name you can just take that class over there and put it inside of the button and then i'm just putting login in the yeah because we're gonna have the same problem so the buttons must be submit they must be inside of the form the form must be a post request and the action you can leave it blank inside of django it will always know where the action should be okay cool yo then um let's um refresh this and make sure it is refreshed and let us then um just get it off everything in there and either way it will take us back to the login page but we want to be on the registration page because we want to create you username and password so let's try this again all right and enter a password but like a wrong password that don't match and accept that there you go passwords do not match so it does it did go to there um to the view function and it didn't match and it returned that error message that you see over there cool then now let us um do it properly okay except the terms let's sign up and see yay it has signed us up and you can see over there there is our email address at the top where i wanted to display it even though the image is not right because i haven't loaded an image this was just a way to check that the login functionality works so i'm going to write down here my email address and password because i know next week when i come back to continue with this tutorial i am going to forget what the password is because i generally don't use like passwords i remember because i'm sort of i've trained myself to always use the most complicated person and the next time i don't remember what i used so um then i write it down i don't save it on my computer never save your passwords on a file in your computer write them down with pen and paper in some way where you will be able to find it then i'm going to okay this logout button is not wired but i know this is wired so let me log out of there and then i'm gonna try to log in with the same um username and password right and then i'm going to try and log in okay i didn't even say this was required this is not required actually let's try logging in there you go so the login also works okay let's log out again so now what we're gonna do we're gonna implement this button log in with facebook so after i don't know how many hours of the tutorial then we get to the interesting part because you need the app actually set up before you can log in with facebook so let's do that next okay for the last part of the tutorial we're going to be using a jungle framework to enable social um logins by the way there's multiple social logins you can you can enable with this um with this a package but we're going to just do the facebook the facebook one but once we've done the facebook one you'll see that it's easier to incorporate the other ones and maybe we'll do it in future tutorials so we need to start by um let's let's just make sure that we are in the right place and that our virtual environment is activated we need to start by installing uh pip install um social earth app jungle right and i will also make the documentation i will make our leave it available in the in in the description of this of this tutorial so that you can go through it so once you have installed that then we need to edit to the installed apps like that so i'm just basically following the documentation so if you go to the settings over there inside of the installed apps under authentication because this is now an app in itself we're going to edit in there and then and then we're going to add this as well to social storage because we are using oh no not using engine sorry we don't need to add that we need to migrate the database first okay so um before i can migrate the database i need to um you know make all these changes but wait wait before i do that let me just copy this on my grid at the end because i need to push the changes i've made on the other side so i'm gonna put all the social media stuff at the bottom here okay so let's paste that in there for this is for postgres um jason field and then we must remember to run migrations okay migrations right then um we need to then update um our authentication back ends so um these are all the back ends that you can have um for authentication in your application so currently the default one is the normal model uh back end but now we're gonna include all these other ones and we're not gonna do all of them we actually just need um there's a twitter google google google open id i think that's the facebook one right um so i'm just gonna copy these you're gonna paste them at the top um okay no after the installed apps after the middleware after the template after the databases languages yeah somewhere in here actually you can just do it we were trying to do it before all right so let's just put it there and um after we've done that we're gonna define our urls for this okay so we need to include that so um inside of our urls we we we normally we did all of our includes um let's find it um which is over there we're just gonna create and say this is the social social urls okay so the documentation is written for the old jungle so we're gonna have to like sort of rewrite it in our you know new um jungle format but i think it should still work so instead of authentication over there you can choose what you know what what the thing should be um so you can say um oh oh off like that maybe then we're gonna put the social jungle to the urls right so um this is social downloaded urls not the url to urls and inside over there you can have a namespace of social all right so inside of there you never name space and um so you have social urls and the name space is social okay i hope this is correct because it's slightly different from the way it's written in the documentation and then we're going to add this namespace inside of the settings.py so somewhere next to this over there somewhere we're going to add that all right and then we can then start using it inside of the template but before we even start using it inside of the templates we need to also include this template processors so at the top where we've got our template processors i can just search for it template processes um the processor back end and login redirect so these two on top of the ones which are already existing so just paste this as it is over there and add it to the bottom of of of this inside of the array okay so inside of this array at the bottom of the list just add it with the commas at the end then once you've done that uh there's some other things they're talking about um i don't think we need that uh social pipeline um oh yeah this is for the json field support then we've already included that um django admin all right so um that's all we're going to do i think there's one more um that i did that i have in here let me just double check my code the middle way okay so i just added the social exception uh middleweight as well over and above all the other middleware so just yeah if you need to add this line of code somewhere in there okay then once you've done this basically you should be good to go okay so we followed the documentation as it's written i'm doing this for the first time so i'm just like you guys i usually just implement this manually um i'm doing it with this library for the first time but it should be just fine so let's do git add um um what we call it um social right and then get push origin master and um just make sure there's no errors we need to run migrations okay so um when we are in the right directory we're just going to do python when i make migrations first okay so there's an error here jungle country model back end um let's see [Music] oh yeah i think i know what the problem is yeah what line is this line 175 yeah it's this commerce here okay um this is the social stuff right save that right okay so let's try that again all right i'm thinking you shouldn't have to run make migrations but um i run it anyway because if there's an error with make migrations i'm going to have an error with my creator as well so make migration also just does a check in the background check everything is fine you can see with these migrations all the social stuff was implemented okay so you need to run this first to just make sure that the social thing was installed correctly so now that we've done this we actually need to we need these two things all right this facebook key and our facebook secret that we need to get from facebook so that we can implement the facebook login all right and to get these you need to go into the um facebook apps and instead of the facebook apps the way you find this is let me just start from scratch it's developers.facebook.com um so developers.facebook.com will take you here and you need to create a new app for facebook and they need to remove this damn whatsapp api from their documentation because they know very well that no we're not allowed to use it they've got it here for select people that they've selected to use the api and it takes you to a blank page they must just flip and remove it from because i it get irritated every time i see it and um it's just so stupid so then you go to my apps and um when you get to my apps this is if you're logged into your facebook account you need to be logged into your facebook account then you're gonna go to create a new app okay and i think i've changed this a little bit from the last time i did this and um to make it clearer because in the past it wasn't very clear when you're creating an app the permissions like you'd be trying to do facebook login and then they're taking you through like tons and tons of commissioned requests and you're like no i just want people to lock it with facebook and and now i think they're clear they're clarifying all the things that require verification okay and what we want is just to authenticate users for facebook this shouldn't require business verification or hectic very you know because it's just a login and it's publicly available information then um so when you get here we're gonna say business all right and then we're gonna say next and then we're going to say the business display name for this what are we going to call this we can call this code we already have an app called scolo um i don't know um let's say um jungle jungle tutorial jungle login all right and then there's the contact no business account needed let's create the app then i'm gonna have to put in my face book password all right and then it's gonna go and create the app for me okay you need to do this before you can run anything on facebook okay so then once we've done that what we want is the facebook login okay not all of these other stuff okay i've done tutorials on some of these the graph api messenger blah blah blah um okay so we're gonna do facebook login okay and then you need to select web okay then over here you need to select the url of your website okay because we haven't set up the website hosted somewhere and i hope this doesn't give me an error i'm going to use localhost i'm going to use localhost and um let's see localhost port 5000 okay uh continue and then they're going to show you all of this stuff which we don't need to dish because we're not going to do this the jungle script version way um okay back we're done okay then um we're gonna go to our settings and you'll see over here that our settings doesn't have the access are not granted there do you have to manually do request for the permissions even though it's default permissions they still want you to request them so we're going to go into the advanced access and we're gonna go through the list to see the access that we need okay so we basically need to access our rights when we come here you have this um um auto granted public profile all right we're gonna request this one all right and agree and then submit right then it'll be given to us right and then there's another one the email one the one which you can get the email address um where is it standard standard access uh it's not only at the top public profile human agent it would be under auto granted so let me check there auto granted for granted it shouldn't be so yeah there you go email why is it so low on the thing all right so this is the one you want as well the email switch again to read the user email address okay and submit that and um then you're good to go for um so this is also you don't have to go through the formalized facebook permission request for login um you know for login uh requests then we're gonna once we we do that then we need to get these uh facebook key and facebook secret okay and i'ma just remember where these are okay to get your app uh secret and key you need to go to uh basically this the the settings panel of your app so if you go into the settings and you go to basic you'll see your app id and your app secret over there so you can just click show and it will show your app secret don't worry i'll change it later and um you just basically copy that and then you go back to your settings jungle file and then there it says social auth facebook key you put in that uh app id there and then where it says social or secret you put the one which is over there then once you're done with that you're gonna do social authentication field enable true i think i had something else there so um it's deprecated and it and it was giving me an error so you need to update this to social auth json field enabled and then something else you've got to change is at the top over here um this documentation is actually wrong so this documentation tells you to add these as your best your email back ends i mean your authentication back ends and they actually they don't exist this is wrong so what you need to do for facebook all right for facebook you need to say social call back-ends facebook facebook oauth2 all right and i don't know why there's absolutely like no way you can find it online because this is supposed to be the documentation for this framework and um it's not right so if it's not here where else would you find it so i had to google the internet and search for other people who have done it luckily there's some code available that i found and um then this is the correct one for facebook and if you implement something else like twitter login google login you're gonna have to include them appropriately but for our app we only want to do facebook for now and then so you'll have your key your your secret and then you have your login over there and then you can just uh save and push the changes which i've already done and i've already tested that this works but um it actually doesn't work completely and i'll tell you what the problem is so if you go and do python and we do i think it was five thousand um and run the server on five thousand you see it's running without issue okay and then we can go back to our application over there and restart the the application everything is fine if you click on the facebook you can see at the bottom the urls are okay but if you click on it it's going to say there that actually i can't roll the url the domain of this url isn't included in the app's domains okay and by that they mean that it's not included over here in the app's domains but i tried using localhost and i tried using the ip address and both of them don't work so what we need to do and what i've done in my other ones where i've implemented social login is that their apps were already set up but because i was doing this for educational purposes i wasn't willing to set this up but i think like i think i'm gonna have to do that so what we're going to do is i can't do that now because we this tutorial has been way too long i'm going to pause it here and then we're going to continue off next week where we left off but what we need to do is that we need to then deploy this application okay so we need to deploy it on a https server with a proper domain so that we can then put the domain here because it looks like facebook doesn't want to deal with ip addresses and it's going to give us that error and i think when i have that problem with all the other social implementations and that's really why i leave the social integration to the end once i've built the app and it's running but this time i wanted to start with it at the beginning so it means that we're going to have to start with our app already loaded um on an https server so that when we put the apps domains here it will be the correct app domain and then when we get there we'll be able to run it without an error so currently it looks like this is not going to work so uh because of that we will pause this tutorial here and i think we've done a lot for for one day's tutorial so next week what we'll do is that will continue where we left off and load this up and maybe we can include other logins you know we'll include google will will try um github login and and get um you know whatever all this the twitter login and so that you can implement entire social logins on your django application and thank you guys um if you really love this content remember to subscribe because next week you don't want to miss that one because that's going to be the one where we get this to go live and then i'll make this code available for you to use um at the end i don't think i'm going to do it now because it's not complete yet okay so i'm going to do it now and if you want to follow along just download the template like i show you i have downloaded it and follow what i've done okay and then at the end of the tutorial once i've implemented all the social logins and they all work and i've tested it i know they're working then i'll make the entire code available at once okay so i'll see you guys next week

Channel: Skolo Online

Views: 712

Keywords: django, django tutorial, python, django login, django login tutorial, django login form, django authentication, django tutorial for beginners, django login and registration, django login and signup, django auth, django login page, django tutorials, django signup, django python, python django tutorial, python programming, django user authentication, django facebook login, django social auth, web development, django social auth facebook, django social login, social auth django

Id: Gz3LNmc7S_8

Length: 142min 53sec (8573 seconds)

Published: Sat Sep 11 2021