1

What is the purpose of Facebook "Valid OAuth Redirect URIs" and how to use it?

What I should have on this URL?

Does Facebook send any data to the URL when a user is logged in using the Facebook Login on my site?

Here is a question about some redirecting but I think it is not OAuth Redirect: purpose of redirect URI in facebook.

Trayan Momkov
  • 842
  • 1
  • 7
  • 18

1 Answers1

1

"Valid OAuth Redirect URIs" can be configured in My Apps > {your app} > Facebook Login > Settings.

"Valid OAuth Redirect URIs", which I'll call only redirect_uri, is used when you Manually Build a Login Flow.

In this case redirect_uri is a URL to which your web user is redirected after login.

Facebook sends code and state as URL parameters when redirect to redirect_uri.

On the redirect_uri on your http server you should have a programming code which verify the state and use the code to get an access_token.

Example how to make server side API calls:

1. Your login page

On your web page (e.g. https://yourdomain.com/fb-login.html) you have the following Login link:

 <a href="https://www.facebook.com/v9.0/dialog/oauth?client_id=111&redirect_uri=https%3A//yourdomain.com/fb-auth.html&state=mystate123">Login</a>

111 is you Facebook App ID.

https%3A//yourdomain.com/fb-auth.html is your redirect_uri and has to match what you configured in "Valid OAuth Redirect URIs".

mystate123 is your custom state or kind of session ID which you can use to verify that the callback is initiated from your login page. Facebook: "A string value created by your app to maintain state between the request and callback.".

2. Facebook Login window

When the user click "Login" the Facebook Login window appears and she/he enters her/his username and password. After that, on successful login, the user is redirected to https://yourdomain.com/fb-auth.html?code=JQJc5CF&state=mystate123

3. Extract parameters from the callback

When the GET request of the above URL hits your http server you have to extract the code and should extract the state from the URL.

4. Verify the state (optional)

You can verify that the state is matching the state you provided on your Login button at fb-login.html

5. Get access_token

On your server you have to make another GET request to get an access_token. This is server to server call, thus you can include your client_secret. WARNING: Never include your client_secret in client-side code!

 https://graph.facebook.com/v9.0/oauth/access_token?client_id=111&redirect_uri=https%3A//yourdomain.com/fb-auth.html&client_secret=222&code=JQJc5CF

The response is:

{
  "access_token": "IEESb4Z",
  "token_type": "bearer"
}

6. Make API calls

Now you can use the access token to make API calls:

https://graph.facebook.com/v9.0/me?fields=id,name,email&access_token=IEESb4Z
Trayan Momkov
  • 842
  • 1
  • 7
  • 18