This repository provides an example of how to use Flask-Dance to connect
to Google as an OAuth client. The example code is in google.py --
all the other files in this repository are secondary. You can run this example
code locally, or deploy it to Heroku for free to see how it runs in a
production-style environment.
Heroku is a great way to get up and running fast, and you don't even need to open the terminal!
It's easy, and it's free! Just click on this button:
You can leave all the fields at their default values: we'll fill them in later. The only thing that matters right now is the app name, and Heroku will autogenerate a name for you if you leave that field blank. Using an autogenerated name is perfectly fine, just take note of what it is.
Note that your app isn't functional yet, and if you try to visit it right now, you'll end up at a Google 404 page. That's OK, we're not done yet!
Visit the Google Developers Console at https://console.developers.google.com and create a new project. In the "APIs & auth" section, click on "Credentials", and then click the "Create a new Client ID" button. Select "Web Application" for the application type, and click the "Configure consent screen" button. Put in your application information, and click Save. Once you’ve done that, you’ll see two new fields: "Authorized JavaScript origins" and "Authorized redirect URIs". You need to set the correct authorized redirect URI for the OAuth system to work correctly.
To set the correct authorized redirect URI, you'll need that
app name from Heroku. The correct authorized redirect URI is
https://APPNAME.herokuapp.com/login/google/authorized. For example,
if Heroku assigned you an app name of peaceful-lake, your authorization
callback URL must be
https://peaceful-lake.herokuapp.com/login/google/authorized. Once you've
put that in, click "Create Client ID". Google will give you a client ID and
client secret, which we'll use in the next step.
Go to Heroku and visit the settings page for your app. (You can get there from your Heroku dashboard, or by clicking on the "Manage App" button after the deploy step is finished.) On that page, there should be a section called "Config Variables" where you can manage the config vars for your application. You'll need click the "Reveal Config Vars" button to see which variables are available, and then the "Edit" button to allow you to change these variables.
Take the client ID you got from Google, and paste it into the "VALUE" field
next to the GOOGLE_OAUTH_CLIENT_ID field, replacing the dummy value that
was there before. Similarly, take the client secret you got from Google,
and paste it into the "VALUE" field next to the GOOGLE_OAUTH_CLIENT_SECRET
field, replacing the dummy value that was there before.
Click the "Save" button when you're done.
Your app name from Heroku will determine the URL that your app is running on:
the URL will be https://APPNAME.herokuapp.com. For example, if Heroku
assigned you an app name of peaceful-lake, your app will be available at
https://peaceful-lake.herokuapp.com. Visit that URL, and you should
immediately be redirected to login with Google!
If you'd prefer to run this locally on your computer, you can do that as well.
Visit the Google Developers Console at https://console.developers.google.com
and create a new project. In the "APIs & auth" section, click on "Credentials",
and then click the "Create a new Client ID" button. Select "Web Application"
for the application type, and click the "Configure consent screen" button.
Put in your application information, and click Save. Once you’ve done that,
you’ll see two new fields: "Authorized JavaScript origins" and
"Authorized redirect URIs". Set the authorized redirect URI to
http://localhost:5000/login/google/authorized, and click "Create Client ID".
Google will give you a client ID and client secret, which we'll use in step 3.
Run the following commands on your computer:
git clone https://github.com/singingwolfboy/flask-dance-google.git cd flask-dance-google python3 -m venv venv source venv/bin/activate pip install -r requirements.txt
These commands will clone this git repository onto your computer,
create a virtual environment for this project, activate it, and install
the dependencies listed in requirements.txt.
Many applications use environment variables for configuration, and Flask-Dance is no exception. You'll need to set the following environment variables:
GOOGLE_OAUTH_CLIENT_ID: set this to the client ID you got from Google.GOOGLE_OAUTH_CLIENT_SECRET: set this to the client secret you got from Google.OAUTHLIB_RELAX_TOKEN_SCOPE: set this totrue. This indicates that it's OK for Google to return different OAuth scopes than requested; Google does that sometimes.OAUTHLIB_INSECURE_TRANSPORT: set this totrue. This indicates that you're doing local testing, and it's OK to use HTTP instead of HTTPS for OAuth. You should only do this for local testing. Do not set this in production! [oauthlib docs]
How you set these variables depends on your operating system. For Mac/Linux, you
can use the export command. For Windows, you can use the SET command. If
you don't want to worry about this, you can create a .env file with
your environment variables, and use foreman to run your app. This repository
has a .env.example file that you can copy.
If you're setting environment variables manually, run your app using Python:
FLASK_APP=google.py flask run
If you're using a .env file for your environment variables, install foreman
and use that to run your app:
foreman start
Then, go to http://localhost:5000/ to visit your app and log in with Google!
Fork this GitHub repo so that you can make changes to it. Read the documentation for Flask and Flask-Dance to learn what's possible. Ask questions, learn as you go, build your own OAuth-enabled web application, and don't forget to be awesome!