diff --git a/spug_web/src/pages/system/setting/OpenService.js b/spug_web/src/pages/system/setting/OpenService.js
new file mode 100644
index 0000000..45eeb17
--- /dev/null
+++ b/spug_web/src/pages/system/setting/OpenService.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import {observer} from 'mobx-react';
+import {Button, Form, Input, message} from 'antd';
+import styles from './index.module.css';
+import http from 'libs/http';
+import store from './store';
+import lds from 'lodash';
+
+
+export default observer(function () {
+  function handleSubmit() {
+    store.loading = true;
+    const value = lds.get(store.settings, 'api_key.value');
+    http.post('/api/setting/', {data: [{key: 'api_key', value}]})
+      .then(() => {
+        message.success('保存成功');
+        store.fetchSettings()
+      })
+      .finally(() => store.loading = false)
+  }
+
+
+  return (
+    <React.Fragment>
+      <div className={styles.title}>开放服务设置</div>
+      <Form style={{maxWidth: 320}}>
+        <Form.Item colon={false} label="访问凭据">
+          <Input
+            value={lds.get(store.settings, 'api_key.value')}
+            onChange={e => lds.set(store.settings, 'api_key.value', e.target.value)}
+            placeholder="请输入"/>
+        </Form.Item>
+        <Button type="primary" loading={store.loading} onClick={handleSubmit}>保存设置</Button>
+      </Form>
+    </React.Fragment>
+  )
+})
\ No newline at end of file
diff --git a/spug_web/src/pages/system/setting/index.js b/spug_web/src/pages/system/setting/index.js
index a821686..e490d75 100644
--- a/spug_web/src/pages/system/setting/index.js
+++ b/spug_web/src/pages/system/setting/index.js
@@ -3,6 +3,7 @@ import { Menu } from 'antd';
 import BasicSetting from './BasicSetting';
 import AlarmSetting from './AlarmSetting';
 import MailServer from './MailServer';
+import OpenService from './OpenService';
 import styles from './index.module.css';
 import store from './store';
 
@@ -32,12 +33,14 @@ class Index extends React.Component {
             <Menu.Item key="basic">基本设置</Menu.Item>
             <Menu.Item key="alarm">报警服务设置</Menu.Item>
             <Menu.Item key="mail">邮件服务设置</Menu.Item>
+            <Menu.Item key="service">开放服务设置</Menu.Item>
           </Menu>
         </div>
         <div className={styles.right}>
           {selectedKeys[0] === 'basic' && <BasicSetting />}
           {selectedKeys[0] === 'mail' && <MailServer />}
           {selectedKeys[0] === 'alarm' && <AlarmSetting />}
+          {selectedKeys[0] === 'service' && <OpenService />}
         </div>
       </div>
     )
diff --git a/spug_web/src/pages/system/setting/store.js b/spug_web/src/pages/system/setting/store.js
index 39cd360..3501aee 100644
--- a/spug_web/src/pages/system/setting/store.js
+++ b/spug_web/src/pages/system/setting/store.js
@@ -5,6 +5,7 @@ import http from 'libs/http';
 class Store {
   @observable settings = {};
   @observable isFetching = false;
+  @observable loading = false;
 
   fetchSettings = () => {
     this.isFetching = true;