Azure AD SSO

Azure Active Directory Single Sign On

Demo

Editor link

Run mode link

Run mode credentials:

u: username

p: password

High Level Overview

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.

Technical Details

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 Chris (or [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.

Single Sign In

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.

Single Sign Out

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.

Additional technical docs

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

Setting up the Azure App

Video tutorial

Here's a video tutorial of the below steps.

Text/image tutorial

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.

Create an application registration

Before the following steps, an "App Registration" needs to be created in your Azure account. Only one person needs to do this.

Client ID

Get the application client ID to add to your Bubble app.

Bubble Credentials in the Plugin tab

Client Secret

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).

Login redirect URL(s) and Logout redirect URL

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:

https://chris-sandbox.bubbleapps.io/version-test/azure-sso and https://chris-sandbox.bubbleapps.io/azure-sso

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.