I need to get a token to call the Microsoft graph api (https://graph.microsoft.com/v1.0/me) and get the user’s email and ID. I am able to get to the Microsoft sign-in page and it successfully redirected back to my app login page. After the redirect back to my app, I am getting the code, state, and session_state in the url query, but I’m not getting a response from the graph api and I’m also not getting any errors.
I’m new to this, so I may be misinterpreting it, but it looks like the authentication is being returned, but another call is not being made to the token endpoint to get the access token. I’m also confused as to why the graph api response is empty, but I’m not getting an error from the api call that the access token is empty.
Here’s what I’ve set up:
Per Microsoft’s instructions registered my app as an SPA, set up the redirect uri, and changed the manafest’s replyUrlsWithType's type to spa, and created a client_secret:
Added the Authorize step with the code_challenge parameter as a plain string for development (it’s 104 characters long). The other option is SHA256 base64url encoding, but I kept getting errors of invalid length, so for development I think the plain string will be fine.
I also set up a route to the api so I can call it from an anchor button for login, and have a paragraph with the email in the graph response binded to the inner text to see if the api successfully retrieved the user’s data.
Please let me know what I’m doing wrong here, or if I should be using one of the other protocols. This is the last thing I need to figure out for a POC to convince a client to move from Power Apps to Wappler!
The first thing right away that I notice is that you are doing everything via localhost, not always an issue in some sandbox type API environment, but often that can be one of the first things to give you grief. Many APIs want a minimum of a domain name as well as HTTPS, SSL.
Certainly if they have a callback URL in the API. I think I only found 3 APIs so far that allow localhost as a callback address.
My suggestion setup a digital ocean account with 100 dollars free credit, go to API, Click Generate New Token, give it a name, keep both scopes selected, click generate token.
Open Wappler, create a new project as NodeJS, Docker Hosting, once its finished its initial setup, click project settings, set up a new target for Digital Ocean, add your API key, choose the cheapest account, and setup NodeJS14, MariaDB 10.5.x, save.
Get a dummy domain name from wherever and set the nameserver to point to you digital ocean account, in digital ocean set the A record to the domain.
Back in Wappler, Project Settings, Targets, Manage the remote connection and add Portainer and Traefik, which you need for the SSL certificate.
And now you have a solid testing environment ready for API integration. Maybe start with that and see how you go.
Thank you. I know that azure allows local host redirects (as it’s in their documentation and most online tutorials for development), but I will try out your suggestion to cover all bases! I do already have a version of the app running on a DO droplet so that shouldn’t be too much more work.
I had SalesForce docs also saying they accept localhost:8100, but could not get it to work, then reading deeper I saw they were specifically talking about https://localhost, which to be honest I did not even know existed, after trying to add https to localhost unsuccessfully I just went the docker route.
Just helped cut out one possible cause of problems.
@wappler_ambassadors, anyone know how to get localhost with SSL https://localhost just out of interest.
Moved this last part to a new thread, because I did not want to hijack this one.
So I created a test app just to test Azure OAuth2.0 and followed your instructions and I ran into the same issue. No difference from localhost. Were you able to find anything out?
Are the screenshots in the first post still relevant with your tests you did, so i can scan through those to look for a possible reason?
I think I know whats wrong to be honest, can you send a piece of the code you get back please, want to see the start and end of the 104 character long code.
Everything is exactly the same except for the redirect uri in both the scope table in wappler and in the azure app registration portal.
The same thing happened where it successfully redirected, but it looks like it either didn’t get go to the token url to get the token, or wasn’t successful. I’m also not getting any errors like before, but also no response from the graph api (using the oauth2 provider). I tried executing the graph api in a separate server action using the oauth2 provider, but got an error that the access token was empty.
I set up another button on the redirect page (/dashboard) to execute the oauth login again to see the network history. It auto redirects me after I click the button without taking me to the microsoft login page, but it’s not showing my username after “Hello” that I should be getting from the graph api. oauth_login is the same server action in my pictures above. The authorize is the authorize endpoint that responded with the code for the token endpoint, and then there’s the dashboard redirect, but shouldn’t I be seeing something from the token endpoint?
You have your OAuth2 Provider under your API Action
You have your OAuth2 Authorise step after
You have your actual API Action, and this is where I think you have a setup issue, the Action has the Authorization set to the OAuth2, and OAuth2 is set to your provider, but you seem to be missing the Headers.
Add a Header #1
Name: Authorization
Value: Bearer {{YOUR_CODE}}
