wip: oauth2登录和oauth2 otp登录验证

mayfly_go_web/src/common/openApi.ts

@@ -6,6 +6,7 @@ export default {
     changePwd: (param: any) => request.post('/sys/accounts/change-pwd', param),
     getPublicKey: () => request.get('/common/public-key'),
     getConfigValue: (params: any) => request.get('/sys/configs/value', params),
+    oauthConfig: () => request.get('/sys/configs/auth'),
     captcha: () => request.get('/sys/captcha'),
     logout: () => request.post('/sys/accounts/logout/{token}'),
     getPermissions: () => request.get('/sys/accounts/permissions'),

mayfly_go_web/src/views/login/component/AccountLogin.vue

@@ -2,37 +2,24 @@
     <div>
         <el-form ref="loginFormRef" :model="loginForm" :rules="rules" class="login-content-form" size="large">
             <el-form-item prop="username">
-                <el-input type="text" placeholder="请输入用户名" prefix-icon="user" v-model="loginForm.username" clearable autocomplete="off"> </el-input>
+                <el-input type="text" placeholder="请输入用户名" prefix-icon="user" v-model="loginForm.username" clearable
+                    autocomplete="off"> </el-input>
             </el-form-item>
             <el-form-item prop="password">
-                <el-input
-                    type="password"
-                    placeholder="请输入密码"
-                    prefix-icon="lock"
-                    v-model="loginForm.password"
-                    autocomplete="off"
-                    @keyup.enter="login"
-                    show-password
-                >
+                <el-input type="password" placeholder="请输入密码" prefix-icon="lock" v-model="loginForm.password"
+                    autocomplete="off" @keyup.enter="login" show-password>
                 </el-input>
             </el-form-item>
             <el-form-item v-if="accountLoginSecurity.useCaptcha" prop="captcha">
                 <el-row :gutter="15">
                     <el-col :span="16">
-                        <el-input
-                            type="text"
-                            maxlength="6"
-                            placeholder="请输入验证码"
-                            prefix-icon="position"
-                            v-model="loginForm.captcha"
-                            clearable
-                            autocomplete="off"
-                            @keyup.enter="login"
-                        ></el-input>
+                        <el-input type="text" maxlength="6" placeholder="请输入验证码" prefix-icon="position"
+                            v-model="loginForm.captcha" clearable autocomplete="off" @keyup.enter="login"></el-input>
                     </el-col>
                     <el-col :span="8">
                         <div class="login-content-code">
-                            <img class="login-content-code-img" @click="getCaptcha" width="130px" height="40px" :src="captchaImage" style="cursor: pointer" />
+                            <img class="login-content-code-img" @click="getCaptcha" width="130px" height="40px"
+                                :src="captchaImage" style="cursor: pointer" />
                         </div>
                     </el-col>
                 </el-row>
@@ -47,21 +34,19 @@
             </el-form-item>
         </el-form>
 
-        <el-dialog title="修改密码" v-model="changePwdDialog.visible" :close-on-click-modal="false" width="450px" :destroy-on-close="true">
+        <el-dialog title="修改密码" v-model="changePwdDialog.visible" :close-on-click-modal="false" width="450px"
+            :destroy-on-close="true">
             <el-form :model="changePwdDialog.form" :rules="changePwdDialog.rules" ref="changePwdFormRef" label-width="auto">
                 <el-form-item prop="username" label="用户名" required>
                     <el-input v-model.trim="changePwdDialog.form.username" disabled></el-input>
                 </el-form-item>
                 <el-form-item prop="oldPassword" label="旧密码" required>
-                    <el-input v-model.trim="changePwdDialog.form.oldPassword" autocomplete="new-password" type="password"></el-input>
+                    <el-input v-model.trim="changePwdDialog.form.oldPassword" autocomplete="new-password"
+                        type="password"></el-input>
                 </el-form-item>
                 <el-form-item prop="newPassword" label="新密码" required>
-                    <el-input
-                        v-model.trim="changePwdDialog.form.newPassword"
-                        placeholder="须为8位以上且包含字⺟⼤⼩写+数字+特殊符号"
-                        type="password"
-                        autocomplete="new-password"
-                    ></el-input>
+                    <el-input v-model.trim="changePwdDialog.form.newPassword" placeholder="须为8位以上且包含字⺟⼤⼩写+数字+特殊符号"
+                        type="password" autocomplete="new-password"></el-input>
                 </el-form-item>
             </el-form>
 
@@ -73,28 +58,17 @@
             </template>
         </el-dialog>
 
-        <el-dialog
-            title="OTP校验"
-            v-model="otpDialog.visible"
-            @close="loading.signIn = false"
-            :close-on-click-modal="false"
-            width="350px"
-            :destroy-on-close="true"
-        >
-            <el-form ref="otpFormRef" :model="otpDialog.form" :rules="otpDialog.rules" @submit.native.prevent label-width="auto">
+        <el-dialog title="OTP校验" v-model="otpDialog.visible" @close="loading.signIn = false" :close-on-click-modal="false"
+            width="350px" :destroy-on-close="true">
+            <el-form ref="otpFormRef" :model="otpDialog.form" :rules="otpDialog.rules" @submit.native.prevent
+                label-width="auto">
                 <el-form-item v-if="otpDialog.otpUrl" label="二维码">
                     <qrcode-vue :value="otpDialog.otpUrl" :size="200" level="H" />
                 </el-form-item>
 
                 <el-form-item prop="code" label="OTP" required>
-                    <el-input
-                        style="width: 220px"
-                        ref="otpCodeInputRef"
-                        v-model.trim="otpDialog.form.code"
-                        clearable
-                        @keyup.enter="otpVerify"
-                        placeholder="请输入令牌APP中显示的授权码"
-                    ></el-input>
+                    <el-input style="width: 220px" ref="otpCodeInputRef" v-model.trim="otpDialog.form.code" clearable
+                        @keyup.enter="otpVerify" placeholder="请输入令牌APP中显示的授权码"></el-input>
                 </el-form-item>
             </el-form>
 
@@ -265,10 +239,14 @@ const onSignIn = async () => {
         return;
     }
     state.showLoginFailTips = false;
+    loginResDeal(loginRes);
+}
+
+const loginResDeal = (loginRes: any) => {
     // 用户信息
     const userInfos = {
         name: loginRes.name,
-        username: state.loginForm.username,
+        username: loginRes.username,
         // 头像
         photo: letterAvatar(state.loginForm.username),
         time: new Date().getTime(),
@@ -297,6 +275,10 @@ const onSignIn = async () => {
     }, 400);
 };
 
+defineExpose({
+    loginResDeal
+});
+
 // 登录成功后的跳转
 const signInSuccess = async (accessToken: string = '') => {
     // 存储 token 到浏览器缓存

mayfly_go_web/src/views/login/index.vue

@@ -9,7 +9,7 @@
                 <el-tabs v-model="tabsActiveName" @tab-click="onTabsClick">
                     <el-tab-pane label="账号密码登录" name="account" :disabled="tabsActiveName === 'account'">
                         <transition name="el-zoom-in-center">
-                            <Account v-show="isTabPaneShow" />
+                            <Account v-show="isTabPaneShow" ref="loginForm" />
                         </transition>
                     </el-tab-pane>
                     <!-- <el-tab-pane label="手机号登录" name="mobile" :disabled="tabsActiveName === 'mobile'">
@@ -18,10 +18,19 @@
                         </transition>
                     </el-tab-pane> -->
                 </el-tabs>
-                <!-- <div class="mt10">
+                <div class="mt10" v-show="authConfig.oauth2">
                     <el-button type="text" size="small">第三方登录</el-button>
-                    <el-button type="text" size="small">友情链接</el-button>
-                </div> -->
+                    <!-- <el-button type="text" size="small">友情链接</el-button> -->
+                </div>
+                <div class="mt10" v-show="authConfig.oauth2">
+                    <el-tooltip content="使用OAuth2登录" placement="top-start">
+                        <el-button type="text" size="small" @click="oauth2Login">
+                            <el-icon :size="18">
+                                <Menu />
+                            </el-icon>
+                        </el-button>
+                    </el-tooltip>
+                </div>
             </div>
         </div>
         <!-- <div class="login-copyright">
@@ -32,23 +41,58 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs, reactive } from 'vue';
+import { toRefs, reactive, onMounted, h, ref } from 'vue';
 import Account from '@/views/login/component/AccountLogin.vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
