V2 release, including

- New version with breaking changes. - CAPTCHA and Risk Provider support. - Risk Provider implementations include Google reCAPTCHA v2 invisible, Google reCAPTCHA V3, and PingOne Protect. - Removed the old reCAPTCHA V2 Invisible implementation.
pingidentity · Jun 28, 2024 · 3b2802e · 3b2802e
1 parent 7a9d633
commit 3b2802e
Show file tree

Hide file tree

Showing 25 changed files with 377 additions and 202 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,3 @@
-[![Build Status](https://travis-ci.org/pingidentity/pf-authn-js-widget.svg?branch=master)](https://travis-ci.org/pingidentity/pf-authn-js-widget)
 # JavaScript Widget for the PingFederate Authentication API
 
 **Table of Contents**
@@ -8,21 +7,21 @@
   - [Option 1: Using CDN Links](#option-1-using-cdn-links)
   - [Option 2: Building the Widget](#option-2-building-the-widget)
   - [Option 3: Adding the Widget as a Node Module](#option-3-adding-the-widget-as-a-node-module)
-  - [Widget Configuration](#widget-configuration)
+- [Widget Configuration](#widget-configuration)
+- [Upgrade from version 1 to version 2](#upgrade-from-version-1-to-version-2)
 - [Technical Notes](#technical-notes)
   - [Building the Latest Version of the Widget](#building-the-latest-version-of-the-widget)
   - [Adding the Widget to an Application](#adding-the-widget-to-an-application)
   - [Creating the index.html File](#creating-the-indexhtml-file)
   - [Customizing the Widget](#customizing-the-widget)
-  - [Enabling Captcha](#enabling-captcha)
   - [Using Protect-Based Authentication Adapters with the Widget](/docs/protectAuthentication.md)
   - [Using Risk-Based Authentication With the Widget](/docs/riskAuthentication.md)
   - [Redirectless Support](/docs/redirectless.md)
 - [Browser Compatibility](#browser-compatibility)
 - [Bug Reports](#bug-reports)
 - [License](#license)
 
-The JavaScript Widget for the PingFederate Authentication API is a customizable JavaScript library that provides the capabilities of the [HTML form Adapter](https://docs.pingidentity.com/csh?Product=pf-latest&topicname=xvy1564003022890.html) 
+The JavaScript Widget for the PingFederate Authentication API is a customizable JavaScript library that provides the capabilities of the [HTML form Adapter](https://docs.pingidentity.com/csh?Product=pf-latest&topicname=xvy1564003022890.html)
 and other integrations via [Authentication APIs](https://docs.pingidentity.com/csh?Product=pf-latest&topicname=qsl1564002999029.html), including:
  - user login
  - trouble signing in
@@ -33,7 +32,7 @@ and other integrations via [Authentication APIs](https://docs.pingidentity.com/c
  - social login
  - multi-factor authentication
  - identity verification
- 
+
  A full list of the supported integrations can be found [here](/docs/supportedIntegrations.md).
 
 The widget is a ready-to-use drop-in bundle with a CSS and customizable templates. This alternative to PingFederate templates provides a sign-in experience as a single page application.
@@ -50,10 +49,10 @@ To configure PingFederate for the widget:
   1. First enable the authentication API: Authentication > Authentication API Applications > Enable Authentication API.
   2. Then, add an application by clicking the "Add Authentication Application" button and entering the appropriate values. For example: **Name:** TestApp, **URL:** `https://localhost:8443`.
   3. Click "Save".
-  
+
   **Caution:** setting your Authentication Application as the "Default Authentication Application" will make it the default authentication for all of your existing connections. This is the easiest way to configure your connections, but it
   is not very precise. For more precision, configure the desired authentication policies to use your Authentication API Application.
-  
+
   4. Select your newly created Authentication Application ("TestApp" if you used the example above) in the drop-down in the "Default Authentication Application" section.
   5. Start the SSO flow as you would normally. For example, by clicking on an existing IdP Connection, and you will be redirected to your "JavaScript Widget for the PingFederate Authentication API" application.
 
@@ -69,13 +68,13 @@ You also need a running PingFederate instance that is version 9.3 or above.
 
 A pre-built widget is available for incorporating directly into your application. All versions of the widget, starting with 1.7.0, will be available via CDN.
 
-To include the latest released version the following links can be used: 
-- https://downloads.pingidentity.com/pf-authn-widget/latest/pf.authn-widget.js
-- https://downloads.pingidentity.com/pf-authn-widget/latest/main-styles.css
+To include the latest released version the following links can be used:
+- https://downloads.pingidentity.com/pf-authn-widget/latest/v2/pf.authn-widget.js
+- https://downloads.pingidentity.com/pf-authn-widget/latest/v2/main-styles.css
 
 To include a specific version of the widget, replace `latest` with the version required.
-- https://downloads.pingidentity.com/pf-authn-widget/1.7.0/pf.authn-widget.js
-- https://downloads.pingidentity.com/pf-authn-widget/1.7.0/main-styles.css
+- https://downloads.pingidentity.com/pf-authn-widget/2.0.0/pf.authn-widget.js
+- https://downloads.pingidentity.com/pf-authn-widget/2.0.0/main-styles.css
 
 A working example that utilizes the pre-built widget would look like:
 ```html
@@ -84,9 +83,9 @@ A working example that utilizes the pre-built widget would look like:
     <title>Authentication API Sample App</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <script src="https://downloads.pingidentity.com/pf-authn-widget/latest/pf.authn-widget.js"></script>        
+    <script src="https://downloads.pingidentity.com/pf-authn-widget/latest/v2/pf.authn-widget.js"></script>
     <link rel="stylesheet" type="text/css" href="https://assets.pingone.com/ux/end-user/0.36.1/end-user.css">
-    <link rel="stylesheet" type="text/css" href="https://downloads.pingidentity.com/pf-authn-widget/latest/main-styles.css">
+    <link rel="stylesheet" type="text/css" href="https://downloads.pingidentity.com/pf-authn-widget/latest/v2/main-styles.css">
     <script>
       function load() {
         var authnWidget = new PfAuthnWidget("{{baseUrl}}", { divId: 'authnwidget' });
@@ -150,6 +149,11 @@ var authnWidget = new PfAuthnWidget(baseUrl, {divId: 'mywidget', logo: 'https://
 authnWidget.init();
 ```
 
+# Upgrade from version 1 to version 2
+The JavaScript Widget for PingFederate Authentication API no longer requires custom javascript code to enable CAPTCHA as of version 2.
+
+When upgrading from version 1 to version 2, remove the custom javascript code and replace it with standard widget initialization code to leverage the new capability. More information is available in the [Widget Configuration](#widget-configuration) section of this document.
+
 <a name="tech-notes"></a>
 # Technical Notes
 
@@ -191,7 +195,7 @@ Create a file called `index.html` with the following content and host it in your
     <title>Authentication API Sample App</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <script src="./pf.authn-widget.js"></script>        
+    <script src="./pf.authn-widget.js"></script>
     <link rel="stylesheet" type="text/css" href="https://assets.pingone.com/ux/end-user/0.36.1/end-user.css">
     <link rel="stylesheet" type="text/css" href="main-styles.css">
     <script>
@@ -226,51 +230,6 @@ Note: Some items cannot be customized:
 - the widget-specific CSS is provided via the compiled sass file as `main-styles.css`
 - to overwrite the CSS, add any customization to `src/scss/branding.scss` and include it in `src/index.js`
 
-## Enabling Captcha
-
-To use Captcha with the HTML Form Adapter, import `api.js` from Google's CDN at `<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>`
-After the script is loaded, instantiate the widget.
-
-Three functions are needed:
-
-```javascript
-var authnWidget;
-
-function checkRecaptcha(token) {
-  console.log('captcha response: ' + token);
-  if (token.length === 0) {
-    //reCaptcha not verified
-    authnWidget.clearPendingState();
-    console.log('did not pass captcha try again');
-  } else {
-    //reCaptch verified
-    authnWidget.dispatchPendingState(token);
-  }
-}
-
-function invokeReCaptcha() {
-  let token = grecaptcha.getResponse();
-  if(token) {
-    checkRecaptcha(token);
-  }
-  else {
-    grecaptcha.execute();
-  }
-}
-
-function onloadCallback() {
-  authnWidget = new PfAuthnWidget("{{baseUrl}}", {
-    divId: 'authnwidget',
-    invokeReCaptcha: invokeReCaptcha,
-    checkRecaptcha: 'checkRecaptcha',
-    grecaptcha: grecaptcha
-  });
-  authnWidget.init();
-}
-```
-It is crucial that `api.js` is loaded before the widget is instantiated. Therefore we are using a callback function to load the widget. The `grecaptcha` object
-will be available after the `api.js` is loaded. For more information, see [Captcha documentations](https://developers.google.com/recaptcha/docs/invisible).
-
 ## Using Protect-Based Authentication Adapters with the Widget
 
 Please refer to the [guide for using Protect-based authentication adapters with the widget](/docs/protectAuthentication.md) for more information on how to set up the widget with Protect-based authentication adapters.
@@ -279,10 +238,12 @@ Please refer to the [guide for using Protect-based authentication adapters with
 
 Please refer to the [guide for using risk-based authentication with the widget](/docs/riskAuthentication.md) for more infomation on how to set up the widget with risk-based authentication adapters.
 
-## Redirectless Support 
+## Redirectless Support
+
 Please refer to the [Redirectless Support](/docs/redirectless.md) guide for more infomation on how to configure PingFederate and how to use widget's redirectless feature.
 
 ## Typescript Support
+
 Please refer to the [Typescript Support](/docs/typescript.md) guide for more information on how to use the typescript definitions.
 
 # Browser Compatibility

diff --git a/demo-server/templates/index-template.handlebars b/demo-server/templates/index-template.handlebars
@@ -10,49 +10,7 @@
   <link rel="stylesheet" type="text/css" href="https://assets.pingone.com/ux/end-user/0.36.1/end-user.css">
   <link rel="stylesheet" type="text/css" href="main-styles.css">
 
-<!--  Enable the below script to use Captcha v2 -->
-<!--    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>-->
     <script type="text/javascript">
-        var authnWidget;
-        function checkRecaptcha(token) {
-            console.log('captcha response: ' + token);
-            if (token.length === 0) {
-                //reCaptcha not verified
-                authnWidget.clearPendingState();
-                console.log('did not pass captcha try again');
-            } else {
-                //reCaptch verified
-                authnWidget.dispatchPendingState(token);
-                // grecaptcha.reset();
-            }
-        }
-
-        function invokeReCaptcha() {
-            let token = grecaptcha.getResponse();
-            if(token) {
-                checkRecaptcha(token);
-            }
-            else {
-                grecaptcha.execute();
-            }
-        }
-
-        function onloadCallback() {
-            authnWidget = new PfAuthnWidget("{{baseUrl}}", {
-                divId: 'authnwidget',
-                invokeReCaptcha: invokeReCaptcha,
-                checkRecaptcha: 'checkRecaptcha',
-                grecaptcha: grecaptcha
-            });
-            // let customLogo = 'https://www.pingidentity.com/content/dam/ping-6-2-assets/images/home/9001-home-logos/Cisco@2x.png.png'
-            // authnWidget = new PfAuthnWidget("https://localhost:9031", {divId: 'authnwidget', logo: customLogo});
-            initWidget(authnWidget);
-        }
-
-        /**  --------------------------------------------------
-         *   In order to use Captcha, remove the code below and uncomment api.js loading
-         *   --------------------------------------------------
-        **/
         function load() {
             var authnWidget = new PfAuthnWidget("{{baseUrl}}", { divId: 'authnwidget' });
             // decide how to init the widget based on the mode option

diff --git a/docs/typescript.md b/docs/typescript.md
@@ -21,9 +21,6 @@ This interface describes the various constructor parameters for the authnWidget.
 | divId               | string   | false    |
 | flowId              | string   | true     |
 | logo                | string   | true     |
-| invokeRecaptcha     | function | true     |
-| checkRecaptcha      | string   | true     |
-| grecaptcha          | any      | true     |
 | useActionParam      | boolean  | true     |
 | deviceProfileScript | string   | true     |
 
@@ -35,9 +32,6 @@ var options: IOptions = {
     divId: 'authnwidget',
     flowId: 'flowId',
     logo: 'logo.svg',
-    invokeReCaptcha: () => {},
-    checkRecaptcha: 'checkRecaptcha',
-    grecaptcha: {},
     useActionParam: true,
     deviceProfileScript: './pingone-protect-device-profiling.js'
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ping-identity/pf-authn-js-widget",
-  "version": "1.11.0",
+  "version": "2.0.0",
   "description": "JavaScript Widget for the PingFederate Authentication API",
   "main": "./dist/pf.authn-widget.js",
   "types": "types/index.d.ts",

diff --git a/src/helpers/renderRiskUI.js b/src/helpers/renderRiskUI.js
@@ -0,0 +1,15 @@
+import RiskUtils from "../utils/riskUtils";
+
+module.exports = function (options) {
+  if (!options.data.root.showCaptcha) 
+    return;
+  console.log("rendering captcha")
+  const type = options.data.root.captchaProviderType;
+  const attributes = options.data.root.captchaAttributes;
+  const store = options.data.root.store;
+  const riskUtils = new RiskUtils(type, attributes, store);
+  const uiElement = riskUtils.renderUIElement();
+  if (uiElement) 
+    return uiElement;
+  // fallback, nothing to return
+};