SCHISANDRA/schisandra-cloud-album-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ github oauth2 login / gitee oauth2 login

Browse Source
This commit is contained in:
landaiqing
2024-08-19 00:14:37 +08:00
parent 0c3edc360c
commit 8998259791
8 changed files with 231 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/api/oauth/gitee.ts Normal file
View File

@@ -0,0 +1,18 @@
import {service} from "@/utils/alova/service.ts";
/**
* 获取Gitee登录链接
*/
export const getGiteeUrl = () => {
return service.Get('/api/oauth/gitee/get_url',
{
meta: {
ignoreToken: true,
},
cacheFor: {
mode: "restore",
expire: 1000 * 60 * 60 * 24 * 30 // 30 days
}
}
);
};

18
src/api/oauth/github.ts Normal file
View File

@@ -0,0 +1,18 @@
import {service} from "@/utils/alova/service.ts";
/**
* Get Github OAuth URL
*/
export const getGithubUrl = () => {
return service.Get('/api/oauth/github/get_url',
{
meta: {
ignoreToken: true,
},
cacheFor: {
mode: "restore",
expire: 1000 * 60 * 60 * 24 * 30 // 30 days
}
}
);
};

12
src/api/oauth/index.ts → src/api/oauth/wechat.ts
View File

@@ -48,15 +48,3 @@ export const closeWebsocket = (clientId: string) => {
}
);
};
export const sendSocketMessage = (clientId: string) => {
return service.Get('/api/ws/send',
{
params: {
client_id: clientId
},
meta: {
ignoreToken: true,
},
}
);
};

2
src/locales/index.ts
View File

@@ -1,4 +1,4 @@
// index.ts
// wechat.ts
import {createI18n} from 'vue-i18n';
import zh from './language/zh.ts';
import en from './language/en.ts';

2
src/utils/websocket/websocket.ts
View File

@@ -27,7 +27,7 @@ class WebSocketService {
this.ws.addEventListener('close', this.handleClose);
setInterval(() => {
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
this.send('ping');
this.send("ping");
}
}, this.heartbeatIntervalMs);
}

94
src/views/Login/LoginFooter.vue
View File

