From 9c6bd51754d6b871ea6c4d5f0315468f78036c74 Mon Sep 17 00:00:00 2001 From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com> Date: Wed, 13 Oct 2021 15:04:39 -0500 Subject: [PATCH] UI/OIDC provider (#12800) * Add new route w/ controller oidc-provider * oidc-provider controller has params, template has success message (temporary), model requests correct endpoint * Move oidc-provider route to under identity * Do not redirect after poll if on oidc-provider page * WIP provider -- beforeModel handles prompt, logout, redirect * Auth service fetch method rejects with fetch response if status >= 300 * New component OidcConsentBlock * Fix redirect to/from auth with cluster name, show error and consent form if applicable * Show error and consent form on template * Add component test, update docs * Test for oidc-consent-block component * Add changelog * fix tests * Add authorize to end of router path * Remove unused tests * Update changelog with feature name * Add descriptions for OidcConsentBlock component * glimmerize token-expire-warning and don't override yield if on oidc-provider route * remove text on token-expire-warning * Fix null transition.to on cluster redirect * Hide nav links if oidc-provider route --- changelog/12800.txt | 3 + ui/app/components/nav-header.js | 11 ++ ui/app/components/oidc-consent-block.js | 59 +++++++++ ui/app/components/token-expire-warning.js | 17 ++- .../vault/cluster/identity/oidc-provider.js | 24 ++++ ui/app/mixins/cluster-route.js | 5 +- ui/app/router.js | 4 + .../vault/cluster/identity/oidc-provider.js | 115 ++++++++++++++++++ ui/app/services/auth.js | 2 +- ui/app/templates/components/nav-header.hbs | 46 +++---- .../components/oidc-consent-block.hbs | 23 ++++ .../components/token-expire-warning.hbs | 4 +- .../vault/cluster/identity/oidc-provider.hbs | 25 ++++ .../addon/components/form-save-buttons.js | 1 + .../components/oidc-consent-block-test.js | 105 ++++++++++++++++ 15 files changed, 414 insertions(+), 30 deletions(-) create mode 100644 changelog/12800.txt create mode 100644 ui/app/components/oidc-consent-block.js create mode 100644 ui/app/controllers/vault/cluster/identity/oidc-provider.js create mode 100644 ui/app/routes/vault/cluster/identity/oidc-provider.js create mode 100644 ui/app/templates/components/oidc-consent-block.hbs create mode 100644 ui/app/templates/vault/cluster/identity/oidc-provider.hbs create mode 100644 ui/tests/integration/components/oidc-consent-block-test.js diff --git a/changelog/12800.txt b/changelog/12800.txt new file mode 100644 index 0000000000..38aadc0170 --- /dev/null +++ b/changelog/12800.txt @@ -0,0 +1,3 @@ +```release-note:feature +**OIDC Authorization Code Flow**: The Vault UI now supports OIDC Authorization Code Flow +``` diff --git a/ui/app/components/nav-header.js b/ui/app/components/nav-header.js index 509b88ed4b..ce5f5638f6 100644 --- a/ui/app/components/nav-header.js +++ b/ui/app/components/nav-header.js @@ -1,10 +1,21 @@ import Component from '@ember/component'; +import { inject as service } from '@ember/service'; +import { computed } from '@ember/object'; + export default Component.extend({ + router: service(), 'data-test-navheader': true, classNameBindings: 'consoleFullscreen:panel-fullscreen', tagName: 'header', navDrawerOpen: false, consoleFullscreen: false, + hideLinks: computed('router.currentRouteName', function() { + let currentRoute = this.router.currentRouteName; + if ('vault.cluster.identity.oidc-provider' === currentRoute) { + return true; + } + return false; + }), actions: { toggleNavDrawer(isOpen) { if (isOpen !== undefined) { diff --git a/ui/app/components/oidc-consent-block.js b/ui/app/components/oidc-consent-block.js new file mode 100644 index 0000000000..b5a9e6fbdd --- /dev/null +++ b/ui/app/components/oidc-consent-block.js @@ -0,0 +1,59 @@ +/** + * @module OidcConsentBlock + * OidcConsentBlock components are used to show the consent form for the OIDC Authorization Code Flow + * + * @example + * ```js + * + * ``` + * @param {string} redirect - redirect is the URL where successful consent will redirect to + * @param {string} code - code is the string required to pass back to redirect on successful OIDC auth + * @param {string} [state] - state is a string which is required to return on redirect if provided, but optional generally + */ + +import Ember from 'ember'; +import Component from '@glimmer/component'; +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; + +const validParameters = ['code', 'state']; +export default class OidcConsentBlockComponent extends Component { + @tracked didCancel = false; + + get win() { + return this.window || window; + } + + buildUrl(urlString, params) { + try { + let url = new URL(urlString); + Object.keys(params).forEach(key => { + if (params[key] && validParameters.includes(key)) { + url.searchParams.append(key, params[key]); + } + }); + return url; + } catch (e) { + console.debug('DEBUG: parsing url failed for', urlString); + throw new Error('Invalid URL'); + } + } + + @action + handleSubmit(evt) { + evt.preventDefault(); + let { redirect, ...params } = this.args; + let redirectUrl = this.buildUrl(redirect, params); + if (Ember.testing) { + this.args.testRedirect(redirectUrl.toString()); + } else { + this.win.location.replace(redirectUrl); + } + } + + @action + handleCancel(evt) { + evt.preventDefault(); + this.didCancel = true; + } +} diff --git a/ui/app/components/token-expire-warning.js b/ui/app/components/token-expire-warning.js index 4798652642..eb2884b504 100644 --- a/ui/app/components/token-expire-warning.js +++ b/ui/app/components/token-expire-warning.js @@ -1,5 +1,14 @@ -import Component from '@ember/component'; +import Component from '@glimmer/component'; +import { inject as service } from '@ember/service'; -export default Component.extend({ - tagName: '', -}); +export default class TokenExpireWarning extends Component { + @service router; + + get showWarning() { + let currentRoute = this.router.currentRouteName; + if ('vault.cluster.identity.oidc-provider' === currentRoute) { + return false; + } + return !!this.args.expirationDate; + } +} diff --git a/ui/app/controllers/vault/cluster/identity/oidc-provider.js b/ui/app/controllers/vault/cluster/identity/oidc-provider.js new file mode 100644 index 0000000000..8b656eca92 --- /dev/null +++ b/ui/app/controllers/vault/cluster/identity/oidc-provider.js @@ -0,0 +1,24 @@ +import Controller from '@ember/controller'; + +export default class VaultClusterIdentityOidcProviderController extends Controller { + queryParams = [ + 'scope', // * + 'response_type', // * + 'client_id', // * + 'redirect_uri', // * + 'state', // * + 'nonce', // * + 'display', + 'prompt', + 'max_age', + ]; + scope = null; + response_type = null; + client_id = null; + redirect_uri = null; + state = null; + nonce = null; + display = null; + prompt = null; + max_age = null; +} diff --git a/ui/app/mixins/cluster-route.js b/ui/app/mixins/cluster-route.js index 67dae10860..66127b89b1 100644 --- a/ui/app/mixins/cluster-route.js +++ b/ui/app/mixins/cluster-route.js @@ -7,6 +7,7 @@ const AUTH = 'vault.cluster.auth'; const CLUSTER = 'vault.cluster'; const CLUSTER_INDEX = 'vault.cluster.index'; const OIDC_CALLBACK = 'vault.cluster.oidc-callback'; +const OIDC_PROVIDER = 'vault.cluster.identity.oidc-provider'; const DR_REPLICATION_SECONDARY = 'vault.cluster.replication-dr-promote'; const DR_REPLICATION_SECONDARY_DETAILS = 'vault.cluster.replication-dr-promote.details'; const EXCLUDED_REDIRECT_URLS = ['/vault/logout']; @@ -20,7 +21,9 @@ export default Mixin.create({ transitionToTargetRoute(transition = {}) { const targetRoute = this.targetRouteName(transition); - + if (OIDC_PROVIDER === this.router.currentRouteName || OIDC_PROVIDER === transition?.to?.name) { + return RSVP.resolve(); + } if ( targetRoute && targetRoute !== this.routeName && diff --git a/ui/app/router.js b/ui/app/router.js index 090def1fa2..95a6e83e5f 100644 --- a/ui/app/router.js +++ b/ui/app/router.js @@ -139,6 +139,10 @@ Router.map(function() { } this.route('not-found', { path: '/*path' }); + + this.route('identity', function() { + this.route('oidc-provider', { path: '/oidc/provider/:oidc_name/authorize' }); + }); }); this.route('not-found', { path: '/*path' }); }); diff --git a/ui/app/routes/vault/cluster/identity/oidc-provider.js b/ui/app/routes/vault/cluster/identity/oidc-provider.js new file mode 100644 index 0000000000..7f5a4c66ac --- /dev/null +++ b/ui/app/routes/vault/cluster/identity/oidc-provider.js @@ -0,0 +1,115 @@ +import Route from '@ember/routing/route'; +import { inject as service } from '@ember/service'; + +const AUTH = 'vault.cluster.auth'; +const PROVIDER = 'vault.cluster.identity.oidc-provider'; + +export default class VaultClusterIdentityOidcProviderRoute extends Route { + @service auth; + @service router; + + get win() { + return this.window || window; + } + + _redirect(url, params) { + let redir = this._buildUrl(url, params); + this.win.location.replace(redir); + } + + beforeModel(transition) { + const currentToken = this.auth.get('currentTokenName'); + let { redirect_to, ...qp } = transition.to.queryParams; + console.debug('DEBUG: removing redirect_to', redirect_to); + if (!currentToken && 'none' === qp.prompt?.toLowerCase()) { + this._redirect(qp.redirect_uri, { + state: qp.state, + error: 'login_required', + }); + } else if (!currentToken || 'login' === qp.prompt?.toLowerCase()) { + if ('login' === qp.prompt?.toLowerCase()) { + this.auth.deleteCurrentToken(); + qp.prompt = null; + } + let { cluster_name } = this.paramsFor('vault.cluster'); + let url = this.router.urlFor(transition.to.name, transition.to.params, { queryParams: qp }); + return this.transitionTo(AUTH, cluster_name, { queryParams: { redirect_to: url } }); + } + } + + _redirectToAuth(oidcName, queryParams, logout = false) { + let { cluster_name } = this.paramsFor('vault.cluster'); + let currentRoute = this.router.urlFor(PROVIDER, oidcName, { queryParams }); + if (logout) { + this.auth.deleteCurrentToken(); + } + return this.transitionTo(AUTH, cluster_name, { queryParams: { redirect_to: currentRoute } }); + } + + _buildUrl(urlString, params) { + try { + let url = new URL(urlString); + Object.keys(params).forEach(key => { + if (params[key]) { + url.searchParams.append(key, params[key]); + } + }); + return url; + } catch (e) { + console.debug('DEBUG: parsing url failed for', urlString); + throw new Error('Invalid URL'); + } + } + + _handleSuccess(response, baseUrl, state) { + const { code } = response; + let redirectUrl = this._buildUrl(baseUrl, { code, state }); + this.win.location.replace(redirectUrl); + } + _handleError(errorResp, baseUrl) { + let redirectUrl = this._buildUrl(baseUrl, { ...errorResp }); + this.win.location.replace(redirectUrl); + } + + async model(params) { + let { oidc_name, ...qp } = params; + let decodedRedirect = decodeURI(qp.redirect_uri); + let url = this._buildUrl(`${this.win.origin}/v1/identity/oidc/provider/${oidc_name}/authorize`, qp); + try { + const response = await this.auth.ajax(url, 'GET', {}); + if ('consent' === qp.prompt?.toLowerCase()) { + return { + consent: { + code: response.code, + redirect: decodedRedirect, + state: qp.state, + }, + }; + } + this._handleSuccess(response, decodedRedirect, qp.state); + } catch (errorRes) { + let resp = await errorRes.json(); + let code = resp.error; + if (code === 'max_age_violation') { + this._redirectToAuth(oidc_name, qp, true); + } else if (code === 'invalid_redirect_uri') { + return { + error: { + title: 'Redirect URI mismatch', + message: + 'The provided redirect_uri is not in the list of allowed redirect URIs. Please make sure you are sending a valid redirect URI from your application.', + }, + }; + } else if (code === 'invalid_client_id') { + return { + error: { + title: 'Invalid client ID', + message: 'Your client ID is invalid. Please update your configuration and try again.', + }, + }; + } else { + this._handleError(resp, decodedRedirect); + } + } + } +} diff --git a/ui/app/services/auth.js b/ui/app/services/auth.js index 9b90965d38..d8ceb14551 100644 --- a/ui/app/services/auth.js +++ b/ui/app/services/auth.js @@ -97,7 +97,7 @@ export default Service.extend({ } else if (response.status >= 200 && response.status < 300) { return resolve(response.json()); } else { - return reject(); + return reject(response); } }); }, diff --git a/ui/app/templates/components/nav-header.hbs b/ui/app/templates/components/nav-header.hbs index c6ad8738cf..8a60fecdce 100644 --- a/ui/app/templates/components/nav-header.hbs +++ b/ui/app/templates/components/nav-header.hbs @@ -9,30 +9,32 @@ {{/unless}} -
-
-
- {{yield (hash - main=(component 'nav-header/main') - closeDrawer=(action "toggleNavDrawer" false) - ) - }} + {{#unless hideLinks}} +
+
+
+ {{yield (hash + main=(component 'nav-header/main') + closeDrawer=(action "toggleNavDrawer" false) + ) + }} +
+
+ {{yield (hash + items=(component 'nav-header/items') + closeDrawer=(action "toggleNavDrawer" false) + ) + }} +
-
- {{yield (hash - items=(component 'nav-header/items') - closeDrawer=(action "toggleNavDrawer" false) - ) - }} -
-
- {{#if navDrawerOpen}} - - {{/if}} -
+ {{#if navDrawerOpen}} + + {{/if}} +
+ {{/unless}}
diff --git a/ui/app/templates/components/oidc-consent-block.hbs b/ui/app/templates/components/oidc-consent-block.hbs new file mode 100644 index 0000000000..2e59b5ed39 --- /dev/null +++ b/ui/app/templates/components/oidc-consent-block.hbs @@ -0,0 +1,23 @@ +{{#if this.didCancel}} +

+ Consent Not Given +

+
+

Login attempt has been terminated.

+
+{{else}} +

+ Consent +

+
+

In order to complete the login process, you must consent to Vault sharing your profile, email, address, and phone with the client.

+

Do you want to continue?

+ + +{{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/token-expire-warning.hbs b/ui/app/templates/components/token-expire-warning.hbs index d114e0d33f..63107aad54 100644 --- a/ui/app/templates/components/token-expire-warning.hbs +++ b/ui/app/templates/components/token-expire-warning.hbs @@ -1,9 +1,9 @@ -{{#if (and expirationDate (is-after (now interval=1000) expirationDate))}} +{{#if (and this.showWarning (is-after (now interval=1000) @expirationDate))}}
diff --git a/ui/app/templates/vault/cluster/identity/oidc-provider.hbs b/ui/app/templates/vault/cluster/identity/oidc-provider.hbs new file mode 100644 index 0000000000..b2f53cd6b7 --- /dev/null +++ b/ui/app/templates/vault/cluster/identity/oidc-provider.hbs @@ -0,0 +1,25 @@ +
+
+
+ {{#if model.error}} +
+ +
+ + {{else if model.consent}} + + {{else}} + + {{/if}} +
+
+
diff --git a/ui/lib/core/addon/components/form-save-buttons.js b/ui/lib/core/addon/components/form-save-buttons.js index 44330343fd..37f7c21e15 100644 --- a/ui/lib/core/addon/components/form-save-buttons.js +++ b/ui/lib/core/addon/components/form-save-buttons.js @@ -12,6 +12,7 @@ import layout from '../templates/components/form-save-buttons'; * ``` * * @param [saveButtonText="Save" {String}] - The text that will be rendered on the Save button. + * @param [cancelButtonText="Cancel" {String}] - The text that will be rendered on the Cancel button. * @param [isSaving=false {Boolean}] - If the form is saving, this should be true. This will disable the save button and render a spinner on it; * @param [cancelLinkParams=[] {Array}] - An array of arguments used to construct a link to navigate back to when the Cancel button is clicked. * @param [onCancel=null {Fuction}] - If the form should call an action on cancel instead of route somewhere, the fucntion can be passed using onCancel instead of passing an array to cancelLinkParams. diff --git a/ui/tests/integration/components/oidc-consent-block-test.js b/ui/tests/integration/components/oidc-consent-block-test.js new file mode 100644 index 0000000000..633839cbc4 --- /dev/null +++ b/ui/tests/integration/components/oidc-consent-block-test.js @@ -0,0 +1,105 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, click } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; +import sinon from 'sinon'; + +const redirectBase = 'https://hashicorp.com'; + +module('Integration | Component | oidc-consent-block', function(hooks) { + setupRenderingTest(hooks); + + test('it renders', async function(assert) { + this.set('redirect', redirectBase); + await render(hbs` + + `); + + assert.dom('[data-test-consent-title]').hasText('Consent', 'Title is correct on initial render'); + assert + .dom('[data-test-consent-form]') + .includesText( + 'In order to complete the login process, you must consent to Vault sharing your profile, email, address, and phone with the client.', + 'shows the correct copy for consent form' + ); + assert.dom('[data-test-edit-form-submit]').hasText('Yes', 'form button has correct submit text'); + assert.dom('[data-test-cancel-button]').hasText('No', 'form button has correct cancel text'); + }); + + test('it calls the success callback when user clicks "Yes"', async function(assert) { + const spy = sinon.spy(); + this.set('successSpy', spy); + this.set('redirect', redirectBase); + + await render(hbs` + + `); + + assert.dom('[data-test-consent-title]').hasText('Consent', 'Title is correct on initial render'); + assert.dom('[data-test-consent-form]').exists('Consent form exists'); + assert + .dom('[data-test-consent-form]') + .includesText( + 'In order to complete the login process, you must consent to Vault sharing your profile, email, address, and phone with the client.', + 'shows the correct copy for consent form' + ); + await click('[data-test-edit-form-submit]'); + assert.ok(spy.calledWith(`${redirectBase}/?code=1234`), 'Redirects to correct route'); + }); + + test('it shows the termination message when user clicks "No"', async function(assert) { + const spy = sinon.spy(); + this.set('successSpy', spy); + this.set('redirect', redirectBase); + + await render(hbs` + + `); + + assert.dom('[data-test-consent-title]').hasText('Consent', 'Title is correct on initial render'); + assert.dom('[data-test-consent-form]').exists('Consent form exists'); + assert + .dom('[data-test-consent-form]') + .includesText( + 'In order to complete the login process, you must consent to Vault sharing your profile, email, address, and phone with the client.', + 'shows the correct copy for consent form' + ); + await click('[data-test-cancel-button]'); + assert.dom('[data-test-consent-title]').hasText('Consent Not Given', 'Title changes to not given'); + assert.dom('[data-test-consent-form]').doesNotExist('Consent form is hidden'); + + assert.ok(spy.notCalled, 'Does not call the success method'); + }); + + test('it calls the success callback with correct params', async function(assert) { + const spy = sinon.spy(); + this.set('successSpy', spy); + this.set('redirect', redirectBase); + this.set('code', 'unescaped + `); + + assert.dom('[data-test-consent-title]').hasText('Consent', 'Title is correct on initial render'); + assert.dom('[data-test-consent-form]').exists('Consent form exists'); + assert + .dom('[data-test-consent-form]') + .includesText( + 'In order to complete the login process, you must consent to Vault sharing your profile, email, address, and phone with the client.', + 'shows the correct copy for consent form' + ); + await click('[data-test-edit-form-submit]'); + console.log(spy, spy.args); + assert.ok( + spy.calledWith(`${redirectBase}/?code=unescaped%3Cstring&state=foo`), + 'Redirects to correct route, with escaped values and without superflous params' + ); + }); +});