Authenticate users using google in Unity and Firebase with OAuth2.0

hello everyone welcome to joystick lab in this tutorial we're going to look into FBR authentication using Google signin we're going to use o 2.0 and we are going to do this in an iOS app and for our Standalone Unity app before we jump into today's lesson I wanted to share my upcoming AR course with you it's a limited seat AR Master Class where I'll take you from a beginner to an expert in AR app development we'll build more than 15 projects in this process and will dig into all the features air Foundation provides this course will be updated once every year to keep things updated uh with the updates of air foundation and unity and you'll also be able to join with me on live monthly Q&A sessions and get access to the closed community that comes with the course right and if you order today you can get a huge 70% discount on the course so visit ar. joystick lab.com and grab your copy let's start by talking about the problem first so we have this app where we want to implement the Google sign in however if we had to do this with the current way there is a few options we have first of all we have this Google signin Unity plug-in this is about 6 year old and it has a lot of issues and we have to fix that with some workaround so there is no recent update on that next we we can use Unit E Google authentication Service however it basically depends on Google Play game plug-in which is going to require some credential that you can get from the Play Store if we wanted to do this for iOS it should not be straightforward now if we had to authenticate our game using filebase we also going to need a ID token that we need to get from this instruction from Android or iOS now there is no native Unity way to do this either we had to use that plugin that I showed you earlier or we had to create our own plugin that basically works for both IOS and Android which is again not straightforward obviously so what we're going to do is we're going to use the O service to basically authenticate our user how this is going to work is that if if we had a Google Cloud project we can authenticate the user using oot Services right so all we need now is a plugin that supports o 2 for Unity that is exactly where this I5 toolkit for Unity comes into play this plug-in has a lot of features but one of them is a service that is going to help us to use o for our authentication you can see there's a open ID connect client feature this is what we're going to use to authenticate our user using the Google Cloud's authentication API so before we get started let's go back to our Google Cloud console and we're going to create a new project if you don't have a Google Cloud console you can simply search for Google Cloud console online in Google and you're going to come to this page where you can sign up to a new account I already have a account so I'm just going to create a new project when the project is done we can go inside the project by selecting that project and from the left hand side you're going to see there is option called API and services so we're going to go in there and we are going to add a new o credential so click on credentials and from here you can create credentials so if I click on there and go to O client ID you are going to basically see there is a warning that that ask us to create a uh consent screen so this is the screen where we take consent from the user to sign in using their Google ID so let's create a new o o consent screen we're going to give this a name and a support email and finally if you scroll down there's a contact information for the developer I'm going to use the same email and save and continue you can add more stuff in there so you can basically add logos and other information uh I'm just going to keep everything simple right now when we come back to dashboard there's option to publish our app we're going to hit publish app to production and now we can go back to credential and create a new credential for our app so again click on create credentials and click on o client ID from here we're going to select the application type for our case we're going to use an IOS app you can do the similar sort of stuff for Android and web application so using this plugin we can basically authenticate users in any platform right so um it's just about like putting the current like currect API token that comes with this um client ID so I'm going to select iOS for now and give this a name and this one is important so we need to make sure that the bundle identifier that we use in our app is similar to the one that we use here so let's go back to our Unity project and see what bundle identifi that we used inside Unity we can go to file build settings and player settings and there we'll have a company name and product name and if you scroll down that is basically um creates the bundle identifier right so com. joystick lab. signin test that that is my B identifier I'm going to go back and paste that in here and click on this create button so our uh client ID is now created now we can go back to Unity and import the necessary asset that we're going to need so like I mentioned earlier we're going to use this I toolkit for Unity in the right hand side of this page you're going to see there is a release button so go ahead click on there scroll down and download the unity package that contains the necessary things that we going to need I already have downloaded this so I'm just going to import that inside unity all right so you can simply drag and drop that Unity asset into your um Unity assets folder and then you're going to have this new uh folder called I5 toolkit for Unity now to connect this with our client ID we're going to need to have the client ID um that we got from Google console right so we going to go to our authentication again and then so credential and then click on this client ID and you're going to find there is a client ID on the right hand side of the screen so we need to copy this in here we're going to create a new open ID connect client data I'm going to name this Google client and you can expand this and we are going to basically copy that client ID so pay attention one thing here that there is no client secret for the IOS app if you were doing this for web you are going to need a client secret as well right so I'm going to save this and what I'm going to do is I'm going to just to test it out in our Unity you know like uh editor we're going to create another um like client data this is going to be just for testing and this is going to be a example for the web so we are going to authenticate our user inside this Client app um or inside this editor using the web version so let's go back to Google again and this part that I'm showing right now this is completely not you know required this is just for us to test it out in our editor so just like we did before we can create a new o client ID select web application and then we are going to need some authorized URL I'm going to show that a little bit later for now let's just create and we're going to have a client ID and client secret so let's copy that now we're going to create a script that is going to handle this authentication for us so let's right click create a c script and we're going to name this Google sign in all first thing that we're going to need is to add some reference for both of our uh client data object that we created so I'm just going to um do client data object for Google client data that is the one that we're going to use for iOS and then we have a editor one and then we are going to need a few uh name spaces so i. toolkit. core open ID connect client we're going to need that as well nice and then we are going to basically um extend this class from a bootstrapper so rather than you like rather than extending from mono Behavior we are going to extend from the base service bootstrapper and we're also going to need some certain name spaces for that so these are the two name space that we're going to need and this has a few um methods that we're going to need to implement so let's do that so um we are going to basically write our code in here when the register service has been invoked we are going to do something right so we are going to first do um a initialization for our open ID connector service this plugin already has a connector for Google so we are going to basically use that like I said before now we have two different um like client data object we are simply going to pass them based on where we are right so if we are uh in a editor we are going to do something and if we are not in editor we're going to do do something else so uh for the iOS devices we can do something like this and then if we are in editor then we're going to do something else and we're going to do end if so yeah so as you can see for uh iOS devices we are using the client data object and for our um editor we are just going to use the editor only client data object next we're going to need a redirect URL so basically what happens here is that when the sign up is completed we need to redirect the uh user to some URL for our editor or for web is going to be any valid https uh URL so I'm just going to do this one uh so it goes back to a uh to the polymuse website and otherwise um we are going to do something different for our iOS device so this is called Deep linking let's talk a little bit about what dip link is okay so in plain English dip link is basically an URL so when you click on that URL if you have that app installed it basically takes you to that app to the certain content that you want to show and you can configure that in your you know app we're going to to do that if you don't have that app installed it going to take you to the App Store and it will ask the user to download that app now a deep link is usually made up with two parts a scheme and a host or a path right so for example um the first part of a deep link is basically the scheme and the second part is a host path so in in our case if we don't have any certain um method or certain path that you want to follow we can just keep that empty and the scheme is typically um the bundle identifier of the app right it can be anything but the bundle identifier of the app is basically what we typically do uh when we are depl linking um a app with Google authentication or any third party Services now how you can basically configure the Deep link you can get this information in detail in this page as well I'm going to put that link in the description uh one thing I want to mention here we are building for iOS so the process is pretty straightforward if you had to do that for Android it's also straightforward but you basically need to have a SE separate manifest file inside the plug-in folder so yeah make sure you do that if you're building this thing for Android Now for iOS we can simply go to file and build settings in in the player settings if you scroll down inside other settings you're going to find a option called supported URL schemes and we're going to put a size of one and in here we are going to put the URL the first part again is going to be the bundle identifier and for now we're going to keep the second part empty because we are not pinging to a certain method uh but again if you go to that link on deep link uh in here you're going to see some Advanced use cases so if you have a certain path that you want to follow if you want to call a certain method after this uh you can do that as well for our case we are not going to do anything like that we're going to come back to the um app where it initialized or initiated the signin request so what we need to do now is to use this URI as our redirect URI so that when the user is signed in it's going to be redirect redirected to our app and this dipl Ling part is automatically handled by the plugin so we don't have to do anything manually it's going to be taken care of automatically all right now when we are running this in the editor uh we are also going to need the listening URI so this is just a local host and uh just a port number that I added in here and then finally we just need to have the service manager to register this uh service that we created the last thing that we need to do is to get rid of this start method from here um The Base Class already has a start method so it will hide that definition so you need to get rid of that back to our Unity editor we can create a empty game object rename that and then drag and drop the script that we just wrote we're going to need both of these client data so drag and drop those data as well and save your scene all right so next we are going to create another C script in this script we are basically going to authenticate the user uh and then add that users's information to Firebase so we're going to authenticate with Google and then basically use that information to authenticate the user inside Firebase so first we're going to create a task that is going to take care of the authentication in this asnc function we are simply going to basically create the login completed event and uh we're going to add a call back when that login is completed um you need to import some of the name spaces uh that comes with i5 and we're also going to create that call back method that we are going to use later on and here you also need to basically open up the signin page so let's create a AIT for that all right and then just for now we are going to basically try to debug this to see if everything is working and one last thing we're going to do is to create a public method which we can use for the button click event let's get back to Unity again create another game object drag and drop the aut manager here and then in the button we're going to create a oneclick event and drag and drop that game object go to our function Au manager and then sign in let's try this out if we click on the Google signin button it takes us to this page and we can select one of the email and will take us back to the app and you can see here it says sign is sign in is done so everything is working the next step is to add fireb into that so I'm not going to show you how you can install Firebase in your Unity app uh you're going to find a lot of uh tutorials out there on how to do that uh simply I created a Firebase project and then imported the assets um for authentication services in Firebase and uh we also need to make sure that the in the streaming assets we have the Google services. Json file right so yeah do all that and also you need to make sure that in your um in your authentication page the signin method you need to make sure that you have this Google as a provider right so again all this information you can find online uh if you are get stuck at any point let me know in the comment I'll try to untangle you all right so when you have your Firebase set up uh the first thing that we're going to do is to initialize the Firebase o so to do that we're going to first of all declare a variable and in our start method we're going to initialize the OD service with the default instance and when the sign in is completed in here rather than just debugging that information we can now simply create a credit shell based on the um token that we get from this signin information right right so how we can get the token is simply from the service manager so in the service manager we have something called access token right so this is the value that we're going to need uh in a bit so let's create a variable for that and then in the Firebase documentation page you're going to find this script to authenticate with Firebase inside the unity documentation part I'm going to copy this code and we're going to paste it in here all we need is the access token that we just got from here we're going to keep this ID token as null and the access token is going to be this one now if we try this out one last time let's run the game I'm going to sign in with something else this time maybe this one and let's get back to our Unity editor and you can see we have the user successfully signed in with a user ID as well let's go back to our Firebase projects to see if the user actually got added or not as you can see the user has been added to our users panel in Firebase I hope this video was helpful for you to authenticate your users using Google sign in um and add them to Firebase if you have any question feel free to drop that in the comment box if you want to see more videos like this make sure you subscribe to our Channel and hit the notification Bell for future updates I'll see you in the next one

Channel: JoystickLab

Views: 1,148

Keywords: Unity, firebase, oauth, Unity Google Signin, Google Sign In with Unity, Unity Google Sign in Firebase, Firebase Unity tutorial, How to make Google Sign in work with Unity, Unity Google Authentication, oauth 2.0 in unity, oauth 2.0, How to authenticate player in Unity, Authenticate users in Unity, Unity authentication

Id: OCCe1TXDEq8

Length: 20min 55sec (1255 seconds)

Published: Tue May 07 2024