@@ -6,19 +6,107 @@
router.push('/qrlogin')
}" class="login-form-bottom-button" :icon="h(QrcodeOutlined)">{{ t("login.qrLogin") }}
</AButton>
<AButton class="login-form-bottom-button" :icon="h(QqOutlined)"></AButton>
<AButton class="login-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
<AButton @click="openGiteeUrl" class="login-form-bottom-button" :icon="h(QqOutlined)"></AButton>
<AButton @click="openGithubUrl" class="login-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
</AFlex>
</div>
</template>
<script setup lang="ts">
import {GithubOutlined, QqOutlined, QrcodeOutlined} from "@ant-design/icons-vue";
import {useI18n} from "vue-i18n";
import {h} from "vue";
import {h, onMounted, ref} from "vue";
import {useRouter} from 'vue-router';
import {getGithubUrl} from "@/api/oauth/github.ts";
import {getGiteeUrl} from "@/api/oauth/gitee.ts";
import useStore from "@/store";
import {message} from "ant-design-vue";
const router = useRouter();
const {t} = useI18n();
const githubRedirectUrl = ref<string>('');
const giteeRedirectUrl = ref<string>('');
/**
* Get the redirect url of Github OAuth
*/
async function getGithubRedirectUrl() {
const res: any = await getGithubUrl();
if (res.code === 0 && res.data) {
githubRedirectUrl.value = res.data;
}
}
/**
* Get the redirect url of Gitee OAuth
*/
async function getGiteeRedirectUrl() {
const res: any = await getGiteeUrl();
if (res.code === 0 && res.data) {
giteeRedirectUrl.value = res.data;
}
}
/**
* Open the Github OAuth page in a new window
*/
const openGithubUrl = () => {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(githubRedirectUrl.value, 'newwindow', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
const messageHandler = (e: any) => {
if (typeof e.data === 'string') {
const data: any = JSON.parse(e.data);
if (data.code === 0 && data.data) {
const user = useStore().user;
const {access_token, refresh_token, uid, expires_at} = data.data;
user.user.accessToken = access_token;
user.user.refreshToken = refresh_token;
user.user.uid = uid;
user.user.expiresAt = expires_at;
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
}
}
};
window.addEventListener("message", messageHandler);
};
/**
* Open the Gitee OAuth page in a new window
*/
const openGiteeUrl = () => {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(giteeRedirectUrl.value, '_blank', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
const messageHandler = (e: any) => {
if (typeof e.data === 'string') {
const data: any = JSON.parse(e.data);
if (data.code === 0 && data.data) {
const user = useStore().user;
const {access_token, refresh_token, uid, expires_at} = data.data;
user.user.accessToken = access_token;
user.user.refreshToken = refresh_token;
user.user.uid = uid;
user.user.expiresAt = expires_at;
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
}
}
};
window.addEventListener("message", messageHandler);
};
onMounted(() => {
getGithubRedirectUrl();
getGiteeRedirectUrl();
});
</script>
<style src="./index.scss" scoped>

21
src/views/QRLogin/QRLogin.vue
View File

@@ -19,7 +19,6 @@
:error-level="'H'"
:status="status"
@refresh="() => {
getClientId();
getQrCode();
}"
:value=qrcode
@@ -45,7 +44,7 @@ import {useI18n} from "vue-i18n";
import BoxDog from "@/components/BoxDog/BoxDog.vue";
import QRLoginFooter from "@/views/QRLogin/QRLoginFooter.vue";
import {useRouter} from 'vue-router';
import {closeWebsocket, generateClientId, generateQrCode} from "@/api/oauth";
import {closeWebsocket, generateClientId, generateQrCode} from "@/api/oauth/wechat.ts";
import {onMounted, onUnmounted, ref} from "vue";
import logo from "@/assets/svgs/logo-schisandra.svg";
import useWebSocket from "@/utils/websocket/websocket.ts";
@@ -77,9 +76,10 @@ async function getClientId() {
* 获取二维码
*/
async function getQrCode() {
const clientId: any = localStorage.getItem('client_id');
const clientId: string | null = localStorage.getItem('client_id');
if (!clientId) {
status.value = 'expired';
await getClientId();
return;
}
const res: any = await generateQrCode(clientId);
@@ -120,22 +120,21 @@ onMounted(async () => {
// 注册消息接收处理函数
on('message', (data: any) => {
console.log(data);
if (data) {
if (data.code === 0 && data.data) {
const user = useStore().user;
user.user.accessToken = data.access_token;
user.user.refreshToken = data.refresh_token;
user.user.uid = data.uid;
user.user.expiresAt = data.expires_at;
const {access_token, refresh_token, uid, expires_at} = data.data;
user.user.accessToken = access_token;
user.user.refreshToken = refresh_token;
user.user.uid = uid;
user.user.expiresAt = expires_at;
status.value = 'scanned';
message.success(t('login.loginSuccess'));
} else {
message.error(t('login.loginError'));
}
});
});
onUnmounted(async () => {
// await closeWebsocket(getLocalClientId());
await closeWebsocket(getLocalClientId());
close(true);
});

95
src/views/QRLogin/QRLoginFooter.vue
View File

@@ -6,19 +6,108 @@
router.push('/login')
}" class="qrlogin-form-bottom-button" :icon="h(TabletOutlined)">{{ t("login.phoneLoginAndRegister") }}
</AButton>
<AButton class="qrlogin-form-bottom-button" :icon="h(QqOutlined)"></AButton>
<AButton class="qrlogin-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
<AButton @click="openGiteeUrl" class="qrlogin-form-bottom-button" :icon="h(QqOutlined)"></AButton>
<AButton @click="openGithubUrl" class="qrlogin-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
</AFlex>
</div>
</template>
<script setup lang="ts">
import {GithubOutlined, QqOutlined, TabletOutlined} from "@ant-design/icons-vue";
import {useI18n} from "vue-i18n";
import {h} from "vue";
import {h, onMounted, ref} from "vue";
import {useRouter} from 'vue-router';
import {getGithubUrl} from "@/api/oauth/github.ts";
import {getGiteeUrl} from "@/api/oauth/gitee.ts";
import useStore from "@/store";
import {message} from "ant-design-vue";
const router = useRouter();
const {t} = useI18n();
const githubRedirectUrl = ref<string>('');
const giteeRedirectUrl = ref<string>('');
/**
* Get the redirect url of Github OAuth
*/
async function getGithubRedirectUrl() {
const res: any = await getGithubUrl();
if (res.code === 0 && res.data) {
githubRedirectUrl.value = res.data;
}
}
/**
* Get the redirect url of Gitee OAuth
*/
async function getGiteeRedirectUrl() {
const res: any = await getGiteeUrl();
if (res.code === 0 && res.data) {
giteeRedirectUrl.value = res.data;
}
}
/**
* Open the Github OAuth page in a new window
*/
const openGithubUrl = () => {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(githubRedirectUrl.value, 'newwindow', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
const messageHandler = (e: any) => {
if (typeof e.data === 'string') {
const data: any = JSON.parse(e.data);
if (data.code === 0 && data.data) {
const user = useStore().user;
const {access_token, refresh_token, uid, expires_at} = data.data;
user.user.accessToken = access_token;
user.user.refreshToken = refresh_token;
user.user.uid = uid;
user.user.expiresAt = expires_at;
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
}
}
};
window.addEventListener("message", messageHandler);
};
/**
* Open the Gitee OAuth page in a new window
*/
const openGiteeUrl = () => {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(giteeRedirectUrl.value, '_blank', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
const messageHandler = (e: any) => {
if (typeof e.data === 'string') {
const data: any = JSON.parse(e.data);
if (data.code === 0 && data.data) {
const user = useStore().user;
const {access_token, refresh_token, uid, expires_at} = data.data;
user.user.accessToken = access_token;
user.user.refreshToken = refresh_token;
user.user.uid = uid;
user.user.expiresAt = expires_at;
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
}
}
};
window.addEventListener("message", messageHandler);
};
onMounted(() => {
getGithubRedirectUrl();
getGiteeRedirectUrl();
});
</script>
<style src="./index.scss" scoped>