Single Sign On

Single Sign-On (SSO)

SSO (single sign-on) will allow a user to sign on once and access multiple applications within the same organization. For additional login methods, see:

Image of sso login

The application icons used here are only intended as placeholders. Please refer to the appropriate branding guidelines when using third party logos for this page. The following are examples of some of the more frequently used third party applications, but you may use others as your needs require.

Single Sign-On (SSO)

Image of single sign-on

  1. Logotype: Company logo is located at the top.
  2. Language Selector (optional): The language selector is located in the top right of the login card.
  3. Title: The title is located at the top of the login card.
  4. Description: “Application” is the one user came from. This page will jump back to that application when finishing the login process.
  5. Required Fields: Username and password are the required fields while additional fields are optional. Some applications may require additional fields such as a specific server or geo-location. When additional fields are required, they can appear underneath the password field. The login card will expand to accommodate the additional fields. The additional fields order will be addressed on a case-by-case basis, but they should sit between the “Password field” and the “checkbox”. Try to limit the number of the fields to less than five. Also, you may use progressive disclosure if the field value have dependency on the previous relevant field.
  6. Checkbox (optional): Checkbox is located under the Required fields. It can be labeled varied texts depending on the needs of different applications. Checkbox labels should be capitalized according to Terminology and Wording Style Guide.
  7. Help Link (optional): It is a link for users to recover their password.
  8. Login Button: The button should be labeled “Log In”. See the Terminology and Wording Style Guide for more information.
  9. Supported Services: All the supported services logo will be displayed at the bottom.
  10. Links (optional): You may add any additional links to pages where the user can get more information or help.

Identity First

User can also be authenticated step by step when login with SSO. The login process are similar to Multi-Factor Login.

Step 1

Image of single sign-on

Step 2

Image of single sign-on

  • View Angular PatternFly Example
  • View PatternFly NG Example
  • View PatternFly React Example

PatternFly Core Example


View full page example

Reference Markup 

<html class="login-pf">
...
<div class="login-pf-page">
<div class="container-fluid">
  <div class="row">
        <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
          <header class="login-pf-page-header">
            <img class="login-pf-brand" src="/assets/img/Logo_Horizontal_Reversed.svg" alt=" logo" />
          </header>
          <div class="row">
            <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
          <div class="card-pf">
              <header class="login-pf-header">
                <select class="selectpicker">
                  <option>English</option>
                  <option>French</option>
                  <option>Italian</option>
                </select>
                <h1>Single Sign-On</h1>
                <p class="text-center">Log in to <strong>Application</strong></p>
              </header>
                <form>
                  <div class="form-group">
                    <label class="sr-only" for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control input-lg" id="exampleInputEmail1" placeholder="Email address">
                  </div>
                  <div class="form-group">
                    <label class="sr-only"  for="exampleInputPassword1">Password
                    </label>
                    <input type="password" class="form-control input-lg" id="exampleInputPassword1" placeholder="Password">
                  </div>
                  <div class="form-group login-pf-settings">
                        <label class="checkbox-label">
                          <input type="checkbox"> Keep me logged in for 30 days
                        </label>
                        <a href="#">Forgot password?</a>
                  </div>
                  <button type="submit" class="btn btn-primary btn-block btn-lg">Log In</button>
                </form>
                <p class="login-pf-signup">Need an account?<a href="#">Sign up</a></p>
        </div><!-- card -->
        <footer class="login-pf-page-footer">
          <div class="login-pf-page-footer-sso-services">
            <p>One account for all your company services</p>
            <ul class="login-pf-page-footer-sso-services-logos">
              <li><img src="/assets/img/google-drive.svg" alt="google drive icon" /></li>
              <li><img src="/assets/img/gmail.svg" alt="gmail icon" /></li>
              <li><img src="/assets/img/google-calendar.svg" alt="google calendar icon" /></li>
            </ul>
          </div>
          <ul class="login-pf-page-footer-links list-unstyled">
            <li><a class="login-pf-page-footer-link" href="#">Terms of Use</a></li>
            <li><a class="login-pf-page-footer-link" href="#">Help</a></li>
            <li><a class="login-pf-page-footer-link" href="#">Privacy Policy</a></li>
          </ul>
        </footer>
      </div><!-- col -->
    </div><!-- row -->
  </div><!-- col -->
</div><!-- login-pf-page -->
</div><!--row-->
</div><!--container-->

</html>