Merge pull request #2393 from coreos-inc/oidc-ui
OIDC configuration support in superuser config panel
This commit is contained in:
josephschorr
GitHub
commit
6d6be63ca6
8 changed files with 363 additions and 129 deletions
|
|
@ -525,17 +525,18 @@
|
|||
</div>
|
||||
</div> <!-- /E-mail -->
|
||||
|
||||
<!-- Authentication -->
|
||||
<!-- Internal Authentication -->
|
||||
<div class="co-panel">
|
||||
<div class="co-panel-heading">
|
||||
<i class="fa fa-users"></i> Authentication
|
||||
<i class="fa fa-users"></i> Internal Authentication
|
||||
</div>
|
||||
<div class="co-panel-body">
|
||||
<div class="description">
|
||||
<p>
|
||||
Authentication for the registry can be handled by either the registry itself, LDAP or external JWT endpoint.
|
||||
<br>
|
||||
Additional external authentication providers (such as GitHub) can be used on top of this choice.
|
||||
</p>
|
||||
<p>
|
||||
Additional <strong>external</strong> authentication providers (such as GitHub) can be used in addition for <strong>login into the UI</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -807,134 +808,228 @@
|
|||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div> <!-- /Authentication -->
|
||||
</div> <!-- / Internal Authentication -->
|
||||
|
||||
<!-- GitHub Authentication -->
|
||||
<div class="co-panel">
|
||||
<div class="co-panel"> <!-- External Authentication -->
|
||||
<div class="co-panel-heading">
|
||||
<i class="fa fa-github"></i> GitHub (Enterprise) Authentication
|
||||
<i class="fa fa-id-card"></i> External Authorization (OAuth)
|
||||
</div>
|
||||
<div class="co-panel-body">
|
||||
<div class="description">
|
||||
<p>
|
||||
If enabled, users can use GitHub or GitHub Enterprise to authenticate to the registry.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Note:</strong> A registered GitHub (Enterprise) OAuth application is required.
|
||||
View instructions on how to
|
||||
<a href="https://coreos.com/docs/enterprise-registry/github-app/" ng-safenewtab>
|
||||
Create an OAuth Application in GitHub
|
||||
</a>
|
||||
</p>
|
||||
<!-- GitHub Authentication -->
|
||||
<div class="co-panel">
|
||||
<div class="co-panel-heading">
|
||||
<i class="fa fa-github"></i> GitHub (Enterprise) Authentication
|
||||
</div>
|
||||
<div class="co-panel-body">
|
||||
<div class="description">
|
||||
<p>
|
||||
If enabled, users can use GitHub or GitHub Enterprise to authenticate to the registry.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Note:</strong> A registered GitHub (Enterprise) OAuth application is required.
|
||||
View instructions on how to
|
||||
<a href="https://coreos.com/docs/enterprise-registry/github-app/" ng-safenewtab>
|
||||
Create an OAuth Application in GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="config-bool-field" binding="config.FEATURE_GITHUB_LOGIN">
|
||||
Enable GitHub Authentication
|
||||
</div>
|
||||
|
||||
<table class="config-table" ng-if="config.FEATURE_GITHUB_LOGIN">
|
||||
<tr>
|
||||
<td>GitHub:</td>
|
||||
<td>
|
||||
<select class="form-control" ng-model="mapped.GITHUB_LOGIN_KIND">
|
||||
<option value="hosted">GitHub.com</option>
|
||||
<option value="enterprise">GitHub Enterprise</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-if="mapped.GITHUB_LOGIN_KIND == 'enterprise'">
|
||||
<td>GitHub Endpoint:</td>
|
||||
<td>
|
||||
<span class="config-string-field"
|
||||
binding="config.GITHUB_LOGIN_CONFIG.GITHUB_ENDPOINT"
|
||||
placeholder="https://my.githubserver"
|
||||
pattern="{{ GITHOST_REGEX }}">
|
||||
</span>
|
||||
<div class="help-text">
|
||||
The GitHub Enterprise endpoint. Must start with http:// or https://.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>OAuth Client ID:</td>
|
||||
<td>
|
||||
<span class="config-string-field" binding="config.GITHUB_LOGIN_CONFIG.CLIENT_ID">
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>OAuth Client Secret:</td>
|
||||
<td>
|
||||
<span class="config-string-field" binding="config.GITHUB_LOGIN_CONFIG.CLIENT_SECRET">
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Organization Filtering:</td>
|
||||
<td>
|
||||
<div class="config-bool-field" binding="config.GITHUB_LOGIN_CONFIG.ORG_RESTRICT">
|
||||
Restrict By Organization Membership
|
||||
</div>
|
||||
|
||||
<div class="help-text" style="margin-bottom: 20px;">
|
||||
If enabled, only members of specified GitHub
|
||||
<span ng-if="mapped.GITHUB_LOGIN_KIND == 'enterprise'">Enterprise</span> organizations will be allowed to login via GitHub
|
||||
<span ng-if="mapped.GITHUB_LOGIN_KIND == 'enterprise'">Enterprise</span>.
|
||||
</div>
|
||||
|
||||
<span class="config-list-field"
|
||||
item-title="Organization ID"
|
||||
binding="config.GITHUB_LOGIN_CONFIG.ALLOWED_ORGANIZATIONS"
|
||||
ng-if="config.GITHUB_LOGIN_CONFIG.ORG_RESTRICT">
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div> <!-- /GitHub Authentication -->
|
||||
|
||||
<!-- Google Authentication -->
|
||||
<div class="co-panel">
|
||||
<div class="co-panel-heading">
|
||||
<i class="fa fa-google"></i> Google Authentication
|
||||
</div>
|
||||
<div class="co-panel-body">
|
||||
<div class="description">
|
||||
<p>
|
||||
If enabled, users can use Google to authenticate to the registry.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Note:</strong> A registered Google OAuth application is required.
|
||||
Visit the
|
||||
<a href="https://console.developers.google.com" ng-safenewtab>
|
||||
Google Developer Console
|
||||
</a>
|
||||
to register an application.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="config-bool-field" binding="config.FEATURE_GOOGLE_LOGIN">
|
||||
Enable Google Authentication
|
||||
</div>
|
||||
|
||||
<table class="config-table" ng-if="config.FEATURE_GOOGLE_LOGIN">
|
||||
<tr>
|
||||
<td>OAuth Client ID:</td>
|
||||
<td>
|
||||
<span class="config-string-field" binding="config.GOOGLE_LOGIN_CONFIG.CLIENT_ID">
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>OAuth Client Secret:</td>
|
||||
<td>
|
||||
<span class="config-string-field" binding="config.GOOGLE_LOGIN_CONFIG.CLIENT_SECRET">
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div> <!-- /Google Authentication -->
|
||||
|
||||
<!-- Custom OIDC providers -->
|
||||
<div class="co-panel" ng-repeat="provider in getOIDCProviders(config)">
|
||||
<div class="co-panel-heading">
|
||||
<span class="icon-image-view" value="{{ config[provider]['SERVICE_ICON'] || 'fa-user-circle' }}" style="margin-right: 6px;"></span>
|
||||
{{ config[provider]['SERVICE_NAME'] || (getOIDCProviderId(provider) + ' Authentication') }}
|
||||
<span style="display: inline-block; margin-left: 10px">(<a href="javascript:void(0)" ng-click="removeOIDCProvider(provider)">Delete</a>)</span>
|
||||
</div>
|
||||
<div class="co-panel-body">
|
||||
<div class="co-alert co-alert-warning" ng-if="config.AUTHENTICATION_TYPE != 'Database' && !(config[provider].LOGIN_BINDING_FIELD)">
|
||||
Warning: This OIDC provider is not bound to your <strong>{{ config.AUTHENTICATION_TYPE }}</strong> authentication. Logging in via this provider will create a <strong><span class="registry-name"></span>-only user</strong>, which is not the recommended approach. It is <strong>highly</strong> recommended to choose a "Binding Field" below.
|
||||
</div>
|
||||
|
||||
<table class="config-table">
|
||||
<tr>
|
||||
<td class="non-input">Service ID:</td>
|
||||
<td>
|
||||
<code>{{ getOIDCProviderId(provider) }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>OIDC Server:</td>
|
||||
<td>
|
||||
<span class="config-string-field"
|
||||
binding="config[provider].OIDC_SERVER"
|
||||
placeholder="https://path/to/oidc/compliant/server"
|
||||
pattern="https://.+">
|
||||
</span>
|
||||
<div class="help-text">
|
||||
The URL of an OIDC-compliant server.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Service Name:</td>
|
||||
<td>
|
||||
<span class="config-string-field"
|
||||
binding="config[provider].SERVICE_NAME"
|
||||
placeholder="My Authentication Service">
|
||||
</span>
|
||||
<div class="help-text">
|
||||
The user friendly name to display for the service on the login page.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Service Icon (optional):</td>
|
||||
<td>
|
||||
<span class="config-string-field"
|
||||
binding="config[provider].SERVICE_ICON"
|
||||
placeholder="URL of the icon to use for this service OR a font awesome CSS name"
|
||||
is-optional="true">
|
||||
</span>
|
||||
<div class="help-text">
|
||||
If specified, the icon to display for this login service on the login page. Can be either a URL to an icon or a CSS class name from <a href="http://fontawesome.io" ng-safenewtab>Font Awesome</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-if="config.AUTHENTICATION_TYPE != 'Database'">
|
||||
<td>Binding Field:</td>
|
||||
<td>
|
||||
<select class="form-control" ng-model="config[provider].LOGIN_BINDING_FIELD">
|
||||
<option value="">(None)</option>
|
||||
<option value="sub">Subject (User ID)</option>
|
||||
<option value="username">Username</option>
|
||||
<option value="email">E-mail address</option>
|
||||
</select>
|
||||
<div class="help-text">
|
||||
If selected, when a user logs in via this OIDC provider, they will be automatically bound to their user in <strong>{{ config.AUTHENTICATION_TYPE }}</strong> by matching the selected field from the OIDC provider to the associated user in {{ config.AUTHENTICATION_TYPE }}.
|
||||
</div>
|
||||
<div class="help-text">
|
||||
For example, selecting <code>Subject</code> here with a backing authentication system of LDAP means that a user logging in via this OIDC provider will also be bound to their user in LDAP by username.
|
||||
</div>
|
||||
<div class="help-text">
|
||||
If none selected, a <strong>user unique to <span class="registry-name"></span></strong> will be created on initial login with this OIDC provider. <strong>This is not the recommended setup.</strong>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-bool-field" binding="config.FEATURE_GITHUB_LOGIN">
|
||||
Enable GitHub Authentication
|
||||
</div>
|
||||
|
||||
<table class="config-table" ng-if="config.FEATURE_GITHUB_LOGIN">
|
||||
<tr>
|
||||
<td>GitHub:</td>
|
||||
<td>
|
||||
<select class="form-control" ng-model="mapped.GITHUB_LOGIN_KIND">
|
||||
<option value="hosted">GitHub.com</option>
|
||||
<option value="enterprise">GitHub Enterprise</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-if="mapped.GITHUB_LOGIN_KIND == 'enterprise'">
|
||||
<td>GitHub Endpoint:</td>
|
||||
<td>
|
||||
<span class="config-string-field"
|
||||
binding="config.GITHUB_LOGIN_CONFIG.GITHUB_ENDPOINT"
|
||||
placeholder="https://my.githubserver"
|
||||
pattern="{{ GITHOST_REGEX }}">
|
||||
</span>
|
||||
<div class="help-text">
|
||||
The GitHub Enterprise endpoint. Must start with http:// or https://.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>OAuth Client ID:</td>
|
||||
<td>
|
||||
<span class="config-string-field" binding="config.GITHUB_LOGIN_CONFIG.CLIENT_ID">
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>OAuth Client Secret:</td>
|
||||
<td>
|
||||
<span class="config-string-field" binding="config.GITHUB_LOGIN_CONFIG.CLIENT_SECRET">
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Organization Filtering:</td>
|
||||
<td>
|
||||
<div class="config-bool-field" binding="config.GITHUB_LOGIN_CONFIG.ORG_RESTRICT">
|
||||
Restrict By Organization Membership
|
||||
</div>
|
||||
|
||||
<div class="help-text" style="margin-bottom: 20px;">
|
||||
If enabled, only members of specified GitHub
|
||||
<span ng-if="mapped.GITHUB_LOGIN_KIND == 'enterprise'">Enterprise</span> organizations will be allowed to login via GitHub
|
||||
<span ng-if="mapped.GITHUB_LOGIN_KIND == 'enterprise'">Enterprise</span>.
|
||||
</div>
|
||||
|
||||
<span class="config-list-field"
|
||||
item-title="Organization ID"
|
||||
binding="config.GITHUB_LOGIN_CONFIG.ALLOWED_ORGANIZATIONS"
|
||||
ng-if="config.GITHUB_LOGIN_CONFIG.ORG_RESTRICT">
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- Add Provider -->
|
||||
<a class="btn btn-default" ng-click="addOIDCProvider()" style="margin-right: 6px;">Add OIDC Provider</a>
|
||||
<a href="http://openid.net/connect/" ng-safenewtab>What is OIDC?</a>
|
||||
</div>
|
||||
</div> <!-- /GitHub Authentication -->
|
||||
</div> <!-- /External Authentication -->
|
||||
|
||||
<!-- Google Authentication -->
|
||||
<div class="co-panel">
|
||||
<div class="co-panel-heading">
|
||||
<i class="fa fa-google"></i> Google Authentication
|
||||
</div>
|
||||
<div class="co-panel-body">
|
||||
<div class="description">
|
||||
<p>
|
||||
If enabled, users can use Google to authenticate to the registry.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Note:</strong> A registered Google OAuth application is required.
|
||||
Visit the
|
||||
<a href="https://console.developers.google.com" ng-safenewtab>
|
||||
Google Developer Console
|
||||
</a>
|
||||
to register an application.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="config-bool-field" binding="config.FEATURE_GOOGLE_LOGIN">
|
||||
Enable Google Authentication
|
||||
</div>
|
||||
|
||||
<table class="config-table" ng-if="config.FEATURE_GOOGLE_LOGIN">
|
||||
<tr>
|
||||
<td>OAuth Client ID:</td>
|
||||
<td>
|
||||
<span class="config-string-field" binding="config.GOOGLE_LOGIN_CONFIG.CLIENT_ID">
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>OAuth Client Secret:</td>
|
||||
<td>
|
||||
<span class="config-string-field" binding="config.GOOGLE_LOGIN_CONFIG.CLIENT_SECRET">
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div> <!-- /Google Authentication -->
|
||||
|
||||
<!-- Build Support -->
|
||||
<div class="co-panel">
|
||||
|
|
|
|||
Reference in a new issue