WordPress Login With Google | Create Plugin

hey what's going on guys my name is victor and in this video i'm gonna build a login with google plugin for wordpress and in this picture i try to explain the the logic behind this plugin so here on the left side we see the user so whenever the user will access our website for the first time this is going to be the web page they will see so on the web page uh we will have a login with google this is what they will see whenever they're not logged in so this is the first time they access the website so whenever they click on this login with google button our website is going to redirect the user to google google is going to ask the user to provide a valid email and password and after they do so google is going to redirect the user back to our wordpress website and at the same time it's going to send the google user data from google and we will receive the data on our website using a wordpress ajax which is going to be like a callback we will create this um wordpress ajax call callback or now in our plugin so having the data in our wordpress ajax action wordpress is gonna create a new user it's gonna insert it in a database and then after that uh is going to redirect the user to the home page to the first web page but in this case the user is going to be logged in and it won't see any more login with google it will see high picture and there's going to be a logout link so i just put here a picture just because you know my user's name is victor so i just left it like that but in this case it's going to be a dynamic name alright so here i have a live demo i have wordpress installed on my localhost i'm using https here um just because google accepts https and it's easier to work with google whenever you have an https here you can just put if you don't have an https installed yes because i don't have one here i just put https and google fi google chrome said that you know this website is unsecured there was a advanced button click on that advanced button and proceed proceed unsafe okay so here's the demo um i have this login with google button so if i click on this button here it's gonna my website directs me to accounts.google.com so here it's saying choose an account so i click on this account here now it's saying choose a password so here i'm gonna paste my password i will click next and this is going to redirect me back to the home page it actually redirected me to the uh ajax action which is there was really quick and we couldn't see that here happening in the browser but it redirected me in the last step is redirecting the user to the home page and i see here hi victor and i have this logout button so if i um log out now it's asking logo we'll go back here and i'm gonna see log in with google again all right so this is the demo i'm gonna write everything from scratch so in case you wanna follow along with me there is gonna be a link in the description from where you can grab the source code so that being said let's go ahead and get started okay so i'm in my wordpress content slash plugins folder so i'm going to create a folder and i will name it wp google login and i will open it cdwp google login and i'll open my vs code in here so basically what i'm doing now i'm creating a plugin let me just adjust this window here really quick okay so um in this folder i'm going to create a new file and this is going to be login the php and here basically i'm going to paste a comment which is uh the following is the plugin name this is very important because wordpress reads this comment and this is the way uh wordpress knows all these details about this plugin so the plugin name is login with google description display game will add a login with google button plug-in uri which is my website author my name version here and then below here we will stop the access direct access to this file we don't want anybody to be able to access it so let's do here don't access this file directly so we'll have defined and here's going to be abs path abs path or die like this all right so if i save it now and i go back to my dashboard under plugins i'm gonna see this plugin here login with google this plugin blah blah blah blah so i can activate it now activate it i don't see anything on the home page yet i'm actually going to remove see so i don't have anything on my home page just uh it's just the website's name okay now the plugin is activated uh what i want to do now is i want to create a project so to create a project you should go under console.developers.google.com there's going to be a link in the description so you go to this google sub domain and then and you create a new project so if you click here uh you can create new project uh first of all you may not see this there's there may be like a pop-up with some things saying about consent screen or something like that so just uh make sure you follow those steps and set up your consent screen and then after that just go you know access this link and create new project and here you choose a name three projects remaining your quota request and increase or delete projects okay so here it shows a new name which is going to say y code i'm going to say by code to tor no organization create this is going to create all this stuff here okay so whenever this is done just click on credentials and then from here just click on create credentials off client id so you click there and now application type web application name you can choose change it if you want to authorize javascript or regions we can just leave it like this for now and what's the most important here is the authorized redirect url so let's click add url and in this url i'm going to paste the following link which is https localhost slash wordpress hyphen admin slash admin dot admin hyphen ajax.php uh question mark action vm underscore login with underscore google so this is the ajax callback this is the action ajax action i'm going to create in this video it's a custom ajax action so after this i'll just press enter and this is going to say that the you know oauth client created i'll click ok and this is here it's web client 3 because i didn't update the name so you could we we have here just click edit and i will have this client id and client secret i'm going to need this in my application the next step is to download the google apis php client library this there's going to be a link in the description for this repository uh you can search for it it's called google api php client so here i want to download the one they have versions for different php versions so in my case it's php 7 7.4 so i'm gonna download this file from here and i have this file in here so i will unzip it and i will rename this folder to google hyphen api i will copy it and i'm gonna go to my server htdocs content i'm going to my plugin folder and i will paste it here okay so it's done now i'm gonna open my vs code and here i'm gonna start working on my plugin here i'm going to call the sdk library we just posted here which is google api so i will leave a comment here i will say google app config configuration and i will say here call sdk library and here i'm gonna have require once and there's uh required ones and here i'm gonna have google hyphen api slash uh vendor slash how.load.php okay if i will because if i open this folder i'm going to have google api vendor and the outlook.php i want to we want to fire this file okay after this we will have to add the credentials of our project so we created our project here now we need to use all these credentials and create all this configuration for our app so let's go back here and um there's going to be a new variable which is going to be g client and we will assign a new pro a new object google client that's the google object coming from the sdk app and here using the google client we will set the client id and then we will see making sure we don't misspell then we will have four more uh four more configurations the first one is the first one i said client id and then we'll have set client secret and then here we will have set application name and then set the uh redirect uri so we have set uri and then here is going to be add scope okay so let's start with the set client id let's go back to our project we have the client id here so i'm gonna copy from here and i'll paste it here then we need the client secret so i'm going back here and this is the client secret over here i will copy it and paste it here then the application name i want to say by code media uh the set redirect uri this is the url i added over here so i'm just gonna copy it from here and i will paste it here like this and the scopes the scopes google has multiple scopes so here's the page with the scopes that you can find this on the in the description as well so we have a different uh scopes here using the google api access content uh context manager api um but the scopes i'm going to use here is the plus login so oops sorry about that it's the plus login and the email so let's see user info.email i'm going to use this one and the other one is the login but it's not in here because google has so many other pages so but i just want to show you from where i got these scopes so i'm gonna go back here and i will paste this uh two scopes so here what i have this is the plus that login and then the username for that email okay and then after i have this done i want to create an off url so i'm gonna have a login url here and i will have a login underscore url and i'm gonna assign gclient create off your al like this okay i have this in place so now i can say for example um var dump login url because i want to see what it has and if everything works fine so if i'm going back to the page if i refresh this page i can see there is a url here a long url so which is good this is the url we're getting from google this is the authentication url okay now i want to generate a uh a login with google button so in this in this way i'm going to add a short code i will say generate button shortcode so here i'm going to have add shortcode shortcode and the shortcode is going to be google login and this google login is going to call a function this function is going to be vm underscore login underscore with underscore google and it's going to get no parameters so i'm going to copy it and paste it here so whenever i use this google login shortcode this function is going to be fired and this function is here so i'm going to add some functionality here now first of all i want to make the login url variable globe global so i can access the data from here into my function and then here i'm going to have a variable which is going to be btn content which means button content i will add some css here it's uh style you know it's style tag and google button css you know just add display table center it background color blue padding 15 pixels border radius 3 pixel and color white then after this below this line i'm gonna have an if statement which is going to check if the user is logged in or not so i'm gonna have if it's different than uh is user logged in and this is a wordpress predefined function if it if it's different then it's logged in that means the user is not logged in and then here i want to check if registration is closed so i'm going to have another if statement which is going to check if it's different then get option get option and the option is users can register is it is diff if it's different than this then i'm gonna i'm going to return let's say button content concatenate and actually i don't need this actually here i will say just registration is closed like this else i'm going to return button content i'm going to concatenate and here i'm going to have h ref href and here i'm going to have a class 2 and the class is going to be google button it's this class from here that's why i assign this button content in the return function and then the hraf is going to be let's concatenate it and i'm going to have here the login url login url and here it's going to say login with google login with google we have this in place and then here if the user is not logged in if it's not logged in then i'm gonna crop wait if the if user so we check here is user logging if it's different then is user logged in that means if the user is not logged in but yells if the user is logged in then i'm gonna grab the current user so i have a current user and here i'm gonna use wp underscore get underscore current underscore user so i'm grabbing the current user and i will have a return here button content of course i need the css from there and i'm going to have div class google button i'm gonna use the same style styling for for this section and google button and then here i'm gonna say hi and i will concatenate like this and i will say current user and i want to grab the first name first name from the current user all right i'm going to have this and then here i'm going to have an a ref this is gonna say logout and the logout action is actually the following it's slash wp login.php action logout like this so let's make sure this works i'm going to grab this code from here i'll i save the file i'm going back here i'm going to my page uh var dom just make sure we remove the wire down from there okay and i'm going to my pages okay there's an error expanding in the 15 50 here semi columns i forgot some of my columns you probably already sold this okay so i'll go back refresh one more time so under my pages there's home page which is the front page and here i'm going to insert a short code and i will paste the shortcode here i'll update i'm going to go back here and i'll refresh the page and i'm going to have hi but for some reason it's not showing the it's not showing my name so i probably misspelled something here no actually i didn't because i don't have a name so if i'm going to the dashboard and i check under my users i don't have a name here let me just delete this user from here okay i don't have a name here under name so if i edit and i add my first name let's say let's say victor and here russell and i update it and if i go back and refresh i'm going to have high victor here okay so what i want to do now i'm going to log out yes logout go back to vicod media website and i see this log login with google button okay so if i uh click here it's gonna say choose an account i choose an account and it redirected me to localhost wp admin admin ajax action this is the action i added right here okay so now we should create this action and store this data because right now we're getting a code a code here this code is from google and this code contains all the information from google um okay so to do that let's go back to our file here and let's let's add the ajax action add ajax action so we'll have first of all there's going to be a function and this function is going to be vm which means vicod media login google no parameters but here we will have to fire it so it's going to be add action so the action is going to be wp this this is very important the way you write it here wp it's required underscore ajax underscore this is required okay this is how we create a custom ajax uh url and then here is vm that's from vycode media i i use it as a prefix to make sure it's unique and then a login underscore google okay and then the next one is the function which is this function so this function is going to get fired so whenever we access this ajax action this function is going to be fired and then this function here can have some uh function some encoding to to be executed so we have global there's a global variable which is g google con client because i want to grab all this data from here from here and to use it in this function and then here i'm going to have an if statement so this is going to be if um is set get code okay if it detects that there is a code in in the get method and the code is not empty then we assign the code to a token variable so we'll have token and we assign g client and here is the function it's called fetch access token with off code okay and here i'm gonna put this uh get code like this from the get method now here i'm gonna just do var dump to to make sure i'm getting this token now we'll save it i'll go back and just refresh it okay for some reason it's not letting me access this uh ajax just because default by default wordpress doesn't allow anybody to ask anybody who is not logged in to access the ajax actions so we will give access to this uh now we will give access to this action for um unauthorized users so in order to do that we should i'm going to paste it here but you can pause the video and just copy it so allow like logged out users to access admin admin underscore ajax dot php action so here we have function at google ajax action and there's an action here we add an action and the action is the following this is this is very important this is wp underscore ajax underscore no p r i v which means not private make it not private and this is the action that we want to make it not private which is our action here make sure they match and then this is also the action name okay add action okay and then here we have another add action admin init and we fire this function in the admin init okay all right so i'm gonna save it and if i go back now here and refresh i'm gonna get this uh token right now it's giving me access i am it's allowing me to access it so i'm getting this token from google access token now having this token i can store this data you know i can store it in a database i can create a new user and store it in a database so i'm going to remove this bar down from here i'm going to check another if stain here i'm going to have if it's different than eset token and here error so if it doesn't detect any errors in in the token then that means that everything is fine so here we're just getting the data from google so i have get data from google so i'm going to have a o off off variable i'm going to assign a new object and the new object is going to be google underscore service underscore all off 2 and the parameter is the g client and then here i'm going to have user data and i will assign the o off variable to this user data and i will call the user info like this user info underscore v2 which means version 2 and me this method and then the get so what what i'm doing here basically i'm grabbing the user data from the oauth uh object which is google service oauth t and i'm assigning all this to user data now in the user data i can do a var dom to see what i'm getting in the user data so if i go here and refresh i'm not getting anything if it's different okay let's make sure if different than eset token error everything looks fine but i think we should refresh the page so refresh the page go back to your homepage refresh the page and click on login with google again okay so here we go just we had to refresh because google had to generate a new code for us there is also a session of availability for this code okay so here's the data we're getting from google not so i'm gonna do here something like this just to make it prettier so i'll save it and go back now if i refresh i'm not gonna get anything just because the i need to generate a new code so here's here's the data i'm getting from google now family name i don't have a family name here uh verified email verified email um getting the email i'm getting the family name i'm getting the given name which is my first name i'm getting the id google id so like i'm gonna store this idea say login on my wordpress website so there's a name which is full name kind of thing like victor russo picture i'm getting a picture here so if i copy this url from here for example and i paste it here this is the avatar from my google account and that's kind of it you know just getting email first name last name in the picture so that's what i need that's what i need to create my wordpress user now here i'm gonna just delete this stuff and i'm going to uh check if there is already user registered with the email that i'm that i'm trying to login with from google okay check if user email exists or already registered okay so here i'm gonna have if it's different than email underscore exists and i will put here user data and i will use email so if it's different than this that means that there is no user with this email so here i'm gonna generate password generate password so i'm gonna generate the password in the following way i'm going to have a bytes first of all bytes variable and we'll open ssl random so the byte so i'll generate uh the bytes here and then i will have a password variable and i'm going to use the md5 codification i'm going to use the bin to hex predefined function to generate a password from the byte so this is going to give me a long password that i can store in the database and then here i'm going to have user login variable and i will assign to this user login the the id from google so i'm gonna have user data id okay then below here i'm gonna create a new user so i'm gonna have a variable which is going to be new underscore oops user underscore id and i will assign here wp underscore insert underscore user and here i'm gonna have an array and in this array i'm gonna have let's see i have two parentheses so here's what i'm gonna have in this array over here it's going to be user login which is the user login here which is the user id from google password user pass its password user email is the email from google from user data first name user given name from user data last name is the family name from user data user register that's the today state with the right now timing and the role is subscriber you can put here administrator or i don't recommend you making that but you can change the role if you wish so if you need to do so in your project and then after this i'm gonna check uh how i'll have a new statement so if new user id if everything went well and this function fired with no errors that means that i want to send an email to the admin admin and here's gonna i will use wp underscore new underscore user underscore notification and here i'm going to have new underscore user underscore id oh what the heck am i doing here okay this is supposed to be the parameter so new user id okay and then after this i'm gonna lock the new user in okay so to do so we will have to use do action the action will have wp underscore login this is the first parameter the second parameter is the user login and the third parameter is user user data and it's the email like this now here we want to set the current user and to set the cookies so to do that we will do wordpress wp underscore set underscore current underscore user so we'll set the new registered user and then after that we will set cookies in the browser so to do that we will use wp underscore set underscore auth underscore cool key and here is the new user id the user just registered and uh here needs to be true okay and then after this we want to send send user to home page after we log the user in so to do that we'll use underscore wp underscore redirect and here we'll have home underscore url like this and then exit okay so we send it like that here we have this if statement this is in case this email it doesn't exist and we just have to register a new user with all these data from google but if our script detects that there is already user registered with this email we just want to do the following we will just uh if user already registered then we are just logging in the user so sign get user by email we get all the data from the database by the user email and assign everything to user then here we just do do action wordpress login so we're logging in the user using user object and user login and the user email and then wordpress set current user we are setting the current user using the the user id from the database and then we set cookies here and we just redirect the user to the home page okay so we do all this stuff only in case there is not this and there isn't any error in the token if in the token is an error then we have an else here and here we'll just redirect the user to the home to home page so we will have wp underscore redirect home url like this and then just exit just wanna exit everything okay so let's save this let's make sure we don't have any error so i'm just gonna access the first page so i have login with google um okay log in with google everything's fine click login with google and here we go i just clicked it i mean they didn't ask me for for google password or anything so if i'm going here on the dashboard you can see i have this stuff here but i'm just gonna log out and i will log in using my admin user so i'm going under users and i'm going to see this user here okay so let me delete it i'll delete this user i'll log out from here i'll go back to the home page so i'm going to google.com and i will log out from this account just to see the full process okay i'll refresh now login with google so i'm going to google you know click my user i will paste my password click next this redirects me right to my home page and i have hi victor this data is all from from from google okay so if i'm going to my dashboard i'll click log out and i'll login as an admin so i have admin one here i'm going to users this is this is my user i have this user id it's crazy you you need to have a unique username because users can they can use this username to log in so this needs to be unique and uh okay so i have this user here in place now what i'm gonna do i will try to log in again with the same user email so i'm going to the home page refresh so if i click now on login with google it redirects me to the home page you know like like before so i'm going to click logout i'm going to log in using my admin account so if i'm going under users i'm not going to see another user because my script detected that there is already a user with this email and it just um bounced me it jumped from from this tab jumped all this stuff to here and they just logged me in okay so that's it guys for this video if you have any questions leave them in the comments if you have any if you like the video please give it a thumbs up subscribe for my channel and i will see you guys in the next video

Channel: Vicode Media

Views: 1,258

Keywords: wordpress, login with google, video, tutorial, google api, google login, oauth, api, php, oauth2, login with google php, php tutorial, google sign in, google oauth, gmail login, gmail sign in, php login system, php login tutorial, google client, web development, login, google, php login, bootstrap design, howto, wordpress login google

Id: D3nM2sjRwpM

Length: 39min 36sec (2376 seconds)

Published: Wed Mar 17 2021