Browse Source

feat: Feat/OIDC pcke (#14)

* add pkce for oidc

* fix

* test

* test
Tao Chen 11 months ago
parent
commit
a631c7f8f0
1 changed files with 40 additions and 1 deletions
  1. 40 1
      src/views/oauth/index.vue

+ 40 - 1
src/views/oauth/index.vue

@@ -14,6 +14,8 @@
14
         <el-table-column prop="op" :label="T('IdP')" align="center"/>
14
         <el-table-column prop="op" :label="T('IdP')" align="center"/>
15
         <el-table-column prop="oauth_type" :label="T('Type')" align="center"/>
15
         <el-table-column prop="oauth_type" :label="T('Type')" align="center"/>
16
         <el-table-column prop="auto_register" :label="T('AutoRegister')" align="center"/>
16
         <el-table-column prop="auto_register" :label="T('AutoRegister')" align="center"/>
17
+        <el-table-column prop="pkce_enable" :label="T('PkceEnable')" align="center"/>
18
+        <el-table-column prop="pkce_method" :label="T('PkceMethod')" align="center"/>
17
         <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
19
         <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
18
         <el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
20
         <el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
19
         <el-table-column :label="T('Actions')" align="center">
21
         <el-table-column :label="T('Actions')" align="center">
@@ -60,6 +62,25 @@
60
         <el-form-item label="RedirectUrl" prop="redirect_url">
62
         <el-form-item label="RedirectUrl" prop="redirect_url">
61
           <el-input v-model="formData.redirect_url"></el-input>
63
           <el-input v-model="formData.redirect_url"></el-input>
62
         </el-form-item>
64
         </el-form-item>
65
+        <el-row :gutter="20">
66
+          <el-col :span="12">
67
+            <el-form-item label="PkceEnable" prop="pkce_enable">
68
+              <el-switch v-model="formData.pkce_enable"
69
+                        :active-value="true"
70
+                        :inactive-value="false">
71
+              </el-switch>
72
+            </el-form-item>
73
+          </el-col>
74
+
75
+          <el-col :span="12" v-if="formData.pkce_enable">
76
+            <el-form-item label="PkceMethod" prop="pkce_method">
77
+              <el-select v-model="formData.pkce_method" placeholder="Select PKCE Method">
78
+                <el-option label="S256 (Recommended)" value="S256"></el-option>
79
+                <el-option label="Plain" value="Plain"></el-option>
80
+              </el-select>
81
+            </el-form-item>
82
+          </el-col>
83
+        </el-row>
63
         <el-form-item :label="T('AutoRegister')" prop="auto_register">
84
         <el-form-item :label="T('AutoRegister')" prop="auto_register">
64
           <el-switch v-model="formData.auto_register"
85
           <el-switch v-model="formData.auto_register"
65
                      :active-value="true"
86
                      :active-value="true"
@@ -145,6 +166,8 @@
145
     redirect_url: '',
166
     redirect_url: '',
146
     scopes: '',
167
     scopes: '',
147
     auto_register: false,
168
     auto_register: false,
169
+    pkce_enable: false,
170
+    pkce_method: 'S256',
148
   })
171
   })
149
   const rules = {
172
   const rules = {
150
     client_id: [{ required: true, message: T('ParamRequired', { param: 'client_id' }), trigger: 'blur' }],
173
     client_id: [{ required: true, message: T('ParamRequired', { param: 'client_id' }), trigger: 'blur' }],
@@ -152,6 +175,19 @@
152
     redirect_url: [{ required: true, message: T('ParamRequired', { param: 'redirect_url' }), trigger: 'blur' }],
175
     redirect_url: [{ required: true, message: T('ParamRequired', { param: 'redirect_url' }), trigger: 'blur' }],
153
     oauth_type: [{ required: true, message: T('ParamRequired', { param: 'oauth_type' }), trigger: 'blur' }],
176
     oauth_type: [{ required: true, message: T('ParamRequired', { param: 'oauth_type' }), trigger: 'blur' }],
154
     issuer: [{ required: true, message: T('ParamRequired', { param: 'issuer' }), trigger: 'blur' }],
177
     issuer: [{ required: true, message: T('ParamRequired', { param: 'issuer' }), trigger: 'blur' }],
178
+    pkce_method: [{ required: false, message: T('ParamRequired', { param: 'pkce_method' }), trigger: 'blur' },
179
+      { 
180
+        validator: (rule, value, callback) => {
181
+          const allowedValues = ["S256", "Plain"];
182
+          if (!allowedValues.includes(value)) {
183
+            callback(new Error(T('InvalidParam', { param: 'pkce_method' })));
184
+          } else {
185
+            callback(); // 校验通过
186
+          }
187
+        }, 
188
+        trigger: 'change' 
189
+      }
190
+    ]
155
   }
191
   }
156
   const toEdit = (row) => {
192
   const toEdit = (row) => {
157
     formVisible.value = true
193
     formVisible.value = true
@@ -164,7 +200,8 @@
164
     formData.redirect_url = row.redirect_url
200
     formData.redirect_url = row.redirect_url
165
     formData.scopes = row.scopes
201
     formData.scopes = row.scopes
166
     formData.auto_register = row.auto_register
202
     formData.auto_register = row.auto_register
167
-
203
+    formData.pkce_enable = row.pkce_enable
204
+    formData.pkce_method = row.pkce_method
168
   }
205
   }
169
   const toAdd = () => {
206
   const toAdd = () => {
170
     formVisible.value = true
207
     formVisible.value = true
@@ -177,6 +214,8 @@
177
     formData.redirect_url = ''
214
     formData.redirect_url = ''
178
     formData.scopes = ''
215
     formData.scopes = ''
179
     formData.auto_register = false
216
     formData.auto_register = false
217
+    formData.pkce_enable = false
218
+    formData.pkce_method = 'S256'
180
   }
219
   }
181
   const form = ref(null)
220
   const form = ref(null)
182
   const submit = async () => {
221
   const submit = async () => {