WordPress/wp-admin/js/auth-app.js
TimothyBlynJacobs d5ebe12f11 REST API: Introduce Application Passwords for API authentication.
In WordPress 4.4 the REST API was first introduced. A few releases later in WordPress 4.7, the Content API endpoints were added, paving the way for Gutenberg and countless in-site experiences. In the intervening years, numerous plugins have built on top of the REST API. Many developers shared a common frustration, the lack of external authentication to the REST API.

This commit introduces Application Passwords to allow users to connect to external applications to their WordPress website. Users can generate individual passwords for each application, allowing for easy revocation and activity monitoring. An authorization flow is introduced to make the connection flow simple for users and application developers.

Application Passwords uses Basic Authentication, and by default is only available over an SSL connection.

Props georgestephanis, kasparsd, timothyblynjacobs, afercia, akkspro, andraganescu, arippberger, aristath, austyfrosty, ayesh, batmoo, bradyvercher, brianhenryie, helen, ipstenu, jeffmatson, jeffpaul, joostdevalk, joshlevinson, kadamwhite, kjbenk, koke, michael-arestad, Otto42, pekz0r, salzano, spacedmonkey, valendesigns.
Fixes #42790.

Built from https://develop.svn.wordpress.org/trunk@49109


git-svn-id: http://core.svn.wordpress.org/trunk@48871 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-08 22:14:06 +00:00

153 lines
4.8 KiB
JavaScript

/**
* @output wp-admin/js/auth-app.js
*/
/* global authApp */
( function( $, authApp ) {
var $appNameField = $( '#app_name' ),
$approveBtn = $( '#approve' ),
$rejectBtn = $( '#reject' ),
$form = $appNameField.closest( 'form' ),
context = {
userLogin: authApp.user_login,
successUrl: authApp.success,
rejectUrl: authApp.reject
};
$approveBtn.click( function( e ) {
var name = $appNameField.val();
e.preventDefault();
if ( 0 === name.length ) {
$appNameField.focus();
return;
}
$appNameField.prop( 'disabled', true );
$approveBtn.prop( 'disabled', true );
var request = {
name: name
};
/**
* Filters the request data used to Authorize an Application Password request.
*
* @since 5.6.0
*
* @param {Object} request The request data.
* @param {Object} context Context about the Application Password request.
* @param {string} context.userLogin The user's login username.
* @param {string} context.successUrl The URL the user will be redirected to after approving the request.
* @param {string} context.rejectUrl The URL the user will be redirected to after rejecting the request.
*/
request = wp.hooks.applyFilters( 'wp_application_passwords_approve_app_request', request, context );
wp.apiRequest( {
path: '/wp/v2/users/me/application-passwords',
method: 'POST',
data: request
} ).done( function( response, textStatus, jqXHR ) {
/**
* Fires when an Authorize Application Password request has been successfully approved.
*
* @since 5.6.0
*
* @param {Object} response The response from the REST API.
* @param {string} response.password The newly created password.
* @param {string} textStatus The status of the request.
* @param {jqXHR} jqXHR The underlying jqXHR object that made the request.
*/
wp.hooks.doAction( 'wp_application_passwords_approve_app_request_success', response, textStatus, jqXHR );
var raw = authApp.success,
url, message, $notice;
if ( raw ) {
url = raw + ( -1 === raw.indexOf( '?' ) ? '?' : '&' ) +
'user_login=' + encodeURIComponent( authApp.user_login ) +
'&password=' + encodeURIComponent( response.password );
window.location = url;
} else {
message = wp.i18n.sprintf(
wp.i18n.__( 'Your new password for %1$s is: %2$s.' ),
'<strong></strong>',
'<kbd></kbd>'
);
$notice = $( '<div></div>' )
.attr( 'role', 'alert' )
.attr( 'tabindex', 0 )
.addClass( 'notice notice-success notice-alt' )
.append( $( '<p></p>' ).html( message ) );
// We're using .text() to write the variables to avoid any chance of XSS.
$( 'strong', $notice ).text( name );
$( 'kbd', $notice ).text( response.password );
$form.replaceWith( $notice );
$notice.focus();
}
} ).fail( function( jqXHR, textStatus, errorThrown ) {
var errorMessage = errorThrown,
error = null;
if ( jqXHR.responseJSON ) {
error = jqXHR.responseJSON;
if ( error.message ) {
errorMessage = error.message;
}
}
var $notice = $( '<div></div>' )
.attr( 'role', 'alert' )
.addClass( 'notice notice-error' )
.append( $( '<p></p>' ).text( errorMessage ) );
$( 'h1' ).after( $notice );
$appNameField.prop( 'disabled', false );
$approveBtn.prop( 'disabled', false );
/**
* Fires when an Authorize Application Password request encountered an error when trying to approve the request.
*
* @since 5.6.0
*
* @param {Object|null} error The error from the REST API. May be null if the server did not send proper JSON.
* @param {string} textStatus The status of the request.
* @param {string} errorThrown The error message associated with the response status code.
* @param {jqXHR} jqXHR The underlying jqXHR object that made the request.
*/
wp.hooks.doAction( 'wp_application_passwords_approve_app_request_success', error, textStatus, jqXHR );
} );
} );
$rejectBtn.click( function( e ) {
e.preventDefault();
/**
* Fires when an Authorize Application Password request has been rejected by the user.
*
* @since 5.6.0
*
* @param {Object} context Context about the Application Password request.
* @param {string} context.userLogin The user's login username.
* @param {string} context.successUrl The URL the user will be redirected to after approving the request.
* @param {string} context.rejectUrl The URL the user will be redirected to after rejecting the request.
*/
wp.hooks.doAction( 'wp_application_passwords_reject_app', context );
// @todo: Make a better way to do this so it feels like less of a semi-open redirect.
window.location = authApp.reject;
} );
$form.on( 'submit', function( e ) {
e.preventDefault();
} );
}( jQuery, authApp ) );