Retrieve the client credentials from the providers

  • Google: Create your Google OAuth Client at https://console.cloud.google.com/apis/credentials, make sure to add http://localhost:5000/google/auth/ into Authorized redirect URIs.
  • Twitter: Create your Twitter Oauth 1.0 Client at https://developer.twitter.com/ by creating an app. Add http://localhost:5000/twitter/auth/ into Authorized redirect URIs.
  • Facebook: Create your Facebook OAuth Client at https://developer.facebook.com/, by creating an app. Add http://localhost:5000/facebook/auth/ into Authorized redirect URIs.

The client credentials can be used directly in the program but in actual production, these credentials are to be stored in environment variables.

OAuth Authentication with Flask – Connect to Google, Twitter, and Facebook

In this article, we are going to build a flask application that will use the OAuth protocol to get user information. First, we need to understand the OAuth protocol and its procedure.

Similar Reads

What is OAuth?

OAuth stands for Open Authorization and was implemented to achieve a connection between online services. The OAuth Community Site defines it as “An open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications.”. A popular example of OAuth would be the Sign in with Google button present on various websites. Here the website service connects with the google service to provide you with an easy option to authorize your resource to the desired service. There are two versions of OAuth OAuth1.0 and OAuth2.0 now....

Terminologies in OAuth

Client: It is the application or service trying to connect to the other service. Provider: It is the service to which the client connects. Authorization URL: It is the URL provided by the provider to which the client sends requests. Client ID and Secret:  It is provided by the provider and used when the authorization request is sent to the provider by the client. Authorization Code: It is a code that is retrieved by the client on successful authentication by the user and it is sent to the provider’s authorization server. Callback URL: It is the URL set by the client to which the provider sends the authorization code and the user resources are retrieved by the client service....

Steps involved to setup OAuth

Step 1: Register your application as a client on the provider website. You will receive the client credentials which include the client ID and client secret....

Installing required dependencies

To install the required dependencies type the below command in the terminal....

Retrieve the client credentials from the providers

Google: Create your Google OAuth Client at https://console.cloud.google.com/apis/credentials, make sure to add http://localhost:5000/google/auth/ into Authorized redirect URIs. Twitter: Create your Twitter Oauth 1.0 Client at https://developer.twitter.com/ by creating an app. Add http://localhost:5000/twitter/auth/ into Authorized redirect URIs. Facebook: Create your Facebook OAuth Client at https://developer.facebook.com/, by creating an app. Add http://localhost:5000/facebook/auth/ into Authorized redirect URIs....

Create the UI

Create a folder called templates and inside create an index.html file. Paste the following code inside the index.html file. It is a simple code that creates buttons for every provider....

Creating the Flask app

...