Question 319267 in Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Facebook api – When using whatsapp embedded signup I can't exchange code for access token

When implementing the WhatsApp embedded signup flow, I can redirect to the signup flow an retrieve an access code. When I want to exchange the access code for an access code, I get the following error message:

OAuthException: Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request

My code:

const fbAsyncInit = function () {
    // JavaScript SDK configuration and setup
    FB.init({
        appId:    '<APP_ID>', // Meta App ID
        cookie:   true, // enable cookies
        xfbml:    true, // parse social plugins on this page
        version:  'v18.0' //Graph API version
    });
};

fbAsyncInit();

function launchWhatsAppSignup() {
    // Launch Facebook login
    FB.login(function (response) {
        if (response.authResponse) {
            const code = response.authResponse.code;
            //Use this token to call the debug_token API and get the shared WABA's ID
            resource.storeCredentials({token: code})
                .then((response) => {
                    router.push({name: 'integration.whatsapp.select-phone-number'})
                })
                .catch(setError);
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
    }, {
        config_id: '<CONFIG_ID>', // configuration ID obtained in the previous step goes here
        response_type: 'code',     // must be set to 'code' for System User access token
        override_default_response_type: true,
        extras: {
            setup: {
                // Prefilled data can go here
            }
        }
    });
}

When I want to exchange the code for an access token using the following code:

$response = Http::get('https://graph.facebook.com/v18.0/oauth/access_token', [
        'client_id' => env('FACEBOOK_CLIENT_ID'),
        'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
        'code' => $this->code,
]);

I get the following error:

Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request

I used my localhost to test this out, I also did this on a live environment with a URL I specified in the Facebook login settings, but without any luck.

Any Idea what I’m doing wrong?

Tags:

2

Answers


  1. 0

    The problem is that that despite FB’s docs being unclear about it, redirect_uri is a required parameter on your call to https://graph.facebook.com/v18.0/oauth/access_token, and like the error says it must match the redirect_uri value on the previous call to start the oauth/dialog endpoint.

    The problem with this that you and I both have is that we’re using the FB JS SDK and the FB.login(...) method to authenticate/login. This process sets a redirect_uri (that we don’t have access to and cannot override) within the popup.

    I’m not sure there is a solution at this time. Facebook provides a broken JS SDK and its docs are misleading.

    Login or Signup to reply.
  2. 0

    zigzags answer is correct, it has to do with the redirect_uri.. I was able to overcome this issue using the manual-flow. Basically you have to create the oauth url manually and open it, the following code worked for me:

    function startEmbeddedSignupFlowManualUrl () {
  // Facebook's OAuth 2.0 endpoint for requesting an access token
  const oauth2Endpoint = 'https://www.facebook.com/v18.0/dialog/oauth'

  // Parameters to pass to the OAuth 2.0 endpoint.
  const params = {
    client_id: '<your_client_id>',
    redirect_uri: '<your_redirect_uri>',
    response_type: 'code',
    config_id: '<your_fb_login_config_id>',
    state: 'pass-through value'
  }

  // Construct the OAuth URL with parameters
  const oauthURL = `${oauth2Endpoint}?${new URLSearchParams(params).toString()}`

  // Open a new window for the OAuth flow
  window.location.replace(oauthURL)
}

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search