+import openApi from '@/common/openApi';
+import config from '@/common/config';
 
 const { themeConfig } = storeToRefs(useThemeConfig());
 const state = reactive({
     tabsActiveName: 'account',
     isTabPaneShow: true,
+    authConfig: {
+        oauth2: false,
+    },
 });
 
-const { isTabPaneShow, tabsActiveName } = toRefs(state);
+const loginForm = ref<{ loginResDeal: (data: any) => void } | null>(null);
+
+const { isTabPaneShow, tabsActiveName, authConfig, } = toRefs(state);
 
 // 切换密码、手机登录
 const onTabsClick = () => {
     state.isTabPaneShow = !state.isTabPaneShow;
 };
+
+onMounted(async () => {
+    state.authConfig = await openApi.oauthConfig();
+
+});
+
+const oauth2Login = () => {
+    // 小窗口打开oauth2鉴权
+    let oauthWindoe = window.open(config.baseApiUrl + "/sys/auth/oauth2/login", "oauth2", "width=600,height=600");
+    if (oauthWindoe) {
+        const handler = (e: any) => {
+            if (e.data.action === "oauthLogin") {
+                oauthWindoe!.close();
+                window.removeEventListener("message", handler);
+                // 处理登录token
+                console.log(e.data);
+                loginForm.value!.loginResDeal(e.data);
+            }
+        }
+        window.addEventListener("message", handler);
+        setInterval(() => {
+            if (oauthWindoe!.closed) {
+                window.removeEventListener("message", handler);
+            }
+        }, 1000);
+    }
+}
+
 </script>
 
 <style scoped lang="scss">

mayfly_go_web/src/views/personal/index.vue

@@ -12,8 +12,8 @@
                         </div>
                         <div class="personal-user-right">
                             <el-row>
-                                <el-col :span="24" class="personal-title mb18"
-                                    >{{ currentTime }}，{{ userInfo.name }}，生活变的再糟糕，也不妨碍我变得更好！
+                                <el-col :span="24" class="personal-title mb18">{{ currentTime }}，{{ userInfo.name
+                                }}，生活变的再糟糕，也不妨碍我变得更好！
                                 </el-col>
                                 <el-col :span="24">
                                     <el-row>
@@ -77,16 +77,9 @@
                     </el-table-column>
                 </el-table>
                 <el-row type="flex" class="mt5" justify="center">
-                    <el-pagination
-                        small
-                        @current-change="getMsgs"
-                        style="text-align: center"
-                        background
-                        layout="prev, pager, next, total, jumper"
-                        :total="msgDialog.msgs.total"
-                        v-model:current-page="msgDialog.query.pageNum"
-                        :page-size="msgDialog.query.pageSize"
-                    />
+                    <el-pagination small @current-change="getMsgs" style="text-align: center" background
+                        layout="prev, pager, next, total, jumper" :total="msgDialog.msgs.total"
+                        v-model:current-page="msgDialog.query.pageNum" :page-size="msgDialog.query.pageSize" />
                 </el-row>
             </el-dialog>
 
@@ -115,7 +108,8 @@
                         <el-row :gutter="35">
                             <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                                 <el-form-item label="密码">
-                                    <el-input type="password" show-password v-model="accountForm.password" placeholder="请输入新密码" clearable></el-input>
+                                    <el-input type="password" show-password v-model="accountForm.password"
+                                        placeholder="请输入新密码" clearable></el-input>
                                 </el-form-item>
                             </el-col>
                             <!--  -->
@@ -160,18 +154,18 @@
                                 <el-button type="text">立即设置</el-button>
                             </div>
                         </div>
-                    </div>
+                    </div> -->
                     <div class="personal-edit-safe-box">
                         <div class="personal-edit-safe-item">
                             <div class="personal-edit-safe-item-left">
-                                <div class="personal-edit-safe-item-left-label">绑定QQ</div>
-                                <div class="personal-edit-safe-item-left-value">已绑定QQ：110****566</div>
+                                <div class="personal-edit-safe-item-left-label">绑定OAuth2</div>
+                                <div class="personal-edit-safe-item-left-value">已绑定OAuth2</div>
                             </div>
                             <div class="personal-edit-safe-item-right">
-                                <el-button type="text">立即设置</el-button>
+                                <el-button type="text">立即绑定</el-button>
                             </div>
                         </div>
