feat(后台): 增加第三方 QQ 登录配置面板

app/Admin/Controllers/Setting/QQ.php

@@ -0,0 +1,59 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * +----------------------------------------------------------------------+
+ * |                          ThinkSNS Plus                               |
+ * +----------------------------------------------------------------------+
+ * | Copyright (c) 2018 Chengdu ZhiYiChuangXiang Technology Co., Ltd.     |
+ * +----------------------------------------------------------------------+
+ * | This source file is subject to version 2.0 of the Apache license,    |
+ * | that is bundled with this package in the file LICENSE, and is        |
+ * | available through the world-wide-web at the following url:           |
+ * | http://www.apache.org/licenses/LICENSE-2.0.html                      |
+ * +----------------------------------------------------------------------+
+ * | Author: Slim Kit Group <[email protected]>                          |
+ * | Homepage: www.thinksns.com                                           |
+ * +----------------------------------------------------------------------+
+ */
+
+namespace Zhiyi\Plus\Admin\Controllers\Setting;
+
+use Illuminate\Http\Response;
+use function Zhiyi\Plus\setting;
+use Illuminate\Http\JsonResponse;
+use Zhiyi\Plus\Admin\Controllers\Controller;
+use Zhiyi\Plus\Admin\Requests\SetQQConfigure as SetQQConfigureRequest;
+
+class QQ extends Controller
+{
+    /**
+     * Get configure.
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function getConfigure(): JsonResponse
+    {
+        $settings = setting('user', 'vendor:qq', [
+            'appId' => '',
+            'appKey' => '',
+        ]);
+
+        return new JsonResponse($settings, Response::HTTP_OK);
+    }
+
+    /**
+     * set configure.
+     * @param \Zhiyi\Plus\Admin\Requests\SetEasemob $request
+     * @return \Illuminate\Http\Response
+     */
+    public function setConfigure(SetQQConfigureRequest $request)
+    {
+        setting('user')->set('vendor:qq', [
+            'appId' => $request->input('appId'),
+            'appKey' => $request->input('appKey'),
+        ]);
+
+        return new Response('', Response::HTTP_NO_CONTENT);
+    }
+}

app/Admin/Requests/SetQQConfigure.php

@@ -0,0 +1,51 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * +----------------------------------------------------------------------+
+ * |                          ThinkSNS Plus                               |
+ * +----------------------------------------------------------------------+
+ * | Copyright (c) 2018 Chengdu ZhiYiChuangXiang Technology Co., Ltd.     |
+ * +----------------------------------------------------------------------+
+ * | This source file is subject to version 2.0 of the Apache license,    |
+ * | that is bundled with this package in the file LICENSE, and is        |
+ * | available through the world-wide-web at the following url:           |
+ * | http://www.apache.org/licenses/LICENSE-2.0.html                      |
+ * +----------------------------------------------------------------------+
+ * | Author: Slim Kit Group <[email protected]>                          |
+ * | Homepage: www.thinksns.com                                           |
+ * +----------------------------------------------------------------------+
+ */
+
+namespace Zhiyi\Plus\Admin\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class SetQQConfigure extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     * @author Seven Du <[email protected]>
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     * @author Seven Du <[email protected]>
+     */
+    public function rules(): array
+    {
+        return [
+            'appId' => 'required|string',
+            'appKey' => 'required|string',
+        ];
+    }
+}

resources/assets/admin/api/vendor.js

@@ -1,15 +1,26 @@
 import request, { createRequestURI } from '../util/request';
 
