Provides an example login application for use with PingOne for Customers. Included user dialogs:
- Username and Password
- Passwordless
- One Time Passcodes
- Mobile Push Notifications
- Expired Password Changes
- External Identity Providers
- Account Linking
- Custom Domains
This sample application is written in HTML and JavaScript and leverages JQuery, Bootstrap and js-cookie. It leverages the PingOne for Customers Flow APIs (https://apidocs.pingidentity.com/pingone/platform/v1/api/#flows-1).
PingOne optionally supports the mapping of customer-owned and controlled domain names that are used to access user interfaces and services. More information is available in Ping's documentation portal (https://apidocs.pingidentity.com/pingone/platform/v1/api/#custom-domains)
- Create a PingOne for Customers Application and Sample User
- Update js/auth.js with your tenant's variables
- Publish the contents of /dist to the DocumentRoot of your web server
- dist/index.html - Landing page for anonymous or authenticated users
- dist/js/auth.js - Shared JavaScript with configuration for your P14C tenant
- dist/login/index.html - Sample login application with different user interactions
- dist/logout/index.html - Logout mechanism
You will need your own PingOne for Customers tenant. You can sign up for a trial.
Once you have your own tenant, use the PingOne for Customers Admin Console to add an application connection. To create the application connection:
- Click Connections.
- Click + Application.
- Create the application profile by entering the following information:
- Application name: pingone-customers-sample-login or other name
- Select the Single Page App type.
- Click Save.
- Click Configuration at the top of the app settings.
- Click on the pencil to edit the configurations for the app.
- Add a Redirect URI: The URL where dist/login/ will live. For example, https://www.example.com/login/
- Click Save and Continue
- Click Resources at the top of the app settings.
- Click on the pencil to edit the resources for the app.
- At a minimum, add the following scope: profile
- Click Save
- Click on the slider icon at the top right of the application to enable the app.
The Applications page shows the new application. Click the toggle switch to enable the application. View the details of your application and make note of its Client ID.
- Edit the Application (click the pencil icon)
- On the Profile Tab of your new application, populate SignOn URL with the location that dist/login/ will live. For example, https://www.example.com/login/
- On the Configuration Tab of your new application, populate SignOff URLs with the location that dist/logout/ will live. For example, https://www.example.com/logout/
- Click Save
To get your Environment ID, in the Admin Console, click Settings, then Environment, then Properties. The Properties page shows the environment ID.
To create your test user:
- Click Users.
- Click + Add User.
- At a minimum, specify a username such as michael@example.com and a population.
- Click Save
- View your new user and select Reset Password
- Specify an initial password, such as 4Science.
- Click Save
git clone https://github.com/pingidentity/pingone-customers-sample-login
Publish the contents of /dist to the DocumentRoot of your web server. A URL similar to https://www.example.com/ is preferred to https://www.example.com/dist/
Edit js/auth.js with your tenant's variables (clientId and environmentId)