How to use Whatsapp web JS - Node JS Setup and Authentication

hello and welcome so in this video we will be speaking about how we will be implementing WhatsApp webgs with front-end and backend this is by using node.js on the backend and friend and on the front end we will be using vrgs which is Yep this is a famous framework which is used on Phantom of course we can also use the same thing with uh what you call it but angularjsr or with you know next years so all of these options are available for us so we can do that and yeah we can we can store the information over there okay so let me just open a visual studio code and I am going to open a folder which is which will be in documents and the YouTube projects that I've created I'm going to create something a WhatsApp web change over here I'm gonna one is the client and one more folder which is the server so okay for client I am gonna you know go to C required and I am gonna do MPX create react app WhatsApp web.js client okay I'm just going to create um an application for me or perhaps I could have directly opened up in the same support but it doesn't really matter I'm going to create masks over here and also I'm gonna go to server.js sorry server and over here I'm gonna do npm edit this package Savannah WhatsApp web tears server I mean I'm sure you can forward all of this stuff okay so I should have a package this one and I'm gonna create index.js file and let me do npm I express there you go cool so now uh let me do let me create a Express app you know I'm gonna use GitHub copilot to basically help me to create this application create a basic node.js with Express app not sure if it's going to do that I'm gonna run it on 3001 instead of yeah and I am gonna do like app Dot listen on board whatever insert log cell and also I am gonna install I'm gonna let's move to WhatsApp web.js and let's do this simple thing which is npmi WhatsApp web.js emitter is a very very powerful library and I would highly recommend you to use this because also because it has you know um a lot of a very big community and also you know there are a lot of developers and tools that I've already implemented the same thing which is why I recommend you guys to implement this it's gonna take a while I am gonna go over here and check if it's finished no matter what npx is going to take a lot of time to create create a react app anyways let's move forward and also okay there you go so now I guess this is created and that we do not index.js there you go so if you see the server is listening on or 3001 then we started server and let's go back over here and yeah so what we'll do so ideally you know in WhatsApp web.js we have three types of authentications one is the local the local authentication We There is remote authentication there's no authentication in this video we'll be looking at local authentication if you need me to create a tutorial on remote auth just let me know in the comments I will create one but for the sake of this video we will be using look a lot okay so now it's pretty easy what we'll be doing is that we will just need to make sure that uh we Implement client and I'm gonna do require um WhatsApp this okay this is the client if you look at the code if it's moving over here because all of the stuff like that under it send send scene Get No variety all of these things will be stored this I mean client has all of that and also it's really easy to spawn a client which is by using um you know the const line so what we'll be doing is that we'll be creating a class or Whatsapp DS maybe something like that and I am gonna create a class for WhatsApp web.js client so yeah Plus what's up um you know it's really easy to basically initialize so I've created a simple function actually you know what let's not create a class let's mail that let's directly implement it over here because then what did your heart think so so but before I before I move forward I just need you to understand what does a client client is the browser that we want to spawn so behind the scenes the way that WhatsApp web.js works is that it's going to spawn a WhatsApp web.js uh WhatsApp web.com browser on chromium or you can set it up to use Firefox or just Chrome but ideally it's it's just going to use a a browser so if I spawn if I write the score to if this line of code is excluded that means a browser is opening browser with WhatsApp web.com is ready to use or is open which also which will which we'll also see so if we run this code then this will run up and also there are events like on QR code listener on ready on message so let me do client dot on so this QR code this QR code event and let me just write the QR code okay so I'm gonna write a console log over here to just you know um yeah and there is also client.one ready and use that it's not going to done anything so bye so the client is ready so now this client is has different options let me open up the options and see so it has like odd Puppeteer options it has like like different different options over here and also has something called session or there's something called client ID which we will be using so let me show you the options that will be passing so one option that we'll be passing is the session okay so so you know we can we can ignore the session we we will speak about session when we learn about the authentication path which is using local auth okay so now let's just add perpet here okay and headless headless means you know if you make it true you won't be able to see the browser but for the sake of this example we'll make this headless response okay um authentication or strategy that we'll be using will be new local auth or so we will have to import this log a lot actually let's go to the documentation and let's look at how the local author works this one so all we have to do is this new logo load instead of this one yeah and we can implement it from here oops there you go and now if I open it up it has client ID it has data path so let me show you the options that we are required to pass so one important thing is client ID so why do we need client ID so let's speak about that we need client client ID because we want to identify that this browser belongs to this particular client so it might be a use case from product or maybe someone that you know this client ID I mean you want like different different web browsers to be opened up and different different users might might be able to connect your connect to your server so in order to do that we need to identify that this browser belongs to this so and so user so so so I'm gonna give an example suppose user a is um going to um you know authenticate on browser client a client ID a and user reasonable so basically we will be able to identify that browser a belongs to belongs to client Ida and yeah and also we can later revive the session as well okay cool so I assume that you guys understand this part which is an important part of this whole tutorial so for now let me just pass the client ID as maybe something like you know your client ID like it says so this is very interesting I'm going to show you why why how how whatsapp.js Works behind the scenes okay and now once we have this we will make this headless response there are different things to make sure that why do we have why do we want to make it make it as headless as false and why do we want to make it as headless true so basically you know when you are running this thing on an actual server suppose if you're using an AWS elastic Beanstalk or maybe Eco instance of this like P2 micro so you it's it's recommended that you use headless as false because of the fact that it takes up a lot of RAM the browser especially Chrome is going to take a lot of ram of your instance um if you're wanting to save money then you should definitely consider making it as false true true which is which is going to open but which will not take that much of ram compared to Atlas as true all right with that being said let me just make it false for the sake of the tutorial and also I'm just running it on locally and I would recommend you guys to use this okay cool so now let me just run no several of this I mean index.js and let's see how it's going to open up the browser let's see if it did actually execute the code okay one thing that we are missing over here which is the important part is that we need to initialize the client client dot initialize so initialize if you look at the code initialize is just going to okay so basically sets up events and kicks of the authentication request so it's just actually going to open up your browser so here we are attaching the request and keep in mind that don't keep your initialize over here make sure that you keep your initialize after your your events which is the recommended thing and also since we are using this I'm also create I'm also going to create a sessions um sessions object all session subject maybe that will make sense okay here I'm gonna install all of the sessions one zero authenticated Okay cool so now I am gonna do node.js no index.js and show you guys can see the magic if you can see over here and WhatsApp web.js has automatically opened up with if you can see over here with a nice session your client ID and also it's going to open up a Chromium browser which is QR code and as soon as that opens up you'll be able to see the QR code and now if I scan it's going to have all of the so now one important part is that if you so if you see over here automatically file has been created with the client session slash your client ID okay suppose uh if I spot if if someone you know suppose this client ID would definitely come from front end or maybe anyway then you should actually put in so ideally you should just you know make sure that this is coming from content and if you basically run this on a song using the socket server or maybe uh maybe Express app which just really listens to your requests anyways so now if you see as soon as there's a change in the QR code on actually the website it will just open up yeah I mean you know it will cancel log this why do we see this because it's the many QR codes are in this way we need to use some kind of package to basically change the way that we are seeing the QR code okay and also for now I am just gonna scan my mobile phone from here so let me open up my WhatsApp uh let me find where is WhatsApp okay and let me scan it this is also the reason why I've used WhatsApp webs I mean um yeah and also make it like Atlas is false so as soon as you we are authenticated uh we should get that client is ready okay so it's gonna tell me that it's syncing it's Keep app open or whatever once it's active that means it's authenticated so one important thing that you need to see is that I'm sure you're wondering what are these for all of these files so these fines are just you know it's just the let me just dock it out so that I can hide all of my chats so if you see these stats are just you know your application storage your local storage your cash storage your index DB yeah index DB and all of those information if you see all of these things are there and your local these things will also be inside over here just have to find it it's just how the way that it sees the way that it's implemented and Google storage if you see over here it's gonna have all of your files and there you go so it's Gonna Save all of the files on a log file and then you know hook it up again so now if you see I just forgot to write open code which is I am gonna do this okay so since we know that you know I'm gonna stop the server okay now you might be wondering how I can basically uh you know scan the code I mean since I have already scanned and since you can already see on your WhatsApp that you have already linked a device now if I run this server again since I'm using the same client ID let's see what is going to happen start the server it will be similar to what we are so let's see what it's going to do so it's just learning it's not showing the QR code it should ideally show me the QR code and advila how did it actually spawn the browser with my authenticated WhatsApp okay so the way that WhatsApp web.js works is that since we are using the same client ID your client ID which is this one it's going to take all of these files put it inside the browser and start the WhatsApp web which will automatically make the browser active so that is how it works behind the scenes so now if I do client id1 and run the server let's see what's going to happen and look at this file you will have a different file over here and also you will have you won't be able to see my session all right so now this is how local authentication Works which is why this client ID is very very important so now in the next video we will be using we will be configuring front end of this website and here we'll also be using socket IO to basically listen to the messages and create a very simple application to authenticate and just start listening to the messages from the backend all right so see you all guys in the next video till then goodbye and take care

Channel: Mohammed Khan

Views: 22,790

Keywords: whatsapp-web js, whatsapp-web.js tutorial, whatsapp web js multi device, whatsapp web js tutorial, whatsapp web js session

Id: Nr7zmMT1KD0

Length: 19min 36sec (1176 seconds)

Published: Sun Mar 12 2023