Email Verifications & Notifications - Deployment with Django - Part 5

[Music] hello welcome back I'm Andreas chat your Tech curious web designer in this video we will learn how to connect to a free email client to send confirmation emails when new users sign up to the website I will be using Gmail for this we will also cover sending verification emails when users change their email address as well as email notifications when users get a new message in the inbox so without further Ado let's go and jump right into it so first if you haven't done so yet create a free email account on Gmail a few moments later once this is done let's switch now to Gmail for our email backend for this we go to our settings topy file in the core folder and here we find the email backhand variable at the bottom of the file at the moment we are just using the console to send us the test emails but in production we're using now a SMTP backend so SMTP stands for simple mail transfer protocol so we swap console with SMTP now I'm adding here again a IFL statement to switch between those two backends if environment is equal to production or I'm using the postrest database locally I'm using the email client and else I'm using the console as the email back end and add it here okay now we need to add a couple of variables to establish the connection to the email client first we have the email host so just underneath here in the production environment I'm adding email host equals and then in brackets I add smtp.gmail.com the next variable we need is email host user and this is equal to the Gmail address for this we can create a environment variable so let's do that EnV any quotes email uncore address all right the next one is the email host password and we add it again as our environment variable important to remember here is that this password is not your email password never share that one we create a special app password now on Gmail let's do do that now let's go to Gmail so here we have to go to our manage Google account so we click on the Avatar icon on top manage your Google account then we go to Security on the left panel here then here is important then we set up a twep verification in case you haven't done this yet you have to turn this on if you minutes later once you have the two-step verification set up we click this link on this page we go to the app password section at the bottom and click the app passwords icon here and here we're adding the name of the app [Music] awesome okay then we click create and this gives me the app password which is our email host password so let's copy the password and go back to our code and add this to our environment variables so I'm going to the EnV file let's first also create the email address equals then here we add the address then the password so email underscore host underscore password equals and paste it in here let's get rid of the spaces here okay and there we go save this file back to the settings we are not just done yet a couple of more variables we have to add so the next one we have is email port a port is basically a channel used by a specific protocol so our port number is 587 as we're using here a secured SMTP protocol next we have email use [Music] TLS and this we set to true so TLS stands for transport layer security and this encryption layer which makes our connection secure and then we have two more email specific variables the first one is default from [Music] email and here we add the name of the sender so in my case awesome all right and the last one is account email subject prefix so Jango by default adds the name of the website in front of the subject with keeping this variable empty though I get rid of it all right that's all now so let's do a local test now I save this file here and switch to the production environment to get access to the Gmail [Music] backend like that okay and now let's start up the server so python manage to Pi run [Music] server then Local Host colum 8,000 we are connecting now also to the remote post server so this takes now slightly longer to load but there we are let's sign up with a new user now we add here a new email address to create a variation of your email just add a plus and a number to it and then I'm adding here A plus one for example so then at gmail.com I give it a username test one and password and sign up okay let's check the inbox for the confirmation email and indeed I got an email please confirm your email address I click on it I can see the confirmation email awesome but what I can notice here is that the sender's name is not shown as expected I will have a look at that in a second but we also have hello from example.com here I want to display the name of the website we can change this in the sites table in the database let's do that now now okay I opened up here the admin panel in a different browser and here in the sign section we have a table called sites and here we can see we have a domain name and a display name let's change this now so the display name is the name of our website and we also add our domain for now I'm using my render subdomain like that and save the page okay let's go back now to our settings file and fix the sender name so it looks like that theault from email expects an email address or at least a name with two words to display correctly as I want only awesome as the name of the website I will just add here the email now as well I'm grabbing here the environment variable for the email address now for this to work we have to transform it into a F string so I put a f in front here then we create a variable out of this one with curly brackets and we also have to change the single to double quotes here all right now this should work let's check it out let's save this file and sign up with a new user I add plus two this time like that then user is test two a [Music] password okay a confirmation email was sent let's check it out there it is and great we have awesome here as the sender name with the email address then we have here hello from Awesome from the website the domain with a link and here is the link to confirm the email great let's test this on the live site now but before we can push the code to the web server we have to add our environment variables so we have to add the email address and the email host password okay let's do that now let's go to render then here we choose our web service then to environment and here we add our variables the email address now we add the Gmail account we created okay and then the next one email host password and we grab it from our EnV file and save changes all right now render is updated now we can push the code to the server let's open up giab desktop there we can see our changes in our settings.py file let's add a title Gmail setup and commit to Main and push origin let's go back to render now and watch it being deployed we go to events and we can see here the commit is being processed we have to wait until this process finished this will take a couple of minutes a few minutes later all right we are live now okay let's go to the website and let's create a new account sign up I add plus tree this time test tree username and create new account now let's check the inbox back to Gmail great the email is here let's confirm the email address so I click on this link here here I confirm and my email address is confirmed great let's look how this looks like in the database so I'm going here to the accounts email addresses and I can see here the latest email address I used is verified now perfect that worked nice now next next let's ask the functionality to update this email address here when the user changes the email in the edit profile page right now when we change the email address only the profile and the user table gets updated with a new email we can also test this quickly so let's go to the edit profile page we change it the email address to plus 4 and submit now let's check back in the back end so we Chang this plus three to plus4 Let's refresh this page and we can see nothing changed here however in our users table the email was updated here let's implement this now for this we create a new signal so let's go to our signal stopy file so I'm going to the users folder signals and here I'm adding a new signal so I'm adding here the receiver so it's a post save signal and the sender is our profile table okay then I'm adding here our function with the name update account email with those four parameters so sender instance created and keyword arguments then I'm adding here profile equals instance this just to make clear that the instance in this case is our profile object then I'm adding here if not created we trigger this signal only when the profile is updated not newly created then I'm creating here this variable email address here I'm accessing the email address table let's import this model class [Music] so from all or. account. models import email address and then I'm adding the method get primary which will give me the primary email address of this profile user if you go back to the database and the email addresses we can see here is primary property here because all of access more email addresses for an account but if we call the get primary method we will just get back one result the primary email so now we check if those email addresses in those two tables are the same so we say here if email address. email so this is the email property in our email address object we just created here so if this is not the same as the profile. email we update the email so we copy this line here and assign this value and then I'm also updating the verified property on this email object because now we have a new email address and we should verify it by sending a verification email now let's save it in the database so email uncore address do save and parenthesis okay so if there is for any reason no email address stored for a particular user and we call email on that non-existing object that would give us a server error and a broken website So to avoid this case I just wrap this code now in a try and accept block so I'm adding here try and indent and accept and here I'm just writing pass which basically means if there is an arrow just ignore it okay save this file let's check it out let's go back to our local development environment so Local Host colum 8,000 and here I'm changing the email address to plus five and submit okay now let's go back to the database and if I refresh here the plus two email should update to plus 5 and indeed it worked so now that the email has changed I would like also to send a verification email to have this email verified here for this I'm creating now a new view which triggers the confirmation email to be sent so I'm going to my views. [Music] file and I'm adding here New View and I'm calling it profile verify email and I'm adding here the send email confirmation function this is a function from the all o package which takes in the request and the user okay and then return to profile let's import this function on top from all o. account doils import send email confirmation okay now let's update our profile edit view so whenever the profile is updated I would like to check if the email address of the user is verified and if not I'm sending a verification email so I'm adding here a IFL [Music] statement so I'm checking here if the primary email of this user is verified so I'm starting here with the user request. user then I'm accessing here the email address table with email addressor set then I'm getting here the email where the primary parameter is true and then I'm also checking if it's verified or not if it's verified I return the user to the profile page else I redirect the user to the profile verify email view which is the function we just created you might be wondering why we don't attach the send email confirmation function straight in this view here I did some testing around this and it seems like like by the time we would call this function all o is not done yet with updating the email address table in the database by creating a view I make sure all the previous processes are completed okay let's add this path in our URL now so save this file we go to urls.py then we add it to our profile links here so here this path is called calling our view and here's the name profile D verify D email okay save this file let's check it out again edit profile let's change it back to two and submit right now this email is not verified in a database let's have a quick look [Music] so the five should change back to two and indeed and is not verified let's check our inbox and as we can see here I received a confirmation email and let's confirm okay the email is confirmed now let's double check in the database refresh the page and indeed it's verified awesome okay there's one last feature I want to add to my application now and that's an email notification when I get a new mail in my inbox let's create this functionality Now using again a signal so I'm adding this signal to my inbox app so I'm going to my inbox folder and create a new signals file now there are few Imports we would like to copy over from our user signal file so let's go there and grab the receiver and also the post save method we also have to import our inbox message class so from model [Music] import inbox message okay now let's create our signal first add the receiver using a post save signal and the sender is our inbox message table then we Define the function I give it the name send email then I rename the instance to message so message equals instance then first I check if created so the signal is triggered when we have a new message created next I'm figuring out who the participants are in this conversation because we want to send this email to the participant who is not the sender itself so for this I'm looping now through the participants of this conversation so for participant in then we have the message conversation participants do [Music] all and now I'm checking for each participant if it's not the sender of the message so if participant is not message. sender column in that case I'm sending a email and for the email we need a couple of elements so the first one is the email address so participant. email addressor set so we're accessing here the email address table and then I'm retrieving the primary and verified email so we only want to send emails to verified email addresses okay then next we have the email [Music] subject so the subject could say new message from and then the name of the sender so let's add here a variable in curly brackets message do sender and for this to work we have to transform it into a F string like that then next we have also the email body here we can add a message like I have good news for you if you want to create a new line here you add back slash andn and then we can say you received a new message at and here we can link to the website so in our case we don't have the final website URL yet so let's get the value from the domain property in the SES table so let's add this variable here so I call it sitecore domain let's transform it into a FST string and let's define this site domain variable now so on top here just under message I Define this variable so sitecore domain equals then we have to access the side table let's import this class now so on top here I add this import so from Jango do cont trip. sites. models import site now I have access to this class here so I say dot objects dog so the site object I would like to get is the site with the primary key one as we remember in our settings file we assigned this site ID or primary key to one so I'm saying here PK equals 1 so now we have access to our site object and to get the domain property I just say dot domain all right so we added our site domain now and we have our address subject and body now we can create our email object so email equals now to write the email we can use the email message class Jango provides let's import this class now so on top I add from jango.com import email message then I instantiate this object now email message and in parenthesis the first parameter is the email subject then the next one is the email body comma and then we add two equals this is a list of potential email addresses so we add here square brackets and in here I'm adding now my email [Music] address this is the object to get the actual email address I add. email I like that okay and finally we say email. send okay and again I WRA this now in a try except block to avoid server errors so I'm adding here try then indent those lines and accept and pass additionally we can extend the IFL statement the top to check if the email is verified so I'm adding here and and I'm checking here if a primary and verified email address of this participant exists okay save this file now let's add the signal now to our apps. file so D Jango knows about it so let's go to apps and in here we have to add the ready function and import here the singles file okay save this file and now let's do a test let's go back to our website here I'm going to inbox to write a new message I'm writing a message to the test three user which we know has already a verified email address from before so test three here I'm writing new message and submit message okay and now let's check the inbox for the notification email I got here a new message from Test 2 perfect and here we have the email with a link back to the website the website is [Music] loading we are still using our fre here on render and our web app is going into sleep mode after 50 minutes of inactivity so it takes a couple of minutes to wake it up again one eternity later but now we are back let's check out the Inbox and I got a new message from Test 2 awesome all right it all seems to work locally let's push the code now to the web server and test again on the live side so I'm open up my GitHub desktop here we have all the files which changed I give it a Title Here email notifications then commit domain and push origin okay let's go to render and as we can see it is deploying this will take again a couple of minutes okay they changesa live let's go to the website I am here on the added profile page first I test to change my email so I'm changing it to 33 and submit confirmation email is sent let's check the inbox I got the email I click the link I confirm okay this all works now let's test to write a message I reply to this message here send message now let's check the Inbox and we received the notification nice okay this is all for this video thank you for watching in the next video I will be looking into the concept of C NCD so continuous integration and continuous development which is an important concept when adding new features to a live site and also when working with more people on the same project I hope to see you again there until then Happy coding stay curious my [Music] friends

Channel: Andreas Jud

Views: 2,574

Keywords:

Id: H7WuQTtN6ac

Length: 32min 21sec (1941 seconds)

Published: Tue Nov 21 2023