Why Callback URLs in OAuth 2.0?

OAuth is an open standard protocol for authorization between two parties over a computer network. It allows users to authorize third-party applications to access their data without sharing their credentials.

OAuth is a way for websites to allow other sites to access user information on their behalf. This means that when you log into Facebook, Twitter, Google+, etc., you're authorizing those services to access your personal information.

In this tutorial, we will show how to set up callback URLs with OAuth so that when someone clicks on a link from Facebook or Twitter they get redirected back to our website. To do this, we need to use OAuth 2.0. OAuth 1.0 was used by Facebook and Twitter before they switched to OAuth 2.0, but it's not compatible with OAuth 2.0 so we'll only cover OAuth 2.0 here.

Login with Facebook/Google Example

A web application normally gives you multiple options to log in. Sometimes it is Login with Facebook, Login with Google or some other account. In such a case the page redirects you to the respective website(Google or Facebook) where you can enter the credentials and they authenticate you and redirect you back to the web app. The user in this case does not submit his credentials to the web app and the web app only gets the success/failure response by Google or Facebook to authenticate the user.

Here callback and redirect url are one and the same thing. We will explain how in the below section.

Accepting OAuth callback request

Resource Owner and Authorization server may not be separate entities, but the resource server needs to be separate.

When the auth server successfully validates the credentials, it needs to send the authorization codes to the app. So during setup, the app developer needs to provide the callback url, so auth codes are sent at the right place. Facebook or Google need a valid url, where they will send the codes via GET or POST request

The application will do the following once it receives the request on the callback url.

1. Accept the incoming request (give valid success 200 message to OAuth Server)
2. Read the authorization codes sent in the POST/GET parameters
3. Save the codes in the database for future use.

For example, the below request is made by the OAuth provider. Parameters to be sent are present in their documentation. The value in auth attribute must be stored in the database,

https://app.example.com/oauth/callback?auth=48Dca0asdfjdfaygUADGacc7&success=true

Authorization Code

The browser accesses the auth server directly. And auth server sends 302 redirect response information to the browser. Then the browser redirects the request back to the client. Thereby, the client gets the authorization code. This authorization code is used by the app to access the access key.

The below diagram shows 3 parts of the OAuth 2.0 process. The callback url is only used to get the authorization grant. Now the client app can send requests directly to auth server and get the token and use this token to call resources.

             +--------+                               +---------------+
             |        |--(A)- Authorization Request ->|   Resource    |
             |        |                               |     Owner     |
             |        |<-(B)-- Authorization Grant ---|               |
             |        |                               +---------------+
             |        |
             |        |                               +---------------+
             |        |--(C)-- Authorization Grant -->| Authorization |
             | App    |                               |     Server    |
             |        |<-(D)----- Access Token -------|               |
             |        |                               +---------------+
             |        |
             |        |                               +---------------+
             |        |--(E)----- Access Token ------>|    Resource   |
             |        |                               |     Server    |
             |        |<-(F)--- Protected Resource ---|               |
             +--------+                               +---------------+ 

These tokens are valid for a certain time. These tokens can be JWT or plain bearer tokens.

Add callback URL(s) to your app settings.

To add callbacks to your application, you must first set up your app settings. Go to your developer console and click on "App Settings" under "APIs & auth". Then scroll down until you see "OAuth2" and click on it. You will then see a list of options. Click on "Add Callback URL" and enter the callback URL you wish to use.

Once you've added the callback URL, you need to test it out. To do so, go back to your developer console and select the "API Access" tab. Under "Authorized redirect URIs", click on "Create new URI". Enter the callback URL you just entered into the field provided. Click "Save changes" and try making calls to the API using the callback URL. If everything works correctly, you should receive a response similar to the following.

Further Reading: Using OAuth 2.0 to Access Google APIs