The redirect method launches the flow in a new application page. The user is redirected to the flow’s HTML form on the new page, which replaces the previous page. Most of the configuration to redirect users to a new application page to create the flow policy and complete flow actions takes place in the PingOne DaVinci UI console. However, the application’s landing page does need links to direct the browser to the page that contains the correct flow action.

Prerequisites

Workflow

  1. Create a worker application in PingOne to provide the credentials needed for adding a PingOne connection in DaVinci. See “Creating PingOne credentials” in Connecting DaVinci with PingOne.

  2. Add a PingOne connection in DaVinci. See “Adding PingOne connections” in Connecting DaVinci with PingOne.

  3. Create a DaVinci flow, see Getting Started. Then, create a DaVinci flow policy and add the flow to the flow policy. See Configuring a flow policy. You’ll also need to create a DaVinci application, and associate it with the flow. See Creating an application.

  4. In the DaVinci UI console, click Applications, and open the application for the flow policy you want to integrate with your app. See Configuring a flow policy.

  5. Configure DaVinci as an external identity provider in PingOne. See “Configuring an external IDP” in Connecting DaVinci with PingOne.

  6. Configure a PingOne sign-on policy that uses the DaVinci external identity provider for the sign-on flow. See Adding an external identity provider sign-on step.

Example

To configure the HTML form that is embedded in the application page, add HTML in the HTML Template text area control to create the login form interface elements. The following example shows the HTML for the Username and Password fields:

<div class="app-container" style="display: block;">
    <div class="page__content" style="height: 100%;">
        <div class="card card--no-padding">
            <div class="card__content">
                <div class="org-logo"> <img class="org-logo__image" src="https://d3uinntk0mqu3p.cloudfront.net/branding/market/a3d073bc-3108-49ad-b96c-404bea59a1d0.png" alt="Company Logo" />
                </div>
                <div data-skcomponent="skerror"
                    class="feedback feedback--error sk-alert sk-alert-danger has-text-danger has-background-danger-light"
                    data-id="feedback" data-skvisibility=""></div>
                <form class="form" id='signOnForm' data-id="signOnForm">
                    <div class="field float-label"> <input class="text-input float-label__input" data-id="username-input" id="username" name="username" type="text" autocomplete="on" value="" />
                        <label class="float-label__label" for="username">Username</label> </div>
                    <div class="field float-label"> <input class="text-input text-input__password float-label__input" data-id="password-input" id="password" name="password" type="password" autocomplete="on" value="" />
                        <label class="float-label__label" for="password">Password</label> </div>
                    <div class="control">
                        <button class="field is-primary mt-2 button file-input--button button--primary brand-primary-bg" data-id="button" type="submit" data-skcomponent="skbutton" data-skbuttontype="form-submit" data-skform="signOnForm" data-skbuttonvalue="submit">
                            Sign On<i class="fas fa-forward ml-2"></i></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Configuring the redirect in your application

An application’s landing page might have buttons for Sign On, Forgot Password, and Create an Account. Each button is assocated with a specific URL that redirects the browser to the appropriate application page, which initiates the flow and presents the input form.

To integrate the sign-on action you created above into your application, you need to configure a Sign On button that links to the endpoint URL associated with the PingOne sign-on flow. The HTML for the Sign On button looks something like this:

<p class="control">
    <a href="https://auth.pingone.com/{{envID}}/as/authorize?client_id={{clientID}}&scope=openid&response_type=code&redirect_uri=https://example.com">
    <button class="btn btn-primary btn-xl" style="font-family: 'Ubuntu', sans-serif;" id="signInBtn">Sign On</button>
    </a>
</p>

In this case, the https://auth.pingone.com/ is the PingOne resource server’s domain. However, by creating a PingOne sign-on policy that uses DaVinci as the external identity provider, the sign-on flow redirects to a DaVinci URL that initiates the flow associated with the DaVinci flowPolicyID in the request.

{{davinciAuthPath}}/auth/{{companyID}}/policy/{{flowPolicyID}}/authorize?client_id={{davinciAppID}}&response_type=code&scope=openid&redirect_uri=https://example.com

In this case, the {{davinciAuthPath}} is the DaVinci resource server’s domain, https://yourAppHost.singularkey.com/v1. The UI page presented to the end user contains the HTML for the sign-on form, which matches the application’s overall branding and style. The {{flowPolicyID}} value must be the ID for the DaVinci flow policy associated with the application.

For more information about the properties of the authorize URL, see Using Authorization APIs.