keywrds

To get type suggestions for instance variables (this is not needed for composition API), create a new file called shims-vue-recaptcha-v3.d.ts and put the following inside it:

TypeScript + Vue 3 To use this package you only need a valid site key for your domain, which you can easily get here.

$ paiIpi

src/api/api

import axios from 'axios'
export const registry = (params) => axios.post('/registry', params);
export const login = (params) => axios.post('/login', params);
export const getuser = (params) => axios.get('/getuser', { params });

A simple and easy to use reCAPTCHA (v3 only) library for Vue based on reCAPTCHA-v3.

The latest version of this package supports Vue 3! See here for Vue 2 usage.

$ srcUtilsOauth

src/Utils/Oauth

import {getuser} from '../api/api'
const config = {
    client_id: '8d4ea923c7039324e9a8d8a4077a39b01eb224b3b996f56d059774629ce21e2a',
    client_secret: '4fd82de72f7321f6bce0a277693aa5d7c9032c9aca00d943f4b2c7a026703b4b',
    redirect_uri: 'http://localhost:3000/login'
}
export const getCode = () => {
    let url = `https://gitee.com/oauth/authorize?client_id=${config.client_id}&redirect_uri=${config.redirect_uri}&response_type=code`;
    window.location.href = url;
}
// http://localhost:3000/login?code=d5e3f65407f05e982aa80d3e3a86e9e9c3a44d7dc23460746dffa168eec8ee73&name='12312'
export const getParams = (name) => {
    let params = window.location.search.slice(1);
    let code;
    params.split('&').forEach(item => {
        if (item.split('=')[0] == name) {
            code = item.split('=')[1]
        }
    })
    return code;
}
export const getUser = async (callback) => {
    let code = getParams('code');
    if(code){
        let res = await getuser({code});
        console.log(res,'res&&&&&&')
        if(res.data.code == 0){
            callback(res.data.data,res.data.token);
        }
    }
}

TypeScript + Vue 3 To get type suggestions for instance variables (this is not needed for composition API), create a new file called shims-vue-recaptcha-v3.d.ts and put the following inside it:

srcViewsLogin

login

import React, { Component } from 'react'
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { login } from '../../api/api'
import { getCode, getUser } from '../../utils/oauth'
class NormalLoginForm extends React.Component {
    state = {
        captcha: '/getcaptcha'
    }
    handleSubmit = e => { 
        e.preventDefault();
        this.props.form.validateFields(async (err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                let res = await login(values);
                console.log(res)
                if (res.data.code == 0) {
                    localStorage.token = res.data.token;
                    this.props.history.push('/index');
                }
            }
        });
    };
    handleClickImg = () => {
        this.setState({
            captcha: '/getcaptcha?_t=' + new Date().getTime()
        })
    }
    handleClickGitee = () => {
        getCode();
    }
    componentDidMount() {
        getUser((data, token) => {
            console.log(data, token);
            localStorage.token = token;
            this.props.history.push('/index'); //登录成功，跳转到首页
        });
    }

Advanced usage Some topics which are not commonly used, but required in some cases.

Access reCAPTCHA-v3 instance In some cases it's necessary to interact with the reCAPTCHA-v3 instance, which provides more control over reCAPTCHA.

captcharecaptcharecaptcha-v3vuevuejs

Usage To use the options just pass an object to the Vue.use(...) method. For example:

srcViewsLogin

login


render() {
        const { getFieldDecorator } = this.props.form;
        const { captcha } = this.state;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };
        return (
            <Form {...formItemLayout} onSubmit={this.handleSubmit} className="login-form">
                <Form.Item label="user">
                    {getFieldDecorator('name', {
                        rules: [{ required: true, message: 'Please input your username!' }],
                    })(
                        <Input
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="Username"
                        />,
                    )}
                </Form.Item>
                <Form.Item label="pwd">
                    {getFieldDecorator('pwd', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                    })(
                        <Input
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            type="password"
                            placeholder="Password"
                        />,
                    )}
                </Form.Item>
                <Form.Item label="ord">
                    {getFieldDecorator('captcha', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                    })(
                        <Input
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            type="text"
                            placeholder=""
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    <img src={captcha} alt="" onClick={this.handleClickImg} />
                </Form.Item>
                <span onClick={this.handleClickGitee}>mayun</span>
                <Form.Item>

                    <Button type="primary" htmlType="submit" className="login-form-button">
                        login
          </Button>
          Or <a href="/registry">sign</a>
                </Form.Item>
            </Form>
        );
    }
}

const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);



export default WrappedNormalLoginForm;

package

{
  "name": "front_end",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "antd": "^3.26.20",
    "axios": "^0.21.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-loadable": "^5.5.0",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:7001/"
}