fix: add wx-login check
This commit is contained in:
3
mini-web/README.md
Normal file
3
mini-web/README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# 登陆逻辑
|
||||
|
||||
微信访问 `login.html` 的界面, 然后 `login.html` 去获取 `/authorize` 获取 openid
|
||||
@@ -3,9 +3,15 @@ export const config = {
|
||||
appid: 'wxff97d569b1db16b6',
|
||||
appid_open: 'wx9378885c8390e09b', // 公众开放平台， 逸文设计 //
|
||||
redirect_uri: 'https://kevisual.xiongxiao.me/root/mini-web/callback.html',
|
||||
scope: 'snsapi_userinfo',
|
||||
scope: 'snsapi_userinfo', // 授权作用域, 默认是snsapi_base
|
||||
};
|
||||
|
||||
export const loginUrl = `https://kevisual.xiongxiao.me/root/mini-web/login.html`;
|
||||
|
||||
export const loginSuccessUrl = `/apps/wallnote/`;
|
||||
|
||||
export const openidConfig = {
|
||||
appid: config.appid,
|
||||
redirect_uri: 'https://kevisual.xiongxiao.me/root/mini-web/wx-get-openid.html',
|
||||
scope: 'snsapi_base',
|
||||
};
|
||||
|
||||
57
mini-web/envision/utils.js
Normal file
57
mini-web/envision/utils.js
Normal file
@@ -0,0 +1,57 @@
|
||||
import { openidConfig } from './config.js';
|
||||
|
||||
export const isWechat = () => {
|
||||
const ua = navigator.userAgent.toLowerCase();
|
||||
return /micromessenger/i.test(ua);
|
||||
};
|
||||
|
||||
export const getOpenid = async () => {
|
||||
const url = new URL(window.location.href);
|
||||
const state = url.searchParams.get('state');
|
||||
const code = url.searchParams.get('code');
|
||||
const orgin = url.origin;
|
||||
const res = await fetch(`${orgin}/api/router?path=wx&key=mp-get-openid&state=${state}&code=${code}`)
|
||||
.then((res) => res.json())
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
alert('登录失败，请稍后再试');
|
||||
document.body.append('登录失败，请稍后再试');
|
||||
// closePage();
|
||||
});
|
||||
if (res.code === 200) {
|
||||
document.body.append(JSON.stringify(res.data, null, 2));
|
||||
}
|
||||
};
|
||||
|
||||
export const checkHasCode = () => {
|
||||
const url = new URL(window.location.href);
|
||||
const code = url.searchParams.get('code');
|
||||
return code;
|
||||
};
|
||||
|
||||
export const initGetOpenidEvent = () => {
|
||||
if (!isWechat()) {
|
||||
document.body.append('请在微信中打开');
|
||||
return;
|
||||
}
|
||||
const hasCode = checkHasCode();
|
||||
if (hasCode) {
|
||||
getOpenid();
|
||||
} else {
|
||||
// 没有code，则跳转获取code
|
||||
getCodeRedirect();
|
||||
}
|
||||
};
|
||||
|
||||
const randomString = () => {
|
||||
return Math.random().toString(36).substring(2, 15);
|
||||
};
|
||||
export const getCodeRedirect = () => {
|
||||
const defaultURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect`;
|
||||
const appid = openidConfig.appid;
|
||||
const redirect_uri = encodeURIComponent(openidConfig.redirect_uri);
|
||||
const scope = openidConfig.scope;
|
||||
const state = randomString();
|
||||
const link = defaultURL.replace('APPID', appid).replace('REDIRECT_URI', redirect_uri).replace('SCOPE', scope).replace('STATE', state);
|
||||
window.location.href = link;
|
||||
};
|
||||
50
mini-web/envision/wx-get-openid.html
Normal file
50
mini-web/envision/wx-get-openid.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1, user-scalable=no">
|
||||
<title>登录</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.5em;
|
||||
/* Adjust font size for mobile */
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.loading {
|
||||
font-size: 1em;
|
||||
/* Smaller font size for smaller screens */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="loading"></div>
|
||||
<div class="openid"></div>
|
||||
<script type="module">
|
||||
import { initGetOpenidEvent, isWechat } from './utils.js';
|
||||
const loading = document.querySelector('.loading');
|
||||
loading.textContent = !isWechat() ? '微信打开当前页面获取openid' : '';
|
||||
initGetOpenidEvent();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "mini-web",
|
||||
"version": "0.0.4",
|
||||
"version": "0.0.5",
|
||||
"description": "",
|
||||
"basename": "/root/mini-web",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"pub": "envision deploy ./envision -k mini-web -v 0.0.4 -y y",
|
||||
"pub": "envision deploy ./envision -k mini-web -v 0.0.5 -u ",
|
||||
"ev": "npm run build && npm run deploy"
|
||||
},
|
||||
"keywords": [],
|
||||
|
||||
Reference in New Issue
Block a user