Challenges/Improvements & one bug - Wappler OAuth2 Connector

We wanted to integrate with KeyCloak which is an awesome IAM solution. OAuth2 is the way to go, just like how we are taken to facebook login page, I had to go to KeyCloak login page, complete the OAuth OIDC Auth Code Flow, and on successful login, redirect to my product page.

I had a lot of challenges implementing the Using OAuth2 Connector with Facebook guide successfully, but managed to figure out things over the last 10 days… Here is a quick summary of my feedback, and hacks. I know I’m not suppose to edit core files, but hopefully the wappler team @patrick @George can take the below feedback and improvise the oauth2 oob connector.

1. Debugging the server action file: The server-side debug flag sends additional details to the client-side regarding exceptions. But, in this flow, we are not calling the server-side api, rather completely navigating and opening the server-action file (under dmxConnect folder)… When things didn’t work, it was almost impossible to figure out what the issue was, as the page goes blank when hitting an error. I wish there was some wappler smarts there to debug & find our way. I ended up var_dump’ing from the oauth2.php core file to figure things out!

2. Redirect URI: This was a complete bummer for me. Looks like the redirect URI is constructed in getRedirectUri() which constructs it with various $_SERVER parameters. Most importantly, it missed setting the https for me, so SSL was constantly failing on me. I’m not sure if this is a smart way, as these server parameters are not always set depending on how our back-end is. What I ended up doing here is adding the below at the end of getRedirectUri() to override the auto-generated redirect URI with the correct redirect URL as a parameter (https://mydomain/dmxConnect/api/security/login_kc_auth_code.php):

image

       if(isset(((array)$this->options->params)['redirect_uri'])){
        $url = ((array)$this->options->params)['redirect_uri'];
    }

3. POST fields: Long story short, my keycloak auth endpoint expected the POST data as “application/x-www-form-urlencoded”, while wappler kept generated “multipart/form-data”… After a lot of time spent on stackoverflow, this link helped, I enclosed the $data within http_build_query to make it work for me. This possibly might have broken my pre-existing facebook direct oauth login (unused, so I didn’t test it).

    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));

4. BUG: I didn’t quite understand the difference between token handling (self-maintain vs session), but after completing the auth flow, and with a token in hand, I wanted to do a API get to fetch login user’s details such as name, etc… In my API call (api_acc below) I chose OAuth2 as Authorization field, and chose provider1 and this kept failing over and again.

After a lot of struggle I figured out that the token is actually in the Authorizer and not in the Provider. Wappler is incorrectly listing the provider while it should actually list the Authorizer for me to choose. I had to open the file, manually changed provider1 to my authorizer and the authorization token worked beautifully… This needs to be fixed.

In api.php,

    if ($options->oauth) {
        $oauth2 = $this->app->scope->get($options->oauth);
        if ($oauth2 && $oauth2->access_token) {
            $headers['Authorization'] = 'Bearer ' . $oauth2->access_token;
        }
    }

If it was suppose to the provider to use the tokens, then the tokens should be picked from the session variables.
image

Could this be why I’m unable to get Xero working here: OAuth2 to connect to Xero API ?

The easiest way to see the difference is try setting a value and open the data picker, in my case, it shows what’s returned in Provider & Authorizer steps.

image
So in the api call, when I choose Authorization as “OAuth2”, the dropdown displays only the provider (circle-1). In this dropdown, ideally I would have expected the Authorizer to be displayed as it’s the Authorizer that really has the access_toke & refresh_token.

Until this bug is fixed, I’m sending the access_token manually in the header (text in yellow circle-2). The inconvenience is I have to create unnecessary session variables if I had to use the access_token & refresh_token in other server actions.

Hi @Akayy,

I’m working through the Xero API, I have it working fine on localhost but not on a staging site.The site post https as the redirect URI (as in your point 2 above) I assume because of the server certificate settings. This leads to the Xero endpoint rejecting it as it doesn’t match their stored redirect uri which has to be https or localhost so I can’t change it.

Your solution looks like it might be what I need, can you confirm where the code you added should go? I’ve tried a few options but haven’t managed to get it working…

  protected function getRedirectUri() {
        $https = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on';
        $port = $_SERVER['SERVER_PORT'];

        $url = 'http';
        $url .= $https ? 's' : '';
        $url .= '://';
        $url .= $_SERVER['SERVER_NAME'];
        $url .= ($https && $port == '443') || (!$https && $port == '80') ? '' : ':' . $port;
        $url .= parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH);
        if(isset(((array)$this->options->params)['redirect_uri'])){
        $url = ((array)$this->options->params)['redirect_uri'];
	
    }
	

        return $url;
    }

Also do you set the redirect_uri in the params of the Provider or the Authorize step?

I’ve not come across any of the other issues raised but do agree this would be a good addition, enabling a bit of flexibility to set the redirect_uri manually!

Hi @sbecks sbecks,

I too wish the oauth2 connector can be fixed properly, esp the redirect_uri override would be awesome…

Your hack is as per my above instruction (adding the if block inside function getRedirectUri)…

I pass the redirect_uri from my provider (not authorizer). I have two providers (one for local, second one for production), and toggle when pushing dev to qa. One difference is “verify ssl” is ticked only in my second one.

My authorize step for your reference.

Note (point-4 bug in my original post): The subsequent api calls you make, leave Authorization as “None” (instead of Oauth), try passing the bearer manually as a header (like below).

Again, your oauth provider is different from mine, so there might be something else, good luck!

That’s brilliant thanks.

I found I had to add it to both Provider and Authorise steps but it seems to be working fine now. I guess once it’s on a fully certified domain it may not be needed but it’s really helpful to be able to test that fully now (it’s currently on Azure which has https via a wildcard certificate) .

I assume that file may be overwritten via Wappler updates etc? So need to make sure to add the extra lines back in.

1 Like

I made some changes to the oauth to fix some issues.

Oauth2.zip (1.7 KB)

It should now be possible to override the redirect_uri (changed the merge order). access_token and refresh_token are now correctly set on the provider after a grant.

3 Likes

This is fixed in Wappler 3.0.2

This topic was automatically closed after 2 days. New replies are no longer allowed.