From a631c7f8f0e6d186794a4a710f31a13b75231fbd Mon Sep 17 00:00:00 2001
From: Tao Chen <42793494+IamTaoChen@users.noreply.github.com>
Date: Wed, 19 Feb 2025 09:56:22 +0800
Subject: [PATCH] feat: Feat/OIDC pcke (#14)

* add pkce for oidc

* fix

* test

* test
---
 src/views/oauth/index.vue | 41 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/views/oauth/index.vue b/src/views/oauth/index.vue
index db53c5e..0cab38d 100644
--- a/src/views/oauth/index.vue
+++ b/src/views/oauth/index.vue
@@ -14,6 +14,8 @@
         <el-table-column prop="op" :label="T('IdP')" align="center"/>
         <el-table-column prop="oauth_type" :label="T('Type')" align="center"/>
         <el-table-column prop="auto_register" :label="T('AutoRegister')" align="center"/>
+        <el-table-column prop="pkce_enable" :label="T('PkceEnable')" align="center"/>
+        <el-table-column prop="pkce_method" :label="T('PkceMethod')" align="center"/>
         <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
         <el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
         <el-table-column :label="T('Actions')" align="center">
@@ -60,6 +62,25 @@
         <el-form-item label="RedirectUrl" prop="redirect_url">
           <el-input v-model="formData.redirect_url"></el-input>
         </el-form-item>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="PkceEnable" prop="pkce_enable">
+              <el-switch v-model="formData.pkce_enable"
+                        :active-value="true"
+                        :inactive-value="false">
+              </el-switch>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12" v-if="formData.pkce_enable">
+            <el-form-item label="PkceMethod" prop="pkce_method">
+              <el-select v-model="formData.pkce_method" placeholder="Select PKCE Method">
+                <el-option label="S256 (Recommended)" value="S256"></el-option>
+                <el-option label="Plain" value="Plain"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
         <el-form-item :label="T('AutoRegister')" prop="auto_register">
           <el-switch v-model="formData.auto_register"
                      :active-value="true"
@@ -145,6 +166,8 @@
     redirect_url: '',
     scopes: '',
     auto_register: false,
+    pkce_enable: false,
+    pkce_method: 'S256',
   })
   const rules = {
     client_id: [{ required: true, message: T('ParamRequired', { param: 'client_id' }), trigger: 'blur' }],
@@ -152,6 +175,19 @@
     redirect_url: [{ required: true, message: T('ParamRequired', { param: 'redirect_url' }), trigger: 'blur' }],
     oauth_type: [{ required: true, message: T('ParamRequired', { param: 'oauth_type' }), trigger: 'blur' }],
     issuer: [{ required: true, message: T('ParamRequired', { param: 'issuer' }), trigger: 'blur' }],
+    pkce_method: [{ required: false, message: T('ParamRequired', { param: 'pkce_method' }), trigger: 'blur' },
+      { 
+        validator: (rule, value, callback) => {
+          const allowedValues = ["S256", "Plain"];
+          if (!allowedValues.includes(value)) {
+            callback(new Error(T('InvalidParam', { param: 'pkce_method' })));
+          } else {
+            callback(); // 校验通过
+          }
+        }, 
+        trigger: 'change' 
+      }
+    ]
   }
   const toEdit = (row) => {
     formVisible.value = true
@@ -164,7 +200,8 @@
     formData.redirect_url = row.redirect_url
     formData.scopes = row.scopes
     formData.auto_register = row.auto_register
-
+    formData.pkce_enable = row.pkce_enable
+    formData.pkce_method = row.pkce_method
   }
   const toAdd = () => {
     formVisible.value = true
@@ -177,6 +214,8 @@
     formData.redirect_url = ''
     formData.scopes = ''
     formData.auto_register = false
+    formData.pkce_enable = false
+    formData.pkce_method = 'S256'
   }
   const form = ref(null)
   const submit = async () => {