feat: 新增oauth2 页面

src/views/iframe/index.vue

@@ -22,11 +22,11 @@ const handle = async (appId: string, url: string) => {
     if (res.status === 200) {
         // console.log(res.result);
         if (res.result.page.routeType === 'hash') {
-            menuUrl = `${url}`;
+            menuUrl = `/%23/${url}`;
         }
         if (res.result.provider === 'internal-standalone') {
             //{baseUrl}/api/application/sso/{appId}/login?redirect={menuUrl}
-            const urlStandalone = `${res.result.page.baseUrl}/#/api/application/sso/${appId}/login?redirect=${menuUrl}&layout=false`;
+            const urlStandalone = `${res.result.page.baseUrl}/api/application/sso/${appId}/login?redirect=${menuUrl}?layout=false`;
             iframeUrl.value = urlStandalone;
             // console.log(urlStandalone);
         } else if (res.result.provider === 'internal-integrated') {

src/views/oauth/index.vue

@@ -0,0 +1,305 @@
+<template>
+  <j-spin :spinning='spinning'>
+
+      <div class='oauth'>
+        <div class='oauth-header'>
+          <div class='oauth-header-left'>
+            <img :src='logoImg' alt=''>
+          </div>
+        </div>
+
+        <div class='oauth-content'>
+          <!--     登录     -->
+          <template v-if='isLogin'>
+            <div class='oauth-content-header'>
+              <img :src='headerImg' />
+            </div>
+            <div class='oauth-content-content'>
+              <div class='oauth-content-content-text'>
+                您正在授权登录,{{ appName }}将获得以下权限:
+              </div>
+              <ul>
+                <li>关联{{userName}}账号</li>
+                <li>获取您的个人信息</li>
+              </ul>
+              <div class='oauth-content-button'>
+                <j-button type='primary' @click='goOAuth2Fn'> 同意授权 </j-button>
+                <j-button type='primary' @click='changeAccount'> 切换账号 </j-button>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <div class='oauth-content-header'>
+              <img :src='headerImg' />
+            </div>
+            <div class='oauth-content-login'>
+              <j-form layout='horizontal' size='large' :model='formModel' >
+                <j-form-item name='username'>
+                  <j-input placeholder='用户名' v-model:value='formModel.username' />
+                </j-form-item>
+                <j-form-item name='password'>
+                  <j-input-password placeholder='密码' v-model:value='formModel.password' />
+                </j-form-item>
+                <j-form-item name='verifyCode' v-if='captcha.base64'>
+                  <j-input placeholder='请输入验证码' v-model:value='formModel.verifyCode' >
+                    <template #addonAfter>
+                      <img
+                        :src='captcha.base64'
+                        @click='getCode'
+                        style='cursor: pointer'
+                      />
+                    </template>
+                  </j-input>
+                </j-form-item>
+                <j-form-item>
+                  <j-button
+                    type='primary'
+                    @click='doLogin'
+                    style='width: 100%'
+                  >
+                    登录
+                  </j-button>
+                </j-form-item>
+              </j-form>
+            </div>
+          </template>
+        </div>
+      </div>
+  </j-spin>
+</template>
+
+<script setup lang='ts' name='Oauth'>
+import { TOKEN_KEY } from '@/utils/variable'
+import { config, code, getOAuth2, initApplication, authLogin } from '@/api/login'
+import { getMe_api } from '@/api/home'
+import { getImage } from '@/utils/comm'
+
+const spinning = ref(true)
+const isLogin = ref(false)
+const logoImg = ref('')
+const headerImg = ref('')
+const appName = ref('-')
+const userName = ref('-')
+const internal = ref('false')
+const params = ref()
+
+type LoginParam = {
+  username: string;
+  password: string;
+  expires?: number;
+  verifyCode?: string;
+  verifyKey?: string;
+};
+
+const formModel = reactive({
+  username: undefined,
+  password: undefined,
+  verifyCode: undefined
+})
+
+const captcha = reactive<{base64?: string, key?: string }>({
+  base64: undefined,
+  key: undefined
+})
+
+const getApplication = async (clientId: string) => {
+  const res = await initApplication(clientId)
+  if (res.success) {
+    appName.value = res.result.name
+  }
+}
+
+const getCode = async () => {
+  const resp = await config()
+  if (resp.result?.enabled) {
+    const codeResp = await code()
+    if (codeResp.success) {
+      captcha.base64 = codeResp.result?.base64
+      captcha.key = codeResp.result?.key
+    }
+  }
+}
+
+const goOAuth2Fn = async (data?: any) => {
+  const res = await getOAuth2(data || params.value)
+  if (res.success) {
+    window.location.href = res.result;
+  } else {
+    getCode()
+  }
+}
+
+const changeAccount = () => {
+  localStorage.removeItem(TOKEN_KEY);
+  isLogin.value = false
+}
+
+const getLoginUser = async (data?: any) => {
+  const res = await getMe_api()
+  if (res.success) {
+    userName.value = res.result?.user.name
+    isLogin.value = true
+    getApplication(data.client_id || params.value.client_id)
+    if (data.internal === 'true' || internal.value === 'true') { // 是否走oauth2
+      goOAuth2Fn(data)
+    }
+  } else if (res.status === 401) {
+    isLogin.value = false
+    getCode()
+    getApplication(data.client_id || params.value.client_id)
+  } else {
+    isLogin.value = false
+  }
+  setTimeout(() => {
+    spinning.value = false
+  })
+}
+
+const getQueryVariable = (variable: any) => {
+  const query = window.location.search.substring(1);
+  const vars = query.split('&');
+  for (let i = 0; i < vars.length; i++) {
+    const pair = vars[i].split('=');
+    if (pair[0] === variable) {
+      return pair[1];
+    }
+  }
+  return '';
+}
+
+const doLogin = async () => {
+  console.log(formModel)
+  const res = await authLogin({
+    verifyKey: captcha.key,
+    ...formModel
+  })
+  if (res.success) {
+    getLoginUser()
+    const token = res.result.token
+    localStorage.setItem(TOKEN_KEY, token)
+    goOAuth2Fn()
+  } else {
+    getCode()
+  }
+}
+
+const initPage = async () => {
+  let redirectUrl
+  const items = {
+    client_id: getQueryVariable('client_id'),
+    state: getQueryVariable('state'),
+    redirect_uri: decodeURIComponent(getQueryVariable('redirect_uri')),
+    response_type: getQueryVariable('response_type'),
+    scope: getQueryVariable('scope'),
+  }
+  const item = getQueryVariable('internal');
+  if (items.redirect_uri) {
+    const origin = items.redirect_uri.split('/').slice(0, 3)
+    const url = `${origin.join('/')}${items.redirect_uri?.split('redirect=')[1]}`
+    // redirectUrl = `${items.redirect_uri?.split('redirect_uri=')[0]}?redirect=${url}`
+    redirectUrl = url
+    console.log(origin, items.redirect_uri)
+  }
+
+  getLoginUser({
+    ...items,
+    internal: getQueryVariable('internal'),
+    redirect_uri: redirectUrl,
+  })
+
+  internal.value = item
+  params.value = {
+    ...items,
+    redirect_uri: redirectUrl,
+  }
+}
+
+document.title = 'OAuth授权-jetlinks';
+headerImg.value = getImage('/logo.png')
+getCode()
+initPage()
+
+</script>
+
+<style scoped lang='less'>
+.oauth {
+  .oauth-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 60px;
+    font-size: 26px;
+    background-color: #fff;
+
+    .oauth-header-left {
+      margin-left: 10%;
+    }
+
+    .oauth-header-right {
+      display: flex;
+      width: 200px;
+      margin-right: 10%;
+      font-size: 14px;
+
+      .oauth-header-right-text {
+        color: rgb(0 0 0 / 70%);
+      }
+
+      // .oauth-header-right-connect {
+      //     padding: 0 10px;
+      // }
+    }
+  }
+
+  .oauth-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    width: 370px;
+    height: 380px;
+    margin: 0 auto;
+    margin-top: 5%;
+    background: #fff;
+    box-shadow: 0 5px 5px #d4d4d4;
+
+    .oauth-content-header {
+      width: 60px;
+      height: 60px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .oauth-content-content {
+      height: 150px;
+      .oauth-content-content-text {
+        margin: 15px 15px;
+        font-size: 16px;
+        line-height: 22px;
+      }
+
+      ul {
+        color: #00000085;
+        list-style: inherit;
+        li {
+          padding-top: 10px;
+        }
+      }
+    }
+
+    .oauth-content-button {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      gap: 24px;
+    }
+    .oauth-content-login {
+      max-width: 300px;
+    }
+  }
+}
+
+</style>

yarn.lock

@@ -1233,6 +1233,14 @@
   resolved "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.12.0.tgz"
   integrity sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ==
 
+"@vueuse/router@^9.13.0":
+  version "9.13.0"
+  resolved "http://47.108.170.157:9013/@vueuse%2frouter/-/router-9.13.0.tgz#cfc757fa89c654ab749c60bc2445f945cbb86b32"
+  integrity sha512-lcL6auSUGMGZMdDzZJb02QDe909AChzMXoxqFS3gL2E8mHmIx0SrNor+33UkqvvBPi18vXpDq/R7tPd9fxWwTg==
+  dependencies:
+    "@vueuse/shared" "9.13.0"
+    vue-demi "*"
+
 "@vueuse/shared@7.7.1":
   version "7.7.1"
   resolved "https://registry.jetlinks.cn/@vueuse%2fshared/-/shared-7.7.1.tgz"
@@ -1247,6 +1255,13 @@
   dependencies:
     vue-demi "*"
 
+"@vueuse/shared@9.13.0":
+  version "9.13.0"
+  resolved "http://47.108.170.157:9013/@vueuse%2fshared/-/shared-9.13.0.tgz#089ff4cc4e2e7a4015e57a8f32e4b39d096353b9"
+  integrity sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==
+  dependencies:
+    vue-demi "*"
+
 JSONStream@^1.0.4:
   version "1.3.5"
   resolved "https://registry.npmmirror.com/JSONStream/-/JSONStream-1.3.5.tgz"
@@ -3700,10 +3715,11 @@ jetlinks-store@^0.0.3:
 
 jetlinks-ui-components@^1.0.5:
   version "1.0.5"
-  resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#bcf2ccab91dd64355bbe6528501d37f85f503161"
+  resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#dd86644756d6044c4842193ea72335688cfa77d5"
-  integrity sha512-yUN47hmOjDryn2CBrAL7IRMdyJsuKn7wG+OwLD9Jpii/8obUfIYT2nKoxihUzWjIrBmhP1WmD94C0AwaCN1hxw==
+  integrity sha512-NFjJRwFuluUEAuFguyLYidgFy3tDuh1lKg10uBR//zFxmIzRaGPNN1r9nt/hp3BIGdQLJHUKgDJXQX6fZmfARg==
   dependencies:
     "@vueuse/core" "^9.12.0"
+    "@vueuse/router" "^9.13.0"
     ant-design-vue "^3.2.15"
     colorpicker-v3 "^2.10.2"
     lodash-es "^4.17.21"