On this Craft Cms lesson we install a powerful plugin to enable users to sign up with Google.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
All right guys, on this lesson, we're going to continue with our one-click signup. This plugin is called socializer and it's a $59, but we can actually try it. And while that's getting installed. So you want to go over to developers.google.com. And at the very bottom, you can click on Google API console.
Kind of already went through the process, but you're going to see some of the screenshots that look like this. It's going to ask you your email, your name, your country. The most important thing you need to do is have an consent screen. So you need to fill in the information about your app or your business.
And as you can see here, you have to add an authorized domain. This one will be the one we'll use later when we publish the site life. So we just want to fill that in with our privacy and terms and conditions page. We want to make sure we have that handy. We clicked safe. And then the next thing we want to do is create our credential.
We're going to select authentication client ID and inside we're going to just name our app. By now, you probably have already installed the socializer app. So let's head back to craft and open up our providers. We choose the provider. So in this case, I'm going to use Google and Google is going to give us back this little URL.
This is something we need to copy and pasted on the console. So we go ahead and copy that. So that will be our final domain. And then here we would input our redirection that we get from the socializer. Again, we might need to remove this little local domain to match the domain above just so you are aware.
We go ahead and copy the authentication that they gave us, the client ID and our clients secret. We can turn these into environment variables. So let's jump into our environment file and simply add as a variable.
So once it's done, we head back to our provider and make sure we add in our variables. Just like that we click save.
We head over to the documentation. And then under the providers, we can see that they give us some instructions. The little snippet of code is what we're going to copy and bring over to our own templates. So let's open up our up form and I'm just going to paste this in and write our craft.socializer.loginUrl.
And then the provider in this case Google, that's the name of the handle that we are using. If you have multiple handles or different providers, you can just replace that. Then we want to add the options. So we're just outputting those options that we just created as a variable above, which is a redirection, where do we want users to go after they've successfully logged in with Google and just like that we have created our templates.
We can copy this and paste it over to our login page as well. And just to finalize, make sure that you have activated or enabled the provider from the backend. And that's pretty much it.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS