Question

我正在尝试使用redux-form来构建信用卡信息表单。但是，当用户在其上放入卡片详细信息时，会出现以下弹出窗口：

它说

自动信用卡填写已停用，因为此表单未使用安全连接

所以我的问题是如何使用redux-form使表单安全？

这是我输入Payment redux-form

的代码

import React from 'react'
import { connect } from 'react-redux'
import PaymentView from './Payment.js'
import { reduxForm } from 'redux-form'

class Payment extends React.Component{

    render() {
        const { cardDetail } = this.props
        return(<PaymentView onCheckOut={()=>console.log(cardDetail)} />)
    }
}

Payment = reduxForm({
    form: 'payment'
})(Payment)

const mapStateToProps = state => ({
    cardDetail : state.form.payment ? state.form.payment.values : null
})

export default connect(mapStateToProps)(Payment)

这是我的付款视图的代码

import React from 'react'
import { Panel, Button, Row, Col } from 'react-bootstrap'
import { TextInput } from '.Form'

export default ({onCheckOut})=> <div>
    <Row>
        <Col sm={12} md={8} lg={6} mdOffset={2} lgOffset={3}>
            <Panel className="scb" header="bank transfer">
                123-456-789
            </Panel>
        </Col>
    </Row>
    <Row>
        <Col sm={12} md={8} mdOffset={2} lg={6} lgOffset={3}>
        <Panel className="credit-card" header="credit card" >
            <Row>
                <Col sm={12} md={8} lg={6}>
                <TextInput
                    name="creditCard"
                    label="credit card number"
                    type="text"
                    validateState="success"
                    controlId="credit-card"
                    value="12345678910111213"
                    placeholder="xxxx xxxx xxxx xxxx"
                    onChange={()=>{}}
                    helptext="16card number"
                >
                    card number
                </TextInput>
                </Col>  
            </Row>      
            <Row>
                <Col sm={12} md={8} lg={6}>
                    <TextInput
                        name="name"
                        label="name"
                        type="text"
                        validateState="success"
                        controlId="name-card"
                        value="steve jobs"
                        placeholder="steve jobs"
                        onChange={()=>{}}
                        helptext="name on card"
                    >
                        Name on Card
                    </TextInput>
                </Col>
            </Row>
            <Row>
                <Col sm={8} md={8} lg={8}>
                    <h5>Expiry Date</h5>
                </Col>
            </Row>
            <Row>
                <Col sm={4} md={2} lg={2}>
                    <TextInput
                        name="month"
                        label="month"
                        type="text"
                        validateState="success"
                        controlId="month"
                        value="12"
                        placeholder="01"
                        onChange={()=>{}}
                        helptext="month"
                    >
                        month
                    </TextInput>
                </Col>
                <Col sm={4} md={2} lg={2}>
                    <TextInput
                        name="year"
                        label="year"
                        type="text"
                        validateState="success"
                        controlId="year"
                        value="18"
                        placeholder="18"
                        onChange={()=>{}}
                        helptext="year"
                    >
                        Year
                    </TextInput>
                </Col>
            </Row>
            <Row>
                <Col sm={12} md={4} lg={4}>
                    <TextInput
                        name="cvv"
                        label="cvv"
                        type="text"
                        validateState="cvv"
                        controlId="cvv"
                        value="123"
                        placeholder="123"
                        onChange={()=>{}}
                        helptext="cvv"
                    >
                        Cvv
                    </TextInput>
                </Col>
            </Row>
            <Row>
                <Col sm={12} md={4} lg={4}>
                    <Button bsStyle="primary" bsSize="large" block onClick={onCheckOut}>
                        Pay Now
                    </Button>
                </Col>
            </Row>
        </Panel>
        </Col>
    </Row>
</div>

这是我的TextInput

export const TextInput = (
    {
        type,
        name, 
        placeholder, 
        helpTextArray,
        status, 
        label,
        value
    }
) =>
<FormGroup
    name="formBasicText"
    validationState={status || null}
>   
    <ControlLabel>{label}</ControlLabel>
    <Field 
        className="form-control"
        id="formBasicText" 
        name={name} 
        component="input" 
        type={type} 
        placeholder={placeholder}
    />
    <FormControl.Feedback />
    {
        value !== null?
        helpTextArray.map( (helpText, key) =>
            <HelpBlock key={key}>{helpText}</HelpBlock>
        ): null
    }
</FormGroup>

Answer 1

这很有可能发生，因为找不到该表单的网页不通过HTTPS提供。在这些情况下，Chrome会自动停用信用卡信息自动填充功能，以阻止您的信用卡信息落入恶意手中，例如

网络流量监听（您的信用卡详细信息通过公共Wi-Fi或其他网络以明文传输）
中间人注入（有人拦截未加密的HTTP流量并注入捕获信用卡详细信息的恶意代码）

即使您的网页已通过HTTPS提供，如果您的网页包含通过常规HTTP连接提供的图片或外部脚本等内容，也可能会出现此问题。

Answer 2

您有此消息可能是因为您没有使用“HTTPS”连接而导航器检测到并禁用自动填充？

如何使表单以redux形式安全

2 个答案: