112 lines
4.5 KiB
JavaScript
112 lines
4.5 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import { message, Button } from 'antd';
|
||
import { random, template } from 'oak-domain/lib/utils/string';
|
||
import './index.less';
|
||
const WeChatLoginUrl = template `https://open.weixin.qq.com/connect/oauth2/authorize?redirect_uri=${0}&appid=${1}&response_type=code&scope=${2}${3}&#wechat_redirect`;
|
||
function WeChatLoginGrant(props) {
|
||
const { id = 'login_grant_container', appId, scope, redirectUri, state, style = {}, className, dev = process.env.NODE_ENV === 'development', // 默认本地为true 发布时为false
|
||
disabled = false, disableText, rootStyle, rootClassName, } = props;
|
||
const [code, setCode] = useState('');
|
||
const [messageApi, contextHolder] = message.useMessage();
|
||
const [disabled2, setDisabled2] = useState(false);
|
||
useEffect(() => {
|
||
if (appId) {
|
||
// 由于本地不能微信扫码测试 所以只能模拟 输入code使用weChatLogin
|
||
if (dev) {
|
||
setCode(random(6));
|
||
return;
|
||
}
|
||
}
|
||
}, [appId]);
|
||
const prefixCls = 'oak';
|
||
const prefixCls2 = `${prefixCls}-loginGrant`;
|
||
const { pathname, search } = window.location;
|
||
let V;
|
||
if (dev) {
|
||
V = (<div className={`${prefixCls2}_dev`}>
|
||
<div className={`${prefixCls2}_dev_header`}>
|
||
<input maxLength={6} value={code} className={`${prefixCls2}_dev_header_input`} onChange={(e) => {
|
||
setCode(e.target.value);
|
||
}}></input>
|
||
<Button className={`${prefixCls2}_dev_header_btn`} type="primary" shape="round" size="large" loading={disabled2} disabled={disabled2}
|
||
// block
|
||
onClick={() => {
|
||
if (disabled) {
|
||
messageApi.info(disableText || 'disabled');
|
||
return;
|
||
}
|
||
setDisabled2(true);
|
||
const url = new URL(decodeURIComponent(redirectUri));
|
||
url.searchParams.set('code', code);
|
||
if (state) {
|
||
url.searchParams.set('state', state || pathname + search);
|
||
}
|
||
window.location.href = url.toString();
|
||
setTimeout(() => {
|
||
setDisabled2(false);
|
||
}, 1000);
|
||
}}>
|
||
微信授权一键登录
|
||
</Button>
|
||
</div>
|
||
<div className={`${prefixCls2}_dev_bottom`}>
|
||
<span className={`${prefixCls2}_dev_bottom_desc`}>
|
||
1、由于本地开发环境限制，模拟微信授权后动作
|
||
</span>
|
||
<span className={`${prefixCls2}_dev_bottom_desc`}>
|
||
2、CODE可修改
|
||
</span>
|
||
</div>
|
||
</div>);
|
||
}
|
||
else {
|
||
V = (<div className={`${prefixCls2}_prod`}>
|
||
<div className={`${prefixCls2}_prod_header`}>
|
||
<Button className={`${prefixCls2}_prod_header_btn`} type="primary" shape="round" size="large" loading={disabled2} disabled={disabled2}
|
||
// block
|
||
onClick={() => {
|
||
if (disabled) {
|
||
messageApi.info(disableText || 'disabled');
|
||
return;
|
||
}
|
||
setDisabled2(true);
|
||
const url = WeChatLoginUrl(redirectUri, appId, scope, `&state=${state || pathname + search}`);
|
||
window.location.href = url;
|
||
setTimeout(() => {
|
||
setDisabled2(false);
|
||
}, 1000);
|
||
}}>
|
||
微信授权一键登录
|
||
</Button>
|
||
</div>
|
||
</div>);
|
||
}
|
||
if (!appId || !redirectUri) {
|
||
let text = '缺少';
|
||
if (!appId) {
|
||
text += 'appId';
|
||
}
|
||
if (!redirectUri) {
|
||
text += !appId ? '、' : '';
|
||
text += 'redirectUri';
|
||
}
|
||
text += '参数';
|
||
V = (<div className={`${prefixCls2}_err`}>
|
||
<div className={`${prefixCls2}_err_body`}>
|
||
<div className={`${prefixCls2}_err_body_title`}>
|
||
微信授权登录
|
||
</div>
|
||
|
||
<div className={`${prefixCls2}_err_body_text`}>{text}</div>
|
||
</div>
|
||
</div>);
|
||
}
|
||
return (<>
|
||
{contextHolder}
|
||
<div className={prefixCls2} id={id}>
|
||
{V}
|
||
</div>
|
||
</>);
|
||
}
|
||
export default WeChatLoginGrant;
|