Comment on page
Azure AD SSO
Azure Active Directory Single Sign On
Run mode credentials:
u: username
p: password
To set up Azure AD SSO, users need to set up a series of workflows in the Bubble app, and the app admin needs to set up an Application in Azure AD in order to get a Client ID and Client Secret.
This implementation uses 3 plugins (Azure SSO, JWT Decoder, and Encrypt & Decrypt Text), the first two of which are private plugins as of May 15, 2020. Contact Juan (at [email protected]) to add them to your app.
Note: The Microsoft Login API doesn't seem to work with the API Connector's OAuth 2.0 flow. The Authorization call returns a JSON Web Token, and it's not clear that the API Connector can process that.
The flow works as follows:
- 1.User is directed to the Microsoft website to sign in with their Azure AD account
- 1.Use the "Sign in to Azure AD" workflow from the Azure SSO plugin. This also works for signing up.
- 2.The user should be redirected to the Bubble app if the redirect URI is correctly set up and the user can sign into their Azure AD user.
- 3.Upon redirect, a "code" parameter is returned in the URL. This code's text needs to be sent to Azure AD to authenticate.
- 1.Send this using the "Azure Manual SSO - Get Access Key" call from the Azure SSO plugin.
- 4.Decode the JSON Web Token returned by the "Azure Manual SSO - Get Access Key" call.
- 1.Do this using the JWT Decoder plugin.
- 5.Get the user's name and email from the decoded JWT.
- 1.Regex is needed to get these fields from the JWT. Copy the regex from the sample app for this.
- 6.Use the email and name to sign the user up or log them in, depending on whether a user exists with that email already.
- 7.Generate a new password for the user each time and use it to sign them up.
This process needs to be repeated each time the user logs in.
If necessary, a "single sign out" action can also be implemented. After signing out, the user will redirect to a URL that is 1) specified in the Azure Application's config and 2) included in this Sign Out action. Either before or after signing out, the user can be signed out of Bubble. Doing so beforehand may make for simpler workflows, but if the user logs out on a page with restricted access, they may be redirected before being signed out on the Microsoft side of things.
https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow
https://docs.microsoft.com/en-us/azure/active-directory/develop/id-tokens
https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-protocols-oidc
https://docs.microsoft.com/en-us/azure/active-directory/develop/single-sign-on-saml-protocol (didn't implement SAML/SOAP, but could be useful)
https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-protocols-oidc#send-a-sign-out-request
Configuring this plugin requires a builder or the client to set up some resources in the Azure portal and make sure they're in line with your specific app.
Before the following steps, an "App Registration" needs to be created in your Azure account. Only one person needs to do this.
Get the application client ID to add to your Bubble app.
Bubble Credentials in the Plugin tab
Generate a client secret key that never expires to add to your Bubble app. Azure recommends generating a secret that never expires (like the key
test2 in the image below).
The login redirect URLs need to be configured to accept any possible redirect destinations for your app. In the test app, it would need to have the following URLs to work in the testing and production environments:
From this page, you should be able to grab the ?code URL querystring and use it to generate an Access Token. In this example, when the user loads https://chris-sandbox.bubbleapps.io/azure-sso?code=abc123abc123abc123abc123abc123, then the Bubble app uses that code to generate an access token.
Assigning the Redirect URIs in the Azure Dashboard
Signout url assignment explanation (accurate as of September 2020):
Processing the ?code querystring from Azure after user logs in
Here's an additional demo of the functionality. It responds to a few specific bugs but might be useful while setting up an integration.