
Security News
/Research
Wallet-Draining npm Package Impersonates Nodemailer to Hijack Crypto Transactions
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
@ping-identity/pf-authn-js-widget
Advanced tools
JavaScript Widget for the PingFederate Authentication API
Table of Contents
The JavaScript Widget for the PingFederate Authentication API is a customizable JavaScript library that provides the capabilities of the HTML form Adapter and other integrations via Authentication APIs, including:
A full list of the supported integrations can be found here.
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.
PingFederate acts as the server interacting with the widget via APIs to authenticate the user.
To configure PingFederate for the widget:
https://localhost:8443
.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.
Note: The redirect URL of the Authentication Applications must point to where the JavaScript Widget for the PingFederate Authentication API is hosted. If you do not wish to use the development server provided by webpack, change the URL of the authentication application to point the correct hosted URL.
There are three ways to get the widget. You can include it from Ping Identity's CDN, build and install it locally on your development machine or get it as a node dependency. 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:
To include a specific version of the widget, replace latest
with the version required.
A working example that utilizes the pre-built widget would look like:
<html>
<head>
<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/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/v2/main-styles.css">
<script>
function load() {
var authnWidget = new PfAuthnWidget("{{baseUrl}}", { divId: 'authnwidget' });
authnWidget.init()
}
window.onload = load;
</script>
</head>
<body>
<div class="content" style="padding: 30px">
<div class="heading">Authentication Application</div>
<div id="authnwidget"></div>
</div>
</body>
</html>
Before installing, make sure you have node.js installed. Then check out this repository.
Run the following commands:
npm install
- install the dependenciesnpm run start
- start the webpack development serverThis will start the webpack development server on https://localhost:8443 (as specified in webpack.config.js) and instantiate the widget.
If you need to modify the base URL from localhost:9031
, you can modify it in demo-server/templates/index-template.handlebars
or pass a BASEURL
command line parameter (see Technical Notes).
Click the start SSO link on the IdP Connection in PingFederate or start an OAuth flow from OAuth playground, which will redirect to the widget.
Note: A 'flowId' value is required for the widget to interact with PingFederate, which is created when PingFederate redirects to the widget.
This is a good choice if you already have a node project with package.json
and can just add this widget as a dependency.
To add the widget as a dependency:
npm install @ping-identity/pf-authn-js-widget --save
<div id="authnwidget"></div>
to your app.The only information required to configure the widget is PingFederate's base URL. The widget can be instantiated and initialized using the following code example:
var baseUrl = 'https://localhost:9031';
var authnWidget = new PfAuthnWidget(baseurl);
authnWidget.init();
Here are all the available constructor parameters, their descriptions, and a usage code example:
var baseUrl = 'https://localhost:9031';
var authnWidget = new PfAuthnWidget(baseUrl, {divId: 'mywidget', logo: 'https://path-to-my-logo.svg', useActionParam: true})
authnWidget.init();
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 section of this document.
Here are all available npm commands:
npm install
- install the dependencies locallynpm run build
- build for productionnpm run start
- start the dev serverBASEURL=https://PingFederateBaseUrl:9031 npm run start
- pass a custom base URL from the command line (Mac/Linux only)npm run clean
- remove the dist/
and coverage
directorynpm run coverage
- run ESLint coveragenpm run test
- run testsnpm run test:watch
- just watch the testsBefore installing, make sure you have node.js installed. Then check out this repository.
To build the widget:
npm install
npm run build
dist
folder to where your application will be hosted (this part can be skipped if webpack's development server is used).index.html
as shown below.At minimum you must include:
pf.authn-widget.js
- main javascript libraryhttps://assets.pingone.com/ux/end-user/0.36.1/end-user.css
- basic CSS from CDNmain-styles.css
- widget CSSCreate a file called index.html
with the following content and host it in your web server.
<html>
<head>
<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>
<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>
function load() {
var authnWidget = new PfAuthnWidget("{{baseUrl}}", { divId: 'authnwidget' });
authnWidget.init()
}
window.onload = load;
</script>
</head>
<body>
<div class="content" style="padding: 30px">
<div class="heading">Authentication Application</div>
<div id="authnwidget"></div>
</div>
</body>
</html>
The name of the div can be overwritten in the constructor under options by passing a divId
parameter.
All the HTML pages are rendered using Handlebars under the /partials
directory. The /scss/
folder contains all the sass files for customizing the styles.
Basic CSS should be imported by default from CDN.
Note: Some items cannot be customized:
data-actionId
must match the actionId that is sent to PingFederateFORM_ID
end-user.css
is provided via CDN, as shown in demo-server/templates/index-template.handlebars
main-styles.css
src/scss/branding.scss
and include it in src/index.js
Please refer to the guide for using Protect-based authentication adapters with the widget for more information on how to set up the widget with Protect-based authentication adapters.
Please refer to the guide for using risk-based authentication with the widget for more infomation on how to set up the widget with risk-based authentication adapters.
Please refer to the Redirectless Support guide for more infomation on how to configure PingFederate and how to use widget's redirectless feature.
Please refer to the Typescript Support guide for more information on how to use the typescript definitions.
The widget relies upon a cookie that is transferred between the widget and PingFederate. If the widget and PingFederate are hosted on different domains, this cookie will be a cross-origin or third-party cookie. Some browsers such as Firefox and Safari block third-party cookies by default, which will break the widget's functionality.
To be compatible with all major browsers, the widget must be deployed on the same domain as PingFederate, or on a subdomain of the same domain. For example, the following configuration will work for all browsers
While the configuration
will require users to enable third-party cookies in their browser configuration.
Use the issue tracker to report any bugs or to file feature requests.
This project is licensed under the Apache license. See the LICENSE file for more information.
FAQs
JavaScript Widget for the PingFederate Authentication API
The npm package @ping-identity/pf-authn-js-widget receives a total of 21 weekly downloads. As such, @ping-identity/pf-authn-js-widget popularity was classified as not popular.
We found that @ping-identity/pf-authn-js-widget demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.