添加web3登录 #1
|
|
@ -72,7 +72,11 @@
|
|||
"react-dom": "^17.0.0",
|
||||
"react-helmet-async": "^1.0.4",
|
||||
"umi": "^3.5.0",
|
||||
"umi-serve": "^1.9.10"
|
||||
"umi-serve": "^1.9.10",
|
||||
"web3": "^1.7.0",
|
||||
"@metamask/detect-provider": "^1.2.0",
|
||||
"@walletconnect/client": "^1.7.1",
|
||||
"@walletconnect/qrcode-modal": "^1.7.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ant-design/pro-cli": "^2.0.2",
|
||||
|
|
@ -94,7 +98,7 @@
|
|||
"@umijs/yorkie": "^2.0.3",
|
||||
"babel-plugin-import": "^1.13.3",
|
||||
"carlo": "^0.9.46",
|
||||
"cross-env": "^7.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"cross-port-killer": "^1.1.1",
|
||||
"detect-installer": "^1.0.1",
|
||||
"enzyme": "^3.11.0",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { LockOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { LeftSquareFilled, LockOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import React, { useState } from 'react';
|
||||
import { ProFormText, LoginForm } from '@ant-design/pro-form';
|
||||
import { useIntl, history, FormattedMessage, useModel } from 'umi';
|
||||
|
|
@ -7,13 +7,18 @@ import defaultSettings from '../../../config/defaultSettings';
|
|||
import styles from './index.less';
|
||||
import { CACHE_TOKEN } from '@/constants/cacheKey';
|
||||
|
||||
import { initWeb3, walletSign } from '../../utils/web3';
|
||||
|
||||
const Login: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
|
||||
const handleSubmit = async (values: API.LoginParams) => {
|
||||
// 登录
|
||||
const res: any = await login({ ...values });
|
||||
await initWeb3();
|
||||
const signInfo = await walletSign();
|
||||
const res: any = await login({ data: signInfo.raw, sign: signInfo.sign });
|
||||
localStorage.setItem(CACHE_TOKEN, res.token);
|
||||
// const res: any = await login({ ...values });
|
||||
// localStorage.setItem(CACHE_TOKEN, res.token);
|
||||
/** 此方法会跳转到 redirect 参数所在的位置 */
|
||||
if (!history) return;
|
||||
const { query } = history.location;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,50 @@ export default [
|
|||
layout: false,
|
||||
component: './Login',
|
||||
},
|
||||
{
|
||||
name: 'ETH',
|
||||
path: RoutePath.ETH,
|
||||
routes: [
|
||||
{
|
||||
path: RoutePath.ETH,
|
||||
redirect: RoutePath.ADDRESS.LIST,
|
||||
hideInMenu: true,
|
||||
},
|
||||
{
|
||||
name: 'ETH地址管理',
|
||||
path: RoutePath.ADDRESS.LIST,
|
||||
component: './Work/List',
|
||||
},
|
||||
{
|
||||
name: 'ETH地址详情',
|
||||
path: RoutePath.ADDRESS.EDIT,
|
||||
hideInMenu: true,
|
||||
component: './Work/Edit',
|
||||
},
|
||||
{
|
||||
name: 'ETH充值记录',
|
||||
path: RoutePath.RECORD.LIST,
|
||||
component: './Work/List',
|
||||
},
|
||||
{
|
||||
name: 'ETH充值详情',
|
||||
path: RoutePath.RECORD.EDIT,
|
||||
hideInMenu: true,
|
||||
component: './Work/Edit',
|
||||
},
|
||||
{
|
||||
name: 'ETH币种管理',
|
||||
path: RoutePath.CURRENCY.LIST,
|
||||
component: './Work/List',
|
||||
},
|
||||
{
|
||||
name: 'ETH币种详情',
|
||||
path: RoutePath.CURRENCY.EDIT,
|
||||
hideInMenu: true,
|
||||
component: './Work/Edit',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '设置',
|
||||
path: RoutePath.SETTING,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,20 @@
|
|||
const SETTING = '/setting';
|
||||
const ETH = '/eth';
|
||||
const RoutePath = {
|
||||
LOGIN: '/login',
|
||||
ETH: ETH,
|
||||
ADDRESS: {
|
||||
LIST: `${ETH}/address`,
|
||||
EDIT: `${ETH}/address/edit`,
|
||||
},
|
||||
RECORD: {
|
||||
LIST: `${ETH}/record`,
|
||||
EDIT: `${ETH}/record/edit`,
|
||||
},
|
||||
CURRENCY: {
|
||||
LIST: `${ETH}/currency`,
|
||||
EDIT: `${ETH}/currency/edit`,
|
||||
},
|
||||
SETTING: SETTING,
|
||||
WORK: {
|
||||
LIST: `${SETTING}/work`,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,24 @@
|
|||
import request from '@/utils/request';
|
||||
|
||||
// export const login = (data) => {
|
||||
// return request.request({
|
||||
// url: '/admin/login',
|
||||
// method: 'post',
|
||||
// data,
|
||||
// });
|
||||
// };
|
||||
|
||||
export const getData = (params) => {
|
||||
return request.request({
|
||||
url: '/admin/api/v1/sign',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
export const login = (data) => {
|
||||
return request.request({
|
||||
url: '/admin/login',
|
||||
url: '/admin/api/v1/login',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { CACHE_TOKEN } from '@/constants/cacheKey';
|
|||
|
||||
// create an axios instance
|
||||
const request = axios.create({
|
||||
baseURL: '', //
|
||||
baseURL: 'http://192.168.31.249:8888', //
|
||||
timeout: 10000, // request timeout
|
||||
});
|
||||
// request interceptor
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
import Web3 from 'web3';
|
||||
import detectEthereumProvider from '@metamask/detect-provider';
|
||||
import { getData } from '@/services/login';
|
||||
|
||||
let provider: any;
|
||||
|
||||
export const web3 = new Web3();
|
||||
if (typeof window.ethereum !== 'undefined') {
|
||||
web3.eth.defaultAccount = window.ethereum.selectedAddress;
|
||||
}
|
||||
|
||||
export async function initWeb3() {
|
||||
provider = await detectEthereumProvider();
|
||||
|
||||
if (!provider) {
|
||||
console.log('请安装MetaMask');
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
web3.setProvider(provider);
|
||||
const accounts = await provider.request({
|
||||
method: 'eth_requestAccounts',
|
||||
});
|
||||
//如果用户同意了登录请求,你就可以拿到用户的账号
|
||||
web3.eth.defaultAccount = accounts[0];
|
||||
return true;
|
||||
} catch (reason) {
|
||||
switch (reason) {
|
||||
case 'Already processing eth_requestAccounts. Please wait.': // 已有请求存在
|
||||
console.log('请打开MetaMask完成授权');
|
||||
break;
|
||||
case 'User rejected provider access': //如果用户拒绝了登录请求
|
||||
console.log('请同意登录请求');
|
||||
break;
|
||||
default:
|
||||
// 本不该执行到这里,但是真到这里了,说明发生了意外
|
||||
console.log('登录出错!err:' + reason);
|
||||
break;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export async function walletSign() {
|
||||
const res: any = await getData({});
|
||||
// const data = '1234';
|
||||
const rawData: any = web3.utils.fromUtf8(res);
|
||||
const { result } = await provider.send('personal_sign', [
|
||||
rawData,
|
||||
web3.eth.defaultAccount!.toLowerCase(),
|
||||
]);
|
||||
return {
|
||||
raw: res,
|
||||
sign: result,
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue