To integrate the SSO Self-Service widget into your application you will need to add:

  1. Client-side code in a new HTML page.
  2. The SSO Self-Service widget's JavaScript in the new HTML page.
  3. Server-side code to ensure the widget runs securely.

The SSO Self-Service widget displays a link to your application page similar to the following (by default):

Note: You can customize the appearance of this widget by choosing non-default CSS settings.

When your customer clicks the link, they will be securely redirected to the PingOne SaaS SSO portal where they will enter their configuration information.

Add the Client-Side Code
  1. Create a new HTML page or section in your application. This is the location you will ask your customer's administrator to visit.
  2. Add a blank <div> tag with a unique id attribute value. For example: 
    <div id="pingWidget">Loading...</div>

    Any <div> tag contents will be replaced by the SSO Self-Service widget.

  3. Get the SSO Self-Service widget from the PingOne site.
    1. Sign in to the PingOne admin portal and go to the SSO Self-Service page.
    2. Click the link to download the SSO Self-Service widget.
  4. Open the downloaded widget JS file and copy and paste the JavaScript within the <div> </div>tags you added to your HTML page.
  5. Edit the JavaScript for the widget to add the pingOneParams parameter values:
    pingOneParams.ssoDivId
    The element id of the HTML <div> tag that contains the SSO Self-Service widget JavaScript.
    pingOneParams.openToken
    The OpenToken from your server code. See the following Add the Server-Side Code section for more information.
    pingOneParams.saasId (Optional)
    the saasID value for your application that you want to enable for SSO. This allows you to confine SSO to a specific application. If you do not specify a value here, all of your applications will be enabled for SSO. Refer to the SSO Self-Service page for the SaaS ID values for your applications.
    pingOneParams.accountId
    The Company ID for your account.
    pingOneParams.useDefaultCss (Optional)
    A boolean value indicating whether to include the default CSS for the SSO Self-Service widget (defaults to true). Set this to false if you want to use your own CSS (to customize the widget display, for example).
    pingOneParams.useDefaultHtml (Optional)
    A boolean value indicating whether to include the default HTML for the SSO Self-Service widget (defaults to true). Set this to false if you want to use your own HTML.
Add the Server-Side Code
  1. Go to the SSO Self-Service page.
  2. Select the appropriate language link to download sample server-side code for one of the available languages.
  3. Using your downloaded sample as the basis, write the supporting code to implement the server-side functionality.
    Your server-side code constructs two name/value pairs (the idpId name/value pair and the email name/value pair) and uses the OpenToken library to generate an OpenToken. OpenToken is a secure, open standard for encrypting and sending name/value pairs.

    The OpenToken standard requires that a subject attribute be passed. To comply with the standard, we pass the idpId parameter as subject. This is reflected in all of our sample code.

  4. Follow the instructions in the readme file included in the download to generate an OpenToken for your specified idpId and email values.
  5. In the client-side JavaScript for the SSO Self-Service widget on your HTML page, assign the generated token as the value of the openToken parameter.