Facebook OAuth 2.0 Access for Website

The OAuth 2.0 authorization process used by Facebook is the "Authorization Code Grant". Let's introduce how to implement it and how to debug it in Apidog.

What is OAuth 2.0?

OAuth 2.0 is a widely used authorization protocol enabling third-party access to protected resources without requiring user credentials. It involves four key roles:

1. Resource Owner: Typically the user who owns the protected resources.
2. Client: The third-party application seeking access to the resource owner's data.
3. Authorization Server: Validates the resource owner and grants authorization to the client.
4. Resource Server: Stores and manages the protected resources, providing APIs for access.

Common Authorization Flows

OAuth 2.0 protocol implements authorization through various authorization flows. Common authorization flows include:

• Authorization Code Grant: The client redirects the user to the authorization server. After the user logs in and grants permission, the authorization server returns an authorization code to the client. The client then exchanges the authorization code along with its credentials for an access token.
• Authorization Code Grant with PKCE (Proof Key for Code Exchange): Similar to the standard authorization code flow, but the client enhances security by using PKCE (Proof Key for Code Exchange).
• Resource Owner Password Credentials Grant: The resource owner directly provides their username and password to the client. The client then uses these credentials to request an access token from the authorization server.
• Client Credentials Grant: The client directly requests an access token from the authorization server using its own credentials. This flow is suitable for cases where the client itself needs access to resources.
• Implicit Grant: Used to obtain an access token directly from the client in a browser-based application. This flow is typically used for web frontend applications.

How to Use Facebook OAuth 2.0 to Login to Third-Party Websites

Step 1: Create the app and get the client ID and client secret

First, you need to open a Facebook developer account at https://developers.facebook.com. After opening it, create an application in it.

After the application is successfully created, click the [Application Settings->Basic] option. The application number here is the client ID (Client ID), and the application key is the client secret (Client Secret). We will need these two attributes later. used.

Step 2: Configure the callback address

After the application is created, you also need to set the "callback address" in the control panel, click the [Control Panel -> Customize this application] option, and then click "Facebook Login Settings" to enter the configuration interface.

In the "Valid OAuth Jump URI" item on the configuration interface, fill in the callback address (Callback URL), which is the redirect address. Usually it is the domain name of your server (Facebook requires it to start with https).

If you don’t have one yet, you can fill it in first, as long as you make sure that the domain name can be accessed. After the configuration is completed, save it.

The purpose of we need the "callback address" is to obtain the authorization code (code) on the address bar. Generally, after filling in the username and password on the OAuth 2.0 login page, it will be redirected to the "callback address" and can be displayed in the address bar.

Obtain the authorization code (code). The following address bar is used to obtain the code value manually:

After the above information is configured, we officially enter the main process of OAuth 2.0 authorization.

Step 3: Get access token

When the first and second steps above are ready, we can apply for an access token (Token). We will demonstrate this step through Apidog.

Apidog is a very excellent API debugging and management tool, you can get the Token access token directly in Apidog. If you don’t have Apidog installed yet, go download one now!

1. Create HTTP Request After creating an HTTP project in Apidog, open it, and then create a request in the project, choose the "Edit Document -> Auth -> OAuth 2.0" option.

2. Configure Client ID, Client Secret, and Callback URL The default authorization mode selected on the OAuth 2.0 page in Apidog is Authorization Code, as Facebook OAuth 2.0 also uses Authorization Code. So, you don't need to switch here.

Next, find the Client ID and Callback URL at the bottom of the page, and fill in the obtained Client ID, Client Secret, and configured Callback URL from the Facebook OAuth 2.0 service. The specific parameters are the configurations mentioned in "Step 1, Step 2" above.

3. Configure the Authorization Code Request URL According to the official documentation of Facebook, during OAuth 2.0 authentication, the authorization code request URL is: https://www.facebook.com/v19.0/dialog/oauth

Simply fill this authorization code request URL into the Auth URL. This URL can be understood as the login authorization page. It opens this page (in the form of a window on the client side) when verifying the login status for the first time, prompting you to enter your username and password.

Usually, when manually constructing a login authorization page, additional parameters are required in the authorization URL, such as:

https://www.facebook.com/v19.0/dialog/oauth?
  client_id={app-id}
  &redirect_uri={redirect-uri}
  &state={state-param}

Note: Parameters continuation should not have line breaks normally.

However, in Apidog, additional parameters after the base URL are generally not needed. Only the path before the question mark "?" is required because other mandatory parameters are configured separately in other options. Of course, if you want to include some query parameters, you can also add them by clicking the icon next to this input box:

We can also expand the "More" options and fill in the values for the parameters that need to be filled in, such as filling in "Scope" with the required permission "public_profile". The "public_profile" permission in Facebook allows the application to read the default public profile fields of the user node, and this permission is automatically granted to all applications.

In the "State" option, fill in "state", which is to prevent cross-site request forgery. Third-party platforms usually require this to be filled in, so we generally fill it in, otherwise, there may be errors when obtaining the access token.

4. Configure the Access Token Request URL According to the official documentation of Facebook, to obtain an access token, the requested URL is: https://graph.facebook.com/v19.0/oauth/access_token

Simply fill in this address into the Access Token URL input field. Similarly, other parameters have been separately configured in other input fields, so they do not need to be included in the URL.

5. Obtain the Access Token Once all the configuration items mentioned above are set, you can click the "Get Token" button to obtain the access token.

After clicking, if it is your first login, a window will pop up asking for your authorization, where you need to enter your Facebook account username and password. If you are logging in from a new device, you may also need your email for additional verification.

After entering your username and password, you will be asked to confirm authorization.

Click confirm to complete the authorization. Once authorized, the access token will be automatically obtained and displayed on the page. At the same time, other information returned by Facebook will also be parsed.

Step 4: Access Open Resources Based on Token With the access token (Token), you can now use it to access Facebook's open resources. You can see what kind of open resources are available in the Facebook Graph API.

For example, the following API retrieves the user's ID and name. If your interface does not return anything, you may need to check if you have the necessary permissions, as mentioned in Section 3 of "Step 3", simply configure it in the Scope. https://graph.facebook.com/v12.0/me?fields=id,name

When sending a request, Apidog will automatically attach the token to the Authorization header and send it out appended to "Bearer".

If you want to carry the token in the URL, you can also modify the "Add Location" of the token in the configuration options on the page, and select "Query Params".

Summary

OAuth 2.0 is an open-standard authorization protocol that allows third-party applications to securely access protected resources. The authorization code authorization process is a common authorization method and is used by Facebook.

During implementation, you need to create an application, configure a callback address, obtain an access token, and use Apidog for debugging. After obtaining the access token, you can use the token to call Facebook's open resources.