Getting Started

Atlas builds on top of the Cyclops project and includes the Global Menus project to render and manage a shell around your satellite application.

Since Cyclops is required for Atlas to function, you must first include and configure Cyclops for your project. Next, you will need to include the Atlas bundle, a single JavaScript file that includes all of the resources required to use Atlas (i.e. stylesheets, images, templates, etc).

To launch Atlas, you will need to make a call to Atlas.liftoff() with the options specific to your satellite application. These options are documented in the Liftoff API reference.

Authentication w/Auth0 (Optional)

Atlas supports SSO authentication with Auth0, although this authorization path is now deprecated and is not enabled by default. You should not use Auth0 for any new development and is provided for backwards compatibility until a forthcoming SSO solution is available.

If you do need to use Auth0 for SSO, please see the Liftoff API for information on enabling it.

To prevent attackers from spoofing our sites and maliciously performing SSO, a list of allowed domains is maintained in Auth0. You will need to submit a ticket to have your domains (dev, prod, etc) added to this list.

Simple Example

Use the following example to get started with your integration. You will need to customize the options passed to `liftoff()` before this will be functional.

        
<!DOCTYPE html>

<html class="cyclops">
  <head>
    <link rel="stylesheet" href="https://assets.ctl.io/cyclops/1.8.6/css/cyclops.min.css">
  </head>
  <body>

    <!-- These elements will be injected automatically if they are not present
         at the time of liftoff. Include them in your document for a quicker and
         less jarring rendering experience. -->
    <atlas-account-switcher></atlas-account-switcher>
    <brand-bar></brand-bar>
    <atlas-navigation></atlas-navigation>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <script src="https://assets.ctl.io/cyclops/1.8.6/scripts/cyclops.min.js"></script>
    <script src="https://assets.ctl.io/atlas/3.1.0/atlas.js"></script>

    <script>
      $(function() {
        var liftoffOptions = {

          // You can specify 'dev' or 'prod' to point to the Control Portal
          // instance that API calls will be sent to for things like branding,
          // access checks, etc. You can also configure this manually (see
          // the Liftoff API).
          env: 'dev',

          // You will need to use the main navigation id that was assigned
          // to you by Platform here:
          mainNavId: 'Main.Dashboard',

          // If you are not using SSO, you need to provide the username
          // and bearer token of the currently authenticated user:
          username: 'username@ctl.io',
          bearerToken: '...'

          // When using Auth0 for SSO, use the following to trigger the
          // authentication workflow instead of passing the username and
          // bearer token:
          authenticationEnabled: true

        };
        Atlas.liftoff(liftoffOptions).then(function(contexts) {
          console.log('Liftoff Achieved!');
          console.log('Atlas Contexts:', contexts);
        });
      });
    </script>

  </body>
</html>