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 (Do Not Use)

Atlas supports SSO authentication with Auth0 but we no longer pay for the service. This feature should not be used and no timeline on converting Atlas to use new CenturyLink Master Account application.

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>
    <atlas-header></atlas-header>
    <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.5/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: '...'

          // If you want to support having an account menu link - 'My CenturyLink Master Account'.
          masterAccountUrl: 'https://sso-lab.ctl.io'

          // Do not use this settings as we no longer use/support Auth0
          // 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>