Google Calendar integration with node js and express js | OAuth 2 #nodejs #googleapi

hey guys welcome and hello to this video I hope you are doing good uh right now look I'm planning actually to make an oauth 2 integration so work to buy Google so with what what do I'll try to get my token and with that token I'll try to uh I'll try to I try to schedule events in the calendar Google Calendar so it's like Google Calendar integration sort of uh trial right so let's see how far can we reach with that so uh this is not a tutorial this is me coding more uh more of like me coding uh first thing first what we'll do is we'll uh we will initialize the project you know we can use plpm Express Google apis and that's what you call oauth 2 and Google uh this is how this works okay so you basically gonna you basically kind of like have a scenario okay you basically but I want the code for JavaScript web app server side web apps yeah that's what I want and that too for node.js that's what I exactly want so as an example of how to do it in node.js so if I go to Source if I go to apis Okay Google API or TS whatever okay Google APN or JS client is that an example is that a library through which we can do it I think this is a library uh yeah as a dedicated library for the doing this you can call like Google apis okay that's the thing which we require uh so let's add Google apis so we've added Express and Google aps Express for handling all the HTTP calls like for for the authentication and Google apis for actually handing with Google stuff right so yeah let's go ahead say code and now we will have SRC no the spelling is wrong office I'll see right let's change the theme I'm not liking the stream also here react you know this is cool okay so uh let's name it like index.js right import Express keyboard Express promise press I will think about other stuff later on um [Music] okay so we have done this this port definition so you can say app Dot listen on this particular port and then we can um I might do this and then we will log that server started on Port whatever Port this is right so yeah this is this a simple express application now the first step is actually to get the user login to Google so we'll have like simple app dot uh maybe app.getrequest slash Google right and and we'll get few things over here we'll get a response we will get a request and a response and maybe something so we actually have to redirect the user from here to whatever the whatever the link which is there I mean in which you want to redirect the user so so kind of like this what you can do is you just have okay these are the apis available I think I have to learn oauth or to client uh this is how you handle oauth so you actually have to generate oauth URL let's keep this side so let's see how can we actually generate one oauth URL so you know we can say URL is equal to oauth to client so we'll have to have to import this so we have to report something from Google apis now what do you want is we want this Google thing from that and I think uh so we'll have to construct something called uh or two client is equal to new google.auth DOT uh oauth 2 right and then I don't know so we need three things first is the uh so let's let's for now let's do it like this no dot uh no process dot elv dot uh client ID right process dot EnV dot uh client Secret right and then process.env dot redirect URL okay uh so these uh these things you have to set up and now uh how do you do that basically you go to your Google account I think give me a second I'll have to okay so uh you go to your Google developer console right and you go to this place call your Google core developer console you go to this place called credentials right after that you first of all you create a project let's name it uh or experiment okay whatever this is so let's create this so we basically have created an organization right now that allows us to do so yeah so we have uh we have this project created that's kind of cool so the next thing what we have to do is we have to create a credential for this project and how do you do address basically uh remember what screen will be for about your application okay create credential and we'll create oauth client ID okay so that's oauth client ID and the next step what we have to do is we have to actually own um no organization now give project oh yeah that's so create how do you create setting up over 2.0 how to do that so okay man but how do you how do you create one uh configure consent screen start so uh only available to user within your launching you do not need to submit your application we will tunnel this like I just want to learn this stuff oh can you it doesn't let me select that no that's kind of funny app name dope app support email ID yes whatever my email ID there's no logo there's no domain do you need anything else can I can I say even continue developer contact information that's the same email ID over here but that's not a really fill ID that's like what I use for a lot of my apps and projects so if you're gonna guys want to message me you can definitely do that on this particular thing okay so I'll just paste this there and save and continue right and then it's like this so uh foreign there's no calendar as a scope man so I want profile of course that's something which I would like to have there's a personal info on Google profile also update right and now I think uh save and continue right I've added the non-sensitive Scopes and then the test users I could add my own email address I think you know we're good to go see and where to save this is the anything like okay we've added this and save and continue and then we have all these information back to dashboard and let's go to credential then let's create a credential and then API key uh no not this critical oauth client ID the application type okay this is my API key generated so uh whatever okay let's let's forget about that it's a web application and the name is this uh whatever authorized origin so to authorize the origin will be right now localhost uh I think localhost is allowed by default so I don't need to add it so I can delete this stuff and then the redirect URL will be uh https double dot slash uh local I think with localhost redirect URL is even okay we can put this slash localhost uh Port maybe 8 000 slash Google slash redirect something like that yeah you're gonna add this URI that's that's pretty much it that's cool I think do we have anything else now we have it made so that's the client ID and that's the client secret which which we have right so next thing what you have to do is in your uh in your vs code right wait a second I have to place this in that side now so uh through my this uh I'll do simply pnpm ad dot EnV y right that will basically add this package called dot EnV to my package which will actually help me to load this stuff which I'm not in the center okay I hope so it's good yeah so which will actually help me to load all the dot envs files so all the sensitive information of your project should be placed in dot in green file so I have a client ID which is this one I have a client Secret is this one and if you're thinking of using my my secret and my client ID don't worry I'll delete the project after the video so yeah I'm sorry so a client ID client secret what else do we need okay let's and uh you know we let's delete this API key because we do not need this for now can we or uh yeah we'll be using API Keys later on once we once we do the calendar integration right we might create a new one but we'll not think about that for now right so we have the client ID we have the client secret setup right uh in a nice fashion right so we have this guest thing right let's actually copy this and this closes because you know we can we can continue all our work over here so uh once we got all of these things uh the next thing which we require is basically to to paste these things over here right which we have already done so oh we do not have a redirect URL so redirect URL what's that http HTTP localhost Port 8000 slash uh Google redirect I think so this was the this was the thing if it's wrong we'll see about that later on so the URL right so then uh we'll actually have to work with the Scopes right these two are the actual Scopes which I need but I do not need a blogger one for sure so I need to specify the Scopes but I don't need this first one right and then what we can do is we can say o auth uh 2 dot uh generate this is not the one wait man where are you getting this oauth okay this is the oauth 2 this is oauth 2 client so you can say o or to client right that's cool we can just changes we don't need this we can just write this here so we can simply say oauth to client dot uh generate uh I think URL or generate auth URL something like that yeah so we have the auth URL what we can do is we can just pass the option so let's say access type offline then scope is the scope which we have decided so yeah this URL basically now could be used for logging in the user so we'll redirect the user to this URL so if it is responsibility redirect to this URL right uh it's kind of cool and we'll have to actually set up the app dot um I'm gonna again I get URL to slash Google slash redirect which is the place where we'll be redirecting is the port 8000 year it's great so you we we will be getting a request and a response over here as well so uh this is how it is and we can just say spawn.son it's working yeah right so we will see uh about what data do we get I think I will be getting the token and stuff uh over this redirect thing right so it goes like you generate basically generate a URL you get the permission from the Google Google gives you a token you get it back over here a token and a refresh token and a user's profile and you're good to go you can just query anything I think you do not get a user profile you know you do have to query that separately but yeah that's how things are basically it's it's not very complex but uh before doing anything else in the package I think there's something called type no it's module yeah that's what we want so is actually a module set up some scripts as well so let's set up some Dev script so it will be nodemon uh SRC slash index uh dot slash SRC slash index Dot JS yeah all right so pnpm add hyphen D mode if you don't already know what node mon is node one is basically a library to restart your server every time you make changes to your source code so that's what node mode is so we have added the node monitoring so we can say pnpm Run tab IBD now uh the server started at Port 8000 C so far so good let's actually try to go on this um but we followed to do one thing now none of these will be loaded because dot EnV we haven't we have forget to do that so we'll say uh import uh dot EnV from dot EnV and just initialize this on top because you know in the future it will if you will be importing anything else that will not receive the dot in views okay so we have we have our server successfully restarted that's kind of cool let's actually try this out so let's go to localhost Port uh eight thousand slash Ah that's kind of cool see it redirects us to the Google's thing and if we click this we we say okay the Google hasn't verified this app you'll have you'll be given access to this app currently being tested you have given access to an app that's currently been developed that invites you if you you should only continue if the if you know the developer invites you oh I'm fine with this man right so this basically needs now the access to access to my calendars right edit and do everything so if I just continue so it says it works right simple stuff so it's kind of cool and you you get C you get a code and then you get something which I really do not know uh um kind of cool so we can actually say log request dot params see did it logged it's empty there's no params in this that's true there's no params in this oh but there is params in this ah [Music] so code over this is the code request.params dot uh there's no parans that's true request dot query I think there's a lot of query in this but we will see if we just do this we see we do not receive anything okay we we do the so we have we get two things one is the scope and another is the code code is actually the token uh you know so you can call like uh const token is equal to request dot uh uh query dot token right that's our code is that what you mean so that's the token right that's the users token so next up what we have to do is we actually have to uh take this token and request users information I don't know how to do that for sure so how to request user information with token in Google so you okay that's how you do it so Google's token info endpoint is at this found on the open ID connect okay uh that's how you do it so basically that's how that's how basically you do it so if you want users information you'll have to hit this URL but yeah we'll have to add some package to in order to do HTTP requests from our own server ah there's something called TS node no there's something called node fetch that's one option xeos is also another option let's try it out xvos I think that's easier and be installed eggless yeah so what we'll do is we'll import xzos now maybe three hours right and then we can simply say over here that you know we want to say calls to user input is equal to xzos Dot exers dot what is yours Dot I believe a get call at this particular stuff and then basically we can we can let's say plus whatever token that we got right and let's see what and let's actually log what what do we get use info dot data okay this this is an async call so this is I'm I mean this is async currentness weight and then I think then I'll get a data this is definitely a proper error handling lacking what yeah whatever uh we'll just go to this place again it's not happy with me I think something crashed okay something crashed I don't know what but okay we got a very long list of a lot of stuff okay in writable protocol or what's this URL foreign value okay ah this side I hate this way of getting users so uh so you know after we got this what's next just like retriving access token with a code return oh this is not the access token okay that's kind of it's kind of lame I just did the most stupid thing right so you get a lot of stuff from a weight or auth or through client dot get access token right with the oh this is the code man right so with the code which you received you can actually get the access token you get you can get a lot of stuff from this oh you get this I think this should be a weight here there's a way to here right but you still get these things it's kind of funny data data rod then so it's not get access token it's get a token right and which will give you I believe this stuff which you need which is tokens oh man what what on Earth is happening so we have the tokens over here we can we log in the tokens I believe that's kind of cool right so that's actually the tokens which we we will have let's let's let's get rid of these all this stuff which we got so now what we can do is we can just uh we can just try to make the request again crashed I believe data dot then is not a function of course there is not a function because it's the the thing has already been resolved right so if you just cut this thing right if you just do this right and if it log this tokens right that was not making even sense to me but my uh lenter was not happy with me for some reason again it crashed one what do you need uh what I'm so this basically it ends up promise okay okay there's 15 rupees thing going on but it's actually what is this then why will it return that then like that does not even make sense it was so stupid man you you get a you is it done a promise it's also to get token response right so if we await this then this data right data dot what not then why that then doesn't make sense okay whatever the get data is this get token is this right um in the documentation that's how you they have written it uh so that's how you do it let's copy paste things ACT code which they have given okay so let's actually try to do it again maybe some in a better way or something it will click however so this should we should have done the work right I think so yeah let's see what can we do now or two Dot dot get user image credentials so right so whatever so this is done right so once we have done the uh this thing so we can do like uh you have successfully logged in or something like that so message uh you have successfully logged in right so we have a we have set up the client credentials then we could have like an app dot uh get again request so slash uh schedule event right so schedule event maybe on the calendars we'll see you know does it actually schedules or like what's the case but schedule event and we can do like request response right uh then this schedule event uh now this schedule event endpoint basically have to schedule an event uh in the oauth or two dot get token info what does that do man dot then and for eign we actually can get email ID and even verified and stuff like that from that info which is kind of cool so um we don't need this by the way so we'll we'll go and see we'll we'll go and see for Google Calendars API Maybe bloggers dot blog which is you can give get various stuff from this so you can say uh so we can just uh we can just extract the calendar API through like doing something like this maybe uh Gone like con calendar is equal to Google dot calendar if this is a function is that how it is version three auth on your API key just let's generate an API capability quickly so here is this and I want an API key again we'll have to make it like we'll have to place it on the dot EnV file that's that's the API key we have for Google Calendars so let's go into the dot EnV thing paint pasted and actually let's have the Google Calendar API right or API editions like let's let's maybe let's make it really simple so the API key is there and then what you can do is you can just uh place your API key over here how you do that is like the process.env dot API key that's how you do it so you have your API key you have your calendar thing set up so now I think you can do a lot of stuff from here schedule event right so you can say you can say that the calendar Dot events Dot insert right how do you how do you create an event uh it's a blogger thing compute engine get client okay whatever get project ID auth Google auth uh is that does that actually have a calendars thing that's all okay that's sad Google apis Google apis for calendar Docs okay create events how do you create events if you could tell me node.js yes so that's what we need so you say calendar.events.insert this thing you just give the auth and then you give the calendar ID and then you basically give the resource whatever so let's actually try to insert something something like anything we do we don't care about what we are inserting right now right so we first calendar dot insert or calendar.event slot insert let's see what does it mean it needs a lot of stuff auth we have already provided we do not need an auth for this I think calendar ID primary what's primary okay and so the resource it's event and this is the event okay a bit of sauce it's it doesn't have a resource or something like that what we have already provided Earth and then request body and that's what all the stuff we have we have auth we have key we have fields we have supported attachments send updates send notification request body is that what we are talking about like I think is the request body is the thing color ID in description yeah that's that's what we're talking about yeah so let's let's apply a summary summary is basically uh this is a test event right whatever test event right and then we can have a list we can have a location oh we do not need a location that's pretty much it we can give a description to this of course some event that is very very important right and maybe we can give a start and then start we'll have a date time which will be like okay what what how do how do you do that man is that is that like a date like uh actually this in this moment I think days is something like that would be very helpful two kilobyte JavaScript date utility file okay install day JS in pnpm so yeah we have added DHS in our project and I'm saying port ajs DHS let's say I wanna schedule an event for like uh something like tomorrow 6 p.m right how do you do that so today JS Dot Dot uh dot What DOT extend dot local dot how do you use that man how do you use it okay the pass browser bar string set get millisecond hours uh installation installation node.js let's do this in this node digital format date uh yeah Pages dot I can only see I cannot even see format for some reason I think this is due to like uh this is not what we want to import maybe the AGS is has a different thing is the ajs would oh we don't care about this this is still too annoying to me let's let's actually have how it's scheduled for uh new date uh Dot oh foreign so what we can do is we can just uh I think we can do like day JS right something like that we had imported that right over here why did we remove that pages from dangerous guys I'm a moment user which has been which has been deprecated for some reason you know I I think it uses something similar right uh add maybe one uh day Ah that's cool that's the same thing man this is the same thing that's the same how you use JJs sorry moment.js that's how you use JJs that's kind of cool okay we added one day so it has scheduled an event for one day afternoon to ISO screen that's that's I think that's an ISO string right I think so that's the third looks like so and time zone is Indian time zone in the end time so that's why where I live in so now how do you how do you pass it in in Google apis what do you time zone API what's the time zone in which I live in man what should I pass in there okay let's see they have passed loss America Los Angeles uh it will be India India daily is definitely a time zone I'm not sure list of acceptable API time zones yeah it's kind of cool okay after you graduate can I find in India over here Asia Asia of Asia Asia I don't see in India over here man that's gonna sad okay we have India so we have Congo reunion Christmas whatever what what what what what all look man what should I pick it pick from here congoose Indian no I don't know Indian I want in India hmm foreign for some reason exact Indian time zone we will see we'll see later on right oh got it Asia Kolkata that's that's exactly what we need yeah that's kind of cool oh see see we found it right okay so okay what else do we need we need a references I don't know reoccurrences there's no reoccurrences attendees and attendee I think if I'm scheduling I don't know maybe reminders uh no I don't need this okay so can I can this be uh does it is it like in a promise whatever okay so it's a promise so we can say await so we do get a result out of this so I'm pretty sure about this so what does the result contains it contains data it contains head or whatever okay we don't need the results if there's no error over here right so if it doesn't throw an error that means we are good to go so it's a response dot send our message done right so this is like how it is so we'll have to post authenticate ourselves but let's check our server has restarted or not properly yeah it has properly restarted so first thing first let's go and log in to Google first right so we'll we'll have all things set up yeah we have logged in successfully next thing we have to do is we'll have to remove all these and we'll have to do uh scheduled event oh it it kind of It kind of crashed yeah login required so I've given you the API keys right what do you need from me login required uh I'm logged in right I I just set the auth credentials what else do you need man um login required Google uh means that token you are using is either expired or invalid as a state of engine firm you need to get the refresh token man why do I need are you are you crazy do we need to set it again over here man that could not be the case right um I mean here we pass odd and so uh right so you can pass process.env DOT uh API key which I think we've already configured this I don't know why again and again it's asking for the same thing and what if I like I pass Ed the token over here right so if I just say it can't see what I'm doing right now does not make sense to me like why would I do this but let's let's see like is that if that is the issue you know that's how we'll be solving it so token is equal to wait what's what do you mean by tokens grab a lot of them so we have given the auth key right that's that's the authkin I think we have logged in uh how to check whether we are logged in or not so we can check it like if uh let's log stuff up or odd two dot no not not over two fourth two over here and Dot uh uh Dot credentials. exes token if you have the access token that means you know that's that's kind of like an indication that we are going to go right so we'll have to log in again because there's no state to this okay and then we are close YouTube event that simply said login required let's see what does it log on the top it does have an API token man why is the login required what kind of like what do you need more from me man what is the login required we have already how do you login required uh uh a simple set access token do we have to separately set the access token for the calendars that's the question which I would ask calendar Dot okay but um where's the auth what is this Earth thing which you have placed okay does does this auth takes anything else like this oauth to client oh this this does take an earth to clients that's kind of cool so or through client if I just pass that client ah that works T that works that's kind of cool okay so if that works that means you know we should be good to go right so that's okay we can just try this again we can say Google we are logged in and now we can just try to maybe just do it like schedule event ah what Google apis does not use project this enable it by visiting this place then retry your if you enable this API recently oh I did not man I did not I haven't even enabled this API that's kind of stupid right I haven't even enabled Google Calendars API and I'm like trying to visit this thing okay okay enable uh please don't ask for my credit card information because I have that I do not have that right now I didn't ask that's kind of cool okay we have enabled this this thing is enabled uh so we can try this again I think we'll restart our server for that first you know npm run Dev now PNP even and Dev right uh we have restarted the server and let's actually try it again right now so could you kind of go through a log in okay logged in pretty successfully and then schedule 11. s c h e d u l e schedule event ah oh now the error is actually better that you know there is like bad requests so we are like the request is bad what is missing man why is okay domain Global required missing and oh there's no end time oh that's correct yeah so let's pass an end time to this so pass this and there's like an end time maybe the same thing just add We'll add one more R to this so the same time zone pretty much the same stuff um we'll just uh we'll say that add one R right so it will be basically in one hour event so that's that's what we want so kind of cool so ah let's do it again man logging him again and again and again it makes me sick okay uh yeah Google went to Google let's see what does it have it basically logs us in and now we can schedule our event I'm pretty sure about it to dual event please no error whoa it's done it's done it's done like let's see let's let's have a look whether this that actually got scheduled on our Google Calendars or not so let's let's that's the time for it's time for actually seeing that was it done or not oh man can you see that can you see that I scheduled that using my code this is a test event can you imagine this that's kind of let's do that dope just use don't use my tokens on the screen I get it just don't use it see okay the next Target is actually to schedule a Google meet Google meet event with this particular whatever this event is right so we did it some event that is very important very very important hotels get rid of that let's get rid of that in this kind of cool okay so it does work for sure it does work for sure we can actually schedule events and School but can we let's see but can we okay our Drive attachments to the which we don't want to do oh we can add weight we can add this ah but Google Drive okay a a a solution a g apis client uh pitch okay what's that that's what we want to do add a video and phone conference to the event that's what we want to do so what you do is basically you say uh even data conference data dot conference solution get uh we don't care about this we don't care about this uh you basically say dot patch Dot events.patch calendar ID event ID how do you schedule the event man uh does not make sense you can associate Hangouts and Google meet conferences to allow your users to meet remotely we yeah foreign the conference data field can be used for to read and copy and clear existing conferences detail it can also be used to request generation of new conferences to allow creation modification courses at confront data request parameter to one conference data version request Point number one if there are three types of conference data currently supported as denoted by contrast data converter dot keyword type Hangouts for customers event Hangouts classic Hangouts for Google workspaces use dedicated event name as well Hangouts meet okay that's kind of cool you can learn which conference Drive is supported for any given calendar by used of used by looking at the current load list okay okay what is a front-end code I want node code man how do you how do you add a oh do you do we have anything like conference or such thing OnePlus data version one foreign if we we won't do that if you say you know if to one so it suppose basically three types of conference data you can learn which conference type is supported by Any Given calendar to use by looking at the calendar uh calendar properties allowed in the calendars and calendar list collection but we do not okay okay so you basically say calendar event patch conference data create request request ID this but this does not talk about how to create it like uh oh but just does not talk about how to create it for conference like is there anything related to conference no we have I've already used it okay Max attendees attendees okay let's say I want to add it me as an attendee right so I I just uh I just say I want to add me as an attendee uh how do you add attendees I just forget that so you must just say attendees okay that's how you do it colorful okay I think here we can have like conference data ah there you go there you go there you go that's how you do it so you can actually add a conference data inside the conference data you could have a create request request ID something like that how do you how do you generate a request ID so you can create a new conference for an event with a newly generated request ID which can be random string okay I could say uh I could I could use an uuid something like uid for this particular purpose which is kind of great so I can say pnpm install guid UI is a very cool Library which basically helps you to generate unique user IDs not user IDs any kind of IDs why am I doing it over here I have to let's import uh something from uuid and what we want to import is version 4 as uid okay so we have the uid and now what we can do is we can just say uh create request request ID and then this uid thing that I could call it then you just explain my chat there you go and I can add attendees to this I'm pretty sure how do you do that so you basically go over here and you say attendees and I can just say uh attendees I think array of this hmm no no no no no no no no it's not like that okay so attendee is actually an array that's correct but it's like email and then you actually can specify like what let's say I want to invite my original email ID right so which was this one an email ID right and then what we can do is we can just uh we can just we can just do this so we have gmail.com right as an attendee right so right now if you just we just try to schedule an event what will happen let's let's try it out so we have this this thing over here okay so uh yeah log back in again we have logged in okay The Next Step what we have to do is we have to schedule our event which is what we want to do oh done and done let's see what was a was a Google meet something like that was created or not so we have a test event and it does have a Google meet associated with us that's kind of Stick Dude That's doesn't fade that we haven't done it finally so I think that was the purpose of this video like that's that's not all the purpose how could you schedule a Google meet interview and an event with Google apis so the process if I could conclude it goes something like you'll have to generate a token and with that token you'll have to set up that as a credential right so like what we have done over here and uh you know through that credential you can pretty much take anything from this Google apis right so I have taken calendar rights but you can pretty much take anything calendar or any API you can just go and search and basically you'll be having that and then you can use that API in order to pretty much do anything that's kind of very cool right I also feel the same yeah so that was I think it from this video I don't know could we I think this like but just by passing various parameters you could pretty much do anything with this and uh I hope so you found this helpful by the way I just want to test one thing did I also got this uh on my calendar uh did I also uh got this on my calendar let's see ah that will be a thing if I also got this but I didn't want this I want this month view of this but wait ah I have a meeting there that's kind of school one guests are waiting you can see that that's kind of cool so we we basically can schedule a event with both of us and there you go that's that's it I have a very great day ahead and I wish you a very happy New Year which is really coming which is really near thank you have a great day bye bye

Channel: ithinktechnologies

Views: 33,877

Keywords:

Id: kNwCT5PN93k

Length: 58min 13sec (3493 seconds)

Published: Sun Dec 11 2022