Ever seen this screen before? It’s likely you have come across something similar., even if you’ve not plunged into the Ruby Gem ‘OmniAuth’ before. I have to hand it to google, their error artwork of the robot trying to fix itself perfectly captures my own discomfiture. During a recent project I decided that my users (me, myself, and I) would like to be able to sign into my application using google authentication. You know, that button on your phone you hit because your password did not transfer to the IOS (or Android) key pad effectively and now you’ve missed ‘E’ and hit ‘R’ instead but you were going fast and you have to re-enter the whole password… Or maybe I’m the only one that has that problem.
Either way, I now had a dilemma on my hands: I didn’t know -anything- about OmniAuth. It was necessary for me to find the github repository just to make sure I was calling the gem correctly in my gemfile I was so green to the application of this wondrous tool. And wondrous it is. Wondrously frustrating if you don’t work with google tools too often. Lucky for you, my dearest reader, I decided that none should have to suffer my plight again, and have decided to write a (relatively) comphrensive guide on how to get OmniAuth set up for yourself! Sit tight, and enjoy the ride!
First things first: You need keys. Just like getting into a house, you’ll need a key to get to the google authentication. Unless of course you’re entering the home of a lazy or carefree home owner who either keeps the door open or unlocked all day because they have no fears. Google is not like our hypothetical homeowner and quite likes it privacy and user security. You’ll want to follow this link: https://console.cloud.google.com/home/ If you’re not already signed into google, you’ll need to sign in now. Your home screen will look something like this:
It is unlikely you’ll have the same dashboard as me, unless you’ve hacked my account. You may as well just log out now, I’m not a software developer yet and have nothing of value for you to take. Now that you’re at the dashboard we need to do a couple things, first of which is making a new project in for your account.
For me, the button you need to press says Rebrew. That is a previous project, and the little three hexagons will likely have something more generic next to them. Either way, that is what you want to press. You should receive the following popup:
In the top right corner will be the ‘New Project’ link. Go ahead and click on that and you’ll be confronted with a new form. Take notice in the screenshot below that you have a limited number of projects you can create for free on Google’s Cloud Platform. If you need to exceed this number, Google will gladly accept your money to give you some more cloud space. Apparently its limited up there or something.
On this screen you get to make a couple decisions. First of all, your project name. I’d name the project the same as the project’s name on github or wherever you’ve decided to build it. Project ID can be editted as shown below project name. Google gives you a default random ID, and that I what I decided to stick with, but if you want it can be changed. Choose something that is going to last as it cannot be changed. Regret your project ID name? Delete that project and start a new one with the right IDthis time!
In regards to ‘Location*’ I personally left it as No organization, and if you’re working on a personal project I’d recommend you do the same. Never attach your personal work to an organization that isn’t paying you directly for it. Lawsuits suck and companies tend to have deeper pockets that you. After you fill out the required field, click on the ‘CREATE’ button in the bottom left and keep on moving!
The website will return you to your dashboard, where you will now want to find that same button you used to create your project and click it again. This time, when the popup shows up you want to click on the project you just created to make sure you’re in that project. If this is your first project, google is smart enough that it should set you to that project’s dashboard by default but double check before continuing!
Now that you’re on the dashboard for your new project you’ll want to scroll down until you find the window with the header ‘Getting Started’. At the top of that window there should be a link that says ‘Explore and Enable APIs’. You’ll want to click on that.
Now that you’ve arrived at the APIs home page, you’ll want to look to the far left of your window and find the key icon. When you scroll over to it the left side dash should expand and the key icon should have text next to it saying ‘credentials.’ Go ahead and click on that link and you’ll be taken to the credentials page that should look like this:
The first thing you must do is click the ‘CONFIGURE CONSENT SCREEN’ button over near the top right of the page. This is so that you can even let your application consent to google using the OAuth 2.0 Client IDs. On the next screen you’ll have to choose between internal and external consent. If you’re not a google workspace user, your only choice is external.
The next screen you need to enter your application name, and then your email twice. Once as the user support email near the application name field, and the next time as the developer email address. There can be multiple developer email addresses if multiple people are working on the project. Hit the save and continue button to keep moving. The next step is to add scopes. For my purposes, Google provides good enough default scopes that I did not feel the need to add any. If you determine you’ll need more scopes, the documentation found at https://developers.google.com/identity/protocols/oauth2 will be your best friend.
You’ll find the next screen after adding (or not adding) scopes will ask for you to add users for testing purposes. In my case I just provided my own email as I am the sole tester, developer and user of my application, but your needs for testing may vary and you should add users according to your application’s needs. Finally the last screen for configuring consent will provide a summary of all you’ve entered thus far. Make sure to double over all your input to ensure everything is correct, then hit the ‘Back to Dashboard’ button at the bottom of the window. From there you will want to go to the left side of your window once more and click on your key icon to route to your credentials.
Once back to your credentials dashboard in you’ll need to locate the ‘Create Credentials’ button and click on it. This is how you’re going to make the keys that we spoke of ages ago that allow your application to log in via google. Upon clicking this button it’ll give you a list of options. You want the OAuth Client ID option it gives and that should take you to:
The first step for this section is to choose an application type. In my case we’ll be working with web application. I’ll choose that option and then more options come available:
The front half of your callback is just the website you’re routing to. My application is hosted locally, so I’m merely calling to my localhost port. The back half of ‘/auth/google_oauth2/callback’ however, needs to be designed like that, every time without exception, when you are using Google OAuth2. Guess what? As soon as you hit the create button you’re done! You’ll be provided a window which will have your Client ID and your Client Secret. You can reference back to this project’s API dashboard at -anytime- to copy these for your application. Don’t know how to use these? No problem! Follow the link below and read my next post to see how to get your application configured!