Part 8

Send email from PHP with PHPMailer and Gmail, then build the full forgot password reset.

#digital technology #gce #parkwood vale #wjec

← Previous part Next part →

We get email working so new users get a welcome message, then build the forgot password process from the reset email through to a new password. In this part: 0:00 Why mail did not send, and the plan 1:29 A test Gmail account and its SMTP settings 5:47 Changing UwAmp's PHP mail settings 9:14 Downloading PHPMailer from GitHub 11:34 Sending the welcome email when someone registers 17:20 Fixing PHPMailer errors 19:44 Gmail sign in: ports, 2-step verification and an app password 25:00 The welcome email arrives 28:03 The forgot password form and its handler 30:05 Making a reset token and emailing the link 42:57 Checking the token and asking for a new password 53:45 Saving the new password and testing the whole reset Software: Adobe Dreamweaver, UwAmp, PHPMailer, Gmail, HeidiSQL, PHP.

Transcript

Welcome back. So in our previous sessions then we have set up our server, we have
created our database and we started creating our register, forgot password and login
functions.
We parked the forgot password function because the mail side of that wasn't working.
The reason behind it is some settings in the back end of UwAmp need changing.
The reason I didn't come up against that issue when I originally developed Parkwood
Vale is that I used industry standard hosted web server
technology, which I've been running personally for the last five years or so.
So there's a few little different discrepancies within it.
But I'm trying to base this tutorial series around something simple and easy you can
implement within a school.
with that in mind then what we're going to have to do within this session is fix the
SMTP issues, register for a dummy email address because you cannot provide
the WJEC with credentials linked to your students school email address or personal
email addresses so they need a throwaway email address that could be used if they
are using their mail functions,
Set up the SMTP side of things to connect via PHP and fire off emails automatically
when a user registers or clicks on forgot password and enters the correct details.
Okay, let's get into it.
Okay, so here I am back in my student desktop then and I'm going to start off by
registering
dummy email address. Now I've opened up my stuff edge here and what I'm gonna do is
just quickly jump into incognito mode or in private browsing mode because I don't
want any preset cookies upsetting what we're trying to do today.
I'm gonna go to mail.google.com and it's gonna come up it's not gonna know who I am
because I haven't got any of those cookies in place so I want to create an account.
It is gonna be for personal use and I'm just gonna fill in my basic
jobs going on from there then you can put in your basic information now
realistically your students should be over the age of 16 so they should be able to
set up their own email addresses and I'm gonna go in I'm gonna say that I'm male and
go on to the next step how do I want to sign in this can be a bit of a tricky
situation to put in place what I would suggest would be your center number
underscore your candidate number so six eight five six seven
underscore one two three four or something similar like that now they're gonna have
to be able to remember this throughout the whole of this project so making sure it's
something relevant to them is very important and also putting it in as your
candidate number and your center number does tie it back to the WJEC so they know
whose is what and what's going on.
I'm gonna go in though just to make it easier for me and call it parkwoodveildemo at
gmail.com because I need to remember this as well.
Password then it's gonna have to be something semi-complex because it's following
Google's password rules
and I'm going to click on.
It does help if you can type the same thing twice.
Who would have thought the longest part of that would be me typing in a password?
Anyway, recovery email address, I can just skip that stage, skip that stage there
and click next.
I express personalization, I'm not that bothered about things.
I'm just going to scroll through and confirm, agree to the terms and conditions.
This is just purely for my coursework, a sync call for me to send emails from.
I don't have to worry about marketing or anything like that because it's going to
send about 10 emails at most, probably from what I've set up.
Now the way that Google works, yes, continue with smart features,
is limited version. Let's just get through it.
Thank you. We do need to make one more change on top of all of this as we
go through. I need to go into the settings section up here.
I need to see all settings and I need to go to pop them forward in and I need to
enable
iMap and put that in place so that's all set up and save changes otherwise it won't
allow me to use my SMTP and then next what we need to do is find out the SMTP
details for Google just to make sure we're using the correct addresses so I'm going
to put it in here just simply Google SMTP and see what we come back with lots of
different elements we're going to go for the Google developers article which should
take us directly through how SMTP protocol should be accessed and what we should
use. So it says SMTP ports here incoming mail is there.
SMTP is just simply below it and it's got the different elements in place there we
need. Perfect. So what I'm going to do is I'm going to jump into my
UwAmp, launch UwAmp and this is where I need to start making
settings. There it is, here's my UwAmp client and the settings I'm going to be
changing are all based around this Apache web server or this PHP element sorry
another Apache web server the PHP element.
I'm gonna click on this little tiny file icon at the very end here that's gonna
bring up a text file with
absolutely every controllable element to do with PHP in place.
What I'm going to try and do, let's see if it'll allow me, is zoom right in so you
can see what I'm doing. You should be able to see this nice and clearly now because
it's not very much on the way of lines we need to change.
I'm going to use the control and F function to find mail.
Now it's actually the second element through and what we're looking for are these
settings here which say mail function and it's got SMTP localhost, SMTP
port 25. We don't want to keep those as standard.
Our local host doesn't have our mail server to be able to send anything and we are
not connecting via port 25. What we're going to do instead is we're going to SMTP
connect to gmail.com. We're going to copy that into
localhost and paste it. And I want to connect through ports.
Let's try 465 first and just see if that one works as we expect it to.
I'm gonna change that to 465
Now there are no line numbers I can specifically tell you for this or anything or
how to search for it Except for the fact we're working in that mail function We are
changing the SMTP to SMTP.gmail.com or whatever equivalent you use so if you decide
that you're gonna use Outlook you use this there and Port set up 465 is pretty
standard for SMTP Now the rest of these elements here, you can see these semicolons
in place. What they actually mean is that that element is commented out, so it's not
actually being actioned in any way.
The only male functions that are being actioned are these two that don't start with
that semicolon. If I save this then,
I close this,
let's minimize that for a second then, and I'm going to stop my server
and
restart my server so that those settings take effect.
I'm going to go back into Adobe Dreamweaver.
I should have my site as it was when we last set it up.
So let's close those down and very quickly let's open up our register application
here and that's where they put in all their details that's perfectly fine i'm going
to open up the sign up here and what i want to do is
i've inserted their details there that's where they've signed up this is where i'm
going to start putting in some mail functions now php does have its own mail
library built in but that will not work for us using WAMP or UwAmp or anything like
that we have to use an outside library there's a very detailed very good outside
library that we're gonna plug into which is very well documented which is PHPMailer
when I search for PHPMailer then there's going to be lots of different links to it
the top one we're looking for the github link so you could put in github there
because that's who's developed PHPMailer is the most supported version of php
mailer and that's what we're looking for now as i go through then you'll have some
instructions it has all the details about it it shows you how to use it using docker
which we're not going to be doing and how to download it as a zip and use it in
standard form which is what we will be doing so i'm going to download the zip file
and here's my PHPMailer file i'm going to open it up inside there we have
PHPMailer and all these different elements so you've got PHPMailer inside there
PHPMailer we're looking for in here should be a PHPMailer file
nope PHPMailer source PHPMailer is there so we're going to just slightly
change perhaps how one or two of these different elements work what we're going to
do is going to take this master PHPMailer file here I'm going to just show
it in a folder and I'm going to extract it using 7-zip to extract the files
to
USB UwAmp into the WWW folder and I can see I did this earlier just check it does
work let's just drop that there now
in my UwAmp folder in the WWW folder you'll see I've got PHP mail and PHP
mail and master that's the one I've just exported that's the one I checked the other
day to make sure it was working delete that one and let's
just rename this one and remove the word master
so we have PHPMailer and we want to remove master from there as well so that's all
in place so we have PHPMailer set up with there and it should all go
through as we expected to we got PHPMailer source
is there and all set up
let's close that down then close that down up
in fact actually PHPMailer
bring that back up and what i'm going to do is i'm going to
use these elements here so i'm going to say copy these five lines of code
into my php session start the session place those elements there and it's got the
path to these setups well the path to it in this occasion my
require is going to be going to
phpmailer source and accept execution
and that should have all of that in place now because i copied that into my ump
folder it's not actually in my local folder so let me just rectify that a second i'm
going to copy it from there into my documents into my WWW
folder which is just here and paste it there and now I should be able to
refresh this and
I'll see PHPMailer is there so it's all coming together it's all in place what I'm
gonna do is just simply put a full stop in these elements here and that should set
that up now
has its own classification for how we send emails.
So in this here then they put it in a try catch as a bit of error detection.
What it's saying is set up the variable mail as a PHPMailer, set
it up as SMTP and here are our host details.
We're going to go through and add some people to it.
We can add attachments if we wanted to.
We're going to give it some content and then we're going to send that message at the
very end there. So I'm just going to take these lines of code here including their
comments and I'm going to copy them and after my
user has been created I'm going to paste them there.
To start off with then I need to correct my SMTP that's going to be the same SMTP as
I used earlier to get into
my Google SMTP so it was just smtp.gmail.com.
Auth is true, the username password are the usernames and passwords set for
my email addresses that I've just set up here.
So in here then I'm going to put in pwvdemo
at gmail.com
The password then was
parkwoodvale123. And the port would be
465.
It's sent from pwv at gmail.com.
Now, it's really important that they match because Google is going to look at that
and say, this is our connected user.
This is who they're trying to send an email as.
If they're different, it's going to look suspicious and they won't send that email.
I can just put in here Parkwood Vale.
Address that is being sent to.
Now we should have that in our post email element at the top here so I can take that
address and send it to there.
The for name and surnames again we have at the top here from where the
user has provided us with their information and And all I'm going to do is
just concatenate those two elements, put those together, and that will put that in
place. So it's using the details directly from our post to insert it there.
We don't have any additional elements.
We could add in addresses, who they should reply to, any CC or BCC elements, but I'm
not interested in those. So I'm going to remove those out.
We aren't including any attachments.
This is a welcome to the library email.
We're not attaching files with it.
HTML is true, yes, subject, I'm going to just say simply, welcome
to Parkwood Vale
Library.
Body, I'm going to repeat that just to save some time.
And the alt body, I'm not going to bother with at this moment.
Now what that should do is set up and send my email address,
email to that user.
Logging is set up here. So what I can do while I'm testing and putting this in
place, if I go back to here, is if I do wrap this in a try catch, if we have any
errors, it will tell me what the error is.
So let's grab that catch there.
just drop the catch at the end here and we have echo the message can't be sent and
then the details as to why the message can't be sent so there's my sign up element
there if i look at this that's already gone up i don't need to worry about that my
config's in place i'm working on the sign up function let's not do the same mistake
last time and let's put that in place and let's go through and see if i'm getting an
email now what i can do is open up my standard where browser here go to
and just continue and here it is on my account then I'm going to
register because that's the function I want to look at my name is James Jones it's
going to cpd mrjjones.co.uk that's my cpd email address and password here I'm going
to put in password one two three
now if everything has worked correctly i should get an email to this address that
will allow me to see what it looks like and see that it has come through so
submit that and required fail to open could not find that
online sick could not find that there so it's having issues finding these PHPMailer
elements.
PHPMailer, of course, I put it in PHPMailer again.
So there's two PHPMailer elements there.
So let me just copy that.
Paste, paste, paste. So now it's going to PHPMailer, then PHPMailer, then it's
going into the source folder and it can find what it's looking for.
So let's save that. Sign up. Let's put that up.
and hopefully just refresh this page and resubmit that details.
Class MTP not found in line 43.
Okay, let's just try it without the logging a second then.
Save that.
Put it.
and refresh it.
And find variable line 42.
I know why we haven't set up that mail is part of
phpmail.
Yup, I forgot to include that so that it knew what mail was and that should now also
pick up and include those elements as well.
try catch back in place and let's put that up so all i forgot to do was i forgot to
include mail is a new type of PHPMailer so that it knows what mail is
still doesn't like that smtp element okay let's just comment that out for a second
put that and refresh again.
Line 44 this time, what's I not happy with?
Mail could not be sent. There we go.
Could not authenticate.
Error incident.
Okay. So I've got a duplicate entry for me.
And it's saying SMTP could not authenticate the user on my SMTP side of things.
So we've got 465 there.
What if we were to change the port to 587
and see if that works?
587. I know it's not going to like me because I'm doing this a second time, but
let's try that again.
Still telling me it can't authenticate.
I need to open up Heidi for a second.
HeidiSQL.
and let's jump into users and just delete that user a
second there we go
okay so looking at that it seems to done all of that but has it sent me an email
That would be a true test. Let's have a look.
I'm going to open up Outlook.
And just load it to see if anything has come through.
But I can tell you now my watch hasn't vibrated, so it's not looking very promising.
And nothing has come through at all.
And nothing's even gone into junk for that email address.
So one reason why this might be happening and giving us an error is Google
doesn't like anything web-based that could possibly scam somebody, cause
offense, cause any sort of malicious damage or anything like that.
So they don't allow what they consider to be less secure email accounts to send
messages, less secure clients to be able to do different elements.
So what I'm going to do is I'm
for Google. I'm going to go to the security section and it used to be quite simple.
We could scroll down to this section here that says allow less secure access but as
you can see this is no longer available.
What we have to do instead is we need to enable two-factor authentication.
And once that's enabled, what I can do is go into my two-step
authentication and I can set up an app
password.
password for a mail function that I can do from other
and I'm gonna say P would Parkwood Vale
email and I'm gonna generate that password now Google has
generated that password for me as opposed to me coming up with it I can copy that
and click on done and when I go into my authentication by paste
that password there that should now authenticate me through.
Now let's have a look and see if that has worked.
So I go back to the account page I want to register I'm gonna put in my details
and
I'm gonna submit that there.
Now it's telling me that it still can't authenticate me.
I know why it can't authenticate me.
There we go. Let's try that one again.
Refresh this page. Continue.
Could not connect to SMTP host.
Failed to connect to SMTP server.
Connection error.
Okay, so that's connected on 587.
But if you remember, when I was in PHP in here, I was in the mail function
I actually set it to 465. Let's zoom in again
so let's change that to 587 so it matches save it
close it and that's automatically going to stop and
restart my element here now running perfectly fine and let's
refresh it
Password 123.
Password 123. Submit.
Message could not be sent. Could not connect to SMTP host.
Just revalidating all of these elements turned on brilliant.
Okay.
Nothing's still in my sent element there.
Google SMTP
That hasn't changed. Okay, authenticated the 587.
enable implicit DLS connection, TCP port,
SMTP secure to PHPMailer.
Okay, let's give that a try then, which is basically changing the type of
encryption within our setup. Setup.
Okay. No errors this time around.
Did I get an email?
I did.
If I drag this over from my other screen, you should see it.
I now have a Parkwood Vale email from Parkwood Vale demo to me with Welcome to
Parkwood Vale Library. So after all of those settings, and I will put together a bit
more of a guide rather than just this video to it, because there was quite a lot we
had to go through to get to this stage.
We are able to send emails. So every time a user registers, if
it registers the user, it will go through and send them that email to say,
welcome to our library system.
we can go back now to our forgot user well forgot password section and get that
coded up so that's working as well and have it reset our passwords i'm going to
pause a second have a quick drink and then we'll come back and get that done
okay so in this part then we're going to create our password reset functionality
and let's dive right into it as you can see i have a forgot password page
now all i've done there is right click create a new file called it forgot password
and actually stole 90 of the code for our login
I start with my session. I include the header PHP section so I can see that.
I don't want to do that part. I want to zoom in.
There you go. I've got my slider gallery and as I come down I've got my span
for my sign-in error. Still called sign-in error on this section at the moment.
I've got my form that this time around goes to the password reset page rather
than my login or sign-in page.
but this time around the only thing I'm actually taking is their email address
called email and I've got my submit button.
I've got down the bottom then the same stuff, the forgot password, not a member of
register, all the same usual elements that were on that login page.
Just copy and pasted it over and removed some of the elements that weren't really
relevant. If I load it, so account and I go to forgot password
you can see here how it looks.
So from there then what we next need to do is capture the email address that they
send to us. We need to check if it's in our database and if it is in our database we
need to
give it a unique reference that they can use and reset their password.
To do all of that I need to start with a password reset page.
So I'm going to go into new
reset and again dot PHP because everything we're doing is a PHP file.
In my password reset I don't need any of this but I do want to start my PHP tags.
As always my next step should be my session and I want to start my session
in place there and I am going to be including
the connection to my config. So I want to include and just simply let's check
these in place. It is config forward slash connection dot
PHP. So that it has access to that setup and that in place there.
As I'm going forward with this then, I am going to be using some of the mail
functionality we've just added to our register function.
So I'm going to take it directly from my sign in page.
Nope, sign up page. Sorry, my bad.
I'm going to use these elements here.
I'm going to copy them. I'm going to paste them over.
Now it doesn't matter if they're above or below the include, it shouldn't impact on
how it runs.
Let's zoom that in a bit so you can see what I've done so far.
just like with my sign in page because a lot of the functionality is going to be
similar to that i am going to go in i'm going to grab my error
array setup to see if there are any errors with my email field and say that
it can't be empty now i'm not going to be posting passwords so i don't need to worry
about that but i will take my if else here my gatekeeper to my error to
say that
send them back to this time instead of the login page they're going back to the
forgot password page and that's put
that in place now I'm on to this section here this next section and a lot of it will
again be very similar so I'm just going to very quickly just grab the whole of that
file actually and we'll edit it as we go along so we still want to
select email but not for name and
this time from our users table where the email is equal to our email address but we
don't need to worry about password this time around so all we've got is a very
simple select to see if they exist in our database we're going to get the results in
our query here and if the number of rows is equal to one then we're going to proceed
to this section here i'll come back to what we're doing in this section here for a
second i just want to address this bottom section we are no longer going to be doing
an else here because we always wanted to return back to our same
location our location is going to be our forgot password location and our
message is just going to be slightly different it's gonna say if you have an account
you will receive
a reset email
so we're not guaranteeing that everyone's email we're not saying that if you don't
get a reset email you don't have an account or if you do have any we're just saying
that if you exist we're going to send you one now inside of this then inside our if
this is where it becomes really important we don't need to worry about fetching rows
or anything like that we can get rid of this section here we will be putting in
place our
email section so i'm going to go back to our sign uh our register section which is
our sign up and I'm just going to take my PHPMailer and the whole of
this try catch element, copy it into here and paste it.
So this is the part we set up in the first part of this video where we had in
place PHPMailer is true, our SMTP, our host is Gmail, our
email address and our password based on our app password set up earlier in this
video. Our port is correct,
but our address now is missing these details.
We could pull these details from our select here and loop through them.
We don't really need them. If I just went like that, it would send an email to that
recipient and their email client will call them whatever it naturally calls them.
So I can remove that entirely.
Now it is a HTML email. The subject this time would be Parkwood Vale Library and I'm
going to say password reset and the body
is going to be completely different.
Now this is where we're going to be including some information about how it's set up
and how it's put together and what they need to do to get to the next stage to reset
their password.
I'll come on to that in two minutes time.
That's all set up here. Let's just get this indentation fixed so it looks nice and
neat and it's a bit easier to read.
I don't need this on the side here so let's minimize it and there we go you've got
the more detailed view there.
So what we've said is if they have an account send them an email resetting their
password but at the moment we haven't actually done anything to reset their
password. We need to first of all set their password to something that we know
so that we can tell them what it is
function within SQL and we're going to update our users table
and we're going to be setting our password value to
something I'll explain what in two seconds time where our email
value is equal to and this is where we're going to put back in place their email
address as we did previously so that's that function there.
I need to finish it with that tag and and comment it.
Now just like we did when we were setting up our register we need to execute that
email function and make sure that we're actually sending it.
So I'm going to do connection for my MySQL database connection.
I want to present it with a query and it is simply going to be my SQL
query and put that in place. with the dollar sign so that it knows we're talking
about that variable there. So that's going to perform that query then.
So the last part is filling in what's going to go in here.
Now before we perform that, I'm going to save it as a code because it's going to
be a reset code for our password.
And I'm going to use the hash function again, like we did with our password so that
if it is encrypted, we don't know it, neither do they.
and we're actually going to cheat ever so slightly.
We're going to use a hashing algorithm called
CRC32 which provides us with an 8-bit code and it's going to be using
our post email address.
Now again we talked about this briefly last time we're going to talk about it again.
we want security to be the height of all of this if I did that and just did post CRC
you could go on to the internet let's go into this one here and let's go on to
CRC 32 generator
and if I open this up we have a CRC generator where we can choose which style we
want we want CRC32, and if I put in place here, cpd.at
mrjjones.co.uk, I click on CRC32,
it's going to give me back my answer when I come through to export it.
There are lots of different ways in which we can generate our CRC32 codes.
We can also decode CRC32 quite easily.
but if we were to include just a very subtle change to it and we put the time
function in place every time we do it it would kick the current timestamp from the
server and apply that as a salt which would give us a unique code every single time
increasing the complexity of the hashing algorithm and making it more difficult
for anyone to bypass or try and hack through it.
So I'm going to put that in place and I've stored this code.
Now because we have that time function there, we have to store the code.
Otherwise when we use it here, we couldn't then use it down here where we need to
use it and then it would get lost.
So in there then I'm going to simply put in my speech marks, my full stops and
add in code. So what that's going to do is if I exist, take
the email address I've given you which exists and its current timestamp hash it as
CRC32 and store it in code. Set an update command to update my users table, change
my password to my code I've just created where the email address is whatever I've
sent you which should exist in my database and then perform that query.
Then I want to go down here I want to set up my SMTP with my username and password
on the right port and I want to set it to send an email from me
to that address which again we've used several times and I'm going to say is html
true it is Parkwood Vale password reset and it's going to say in our message that
your account has requested a password reset and that we want to
give you the code to do so so what I've got is your account has requested
visit HTTP colon for such localhost for slash reset password which
we haven't done yet we will do that in a second and then we're using a get string
now I get string I talked about previously we had get we had post we had put and we
had delete post is generally hidden from the user get is generally visible to the
user both of which we can access using either dollar sign and it's go post a
so we can retrieve that information.
And what we're saying here is go to this webpage,
include, because that's the question mark, the get information for email, which is
our email address,
and the ampersand sign here says, and the token, which is our code we set up here,
which is why it was important to save it because otherwise time would change it
every time we go through it.
Then we're going to go through, we're going to put that in place.
I need to terminate that to stop the error from showing,
user and then catch the error if there is any tell us what the error is but
realistically we shouldn't get any errors anymore now we fixed that PHP fixed that
SMTP outgoing once we've done that we're gonna redirect back to our forgot password
page with our sign-in error saying if you have an account you will receive a reset
email well it's not a sign-in error anymore is it it's a
reset and I'm gonna leave it as error even though technically only one of these is
an error it could be reset message if you wanted to now I do need to pop this back
out and I do need to go into password reset and make sure I push that again yes to
all make sure that's all pushed up brilliant and forgot password here
sign-in error doesn't exist it now is reset error so
forgot password let's put that up as well there we
go now if I go onto this page so I refresh this page a second there's nothing there
I'm gonna go on to here mr. jjones I'm gonna submit it and it's come back if you
have an account you receive a reset email so that's all working perfectly did I get
my reset email yes I did Parkwood Vale library password
reset pocket while via that demo to me and it has your account
reset like I said with this jet string now this is actually
running on a different machine this is a virtual machine this isn't so I need to
copy this a second I'm gonna say copy hyperlink and if I go over to here and paste
that hyperlink then it'll take me and they'll say it cannot find that page I know we
can't find that page I haven't created that page yet that's going to be our next
step so over here let's get that started let's go new file and we called it
reset password dot php
and i can put that there now if i was to put that
and refresh this here it now finds
the page but the page doesn't do anything let's open it up let's have a look let's
put that page in place and let's see what it is we're gonna actually do with it so
PHP to start with session starts at the top
to include our session
we want to include the connection to our database which is
in config forward slash connection
dot PHP let me just double check on these yes it is just simply
conflict there we go so let's have that in place from there the very first thing I
want to do is print for you just so you can all see underscore R and I'm gonna do
under dollar sign underscore get and I want the whole get array
so if I do that and reset password I put that up and I refresh this
page dd line 5 is not happy let's just do print our
get on the whole get array I don't want to specify anywhere and it's telling
me that the email is my email the token is my token from by here but we did an
ambasad here just to show how this is working so add another element I'm going to
say message equals, and I'm going to say
hello. I'm going to do that message hello appears.
Now, this is all in plain text.
Anybody can see that information at the top there.
So it's always important that you don't put anything of high security or high value
in a visible get command. That's why we use
post commands instead.
So we know that works then.
We've got our connection in place.
We've set that up. We're going to first of all check to see if there are any errors.
And the errors are the, sorry, not any errors, any errors.
And password reset. Let's grab this.
We're going to say errors.
Copy that and paste that there.
But it's not going to be post email this time.
it's going to be get email and I'm going to do the same thing with
token so I'm going to say get
token and I'm going to say that the the token field must not be empty
and just like I've done here with my gatekeeper I'm going to check to see if there
are any errors and if there are errors redirecting to the forgot password page
saying error on the password reset
page
please try again now that did show me if I go back
into here a second I've got error on the sign-in page that's not quite right I'm
gonna steal this message I've just written copy it into here
save it and as one last thing password
reset let's make sure I put that perfect so we've gatekeeper there we know now that
we have to have an email and a token to get any further if we haven't got those then
it's not going to do anything I'm going to put in place else to get around that now
so there's my if else command and this is where we're going to be trying
reset their password.
Now we need to show them a sign-in page, we need to show them a page where they can
put in their password so that they can actually go through to this stage and reset
it correctly.
And the way we're gonna do that is we're gonna copy some of the elements that are in
our register page but not the whole thing.
So let me open up my register page, copy all of the code
new file and I'm going to call it new password
.php and I'm going
to highlight it and paste it there.
So the session started. I've got all these details in place.
I don't want first name. I don't want last name.
So I can get rid of those two.
I don't necessarily want email address.
I just want the
password elements here and then I'm gonna have this form host
to my reset password now I know I have
two elements going to the same page a post and again and I'll deal with those in a
second and explain how we're gonna differentiate between them now if it is in
place and it does have its resetted password posted to it then that's when we
need to update our password so let's put that up for a starting point and come back
to here so it's saying does it get information
exists if they get information exists then what we need to do is we want to display
what's in our new password page so I'm gonna head up location
and redirect myself to the new password
page and that's gonna put that in place
that's gonna bring me to this page here but I do need to put in
place
an email equals and I want to put in place what email
they've already given me now without having the email that they've given me
when I go to this new password page I wouldn't be able to go any further than I need
to with this I do need to have my password in on here now my email sorry on here but
it is going to be a type of input that is hidden so type
is hidden the name
is going to be email and the value
is going to be some PHP code
so inside there we can start our PHP tag and end our PHP
tag we can echo what's currently in underscore get
and let's capitalize that get
we can put in place email so we've got that there
we're also going to do the same thing for our token
and that's going to ensure that when we visit that page if the get information is
there it redirect us to this page here with our get information that we need
to progress further so let's go add I'm gonna say token
equals and in here again I'm gonna do
the same thing yeah
token there we go so if I've got to that stage
there and there are no errors because my get information is in place then it should
redirect me to new password which should now exist with these details hidden
as hidden inputs I'm gonna put this as token here
the reason we've got the hidden input for email and for token is that anyone well we
don't want anyone to be able to just hijack and get to that location without the
saying so.
So now if I do this, I should get redirected.
I didn't get redirected.
Let's see. Reset password.
If empty errors, else had a location, new password there.
There we go.
perfect i kept that we need to drop that out so in new password
agree to terms and conditions that can come up as well
now this page here it still has our token information across the top here let me
just refresh that. I didn't put it.
New password page,
put, minimize that and refresh it.
Here we go. It has my get information across the top.
If I actually inspect for a second, you will see that I have a form.
And when I expand it, there are hidden values that have our right hidden information
in place. So that's all working as we want it to.
I'll put in my password there twice and I click submit and it should go forward I do
need to make sure that on new password password repeat phone control password phone
control these two are required and let's do that
again here and save that and let's put that up
and with a refresh I shouldn't be able to submit without them
because it wants it filled in so that's done that's this
new password page done for now we may revisit it to change a few bits and pieces but
the majority of the elements are there we are back on this reset password so we've
got no errors with our get information we want to copy this and
see if we get any errors so do we have any errors trying to get our
post information because our
form will post this information to us along with our
password information so in there if I go back here I called it
password and password repeats so they're there so name is
password and name is password repeat so email is password and password
repeat so when we get down to this section so when we go through the logic we're
going to see do we have the get information yes okay clear that error element if
there's nothing go straight back to that one page once we've cleared that so we have
that get information we can then go on to see do we have any post information.
Once we have our post information check gone through we can say yes we have our post
information and we have got the right details.
If we have any errors so I'm gonna say this same gatekeeper if
empty errors we are going to redirect to this page here so we have changed it up
ever so slightly
and that will allow us to make sure we don't have any errors any information missing
before we go on to try and reset our password with all of that in
place then if i was to submit this here with password so let's do q and
q and i submit it to that the reset password hasn't been
found reset password if I miss type somewhere oh yes I've forgotten
II I got rest password so let's go to new password was it gone
new password I hovered over it and reset password
let's put that up
refresh it just to be sure QQ submit there's an error on the page okay so it's
a look at our logic see what we're doing we come to this page we're gonna see if we
have any gets okay and if we have any errors take it back to there we don't have any
getting that information to the posting that information to it so we need to check
for posting it first then check if we're getting it okay so errors post.
Are we posting it errors from there?
No. Are we getting any information there?
So let's go like that.
So errors is empty.
Do the post information exist or the get information exist?
If there are errors, go back to that page.
Otherwise,
start the array again and check if it's post errors.
If there are post errors, then go to this page.
Okay, should work. and save and let's
put it on that one I want this one
and Q Q submit
Q Q submit
Posting is giving us no errors.
If we post the information, errors is there.
I'm exactly trying get the information and then if errors is
empty then go there
okay so it's done is the post empty yes is the get empty yes go back
there the post empty no come over here we don't need to check again to see if the
post is empty.
If the post is empty, yes.
I think I'm over here and check is.
Well, we should, if post is empty, yes.
Else then.
Okay. So we're saying, is post empty?
Yes. Okay. So If post is empty, then is get empty.
If get is empty, then go to error.
Otherwise, go to new password page.
Q, Q, or two even.
Post.
If empty, error. If not empty.
Let's see what's inside.
Errors.
Print underscore R,
dollar sign, errors.
And let's die so it stops processing anything else.
So I'm on here now. We should have a posted element to go through.
Nothing's changed yet.
New password.
I always put in the wrong file up all the time.
Let's try that again.
There we go. that's what I expected to see and I should be able to go like that and
put the right file up
I do apologize for putting the wrong file up for so long
that's what I expected to see okay so the logic is there I was putting the wrong
file in place
if there's an error on our emails token password or password repeat not being set
then check the get if the get has information in it then show
the re password reset page otherwise show an error
page now a lot of these can be reduced down because we can
use single element ifs but it's not really going to change much it's just
removing those brackets it's not going to be a massive impact on your code.
All of that in place though, we can finally get to the logic where we're actually
going to change that person's password.
Now they have sent us their password, they've also sent us their email without
knowing it, so we can use the update command like we did in our password reset
function.
And it is just this one here.
Now, password reset down by here.
What I'm going to do is I'm going to say update users set password equal to, this
time around, get password
where email is equal to email and then run that query.
Really simple.
from my login function now that's my login page is my sign-in function
that I want to select the details and redirect
them to their account page so reset here then I've updated their password I'm going
to select email for name and surname and is admin from users where email is equal to
email and password is equal to password when it's been hashed and then
put that in place I got a bit of an error here because I had an if I just need to
put that there now that has given me a vital reminder that our password should be
hashed and it's not by here so set password to equal get password would not work
I have to do set passwords equal to and copy that it's not the
get password it is the post
password there where that's all set up and that's all in place so let's go through
post post post post perfect get get perfect there so update
users set password equal to whatever they set in a password where email
is equal to that and I want to put in one last security element I think I say
and password is equal to
and
what we're gonna be looking for is our dollar
sign underscore host and this is going to be token
so what happens is it says does this username
and tokened password match? If so, set the password to what the
user said. Then go through and redirect them to that element there.
If that doesn't work, just like we did with our login beforehand, we need to
redirect them. So I'm going to say else
and I'm going to say that there is an error on the password page.
Please try again and redirect them back to that section there so all in all i
have the ability now to reset a password if i come here and i refresh this
page ever so slightly we have our token let me just get hidey open we can have a
look at what's going on in the database while we do this HeidiSQL database
thank you open
and let's go to users data you can see not the password token
is 38C182B2, what it is up here.
I'm going to put in password123,
password123 again, and submit.
Now that's taking me through to reset password.
And if I refresh this, nothing's changed.
Chances are, I haven't put this page up properly.
It's one of my most common errors.
And let's refresh that.
I've gone to my account details it's found the information about my account
it does have an error in place but we won't worry about that too much right now and
if I refresh this it's changed my password to password123 so that password
reset functionality is all fully working and just to show you again if I go into
forgot password I put in my email address and submit it it comes
reset email so let's see here's my reset email
again it's a completely different code my token here that's because it's related to
the users time as well I'm gonna paste that here
it's gonna bring me to my password reset page
oh it's not it should have done.
Refetch, there we go.
So that is there.
Reset password.
Okay, so there is definitely still some gremlins in this logic here.
Get email and get tokens.
Not if they're empty. Okay.
i'm going to print here underscore r and errors
to see what the gremlins are and again i'm going to use the die command
just to prevent it from processing any further php commands on my reset password
email
field must not be empty
all right so there's my ah okay that makes sense i get to here
and i haven't reset
errors to an empty array because i haven't reset errors to an empty array
it's still finding the previous errors and redirecting me there but now by resetting
those errors to an empty array if I put that and refresh this page I should
get no errors if I remove my print and my die commands and I put that
and refresh this it shows me that I
put in password one two three
password one two three submit I'm to my account if I come here
and use that password
123 submit blogs me in so we have all of that functionality running right the way
through we can request a new password via email it will send the email we can
authenticate that we've received that email and reset our passwords i know it was a
hell of a lot in today's session you can see why i want to do this session
separately no i don't want to save any queries
going through setting up the SMTP is an important step and you can see the emails
from SMTP that have been sent you will have to set it up in some fashion it is
possible to I'd say it's possible that using Outlook
or Hotmail might be an easier solution because I don't think they have the same
requirements in place for the app specific passwords but I wanted to go through one
of the more difficult ones with you so that you have the full steps there, what
you choose to do with your learners is completely up to you.
This is a difficult session. This is why it's had a session all dedicated completely
to itself. If there are any issues, any complications, any confusion, anyone not
getting this code working, please do not hesitate to reach out and contact me, and I
will do my best to try and triage what's going on and perhaps redo a bit more of a
video to go into more depth about something if it's needed.