Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/singingwolfboy/flask-dance-google

Example app that logs in with Google using Flask-Dance
https://github.com/singingwolfboy/flask-dance-google

Last synced: about 2 months ago
JSON representation

Example app that logs in with Google using Flask-Dance

Awesome Lists containing this project

README 

        
Flask-Dance Example App: Google Edition

=======================================



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 Installation

```````````````````

`Heroku`_ is a great way to get up and running fast, and you don't even need

to open the terminal!



Step 1: Deploy to Heroku

------------------------

It's easy, and it's free! Just click on this button:



|heroku-deploy|



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!



Step 2: Get OAuth credentials from Google

-----------------------------------------

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.



Step 3: Give OAuth credentials to your app on Heroku

----------------------------------------------------

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.



Step 4: Visit your app and login with Google!

---------------------------------------------

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!



Local Installation

``````````````````

If you'd prefer to run this locally on your computer, you can do that as well.



Step 1: Get OAuth credentials from Google

-----------------------------------------

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.



Step 2: Install code and dependencies

-------------------------------------

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``.



Step 3: Set environment variables

---------------------------------

Many applications use `environment variables`_ for configuration, and

Flask-Dance is no exception. You'll need to set the following environment

variables:



* ``FLASK_APP``: set this to ``google.py``

* ``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 to ``true``. This indicates that

  it's OK for Google to return different OAuth scopes than requested; Google

  does that sometimes.

* ``OAUTHLIB_INSECURE_TRANSPORT``: set this to ``true``. 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`_]



The easiest way to set these environment variables is to define them in

an ``.env`` file. You can then install the `python-dotenv`_ package

to make Flask automatically read this file when you run the dev server.

This repository has a ``.env.example`` file that you can copy to

``.env`` to get a head start



Step 4: Run your app and login with Google!

-------------------------------------------

Run your app using the ``flask`` command::



    flask run



Then, go to http://localhost:5000/ to visit your app and log in with Google!



If you get an error message that says "Could not locate a Flask application",

then you need to install the `python-dotenv`_ package using ``pip``::



    pip install python-dotenv



Once the package is installed, try the ``flask run`` command again!



Learn more!

```````````

`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!



.. _Flask: http://flask.pocoo.org/docs/

.. _Flask-Dance: http://flask-dance.readthedocs.org/

.. _Google: https://myaccount.google.com/

.. _Heroku: https://www.heroku.com/

.. _environment variables: https://en.wikipedia.org/wiki/Environment_variable

.. _python-dotenv: https://github.com/theskumar/python-dotenv

.. _oauthlib docs: http://oauthlib.readthedocs.org/en/latest/oauth2/security.html#envvar-OAUTHLIB_INSECURE_TRANSPORT

.. _virtual environment: https://docs.python.org/3.7/library/venv.html

.. _Fork this GitHub repo: https://help.github.com/articles/fork-a-repo/



.. |heroku-deploy| image:: https://www.herokucdn.com/deploy/button.png

   :target: https://heroku.com/deploy

   :alt: Deploy to Heroku