Merge pull request #1451 from weseek/reactify-admin/create-apiV3-update-OIDC-setting

Reactify admin/create api v3 update oidc setting

resource/locales/en-US/translation.json

@@ -590,7 +590,8 @@
         "mapping_detail": "Specification of mappings for %s when creating new users",
         "register_1": "Contant to OIDC IdP Administrator",
         "register_2": "Register your OIDC App with \"Authorization callback URL\" as <code>%s</code>",
-        "register_3": "Copy and paste your ClientID and Client Secret above"
+        "register_3": "Copy and paste your ClientID and Client Secret above",
+        "updated_oidc": "Succeeded to update OpenID Connect"
       },
       "how_to": {
         "google": "How to configure Google OAuth?",

resource/locales/ja/translation.json

@@ -582,7 +582,8 @@
         "id_detail": "OIDC claims で一意に識別可能な値を格納している属性",
         "username_detail": "新規ユーザーのアカウント名(<code>username</code>)に関連付ける属性",
         "name_detail": "新規ユーザー名(<code>name</code>)に関連付ける属性",
-        "mapping_detail": "新規ユーザーの{{target}}に関連付ける属性"
+        "mapping_detail": "新規ユーザーの{{target}}に関連付ける属性",
+        "updated_oidc": "OpenID Connect を更新しました"
       },
       "how_to": {
         "google": "Google OAuth の設定方法",

src/client/js/components/Admin/Security/OidcSecuritySetting.jsx

@@ -2,16 +2,55 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import loggerFactory from '@alias/logger';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminGeneralSecurityContainer from '../../../services/AdminGeneralSecurityContainer';
 import AdminOidcSecurityContainer from '../../../services/AdminOidcSecurityContainer';
 
+const logger = loggerFactory('growi:security:AdminGoogleSecurityContainer');
 
 class OidcSecurityManagement extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      retrieveError: null,
+    };
+
+    this.onClickSubmit = this.onClickSubmit.bind(this);
+  }
+
+  async componentDidMount() {
+    const { adminOidcSecurityContainer } = this.props;
+
+    try {
+      await adminOidcSecurityContainer.retrieveSecurityData();
+    }
+    catch (err) {
+      toastError(err);
+      this.setState({ retrieveError: err });
+      logger.error(err);
+    }
+  }
+
+  async onClickSubmit() {
+    const { t, adminOidcSecurityContainer } = this.props;
+
+    try {
+      await adminOidcSecurityContainer.updateOidcSetting();
+      toastSuccess(t('security_setting.OAuth.OIDC.updated_oidc'));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  }
+
   render() {
     const { t, adminGeneralSecurityContainer, adminOidcSecurityContainer } = this.props;
 
@@ -20,11 +59,11 @@ class OidcSecurityManagement extends React.Component {
       <React.Fragment>
 
         <h2 className="alert-anchor border-bottom">
-          { t('security_setting.OAuth.OIDC.name') } { t('security_setting.configuration') }
+          {t('security_setting.OAuth.OIDC.name')} {t('security_setting.configuration')}
         </h2>
 
         <div className="row mb-5">
-          <strong className="col-xs-3 text-right">{ t('security_setting.OAuth.OIDC.name') }</strong>
+          <strong className="col-xs-3 text-right">{t('security_setting.OAuth.OIDC.name')}</strong>
           <div className="col-xs-6 text-left">
             <div className="checkbox checkbox-success">
               <input
@@ -34,14 +73,14 @@ class OidcSecurityManagement extends React.Component {
                 onChange={() => { adminGeneralSecurityContainer.switchIsOidcEnabled() }}
               />
               <label htmlFor="isOidcEnabled">
-                { t('security_setting.OAuth.enable_oidc') }
+                {t('security_setting.OAuth.enable_oidc')}
               </label>
             </div>
           </div>
         </div>
 
         <div className="row mb-5">
-          <label className="col-xs-3 text-right">{ t('security_setting.callback_URL') }</label>
+          <label className="col-xs-3 text-right">{t('security_setting.callback_URL')}</label>
           <div className="col-xs-6">
             <input
               className="form-control"
@@ -49,227 +88,233 @@ class OidcSecurityManagement extends React.Component {
               value={adminOidcSecurityContainer.state.callbackUrl}
               readOnly
             />
-            <p className="help-block small">{ t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' }) }</p>
+            <p className="help-block small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
             {!adminGeneralSecurityContainer.state.appSiteUrl && (
-            <div className="alert alert-danger">
-              <i
-                className="icon-exclamation"
-                // eslint-disable-next-line max-len
-                dangerouslySetInnerHTML={{ __html: t('security_setting.alert_siteUrl_is_not_set', { link: `<a href="/admin/app">${t('App settings')}<i class="icon-login"></i></a>` }) }}
-              />
-            </div>
+              <div className="alert alert-danger">
+                <i
+                  className="icon-exclamation"
+                  // eslint-disable-next-line max-len
+                  dangerouslySetInnerHTML={{ __html: t('security_setting.alert_siteUrl_is_not_set', { link: `<a href="/admin/app">${t('App settings')}<i class="icon-login"></i></a>` }) }}
+                />
+              </div>
             )}
           </div>
         </div>
 
         {adminGeneralSecurityContainer.state.isOidcEnabled && (
-        <React.Fragment>
+          <React.Fragment>
 
-          <div className="row mb-5">
-            <label htmlFor="oidcProviderName" className="col-xs-3 text-right">{ t('security_setting.providerName') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcProviderName"
-                value={adminOidcSecurityContainer.state.oidcProviderName}
-                onChange={e => adminOidcSecurityContainer.changeOidcProviderName(e.target.value)}
-              />
-            </div>
-          </div>
-
-          <div className="row mb-5">
-            <label htmlFor="oidcIssuerHost" className="col-xs-3 text-right">{ t('security_setting.issuerHost') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcIssuerHost"
-                value={adminOidcSecurityContainer.state.oidcIssuerHost}
-                onChange={e => adminOidcSecurityContainer.changeOidcIssuerHost(e.target.value)}
-              />
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_ISSUER_HOST' }) }} />
-              </p>
+            <div className="row mb-5">
+              <label htmlFor="oidcProviderName" className="col-xs-3 text-right">{t('security_setting.providerName')}</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="oidcProviderName"
+                  value={adminOidcSecurityContainer.state.oidcProviderName}
+                  onChange={e => adminOidcSecurityContainer.changeOidcProviderName(e.target.value)}
+                />
+              </div>
             </div>
-          </div>
 
-          <div className="row mb-5">
-            <label htmlFor="oidcClientId" className="col-xs-3 text-right">{ t('security_setting.clientID') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcClientId"
-                value={adminOidcSecurityContainer.state.oidcClientId}
-                onChange={e => adminOidcSecurityContainer.changeOidcClientId(e.target.value)}
-              />
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_CLIENT_ID' }) }} />
-              </p>
+            <div className="row mb-5">
+              <label htmlFor="oidcIssuerHost" className="col-xs-3 text-right">{t('security_setting.issuerHost')}</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="oidcIssuerHost"
+                  value={adminOidcSecurityContainer.state.oidcIssuerHost}
+                  onChange={e => adminOidcSecurityContainer.changeOidcIssuerHost(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_ISSUER_HOST' }) }} />
+                </p>
+              </div>
             </div>
-          </div>
 
-          <div className="row mb-5">
-            <label htmlFor="oidcClientSecret" className="col-xs-3 text-right">{ t('security_setting.client_secret') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcClientSecret"
-                value={adminOidcSecurityContainer.state.oidcClientSecret}
-                onChange={e => adminOidcSecurityContainer.changeOidcClientSecret(e.target.value)}
-              />
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_CLIENT_SECRET' }) }} />
-              </p>
+            <div className="row mb-5">
+              <label htmlFor="oidcClientId" className="col-xs-3 text-right">{t('security_setting.clientID')}</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="oidcClientId"
+                  value={adminOidcSecurityContainer.state.oidcClientId}
+                  onChange={e => adminOidcSecurityContainer.changeOidcClientId(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_CLIENT_ID' }) }} />
+                </p>
+              </div>
             </div>
-          </div>
 
-          <h3 className="alert-anchor border-bottom">
-              Attribute Mapping ({ t('security_setting.optional') })
-          </h3>
-
-          <div className="row mb-5">
-            <label htmlFor="oidcAttrMapId" className="col-xs-3 text-right">Identifier</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcAttrMapId"
-                value={adminOidcSecurityContainer.state.oidcAttrMapId}
-                onChange={e => adminOidcSecurityContainer.changeOidcAttrMapId(e.target.value)}
-              />
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.id_detail') }} />
-              </p>
+            <div className="row mb-5">
+              <label htmlFor="oidcClientSecret" className="col-xs-3 text-right">{t('security_setting.client_secret')}</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="oidcClientSecret"
+                  value={adminOidcSecurityContainer.state.oidcClientSecret}
+                  onChange={e => adminOidcSecurityContainer.changeOidcClientSecret(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_CLIENT_SECRET' }) }} />
+                </p>
+              </div>
             </div>
-          </div>
 
-          <div className="row mb-5">
-            <label htmlFor="oidcAttrMapUserName" className="col-xs-3 text-right">{ t('username') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcAttrMapUserName"
-                value={adminOidcSecurityContainer.state.oidcAttrMapUserName}
-                onChange={e => adminOidcSecurityContainer.changeOidcAttrMapUserName(e.target.value)}
-              />
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.username_detail') }} />
-              </p>
-            </div>
-          </div>
+            <h3 className="alert-anchor border-bottom">
+              Attribute Mapping ({t('security_setting.optional')})
+            </h3>
 
-          <div className="row mb-5">
-            <label htmlFor="oidcAttrMapName" className="col-xs-3 text-right">{ t('Name') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcAttrMapName"
-                value={adminOidcSecurityContainer.state.oidcAttrMapName}
-                onChange={e => adminOidcSecurityContainer.changeOidcAttrMapName(e.target.value)}
-              />
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.name_detail') }} />
-              </p>
+            <div className="row mb-5">
+              <label htmlFor="oidcAttrMapId" className="col-xs-3 text-right">Identifier</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="oidcAttrMapId"
+                  value={adminOidcSecurityContainer.state.oidcAttrMapId}
+                  onChange={e => adminOidcSecurityContainer.changeOidcAttrMapId(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.id_detail') }} />
+                </p>
+              </div>
             </div>
-          </div>
 
-          <div className="row mb-5">
-            <label htmlFor="oidcAttrMapEmail" className="col-xs-3 text-right">{ t('Email') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcAttrMapEmail"
-                value={adminOidcSecurityContainer.state.oidcAttrMapEmail}
-                onChange={e => adminOidcSecurityContainer.changeOidcAttrMapEmail(e.target.value)}
-              />
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.mapping_detail', { target: t('Email') }) }} />
-              </p>
+            <div className="row mb-5">
+              <label htmlFor="oidcAttrMapUserName" className="col-xs-3 text-right">{t('username')}</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="oidcAttrMapUserName"
+                  value={adminOidcSecurityContainer.state.oidcAttrMapUserName}
+                  onChange={e => adminOidcSecurityContainer.changeOidcAttrMapUserName(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.username_detail') }} />
+                </p>
+              </div>
             </div>
-          </div>
 
-          <div className="row mb-5">
-            <label className="col-xs-3 text-right">{ t('security_setting.callback_URL') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                value={adminOidcSecurityContainer.state.callbackUrl}
-                readOnly
-              />
-              <p className="help-block small">{ t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' }) }</p>
-              {!adminGeneralSecurityContainer.state.appSiteUrl && (
-              <div className="alert alert-danger">
-                <i
-                  className="icon-exclamation"
-                // eslint-disable-next-line max-len
-                  dangerouslySetInnerHTML={{ __html: t('security_setting.alert_siteUrl_is_not_set', { link: `<a href="/admin/app">${t('App settings')}<i class="icon-login"></i></a>` }) }}
+            <div className="row mb-5">
+              <label htmlFor="oidcAttrMapName" className="col-xs-3 text-right">{t('Name')}</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="oidcAttrMapName"
+                  value={adminOidcSecurityContainer.state.oidcAttrMapName}
+                  onChange={e => adminOidcSecurityContainer.changeOidcAttrMapName(e.target.value)}
                 />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.name_detail') }} />
+                </p>
               </div>
-            )}
             </div>
-          </div>
 
-          <div className="row mb-3">
-            <div className="col-xs-offset-3 col-xs-6 text-left">
-              <div className="checkbox checkbox-success">
+            <div className="row mb-5">
+              <label htmlFor="oidcAttrMapEmail" className="col-xs-3 text-right">{t('Email')}</label>
+              <div className="col-xs-6">
                 <input
-                  id="bindByUserName-oidc"
-                  type="checkbox"
-                  checked={adminOidcSecurityContainer.state.isSameUsernameTreatedAsIdenticalUser}
-                  onChange={() => { adminOidcSecurityContainer.switchIsSameUsernameTreatedAsIdenticalUser() }}
-                />
-                <label
-                  htmlFor="bindByUserName-oidc"
-                  dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical') }}
+                  className="form-control"
+                  type="text"
+                  name="oidcAttrMapEmail"
+                  value={adminOidcSecurityContainer.state.oidcAttrMapEmail}
+                  onChange={e => adminOidcSecurityContainer.changeOidcAttrMapEmail(e.target.value)}
                 />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.mapping_detail', { target: t('Email') }) }} />
+                </p>
               </div>
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical_warn') }} />
-              </p>
             </div>
-          </div>
 
-          <div className="row mb-5">
-            <div className="col-xs-offset-3 col-xs-6 text-left">
-              <div className="checkbox checkbox-success">
+            <div className="row mb-5">
+              <label className="col-xs-3 text-right">{t('security_setting.callback_URL')}</label>
+              <div className="col-xs-6">
                 <input
-                  id="bindByEmail-oidc"
-                  type="checkbox"
-                  checked={adminOidcSecurityContainer.state.isSameEmailTreatedAsIdenticalUser}
-                  onChange={() => { adminOidcSecurityContainer.switchIsSameEmailTreatedAsIdenticalUser() }}
-                />
-                <label
-                  htmlFor="bindByEmail-oidc"
-                  dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical') }}
+                  className="form-control"
+                  type="text"
+                  value={adminOidcSecurityContainer.state.callbackUrl}
+                  readOnly
                 />
+                <p className="help-block small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
+                {!adminGeneralSecurityContainer.state.appSiteUrl && (
+                  <div className="alert alert-danger">
+                    <i
+                      className="icon-exclamation"
+                      // eslint-disable-next-line max-len
+                      dangerouslySetInnerHTML={{ __html: t('security_setting.alert_siteUrl_is_not_set', { link: `<a href="/admin/app">${t('App settings')}<i class="icon-login"></i></a>` }) }}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="row mb-3">
+              <div className="col-xs-offset-3 col-xs-6 text-left">
+                <div className="checkbox checkbox-success">
+                  <input
+                    id="bindByUserName-oidc"
+                    type="checkbox"
+                    checked={adminOidcSecurityContainer.state.isSameUsernameTreatedAsIdenticalUser}
+                    onChange={() => { adminOidcSecurityContainer.switchIsSameUsernameTreatedAsIdenticalUser() }}
+                  />
+                  <label
+                    htmlFor="bindByUserName-oidc"
+                    dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical') }}
+                  />
+                </div>
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical_warn') }} />
+                </p>
+              </div>
+            </div>
+
+            <div className="row mb-5">
+              <div className="col-xs-offset-3 col-xs-6 text-left">
+                <div className="checkbox checkbox-success">
+                  <input
+                    id="bindByEmail-oidc"
+                    type="checkbox"
+                    checked={adminOidcSecurityContainer.state.isSameEmailTreatedAsIdenticalUser}
+                    onChange={() => { adminOidcSecurityContainer.switchIsSameEmailTreatedAsIdenticalUser() }}
+                  />
+                  <label
+                    htmlFor="bindByEmail-oidc"
+                    dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical') }}
+                  />
+                </div>
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical_warn') }} />
+                </p>
               </div>
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical_warn') }} />
-              </p>
             </div>
-          </div>
 
-        </React.Fragment>
+          </React.Fragment>
         )}
 
+        <div className="row my-3">
+          <div className="col-xs-offset-3 col-xs-5">
+            <button type="button" className="btn btn-primary" disabled={this.state.retrieveError != null} onClick={this.onClickSubmit}>{t('Update')}</button>
+          </div>
+        </div>
+
         <hr />
 
         <div style={{ minHeight: '300px' }}>
           <h4>
             <i className="icon-question" aria-hidden="true"></i>
-            <a href="#collapseHelpForOidcOauth" data-toggle="collapse">{ t('security_setting.OAuth.how_to.oidc') }</a>
+            <a href="#collapseHelpForOidcOauth" data-toggle="collapse">{t('security_setting.OAuth.how_to.oidc')}</a>
           </h4>
           <ol id="collapseHelpForOidcOauth" className="collapse">
-            <li>{ t('security_setting.OAuth.OIDC.register_1') }</li>
-            <li>{ t('security_setting.OAuth.OIDC.register_2') }</li>
-            <li>{ t('security_setting.OAuth.OIDC.register_3') }</li>
+            <li>{t('security_setting.OAuth.OIDC.register_1')}</li>
+            <li>{t('security_setting.OAuth.OIDC.register_2')}</li>
+            <li>{t('security_setting.OAuth.OIDC.register_3')}</li>
           </ol>
         </div>
 

src/client/js/services/AdminOidcSecurityContainer.js

@@ -1,6 +1,9 @@
 import { Container } from 'unstated';
 
 import loggerFactory from '@alias/logger';
+import { pathUtils } from 'growi-commons';
+
+import urljoin from 'url-join';
 
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:security:AdminOidcSecurityContainer');
@@ -17,8 +20,7 @@ export default class AdminOidcSecurityContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
-      // TODO GW-583 set value
-      callbackUrl: '',
+      callbackUrl: urljoin(pathUtils.removeTrailingSlash(appContainer.config.crowi.url), '/passport/oidc/callback'),
       oidcProviderName: '',
       oidcIssuerHost: '',
       oidcClientId: '',
@@ -27,16 +29,30 @@ export default class AdminOidcSecurityContainer extends Container {
       oidcAttrMapUserName: '',
       oidcAttrMapName: '',
       oidcAttrMapEmail: '',
-      isSameUsernameTreatedAsIdenticalUser: true,
-      isSameEmailTreatedAsIdenticalUser: true,
+      isSameUsernameTreatedAsIdenticalUser: false,
+      isSameEmailTreatedAsIdenticalUser: false,
     };
 
-    this.init();
-
   }
 
-  init() {
-    // TODO GW-583 fetch config value with api
+  /**
+   * retrieve security data
+   */
+  async retrieveSecurityData() {
+    const response = await this.appContainer.apiv3.get('/security-setting/');
+    const { oidcAuth } = response.data.securityParams;
+    this.setState({
+      oidcProviderName: oidcAuth.oidcProviderName || '',
+      oidcIssuerHost: oidcAuth.oidcIssuerHost || '',
+      oidcClientId: oidcAuth.oidcClientId || '',
+      oidcClientSecret: oidcAuth.oidcClientSecret || '',
+      oidcAttrMapId: oidcAuth.oidcAttrMapId || '',
+      oidcAttrMapUserName: oidcAuth.oidcAttrMapUserName || '',
+      oidcAttrMapName: oidcAuth.oidcAttrMapName || '',
+      oidcAttrMapEmail: oidcAuth.oidcAttrMapEmail || '',
+      isSameUsernameTreatedAsIdenticalUser: oidcAuth.isSameUsernameTreatedAsIdenticalUser || false,
+      isSameEmailTreatedAsIdenticalUser: oidcAuth.isSameEmailTreatedAsIdenticalUser || false,
+    });
   }
 
   /**
@@ -116,4 +132,39 @@ export default class AdminOidcSecurityContainer extends Container {
     this.setState({ isSameEmailTreatedAsIdenticalUser: !this.state.isSameEmailTreatedAsIdenticalUser });
   }
 
+  /**
+   * Update OpenID Connect
+   */
+  async updateOidcSetting() {
+
+    const response = await this.appContainer.apiv3.put('/security-setting/oidc', {
+      oidcProviderName: this.state.oidcProviderName,
+      oidcIssuerHost: this.state.oidcIssuerHost,
+      oidcClientId: this.state.oidcClientId,
+      oidcClientSecret: this.state.oidcClientSecret,
+      oidcAttrMapId: this.state.oidcAttrMapId,
+      oidcAttrMapUserName: this.state.oidcAttrMapUserName,
+      oidcAttrMapName: this.state.oidcAttrMapName,
+      oidcAttrMapEmail: this.state.oidcAttrMapEmail,
+      isSameUsernameTreatedAsIdenticalUser: this.state.isSameUsernameTreatedAsIdenticalUser,
+      isSameEmailTreatedAsIdenticalUser: this.state.isSameEmailTreatedAsIdenticalUser,
+    });
+
+    const { securitySettingParams } = response.data;
+
+    this.setState({
+      oidcProviderName: securitySettingParams.oidcProviderName || '',
+      oidcIssuerHost: securitySettingParams.oidcIssuerHost || '',
+      oidcClientId: securitySettingParams.oidcClientId || '',
+      oidcClientSecret: securitySettingParams.oidcClientSecret || '',
+      oidcAttrMapId: securitySettingParams.oidcAttrMapId || '',
+      oidcAttrMapUserName: securitySettingParams.oidcAttrMapUserName || '',
+      oidcAttrMapName: securitySettingParams.oidcAttrMapName || '',
+      oidcAttrMapEmail: securitySettingParams.oidcAttrMapEmail || '',
+      isSameUsernameTreatedAsIdenticalUser: securitySettingParams.isSameUsernameTreatedAsIdenticalUser || false,
+      isSameEmailTreatedAsIdenticalUser: securitySettingParams.isSameEmailTreatedAsIdenticalUser || false,
+    });
+    return response;
+  }
+
 }

src/server/routes/apiv3/security-setting.js

@@ -19,6 +19,17 @@ const validator = {
     body('hideRestrictedByOwner').isBoolean(),
     body('hideRestrictedByGroup').isBoolean(),
   ],
+  oidcAuth: [
+    body('oidcProviderName').isString(),
+    body('oidcIssuerHost').isString(),
+    body('oidcClientId').isString(),
+    body('oidcClientSecret').isString(),
+    body('oidcAttrMapId').isString(),
+    body('oidcAttrMapUserName').isString(),
+    body('oidcAttrMapEmail').isString(),
+    body('isSameUsernameTreatedAsIdenticalUser').isBoolean(),
+    body('isSameEmailTreatedAsIdenticalUser').isBoolean(),
+  ],
   basicAuth: [
     body('isSameUsernameTreatedAsIdenticalUser').isBoolean(),
   ],
@@ -76,6 +87,38 @@ const validator = {
  *                  hideRestrictedByGroup:
  *                    type: boolean
  *                    description: enable hide by group
+ *          OidcAuthSetting:
+ *            type:object
+ *              oidcProviderName:
+ *                type: string
+ *                description: provider name for oidc
+ *              oidcIssuerHost:
+ *                type: string
+ *                description: issuer host for oidc
+ *              oidcClientId:
+ *                type: string
+ *                description: client id for oidc
+ *              oidcClientSecret:
+ *                type: string
+ *                description: client secret for oidc
+ *              oidcAttrMapId:
+ *                type: string
+ *                description: attr map id for oidc
+ *              oidcAttrMapUserName:
+ *                type: string
+ *                description: attr map username for oidc
+ *              oidcAttrMapName:
+ *                type: string
+ *                description: attr map name for oidc
+ *              oidcAttrMapMail:
+ *                type: string
+ *                description: attr map mail for oidc
+ *              isSameUsernameTreatedAsIdenticalUser
+ *                type: boolean
+ *                description: local account automatically linked the user name matched
+ *              isSameEmailTreatedAsIdenticalUser
+ *                type: boolean
+ *                description: local account automatically linked the email matched
  *          BasicAuthSetting:
  *            type:object
  *              isSameUsernameTreatedAsIdenticalUser
@@ -143,11 +186,24 @@ module.exports = (crowi) => {
 
     const securityParams = {
       generalAuth: {
+        isOidcEnabled: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:isEnabled'),
         isBasicEnabled: await crowi.configManager.getConfig('crowi', 'security:passport-basic:isEnabled'),
         isGoogleOAuthEnabled: await crowi.configManager.getConfig('crowi', 'security:passport-google:isEnabled'),
         isGithubOAuthEnabled: await crowi.configManager.getConfig('crowi', 'security:passport-github:isEnabled'),
         isTwitterOAuthEnabled: await crowi.configManager.getConfig('crowi', 'security:passport-twitter:isEnabled'),
       },
+      oidcAuth: {
+        oidcProviderName: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:providerName'),
+        oidcIssuerHost: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:issuerHost'),
+        oidcClientId: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:clientId'),
+        oidcClientSecret: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:clientSecret'),
+        oidcAttrMapId: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:attrMapId'),
+        oidcAttrMapUserName: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:attrMapUserName'),
+        oidcAttrMapName: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:attrMapName'),
+        oidcAttrMapEmail: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:attrMapMail'),
+        isSameUsernameTreatedAsIdenticalUser: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:isSameUsernameTreatedAsIdenticalUser'),
+        isSameEmailTreatedAsIdenticalUser: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:isSameEmailTreatedAsIdenticalUser'),
+      },
       basicAuth: {
         isSameUsernameTreatedAsIdenticalUser: await crowi.configManager.getConfig('crowi', 'security:passport-basic:isSameUsernameTreatedAsIdenticalUser'),
       },
@@ -235,10 +291,68 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /security-setting/google-oauth:
+   *    /security-setting/oidc:
    *      put:
    *        tags: [SecuritySetting]
-   *        description: Update google OAuth
+   *        description: Update OpenID Connect setting
+   *        requestBody:
+   *          required: true
+   *          content:
+   *            application/json:
+   *              schema:
+   *                $ref: '#/components/schemas/SecurityParams/OidcAuthSetting'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update OpenID Connect setting
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/SecurityParams/OidcAuthSetting'
+   */
+  router.put('/oidc', loginRequiredStrictly, adminRequired, csrf, validator.oidcAuth, ApiV3FormValidator, async(req, res) => {
+    const requestParams = {
+      'security:passport-oidc:providerName': req.body.oidcProviderName,
+      'security:passport-oidc:issuerHost': req.body.oidcIssuerHost,
+      'security:passport-oidc:clientId': req.body.oidcClientId,
+      'security:passport-oidc:clientSecret': req.body.oidcClientSecret,
+      'security:passport-oidc:attrMapId': req.body.oidcAttrMapId,
+      'security:passport-oidc:attrMapUserName': req.body.oidcAttrMapUserName,
+      'security:passport-oidc:attrMapName': req.body.oidcAttrMapName,
+      'security:passport-oidc:attrMapMail': req.body.oidcAttrMapEmail,
+      'security:passport-oidc:isSameUsernameTreatedAsIdenticalUser': req.body.isSameUsernameTreatedAsIdenticalUser,
+      'security:passport-oidc:isSameEmailTreatedAsIdenticalUser': req.body.isSameEmailTreatedAsIdenticalUser,
+    };
+
+    try {
+      await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestParams);
+      const securitySettingParams = {
+        oidcProviderName: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:providerName'),
+        oidcIssuerHost: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:issuerHost'),
+        oidcClientId: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:clientId'),
+        oidcClientSecret: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:clientSecret'),
+        oidcAttrMapId: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:attrMapId'),
+        oidcAttrMapUserName: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:attrMapUserName'),
+        oidcAttrMapName: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:attrMapName'),
+        oidcAttrMapEmail: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:attrMapMail'),
+        isSameUsernameTreatedAsIdenticalUser: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:isSameUsernameTreatedAsIdenticalUser'),
+        isSameEmailTreatedAsIdenticalUser: await crowi.configManager.getConfig('crowi', 'security:passport-oidc:isSameEmailTreatedAsIdenticalUser'),
+      };
+      return res.apiv3({ securitySettingParams });
+    }
+    catch (err) {
+      const msg = 'Error occurred in updating OpenIDConnect';
+      logger.error('Error', err);
+      return res.apiv3Err(new ErrorV3(msg, 'update-OpenIDConnect-failed'));
+    }
+  });
+
+  /**
+   * @swagger
+   *
+   *    /security-setting/basic:
+   *      put:
+   *        tags: [SecuritySetting]
+   *        description: Update basic
    *        requestBody:
    *          required: true
    *          content:
@@ -247,7 +361,7 @@ module.exports = (crowi) => {
    *                $ref: '#/components/schemas/SecurityParams/BasicAuthSetting'
    *        responses:
    *          200:
-   *            description: Succeeded to google OAuth
+   *            description: Succeeded to update basic
    *            content:
    *              application/json:
    *                schema: