Google: OAuth Consent Screen - One time step before you can create client-id/client-secret

Before you set up your first Google OAuth application, you need to:

• First: Create a Google Developer Project
• Second: Configure the Google OAuth consent screen, described below.

How to configure the OAuth Consent Screen

1. Navigate to https://console.cloud.google.com/. The upper left hand corner of the page should look like this:

   

2. Make sure the project showing (cmpsc156-s23 in the example) is the one you want to work with. If not, click on the dropdown and select the correct project. If you don’t have a project, click New Project and follow the instructions here to create one.

3. Use the so-called “hamburger menu” (the icon with three vertical lines like this ☰) to reveal these menus, and select APIs & Services / OAuth consent screen.

   

4. Now you are ready to start filling in the information for the OAuth Consent Screen, as explained below.

What is the OAuth Consent Screen?

The idea is that when your application authenticates using Google OAuth OAuth, it will share certain information/permissions with the application; at a minimum, your name and Google email address.

Before Google allows this, it wants to be sure that you give your permission.
For this reason, you need to configure what will be shown to the user when this happens.

What information am I asked for when configuring the OAuth Consent Screen?

You will only need to fill this in once for the project; you may be able to get away with filling this in just once for the entire course (unless you run into some limit on the number of apps you can create in your project.)

On this screen, click External, then Create:

Then, fill in these values on the screen that appears. Use the name of the course and the quarter, and fill in your UCSB email instead of phtcon@ucsb.edu:

Then, scroll down. You can leave all of these blank:

• App Logo
• App Domain
• Authorized Domains

Scroll down and fill in your UCSB email where it says: Developer contact information

Then click “Save and Continue”

After you click Save and Continue, you’ll be asked about Scopes.

What are Scopes?

Scopes are various kinds of permission that you give to the app to work with your Google data. The minimum is typically the ability to see your Google email address, and some basic information about you as a user. Other examples (which we will not show at the moment) might include the ability to work with you Google Calendar, Google Docs, GMail, etc.

To add a basic scope, click “Add or Remove Scopes” which brings up this page:

You can click to select the first two basic scopes; that should be sufficient. Then click the Update Button:

It should then look like this; click “Save and Continue”:

Test Users

In this course, we typically don’t need to use “test users”; instead we just use normal users to test.

So you can skip past that page by clicking next.

The page after that will have a button at the bottom to return to the main page or something like that.

Just continue; that should get you back to the page where it asks you if you want to publish the app. The explanation of what to do on the page appears below.

Test Mode vs. Production Mode

There are two possible modes for a Google OAuth Application

For this course, we typically prefer Production Mode.

You change from Test Mode to Production Mode by clicking the Publish App button, followed by Confirm

That should change the screen to look like this.

What’s next

A typical next step is to set up a Google OAuth app so that you can obtain a GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET values, as described here.

---