-                    </div> -->
+                    </div>
                 </el-card>
             </el-col>
         </el-row>

mayfly_go_web/src/views/system/auth/AuthInfo.vue

@@ -22,22 +22,28 @@
                 </el-form-item>
                 <el-form-item prop="authorizationURL" label="Authorization URL" required>
                     <el-input v-model="oauth2.authorizationURL"
-                        placeholder="https://example.com/oauth/authorize"></el-input>
+                        placeholder="授权码获取地址 例如: https://example.com/oauth/authorize"></el-input>
                 </el-form-item>
                 <el-form-item prop="accessTokenURL" label="Access token URL" required>
-                    <el-input v-model="oauth2.accessTokenURL" placeholder="https://example.com/oauth/token"></el-input>
+                    <el-input v-model="oauth2.accessTokenURL"
+                        placeholder="访问token获取地址 例如: https://example.com/oauth/token"></el-input>
                 </el-form-item>
                 <el-form-item prop="resourceURL" label="Resource URL" required>
-                    <el-input v-model="oauth2.resourceURL" placeholder="https://example.com/user"></el-input>
+                    <el-input v-model="oauth2.resourceURL"
+                        placeholder="获取用户信息地址 例如: https://example.com/api/v4/user"></el-input>
                 </el-form-item>
                 <el-form-item prop="redirectURL" label="Redirect URL" required>
-                    <el-input v-model="oauth2.redirectURL" placeholder="http://mayfly地址/"></el-input>
+                    <el-input v-model="oauth2.redirectURL" placeholder="mayfly地址 例如: http://localhost:8889/"></el-input>
                 </el-form-item>
                 <el-form-item prop="userIdentifier" label="User identifier" required>
-                    <el-input v-model="oauth2.userIdentifier" placeholder=""></el-input>
+                    <el-input v-model="oauth2.userIdentifier"
+                        placeholder="用户唯一标识key 例如:username,如果有多层可以写为: data.username"></el-input>
                 </el-form-item>
                 <el-form-item prop="scopes" label="Scopes" required>
-                    <el-input v-model="oauth2.scopes" placeholder=""></el-input>
+                    <el-input v-model="oauth2.scopes" placeholder="read_user,read_api 多个使用,分割"></el-input>
+                </el-form-item>
+                <el-form-item prop="autoRegister" label="自动注册">
+                    <el-checkbox v-model="oauth2.autoRegister" label="开启自动注册将会自动注册账号, 否则需要手动创建账号后再进行绑定" />
                 </el-form-item>
                 <el-form-item>
                     <el-button type="primary" @click="onSubmit" :loading="btnLoading">保存</el-button>
@@ -50,7 +56,7 @@
 <script lang="ts" setup>
 import { onMounted, reactive, ref, toRefs } from 'vue';
 import { authApi } from '../api';
-import { FormInstance } from 'element-plus';
+import { ElMessage, FormInstance } from 'element-plus';
 
 
 const oauth2Form = ref<FormInstance>();
@@ -65,6 +71,7 @@ const state = reactive({
         redirectURL: '',
         userIdentifier: '',
         scopes: '',
+        autoRegister: false,
     },
     btnLoading: false,
 });
@@ -89,6 +96,7 @@ const onSubmit = () => {
             } catch (e) {
             }
             state.btnLoading = false;
+            ElMessage.success('保存成功');
         }
     })
 }

mayfly_go_web/src/views/system/config/ConfigList.vue

@@ -29,12 +29,17 @@
             <el-form v-if="paramsDialog.paramsFormItem.length > 0" ref="paramsFormRef" :model="paramsDialog.params" label-width="auto">
                 <el-form-item v-for="item in paramsDialog.paramsFormItem" :key="item.name" :prop="item.model" :label="item.name" required>
                     <el-input
-                        v-if="!item.options"
+                        v-if="!item.options && !item.type"
                         v-model="paramsDialog.params[item.model]"
                         :placeholder="item.placeholder"
                         autocomplete="off"
                         clearable
                     ></el-input>
+                    <el-checkbox v-else-if="item.type == 'checkbox'"
+                        v-model="paramsDialog.params[item.model]"
+                            autocomplete="off"
+                            :label="item.placeholder"
+                            clearable/>
                     <el-select
                         v-else
                         v-model="paramsDialog.params[item.model]"