Multi-tenant integration (single sign-on)

Preface

Multi-tenancy is a common approach for any cloud based application. Single instance strategy for different organizations is always more effective in terms of maintenance and costs.

The Editor component aims at helping to create and manage the visual representation of a seating chart. This document covers all cases when a ticketing platform provides multi-tenancy and desired integration model shall support that kind of scenario.

Goals

The primary goal is to support multi-tenant models seamlessly between two platforms. allows organizing separated workspaces for different organizations. To achieve the existing goals, we need to implement SSO functionality among two platforms.

Tenants might be represented as some organizations or clients in terms of ticketing software.

Integration

Definitions

Here and below, we are going to use the following terms:

  • Ticketing Platform - TP - is a platform to integrate
  • Seatmap.pro - SMP - the platform that consists of two main components:
    • Editor - UI application for schemas editing
    • Booking - API component of the platform handling authentication and organization management

Model

We link users to a specific tenant, so we are defining some scope or restriction to separate access between two or more organizations.

model

Basically, a single tenant or organization can contain multiple users.

Main flow

Let’s consider the initial scenario when a TP authenticated user is trying to open SMP Editor UI. To skip the authentication step on the SMP side, a user shall have authentication tokens. To connect two platforms, we need to conduct the following steps:

  1. To sync up organizations, TP identifies the current user’s organization and checks that it already exists on the SMP Booking side and has some ID.
    • In case if an organization doesn’t exist on the SMP Booking side, TP shall create it first with the organization management API
  2. When the organization id is known, TP is ready to retrieve authentication tokens with the autoLogin method
  3. As a result of autoLogin, TP may redirect or open up SMP Editor UI with the retrieved token and refreshToken

sequence

Creating an organization

To create an organization programmatically, you need to call the management API on the SMP Booking side:

POST /api/private/management/v2.0/organizations/ HTTP/1.1
Host: {BOOKING_HOST}
Content-Type: application/json
Authorization: Bearer {YOUR_ACCESS_TOKEN}
Content-Length: 164

{
    "organization": {
        "name": "Organization Name"
        // other organization properties
    },
    "user": {
        "email": "jd@seatmap.pro",
        "firstName": "John",
        "lastName": "Doe"
        // other user properties
    }
}

This endpoint requires proper authentication via a bearer token. The response will contain the created organization with its ID, which you’ll need for subsequent operations.

Auto login request

Auto login method allows getting a user session. This is now handled by the SMP Booking system:

POST /api/public/v2.0/autologin/ HTTP/1.1
Host: {BOOKING_HOST}
Content-Type: application/json
Content-Length: 164

{
    "login": "jd@seatmap.pro",
    "firstName": "John",
    "lastName": "Doe",
    "token": "{PRIVATE_KEY}"
}

The response will include the following information:

{
    "user": {
        // User information
    },
    "success": true,
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "sessionId": "abc123xyz"
}

Opening the Editor application

After receiving the autologin response, you can open the SMP Editor application in an iframe by adding the token and refreshToken as URL parameters:

<iframe 
  src="{EDITOR_HOST}?token={token}&refreshToken={refreshToken}" 
  width="100%" 
  height="800px" 
  frameborder="0">
</iframe>

Replace {token} and {refreshToken} with the corresponding values from the autologin response. This allows the SMP Editor application to authenticate the user automatically without requiring additional login steps.

Example

Let’s say you need to open the Editor for a specific venue schema at URL https://editor.seatmap.dev/app/venues/2/schemas/150, and you received the following tokens from the autologin response:

  • token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U
  • refreshToken: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJyZWZyZXNoIn0.eBjJJpHLlEVcKkprmYzqmh5hS5Vb5aT1QRYoD-YKfuU

The complete URL to use in your iframe would be:

https://editor.seatmap.dev/app/venues/2/schemas/150?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U&refreshToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJyZWZyZXNoIn0.eBjJJpHLlEVcKkprmYzqmh5hS5Vb5aT1QRYoD-YKfuU

And the complete iframe implementation would be:

<iframe 
  src="https://editor.seatmap.dev/app/venues/2/schemas/150?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U&refreshToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJyZWZyZXNoIn0.eBjJJpHLlEVcKkprmYzqmh5hS5Vb5aT1QRYoD-YKfuU" 
  width="100%" 
  height="800px" 
  frameborder="0">
</iframe>