garrettmills
4 years ago
parent
ca11e3afae
commit
b275391674
@ -0,0 +1,386 @@
|
||||
import { Component } from '../../lib/vues6/vues6.js'
|
||||
import { resource_service } from '../service/Resource.service.js'
|
||||
import { location_service } from '../service/Location.service.js'
|
||||
import { session } from '../service/Session.service.js'
|
||||
|
||||
const template = `
|
||||
<div class="card col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-xl-6 offset-xl-3 mb-5">
|
||||
<div class="card-title m-3 mt-4"><h3>Application Setup Wizard</h3></div>
|
||||
<div class="card-body">
|
||||
<div v-if="step === 0">
|
||||
<p>This wizard will walk you through setting up a new application to integrate with {{ app_name }}. This will allow you to grant {{ app_name }} users access to this application.</p>
|
||||
<p>{{ app_name }} supports 3 different authentication schemas. The application you are setting up will need to support one of the following:</p>
|
||||
<ul>
|
||||
<li>OAuth2</li>
|
||||
<li>SAML</li>
|
||||
<li>LDAP</li>
|
||||
</ul>
|
||||
<p>If the application supports any of these, it can be integrated with {{ app_name }} to provide single-sign-on. All of these methods support {{ app_name }}'s IAM policy, but OAuth2 and SAML2.0 are preferred, because they support a web-based login flow. To get started, enter the application name and identifier:</p>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="name"
|
||||
placeholder="Awesome External App"
|
||||
@keyup="on_key_up"
|
||||
autofocus
|
||||
>
|
||||
<input
|
||||
id="app_id"
|
||||
type="text"
|
||||
class="form-control mt-3 mb-3"
|
||||
v-model="identifier"
|
||||
placeholder="awesome_external_app"
|
||||
@keyup="on_key_up"
|
||||
>
|
||||
<small class="text-secondary pad-top">An app's identifier is how it is referenced in IAM configurations. This should preferrably be all lowercase, alphanumeric with underscores.</small>
|
||||
</div>
|
||||
<div v-if="step === 1">
|
||||
Okay, we'll help you set up {{ name }}. What type of authentication does it support?
|
||||
<button class="btn btn-block btn-outline-success mt-4 mb-3" @click="on_type_click('oauth')">
|
||||
OAuth2
|
||||
<br><small>Less common, but best integration. Web-based login flow.</small>
|
||||
</button>
|
||||
<button class="btn btn-block btn-outline-primary mb-3" @click="on_type_click('saml')">
|
||||
SAML2.0
|
||||
<br><small>More common in enterprise applications. Web-based login flow.</small>
|
||||
</button>
|
||||
<button class="btn btn-block btn-outline-secondary" @click="on_type_click('ldap')">
|
||||
LDAP (BindDN or Simple)
|
||||
<br><small>Most common in self-hosted applications. No web-based login flow.</small>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="step === 2 && type === 'oauth'">
|
||||
<p>We're going to create an OAuth2 client for {{ name }}. This client will have the credentials that {{ name }} will use to authenticate users against {{ app_name }}'s API.</p>
|
||||
<p>By default, the OAuth2 client will be able to fetch information about individual users and groups. You can adjust this in the future by navigating to the OAuth2 Clients page.</p>
|
||||
<p>Please provide the OAuth2 callback URL. This is where {{ app_name }} will redirect users after they have been authenticated.</p>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control mt-3 mb-3"
|
||||
v-model="oauth_redirect_uri"
|
||||
placeholder="https://awesome.app/oauth2/callback"
|
||||
@keyup="on_key_up"
|
||||
>
|
||||
<p>{{ app_name }} only supports the <code>authorization_code</code> grant type.</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="step === 2 && type === 'saml'"
|
||||
>
|
||||
<p>We're going to register {{ name }} as a SAML2.0 service provider. This will allow it to interface with {{ app_name }}.</p>
|
||||
<p>To do this, you need to provide {{ name }}'s entity ID, assertion consumer service URL, and single-logout URL (if supported).</p>
|
||||
<span>Entity ID:</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="saml_entity_id"
|
||||
placeholder="https://awesome.app/saml/metadata.xml"
|
||||
@keyup="on_key_up"
|
||||
>
|
||||
<br>
|
||||
<span>Assertion Consumer Service URL:</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="saml_acs_url"
|
||||
placeholder="https://awesome.app/saml/acs"
|
||||
@keyup="on_key_up"
|
||||
>
|
||||
<br>
|
||||
<span>Single-Logout URL (optional):</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="saml_slo_url"
|
||||
placeholder="https://awesome.app/saml/logout"
|
||||
@keyup="on_key_up"
|
||||
>
|
||||
</div>
|
||||
<div v-if="step === 3 && type === 'saml'">
|
||||
<p>Success! {{ name }} was added to {{ app_name }}'s records, and a SAML2.0 service provider was created.</p>
|
||||
<p>The next step is to configure {{ name }} to redirect users to {{ app_name }} to log on. Here's some information on getting it set up:</p>
|
||||
<h4>Configuring the Identity Provider</h4>
|
||||
<p>{{ app_name }} is the SAML2.0 identity provider in this case. To set it up, you'll need the following info:</p>
|
||||
<ul>
|
||||
<li>Entity ID/Metadata: <code>{{ make_url('/saml/metadata.xml') }}</code></li>
|
||||
<li>Sign-On URL: <code>{{ make_url('/saml/sso') }}</code></li>
|
||||
<li>Single-Log-Out URL (if supported): <code>{{ make_url('/saml/logout') }}</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="step === 2 && type === 'ldap'">
|
||||
<p>We're going to register {{ name }} as an LDAP auth client. To do this, you'll need to specify an LDAP username and password that {{ name }} will use to authenticate users.</p>
|
||||
<span>Username:</span>
|
||||
<input
|
||||
type="text"
|
||||
v-model="ldap_username"
|
||||
class='form-control'
|
||||
placeholder="awesome_app_ldap"
|
||||
@keyup="on_key_up"
|
||||
>
|
||||
<br>
|
||||
<span>Password:</span>
|
||||
<input
|
||||
type="password"
|
||||
v-model="ldap_password"
|
||||
class='form-control'
|
||||
placeholder="Choose a password."
|
||||
@keyup="on_key_up"
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
v-model="ldap_password_confirm"
|
||||
class='form-control'
|
||||
placeholder="Confirm password."
|
||||
@keyup="on_key_up"
|
||||
>
|
||||
</div>
|
||||
<div v-if="step === 3 && type === 'ldap'">
|
||||
<p>Success! {{ name }} was added to {{ app_name }}'s records, and an LDAP client was created.</p>
|
||||
<p>The next step is to configure {{ name }} to use {{ app_name }} to log on. Here's some information on getting it set up:</p>
|
||||
<h4>LDAP Credentials</h4>
|
||||
<p>If {{ name }} requires a bind user to query the LDAP server against, you can use these credentials:</p>
|
||||
<ul>
|
||||
<li>Server address: <code>{{ host }}</code></li>
|
||||
<li>Server port: {{ ldap_config.port }}</li>
|
||||
<li>Bind User DN: <code>{{ ldap_config.login_field }}={{ ldap_username }},{{ ldap_config.authentication_base }},{{ ldap_config.base_dc }}</code></li>
|
||||
<li>Password: <i>the password you just set</i></li>
|
||||
</ul>
|
||||
|
||||
<h4>User Searching</h4>
|
||||
<ul>
|
||||
<li>User search base: <code>{{ ldap_config.authentication_base }},{{ ldap_config.base_dc }}</code></li>
|
||||
<li>Group search base: <code>{{ ldap_config.group_base }},{{ ldap_config.base_dc }}</code></li>
|
||||
<li>Search filter: <code>(&(objectClass=inetOrgPerson)(iamTarget={{ app.id }})({{ ldap_config.login_field }}=username_substituted_here))</code></li>
|
||||
</ul>
|
||||
|
||||
<h4>Group Membership</h4>
|
||||
<p>Groups are made available in a manner compatible with OpenLDAP's memberOf overlay.</p>
|
||||
<p>That means that groups are <code>objectClass: groupOfNames</code> and can be found in the <code>memberOf</code> attribute of the user object.</p>
|
||||
<p>Groups have the form <code>cn=group_name,{{ ldap_config.group_base }},{{ ldap_config.base_dc }}</code>.</p>
|
||||
|
||||
<h4>Other Considerations</h4>
|
||||
<p>{{ app_name }}'s built-in LDAP server provides the minimum-viable level of functionality required to authenticate users. That means it sometimes lacks features that more sophisticated LDAP clients expect.</p>
|
||||
<p>Here are a few settings to tweak:</p>
|
||||
<ul>
|
||||
<li>User display name field: <code>gecos</code> (this is the full name of the user)</li>
|
||||
<li>Paging chunk size: 0 (disable - {{ app_name }} does not support LDAP paging)</li>
|
||||
<li>User e-mail field: <code>mail</code></li>
|
||||
<li>UUID attribute for users: <code>{{ ldap_config.login_field }}</code></li>
|
||||
<li>UUID attribute for groups: <code>cn</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="step === 3 && type === 'oauth'">
|
||||
<p>Success! {{ name }} was added to {{ app_name }}'s records, and an OAuth2 client was created.</p>
|
||||
<p>The next step is to configure {{ name }} to redirect users to {{ app_name }} to log on. Here's some information on getting it set up:</p>
|
||||
<h4>User Authorization</h4>
|
||||
<p>First, redirect the user to {{ app_name }}. Configure {{ name }} to use this URL:</p>
|
||||
<code>
|
||||
{{ make_url('/auth/service/oauth2/authorize') }}?client_id={{ oauth_client.uuid }}&redirect_uri={{ oauth_client.redirect_url }}
|
||||
</code>
|
||||
<br><br>
|
||||
<p>Once the user authenticates successfully, {{ app_name }} will redirect them back to {{ name }}.</p>
|
||||
|
||||
<h4>Auth Code Redemption</h4>
|
||||
<p>Once the user is redirected back, {{ name }} will be given an authorization code which can be redeemed for a bearer token.</p>
|
||||
<p>To redeem this code, {{ name }} should make a POST request to:</p>
|
||||
<code>
|
||||
{{ make_url('/auth/service/oauth2/redeem') }}
|
||||
</code>
|
||||
<br><br>
|
||||
<p>It should have the following body fields:</p>
|
||||
<ul>
|
||||
<li><code>code</code> - the authorization code that was returned</li>
|
||||
<li><code>client_id</code> - <code>{{ oauth_client.uuid }}</code></li>
|
||||
<li><code>client_secret</code> - <code>{{ oauth_client.secret }}</code></li>
|
||||
<li><code>grant_type</code> - <code>authorization_code</code></li>
|
||||
</ul>
|
||||
<p>This will return an <code>access_token</code> that can be used to fetch user information from the {{ app_name }} API.</p>
|
||||
|
||||
<h4>Fetching User Info</h4>
|
||||
<p>Once the auth code has been redeemed for a bearer token, that token can be used to make requests to the {{ app_name }} API.</p>
|
||||
<p>Primarily, it can be used to fetch user information by making a GET request to the following URL:</p>
|
||||
<code>{{ make_url('/api/v1/auth/users/me') }}</code>
|
||||
<br><br>
|
||||
<p>and including the bearer token in the headers like so: <code>Authorization: Bearer AbCdEf124</code></p>
|
||||
|
||||
<h5>Making Test Requests</h5>
|
||||
<p>To test out the API integration, you can generate API tokens for {{ name }}. You can do that by clicking on the User Menu > <a href="/dash/c/listing/reflect/Token" target="_blank">API Tokens</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-right">
|
||||
<span style="color: darkred;" class="font-italic mr-3" v-if="error_message">{{ error_message }}</span>
|
||||
<button
|
||||
v-if="btn_back"
|
||||
class="btn btn-outline-secondary"
|
||||
@click="on_back_click"
|
||||
>Back</button>
|
||||
<button
|
||||
v-if="!btn_hidden"
|
||||
class="btn btn-outline-primary"
|
||||
:disabled="btn_disabled"
|
||||
@click="on_next_click"
|
||||
>Next</button>
|
||||
<button
|
||||
v-if="btn_listing"
|
||||
class="btn btn-outline-success"
|
||||
@click="on_listing_click"
|
||||
>Finish</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
export default class AppSetupComponent extends Component {
|
||||
static get selector() { return 'coreid-app-setup' }
|
||||
static get template() { return template }
|
||||
static get props() { return [] }
|
||||
|
||||
step = 0
|
||||
btn_disabled = true
|
||||
btn_back = false
|
||||
btn_hidden = false
|
||||
btn_listing = false
|
||||
|
||||
name = ''
|
||||
identifier = ''
|
||||
type = '' // ldap | saml | oauth
|
||||
oauth_redirect_uri = ''
|
||||
|
||||
saml_entity_id = ''
|
||||
saml_acs_url = ''
|
||||
saml_slo_url = ''
|
||||
|
||||
ldap_username = ''
|
||||
ldap_password = ''
|
||||
ldap_password_confirm = ''
|
||||
ldap_config = {}
|
||||
|
||||
error_message = ''
|
||||
|
||||
app = {}
|
||||
oauth_client = {}
|
||||
saml_provider = {}
|
||||
ldap_client = {}
|
||||
|
||||
app_name = ''
|
||||
host = ''
|
||||
|
||||
make_url(path) {
|
||||
return session.url(path)
|
||||
}
|
||||
|
||||
async vue_on_create() {
|
||||
this.app_name = session.get('app.name')
|
||||
this.host = session.host()
|
||||
}
|
||||
|
||||
on_key_up(event) {
|
||||
if ( this.step === 0 ) {
|
||||
this.btn_disabled = !this.name.trim() || !this.identifier.trim() || !this.identifier.match(/^([a-z]|[A-Z]|[0-9]|_)+$/)
|
||||
} else if ( this.step === 2 && this.type === 'oauth' ) {
|
||||
this.btn_disabled = !this.oauth_redirect_uri.trim()
|
||||
} else if ( this.step === 2 && this.type === 'saml' ) {
|
||||
this.btn_disabled = !this.saml_entity_id.trim() || !this.saml_acs_url.trim()
|
||||
} else if ( this.step === 2 && this.type === 'ldap' ) {
|
||||
this.btn_disabled = !this.ldap_username.trim() || !this.ldap_username.match(/^([a-z]|[A-Z]|[0-9]|_)+$/) || !this.ldap_password || this.ldap_password !== this.ldap_password_confirm
|
||||
}
|
||||
|
||||
if ( event.keyCode === 13 && !this.btn_disabled ) {
|
||||
// Enter was pressed
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
return this.on_next_click()
|
||||
}
|
||||
}
|
||||
|
||||
async on_back_click() {
|
||||
this.step -= 1
|
||||
if ( this.step === 0 ) this.btn_back = false
|
||||
if ( this.step === 0 || this.step === 2 ) this.btn_hidden = false
|
||||
}
|
||||
|
||||
async create_app(merge_params = {}) {
|
||||
const params = {
|
||||
...{
|
||||
name: this.name,
|
||||
identifier: this.identifier,
|
||||
description: '',
|
||||
},
|
||||
...merge_params
|
||||
}
|
||||
|
||||
const app_rsc = await resource_service.get('App')
|
||||
return app_rsc.create(params)
|
||||
}
|
||||
|
||||
async on_next_click() {
|
||||
this.error_message = ''
|
||||
try {
|
||||
if (this.step === 0) {
|
||||
this.step += 1
|
||||
this.btn_hidden = true
|
||||
this.btn_back = true
|
||||
} else if (this.step === 2 && this.type === 'oauth') {
|
||||
const client_rsc = await resource_service.get('oauth/Client')
|
||||
const oauth_client_params = {
|
||||
name: this.name,
|
||||
redirect_url: this.oauth_redirect_uri,
|
||||
api_scopes: ['v1:auth:users:get', 'v1:auth:groups:get'],
|
||||
}
|
||||
|
||||
this.oauth_client = await client_rsc.create(oauth_client_params)
|
||||
this.app = await this.create_app({
|
||||
oauth_client_ids: [this.oauth_client.id]
|
||||
})
|
||||
} else if (this.step === 2 && this.type === 'saml') {
|
||||
const provider_rsc = await resource_service.get('saml/Provider')
|
||||
const provider_params = {
|
||||
name: this.name,
|
||||
acs_url: this.saml_acs_url,
|
||||
entity_id: this.saml_entity_id,
|
||||
}
|
||||
|
||||
if (this.saml_slo_url)
|
||||
provider_params.slo_url = this.saml_slo_url
|
||||
|
||||
this.saml_provider = await provider_rsc.create(provider_params)
|
||||
this.app = await this.create_app({
|
||||
saml_service_provider_ids: [this.saml_provider.id]
|
||||
})
|
||||
} else if (this.step === 2 && this.type === 'ldap') {
|
||||
const client_rsc = await resource_service.get('ldap/Client')
|
||||
const client_params = {
|
||||
name: this.name,
|
||||
uid: this.ldap_username,
|
||||
password: this.ldap_password,
|
||||
}
|
||||
|
||||
this.ldap_config = await client_rsc.server_config()
|
||||
this.ldap_client = await client_rsc.create(client_params)
|
||||
this.app = await this.create_app({
|
||||
ldap_client_ids: [this.ldap_client.id]
|
||||
})
|
||||
}
|
||||
|
||||
if ( this.step === 2 ) {
|
||||
this.step += 1
|
||||
this.btn_disabled = true
|
||||
this.btn_hidden = true
|
||||
this.btn_listing = true
|
||||
this.btn_back = false
|
||||
}
|
||||
} catch (e) {
|
||||
if ( e.response && e.response.data && e.response.data.message )
|
||||
this.error_message = e.response.data.message
|
||||
else this.error_message = 'An unknown error occurred while saving the form.'
|
||||
}
|
||||
}
|
||||
|
||||
async on_type_click(type) {
|
||||
this.type = type
|
||||
this.step += 1
|
||||
this.btn_hidden = false
|
||||
this.btn_disabled = true
|
||||
}
|
||||
|
||||
async on_listing_click() {
|
||||
await location_service.back()
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
const { Controller } = require('libflitter')
|
||||
|
||||
class MiscController extends Controller {
|
||||
static get services() {
|
||||
return [...super.services, 'Vue']
|
||||
}
|
||||
|
||||
get_app_setup(req, res, next) {
|
||||
return res.page('dash:app_setup', {
|
||||
...this.Vue.session(req),
|
||||
...this.Vue.data()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = exports = MiscController
|
||||
@ -0,0 +1,13 @@
|
||||
const misc_routes = {
|
||||
prefix: '/dash',
|
||||
|
||||
middleware: ['auth:UserOnly'],
|
||||
|
||||
get: {
|
||||
'/app/setup': [
|
||||
'controller::dash:Misc.get_app_setup'
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = exports = misc_routes
|
||||
@ -0,0 +1,7 @@
|
||||
extends ../theme/dash/base
|
||||
|
||||
block content
|
||||
.cobalt-container
|
||||
.row.pad-top
|
||||
.col-12
|
||||
coreid-app-setup
|
||||
Loading…
Reference in new issue