Looking into creating an app that would grab data from Microsoft Office 365. Using Graph seems to be the way to go, but it’s looking rather complicated at the moment, so just wondering if anyone else has built an API connection for it yet.
I am interested in this as well as using Office365 for login provider
This is a work in progress.
- Create a new page on your bubble app and add a button. We’ll add workflow to the button later.
1.1. Click the Preview button to view the page.
1.2. Copy the URL. It will look something like this
https://myapp.bubbleapps.io/version-test/graphlogin
2.0 Register your app at Sign in to your Microsoft account
2.1 Under Application Secrets click “Generate New Password” and save this for later use in a text file
2.2 Under Platforms click Add Platform and add a Web platform
2.3 Make sure the Allow Implicit Flow is checked and add the bubble page URL we copied in step 1.3
2.4 Under Microsoft Graph Permissions, add the permissions you will need for your app. Go here for more details Microsoft Graph Dev Center | APIs and app development
2.5 Click the Save button
3.0 Create new API Connector in Bubble. Make sure you specify all of the scopes that you created earlier in the Scope field. The App Secret will be the password you created in step 2.1
4.0 Go back to the Bubble page we create and open the Workflow page. Create a workflow that when the button is clicked it will Signup/Login with a Social Media Account, then select the API you created
5.0 Go to the preview page and click the login button. It should redirect you to the Microsoft Login page and if you’re successful you should get a page asking if it’s ok to connect your Microsoft account with your Bubble app.
6.0 Now you can start building your API calls.
3 Likes
This is great, I had to make a few modifications to your instructions to get it to work for me:
- Check to put the authentication in the header
- Changed the User email key path from “email” to “mail”
Now, when I login, bubble is successfully creating a new user and populating the email field. However, I ran into a stumbling block and don’t know how to get past it. Bubble requires you to run the OAuth flow at least once with the debugger turned on but MS Graph will not accept a redirect URL with a query parameter. Running without the debug parameter seems to work just fine but I get a warning about it each time.
A bit late to respond here but I tried setting up the graph api a while ago. Ran into the same query string issue… Bubble requires ?debug_mode=true to set up the call. Microsoft doesn’t allow that in redirect URI. Hence was not able to take it forward. Maybe something @emmanuel and @josh can address.
2 Likes
I did notice the issue with the debug parameter, but it only seems to happen if you try to sign in with a work/school account. If you use a personal account the error is different.
With a personal account I get redirected back to bubble, but then I get the following error. I’ll open a bug report for it.
Looks like Bubble will not support this API at the moment due to the parameters in the URL.
You can try building a plugin and use the URL
https://bubble.io/plugin_editor/plugin_id
I’ve pushed a change that should make it work.
1 Like
@emmanuel not sure I understand. The URL in the Plugin system still has parameters. I’ve added just Bubble Plugin Editor - in the Microsoft Application Registration, but when I try to click the Authenticate button in the plugin, nothing happens. Should it let me know that it’s authenticating?
Actually let’s get back to email, can you email us back and we’ll have a look.
@Kfawcett @emmanuel
could you also let us know when you find a workaround to the querystring ‘?’ challenge.
Thanks !
2 Likes
Any resolution to this as I am looking to make use of Office API
@Kfawcett any update from the email correspondence?
Have you looked at using the classic API’s from Microsoft, meaning one for each service you need to access (as Graph just reroutes the call to the correct endpoints)?
I noticed that Office 365 and Zapier are integrated together, and bubble can connect with Zapier, is there any change to integrate Bubble > Zapier > Office 365?
So trying this out today as a plugin. I see the option to “click here” to authenticate without using a parameter. When I dom, the editor refreshes into read-only mode with a warning about not supporting “multi editions of plugins”.
Going back to API shows the redirect-url now doesn’t contain any parameters as expected. I hit authenticate and everything seems to work fine. I am redirected back to the read-only version (another warning about multi editions of plugins) and the editor says that oAuth is setup correctly and I can create calls. However, since I am in read only mode that is not possible. I don’t see a way switch back and if I close and reopen the editor the oAuth is in read/write mode but the api is back to square one, untested/authenticated. I must be missing something, however, the good news, testing the plugin in an app correctly authenticates and creates a new user. The bad news is I can’t create/test subsequent api calls since I am read-only mode. Adding a simple call such as https://graph.microsoft.com/v1.0/me/ results in a token error when executed
1 Like
Today the issues with the read-only plugin editor are gone. I am not sure if I had a session/cookie problem or there was a change by bubble. I am able to successfully authenticate (using the version without parameters) but, like yesterday, I cannot make any subsequent calls without getting a token error. The exact same setup in postman works fine.
When trying to make the get https://graph.microsoft.com/v1.0/me call, I get the following error
As before when testing the plugin, it works for authenticating against MS then creating a bubble user, but nothing more. Any insight would be greatly appreciated.
@andrew It looks like we have to perform another step after requesting the Authorization. Next we have to request an Access Token. I’m trying to figure it out now, but another person trying would be helpful.
See this link – there is a “Run in Postman” button in the Tip section to launch Postman with all of the steps: Microsoft identity platform and OAuth 2.0 authorization code flow - Microsoft identity platform | Microsoft Learn
Once launched in Postman you’ll get four actions. Run “Authorize Request” first in your browser. It will return a “Code” parameter in the URL. You’ll need to put this “Code” in the “Code” key under the “Body” tab.
@emmanuel could you help? Microsoft graph appears to need multiple steps before working – see post above for more details.
- Authorize Request
This returns a code in the URL – I think this needs “Token is returned as a querystring” selected to return the code, but the checkbox is breaking the plugin when selected.
Here’s an example showing the “Code” parameter that’s returned(numbers changed to protect the innocent): Bubble Plugin Editor -
I’m not sure how to store that “code” after it’s returned in order to do the next step which is the token request.
- Token Request
Here’s a diagram. Is this even possible right now?
It looks like this is now working. I was able to setup the additional API calls. 
Make sure you have “offline_access” added to the scopes. This is necessary for token refresh.
1 Like
Hi there - it has been a while since you created this tread. Nonetheless I am looking to create the same Microsoft Graph integration and keep on getting this error:
There was an issue testing the authentication flow, please check your settings.
Raw error from this service: {
"error": {
"code": "ErrorNoPermissionsInAccessToken",
"message": "Exception of type 'Microsoft.Fast.Profile.Core.Exception.ProfileAccessDeniedException' was thrown.",
"innerError": {
"request-id": "71edd304-252d-4d2d-88b6-b523265861cd",
"date": "2018-09-04T14:03:07"
}
}
}
Any idea at all why?
Here are my settings (same as the Outlook plugin by @romanmg ):
