xingyu
2 years ago
8 changed files with 452 additions and 0 deletions
@ -0,0 +1,196 @@ |
|||||||
|
<template> |
||||||
|
<h2 class="mb-3 text-2xl font-bold text-center xl:text-3xl enter-x xl:text-left"> |
||||||
|
{{ client.name + t('sys.login.ssoSignInFormTitle') }} |
||||||
|
</h2> |
||||||
|
<Form class="p-4 enter-x" :model="loginForm" ref="formRef" @keypress.enter="handleAuthorize(true)"> |
||||||
|
此第三方应用请求获取以下权限： |
||||||
|
<Row class="enter-x"> |
||||||
|
<Col :span="12"> |
||||||
|
<template v-for="scope in params.scopes" :key="scope"> |
||||||
|
<FormItem> |
||||||
|
<!-- No logic, you need to deal with it yourself --> |
||||||
|
<Checkbox :checked="scope" size="small"> |
||||||
|
<Button type="link" size="small"> |
||||||
|
{{ formatScope(scope) }} |
||||||
|
</Button> |
||||||
|
</Checkbox> |
||||||
|
</FormItem> |
||||||
|
</template> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
|
||||||
|
<FormItem class="enter-x"> |
||||||
|
<Button type="primary" size="large" block @click="handleAuthorize(true)" :loading="loading"> |
||||||
|
{{ t('sys.login.loginButton') }} |
||||||
|
</Button> |
||||||
|
<Button size="large" class="mt-4 enter-x" block @click="handleAuthorize(false)"> |
||||||
|
{{ t('common.cancelText') }} |
||||||
|
</Button> |
||||||
|
</FormItem> |
||||||
|
</Form> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup> |
||||||
|
import { reactive, ref } from 'vue' |
||||||
|
import { useRoute } from 'vue-router' |
||||||
|
import { Checkbox, Form, Row, Col, Button } from 'ant-design-vue' |
||||||
|
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n' |
||||||
|
import { useMessage } from '@/hooks/web/useMessage' |
||||||
|
|
||||||
|
import { useFormValid } from './useLogin' |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
import { authorize, getAuthorize } from '@/api/base/login' |
||||||
|
import { onMounted } from 'vue' |
||||||
|
|
||||||
|
const FormItem = Form.Item |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
const { query } = useRoute() |
||||||
|
const { notification, createErrorModal } = useMessage() |
||||||
|
const { prefixCls } = useDesign('login') |
||||||
|
|
||||||
|
const formRef = ref() |
||||||
|
const loading = ref(false) |
||||||
|
|
||||||
|
const loginForm = reactive({ |
||||||
|
scopes: [] as any[] // 已选中的 scope 数组 |
||||||
|
}) |
||||||
|
|
||||||
|
// URL 上的 client_id、scope 等参数 |
||||||
|
const params = reactive({ |
||||||
|
responseType: undefined as any, |
||||||
|
clientId: undefined as any, |
||||||
|
redirectUri: undefined as any, |
||||||
|
state: undefined as any, |
||||||
|
scopes: [] as any[] // 优先从 query 参数获取；如果未传递，从后端获取 |
||||||
|
}) |
||||||
|
|
||||||
|
// 客户端信息 |
||||||
|
let client = reactive({ |
||||||
|
name: '', |
||||||
|
logo: '' |
||||||
|
}) |
||||||
|
|
||||||
|
const { validForm } = useFormValid(formRef) |
||||||
|
|
||||||
|
async function init() { |
||||||
|
// 解析参数 |
||||||
|
// 例如说【自动授权不通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read%20user.write |
||||||
|
// 例如说【自动授权通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read |
||||||
|
params.responseType = query.response_type as any |
||||||
|
params.clientId = query.client_id as any |
||||||
|
params.redirectUri = query.redirect_uri as any |
||||||
|
params.state = query.state as any |
||||||
|
if (query.scope) { |
||||||
|
params.scopes = (query.scope as any).split(' ') |
||||||
|
} |
||||||
|
|
||||||
|
// 如果有 scope 参数，先执行一次自动授权，看看是否之前都授权过了。 |
||||||
|
if (params.scopes.length > 0) { |
||||||
|
const res = await doAuthorize(true, params.scopes, []) |
||||||
|
const href = res |
||||||
|
if (!href) { |
||||||
|
console.log('自动授权未通过！') |
||||||
|
return |
||||||
|
} |
||||||
|
location.href = href |
||||||
|
} |
||||||
|
|
||||||
|
// 获取授权页的基本信息 |
||||||
|
const res = await getAuthorize(params.clientId) |
||||||
|
client = res.client |
||||||
|
// 解析 scope |
||||||
|
let scopes |
||||||
|
// 1.1 如果 params.scope 非空，则过滤下返回的 scopes |
||||||
|
if (params.scopes.length > 0) { |
||||||
|
scopes = [] |
||||||
|
for (const scope of res.scopes) { |
||||||
|
if (params.scopes.indexOf(scope.key) >= 0) { |
||||||
|
scopes.push(scope) |
||||||
|
} |
||||||
|
} |
||||||
|
// 1.2 如果 params.scope 为空，则使用返回的 scopes 设置它 |
||||||
|
} else { |
||||||
|
scopes = res.data.scopes |
||||||
|
for (const scope of scopes) { |
||||||
|
params.scopes.push(scope.key) |
||||||
|
} |
||||||
|
} |
||||||
|
// 生成已选中的 checkedScopes |
||||||
|
for (const scope of scopes) { |
||||||
|
if (scope.value) { |
||||||
|
loginForm.scopes.push(scope.key) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async function handleAuthorize(approved) { |
||||||
|
const data = await validForm() |
||||||
|
if (!data) return |
||||||
|
try { |
||||||
|
loading.value = true |
||||||
|
// 计算 checkedScopes + uncheckedScopes |
||||||
|
let checkedScopes |
||||||
|
let uncheckedScopes |
||||||
|
if (approved) { |
||||||
|
// 同意授权，按照用户的选择 |
||||||
|
checkedScopes = loginForm.scopes |
||||||
|
uncheckedScopes = params.scopes.filter((item) => checkedScopes.indexOf(item) === -1) |
||||||
|
} else { |
||||||
|
// 拒绝，则都是取消 |
||||||
|
checkedScopes = [] |
||||||
|
uncheckedScopes = params.scopes |
||||||
|
} |
||||||
|
// 提交授权的请求 |
||||||
|
const res = await doAuthorize(false, checkedScopes, uncheckedScopes) |
||||||
|
if (res) { |
||||||
|
const href = res |
||||||
|
if (!href) { |
||||||
|
return |
||||||
|
} |
||||||
|
location.href = href |
||||||
|
notification.success({ |
||||||
|
message: t('sys.login.loginSuccessTitle'), |
||||||
|
description: `${t('sys.login.loginSuccessDesc')}`, |
||||||
|
duration: 3 |
||||||
|
}) |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
createErrorModal({ |
||||||
|
title: t('sys.api.errorTip'), |
||||||
|
content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'), |
||||||
|
getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body |
||||||
|
}) |
||||||
|
} finally { |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
async function doAuthorize(autoApprove, checkedScopes, uncheckedScopes) { |
||||||
|
return await authorize( |
||||||
|
params.responseType, |
||||||
|
params.clientId, |
||||||
|
params.redirectUri, |
||||||
|
params.state, |
||||||
|
autoApprove, |
||||||
|
checkedScopes, |
||||||
|
uncheckedScopes |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
function formatScope(scope) { |
||||||
|
// 格式化 scope 授权范围，方便用户理解。 |
||||||
|
// 这里仅仅是一个 demo，可以考虑录入到字典数据中，例如说字典类型 "system_oauth2_scope"，它的每个 scope 都是一条字典数据。 |
||||||
|
switch (scope) { |
||||||
|
case 'user.read': |
||||||
|
return t('sys.login.ssoInfoDesc') |
||||||
|
case 'user.write': |
||||||
|
return t('sys.login.ssoEditDesc') |
||||||
|
default: |
||||||
|
return scope |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
init() |
||||||
|
}) |
||||||
|
</script> |
||||||
@ -0,0 +1,204 @@ |
|||||||
|
<template> |
||||||
|
<div :class="prefixCls" class="relative w-full h-full px-4"> |
||||||
|
<div class="flex items-center absolute right-4 top-4"> |
||||||
|
<AppDarkModeToggle class="enter-x mr-2" v-if="!sessionTimeout" /> |
||||||
|
<AppLocalePicker class="text-white enter-x xl:text-gray-600" :show-text="false" v-if="!sessionTimeout && showLocale" /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<span class="-enter-x xl:hidden"> |
||||||
|
<AppLogo :alwaysShowTitle="true" /> |
||||||
|
</span> |
||||||
|
|
||||||
|
<div class="container relative h-full py-2 mx-auto sm:px-10"> |
||||||
|
<div class="flex h-full"> |
||||||
|
<div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12"> |
||||||
|
<AppLogo class="-enter-x" /> |
||||||
|
<div class="my-auto"> |
||||||
|
<img :alt="title" src="@/assets/svg/login-box-bg.svg" class="w-1/2 -mt-16 -enter-x" /> |
||||||
|
<div class="mt-10 font-medium text-white -enter-x"> |
||||||
|
<span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span> |
||||||
|
</div> |
||||||
|
<div class="mt-5 font-normal text-white dark:text-gray-500 -enter-x"> |
||||||
|
{{ t('sys.login.signInDesc') }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12"> |
||||||
|
<!-- eslint-disable max-len --> |
||||||
|
<div |
||||||
|
:class="`${prefixCls}-form`" |
||||||
|
class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x" |
||||||
|
> |
||||||
|
<SSOForm /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup> |
||||||
|
import { computed } from 'vue' |
||||||
|
import { AppLogo } from '@/components/Application' |
||||||
|
import { AppLocalePicker, AppDarkModeToggle } from '@/components/Application' |
||||||
|
import SSOForm from './SSOForm.vue' |
||||||
|
import { useGlobSetting } from '@/hooks/setting' |
||||||
|
import { useI18n } from '@/hooks/web/useI18n' |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
import { useLocaleStore } from '@/store/modules/locale' |
||||||
|
|
||||||
|
defineProps({ |
||||||
|
sessionTimeout: { |
||||||
|
type: Boolean |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const globSetting = useGlobSetting() |
||||||
|
const { prefixCls } = useDesign('login') |
||||||
|
const { t } = useI18n() |
||||||
|
const localeStore = useLocaleStore() |
||||||
|
const showLocale = localeStore.getShowPicker |
||||||
|
const title = computed(() => globSetting?.title ?? '') |
||||||
|
</script> |
||||||
|
<style lang="less"> |
||||||
|
@prefix-cls: ~'@{namespace}-login'; |
||||||
|
@logo-prefix-cls: ~'@{namespace}-app-logo'; |
||||||
|
@countdown-prefix-cls: ~'@{namespace}-countdown-input'; |
||||||
|
@dark-bg: #293146; |
||||||
|
|
||||||
|
html[data-theme='dark'] { |
||||||
|
.@{prefix-cls} { |
||||||
|
background-color: @dark-bg; |
||||||
|
|
||||||
|
&::before { |
||||||
|
background-image: url('@/assets/svg/login-bg-dark.svg'); |
||||||
|
} |
||||||
|
|
||||||
|
.ant-input, |
||||||
|
.ant-input-password { |
||||||
|
background-color: #232a3b; |
||||||
|
} |
||||||
|
|
||||||
|
.ant-btn:not(.ant-btn-link, .ant-btn-primary) { |
||||||
|
border: 1px solid #4a5569; |
||||||
|
} |
||||||
|
|
||||||
|
&-form { |
||||||
|
background: transparent !important; |
||||||
|
} |
||||||
|
|
||||||
|
.app-iconify { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input.fix-auto-fill, |
||||||
|
.fix-auto-fill input { |
||||||
|
-webkit-text-fill-color: #c9d1d9 !important; |
||||||
|
box-shadow: inherit !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.@{prefix-cls} { |
||||||
|
min-height: 100%; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
@media (max-width: @screen-xl) { |
||||||
|
background-color: #293146; |
||||||
|
|
||||||
|
.@{prefix-cls}-form { |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&::before { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
margin-left: -48%; |
||||||
|
background-image: url('@/assets/svg/login-bg.svg'); |
||||||
|
background-position: 100%; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-size: auto 100%; |
||||||
|
content: ''; |
||||||
|
|
||||||
|
@media (max-width: @screen-xl) { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.@{logo-prefix-cls} { |
||||||
|
position: absolute; |
||||||
|
top: 12px; |
||||||
|
height: 30px; |
||||||
|
|
||||||
|
&__title { |
||||||
|
font-size: 16px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
width: 32px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.container { |
||||||
|
.@{logo-prefix-cls} { |
||||||
|
display: flex; |
||||||
|
width: 60%; |
||||||
|
height: 80px; |
||||||
|
|
||||||
|
&__title { |
||||||
|
font-size: 24px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
width: 48px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-sign-in-way { |
||||||
|
.anticon { |
||||||
|
font-size: 22px; |
||||||
|
color: #888; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
color: @primary-color; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input:not([type='checkbox']) { |
||||||
|
min-width: 360px; |
||||||
|
|
||||||
|
@media (max-width: @screen-xl) { |
||||||
|
min-width: 320px; |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: @screen-lg) { |
||||||
|
min-width: 260px; |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: @screen-md) { |
||||||
|
min-width: 240px; |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: @screen-sm) { |
||||||
|
min-width: 160px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.@{countdown-prefix-cls} input { |
||||||
|
min-width: unset; |
||||||
|
} |
||||||
|
|
||||||
|
.ant-divider-inner-text { |
||||||
|
font-size: 12px; |
||||||
|
color: @text-color-secondary; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Reference in new issue