CoreID/app/assets/app/dash/AppSetup.component.js

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()
    }
}