-export class easemob {
-    static uri = createRequestURI('setting/vendor/easemob');
-    static get() {
+class VendorRequestGenerator {
+
+    static uri;
+
+    constructor(uri) {
+        this.uri = createRequestURI(uri);
+    }
+
+    get() {
         return request.get(this.uri, {
             validateStatus: status => status === 200,
         });
     }
-    static update(settings = {}) {
+
+    update(settings = {}) {
         return request.put(this.uri, settings, {
             validateStatus: status => status === 204,
         });
     }
-};
+}
+
+export const easemob = new VendorRequestGenerator('setting/vendor/easemob');
+export const qq = new VendorRequestGenerator('setting/vendor/qq');
+

resources/assets/admin/component/User.vue

@@ -38,7 +38,9 @@
                 第三方 <span class="caret"></span>
               </a>
               <ul class="dropdown-menu">
-                <li><a href="#">QQ&nbsp;登录</a></li>
+                <router-link tag="li" active-class="active" :to="{ name: 'user:vendor/qq' }">
+                  <a href="#">QQ&nbsp;登录</a>
+                </router-link>
                 <li><a href="#">微信登录</a></li>
                 <li><a href="#">微博登录</a></li>
                 <li class="divider"></li>

resources/assets/admin/pages/user-vendor/index.js

@@ -1 +1,2 @@
-export { default as Easemob } from './easemob';
+export { default as Easemob } from './easemob';
+export { default as QQ } from './qq';

resources/assets/admin/pages/user-vendor/qq.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-md-7">
+                <div class="panel panel-default">
+                    <div class="panel-heading">QQ 登录</div>
+                    <div class="panel-body">
+                        <sb-ui-loading v-if="loading" />
+                        <form class="form-horizontal" v-else>
+
+                            <!-- App ID -->
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">App ID</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control" v-model="form.appId">
+                                </div>
+                            </div>
+
+                            <!-- App Key -->
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">App Key</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control" v-model="form.appKey">
+                                </div>
+                            </div>
+
+                            <!-- 提交按钮 -->
+                            <div class="form-group">
+                                <div class="col-sm-9 col-sm-offset-3">
+                                    <ui-button type="button" class="btn btn-primary" @click="onSubmit" />
+                                </div>
+                            </div>
+
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-5">
+                <div class="panel panel-default">
+                    <div class="panel-heading">帮助</div>
+                    <div class="panel-body">
+                        腾讯 QQ 登录需要配置的数据，请前往「<a target="_blank" href="https://connect.qq.com">QQ 互联</a>」进行申请。
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { qq } from '../../api/vendor';
+export default {
+    data: () => ({
+        form: {
+            appId: '',
+            appKey: '',
+        },
+        loading: true,
+    }),
+    methods: {
+        onSubmit(event) {
+            qq.update(this.form).then(() => {
+                this.$store.dispatch("alert-open", { type: "success", message: '提交成功' });
+            }).catch(({ response: { data: message = "提交失败，请刷新页面重试！" } }) => {
+                this.$store.dispatch("alert-open", { type: "danger", message });
+            }).finally(event.stopProcessing);
+        }
+    },
+    created() {
+        qq.get().then(({ data }) => {
+            this.loading = false;
+            this.form = data;
+        }).catch(({ response: { data: message = "获取失败，请刷新页面重试！" } }) => {
+            this.$store.dispatch("alert-open", { type: "danger", message });
+        });
+    }
+}
+</script>
+

resources/assets/admin/router/user.js

@@ -32,6 +32,7 @@ const routers = {
     { path: 'register', component: Register },
     { path: 'trashed', component: UserTrashed },
     { path: 'vendor-easemob', component: vendorPages.Easemob, name: 'user:vendor/easemob' },
+    { path: 'vendor-qq', component: vendorPages.QQ, name: 'user:vendor/qq' },
   ]
 };
 

routes/new-admin.php

@@ -57,4 +57,8 @@
     // 环信配置
     $route->get('setting/vendor/easemob', AdminControllers\Setting\Easemob::class.'@getConfigure');
     $route->put('setting/vendor/easemob', AdminControllers\Setting\Easemob::class.'@setConfigure');
+
+    // QQ 配置
+    $route->get('setting/vendor/qq', AdminControllers\Setting\QQ::class.'@getConfigure');
+    $route->put('setting/vendor/qq', AdminControllers\Setting\QQ::class.'@setConfigure');
 });