更换滑块验证

src/common/Captcha-ali/index.js

+import React, { Component } from 'react';
+import './index.scss'
+import { initCaptchaNC } from "@/utils"
+
+const appkey = 'FFFF0N000000000090FC'
+const scene = 'nc_login_h5'
+
+class CaptchaAli extends Component {
+  nc = null
+  state = {
+    isLoaded: false
+  }
+
+  componentDidMount() {
+    const _this = this
+    const el = document.querySelector('#nc')
+    el && initCaptchaNC(() => {
+      const nc_token = [appkey, (new Date()).getTime(), Math.random()].join(':');
+      this.nc = NoCaptcha.init({
+        renderTo: '#nc',
+        appkey,
+        scene,
+        token: nc_token,
+        elementID: ['tel'],
+        bannerHidden: false,
+        callback(data) {
+          _this.props.onVerify({
+            app_key: appkey,
+            scene,
+            token: nc_token,
+            session_id: data.csessionid,
+            sig: data.sig
+          })
+        },
+        error(s) {
+          console.log(s)
+        }
+      })
+      NoCaptcha.setEnabled(true);
+      this.nc.reset()
+      this.props.getInstance(this.nc)
+    })
+  }
+
+  render() {
+    const {mb = 30} = this.props
+    return (
+      <div id={'captcha'} style={{marginBottom: `${mb}px`}}>
+        <div id="nc"></div>
+      </div>
+    );
+  }
+}
+
+export default CaptchaAli;
\ No newline at end of file

src/common/Captcha-ali/index.scss

+#captcha {
+  ._nc {
+    .stage {
+      padding: 0;
+    }
+
+    .stage1 {
+      height: 48px;
+
+      .label {
+        height: 46px;
+      }
+
+      .button {
+        width: 48px;
+        height: 48px;
+      }
+
+      .slider {
+        height: 48px;
+        width: 100%;
+        left: 0;
+      }
+    }
+  }
+}
\ No newline at end of file

src/common/bindPhone/index.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import { Formik, Form, Field } from 'formik';
 import { Toast } from 'antd-mobile';
 import { isEmpty } from 'lodash';
-import Captcha from '@/common/Captcha';
-import { http, getParam } from '@/utils';
+import CaptchaAli from "@common/Captcha-ali"
+import { http } from '@/utils';
 import './index.scss';
 
 class BindPhone extends Component {
@@ -21,7 +21,8 @@ class BindPhone extends Component {
         bindInfo: {},
         country: {
           num: '86'
-      }
+        },
+        validationData: null
       }
   }
 
@@ -30,14 +31,14 @@ class BindPhone extends Component {
   }
 
   initCountryInfo = () => {
-    const { country } = this.props;
+    const {country} = this.props;
     this.setState({
       country
     });
   }
 
   toFetchCountryNum = () => {
-    const { history, hideBindPhone } = this.props;
+    const {history, hideBindPhone} = this.props;
     hideBindPhone();
     history.push('/country?from=bind');
   }
@@ -46,45 +47,43 @@ class BindPhone extends Component {
     this.captchaInstance = instance;
   }
 
-  onVerify = (err, data) => {
-    if (err) {
-      console.log(err);
-    } else {
+  onVerify = (data) => {
     this.setState({
-        validate: data.validate
-      });
-    }
+      validate: true,
+      validationData: data
+    })
   }
 
   // 获取手机号验证码
   handleToSend = ({tel, code}) => {
-    let { validate, seconds, isFirst, isTimer, country: {num = '86'} } = this.state;
-    if(validate) {
+    let {validate, seconds, validationData, isFirst, isTimer, country: {num = '86'}} = this.state;
+    if (validate) {
       if (!isFirst) {
         Toast.info('请重新进行滑块验证', 2, null, false);
-        this.captchaInstance.refresh();
+        this.captchaInstance.reset();
         this.setState({
           isFirst: true
         });
         return
       }
-      if(!isTimer) {
+      if (!isTimer) {
         if (!tel) {
           Toast.info('手机号码不能为空', 2, null, false);
-        }else if(!/^\d+$/.test(tel)) {
+        } else if (!/^\d+$/.test(tel)) {
           Toast.info('请输入正确格式的手机号码', 2, null, false);
-        }else {
+        } else {
 
           // 获取验证码
           http.post(
             `${API['passport-api']}/m/personal/bindPhoneSendCode`,
             {
               area_code: `00${num}`,
-              phone_num: tel
+              phone_num: tel,
+              ...validationData
             }
           ).then(res => {
-            const { errno, msg } = res.data;
-            if(errno === 200) {
+            const {errno, msg} = res.data;
+            if (errno === 200) {
               Toast.info('验证码发送成功', 2, null, false);
 
               // 倒计时
@@ -95,7 +94,7 @@ class BindPhone extends Component {
                     isTimer: false,
                     seconds: 60
                   });
-                }else {
+                } else {
                   this.setState({
                     isTimer: true,
                     seconds: --seconds
@@ -107,7 +106,7 @@ class BindPhone extends Component {
               this.setState({
                 isFirst: false
               })
-            }else {
+            } else {
               Toast.info(msg, 2, null, false);
             }
           })
@@ -119,8 +118,8 @@ class BindPhone extends Component {
 
   // 绑定手机
   toBindPhone = () => {
-    const { accountInfo: { tel, code }, country: {num = '86'}  } = this.state;
-    const { handleToConfirmPhone, successBindPhone } = this.props;
+    const {accountInfo: {tel, code}, country: {num = '86'}} = this.state;
+    const {handleToConfirmPhone, successBindPhone} = this.props;
     const params = {
       area_code: `00${num}`,
       mobile: tel,
@@ -135,22 +134,22 @@ class BindPhone extends Component {
         is_valid: 1, // is_valid	是否验证 1:验证（默认）,0不验证
       }
     ).then(res => {
-      const { code, data, msg } = res.data;
-      if(code === 200 ) {
-        if(data.tip_info) {
+      const {code, data, msg} = res.data;
+      if (code === 200) {
+        if (data.tip_info) {
           handleToConfirmPhone(params, data.tip_info);
-        }else {
+        } else {
           successBindPhone();
         }
-      }else {
+      } else {
         Toast.info(msg, 2, null, false);
       }
     });
   }
 
   render() {
-    const { desc, skip = 'year' } = this.props;
-    const { country, validate, isTimer, seconds } = this.state;
+    const {desc, skip = 'year'} = this.props;
+    const {country, validate, isTimer, seconds} = this.state;
     return (
       <Formik
         initialValues={{
@@ -161,7 +160,7 @@ class BindPhone extends Component {
           const errors = {};
 
           // if (!validateTel(tel)) {
-            if(!/^\d+$/.test(tel)) {
+          if (!/^\d+$/.test(tel)) {
             errors.tel = '请填写正确格式的手机号';
           }
           if (!/[0-9]{6}/.test(code)) {
@@ -170,7 +169,7 @@ class BindPhone extends Component {
 
           return errors;
         }}
-          onSubmit={(values, { setStatus, setSubmitting }) => {
+        onSubmit={(values, {setStatus, setSubmitting}) => {
           this.setState({
             accountInfo: {
               ...values
@@ -205,10 +204,7 @@ class BindPhone extends Component {
                 }}
               />
             </div>
-              <Captcha
-                getInstance={this.getCaptchaInstance}
-                onVerify={this.onVerify}
-              />
+            <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
             <div className="popup-form__item">
               <Field
                 name="code"
@@ -225,18 +221,18 @@ class BindPhone extends Component {
               />
               <button
                 className="popup-form__button--code"
-                  data-status={(validate && !isTimer)? 'do': ''}
+                data-status={(validate && !isTimer) ? 'do' : ''}
                 type="button"
                 onClick={() => this.handleToSend({tel, code})}
               >
                 {
-                    isTimer? `重新发送${seconds}s` : '发送验证码'
+                  isTimer ? `重新发送${seconds}s` : '发送验证码'
                 }
               </button>
             </div>
             <button
               className="popup-form__button--bundle"
-                data-status={(tel && code && isEmpty(errors))? 'do': 'done'}
+              data-status={(tel && code && isEmpty(errors)) ? 'do' : 'done'}
               type="submit"
             >
               完成绑定

src/common/index.js

@@ -5,6 +5,7 @@ export { default as OrderItem } from './OrderList'
 export { default as HeaderBar } from './HeaderBar'
 export { default as CallApp } from './CallApp'
 export { default as Captcha } from './Captcha'
+export { default as CaptchaAli } from './Captcha-ali'
 export { default as ClearableInput } from "./ClearableInput"
 export { default as Loading } from './Loading'
 export { default as RenderTabBar } from './renderTabBar'

src/components/detail/redPacket/index.scss

@@ -323,6 +323,34 @@
   border-radius: 10px;
   box-sizing: border-box;
   background-color: #fff;
+
+  #nc{
+    $height: 36px;
+    height: $height;
+    ._nc{
+      .stage1{
+        height: $height;
+        .icon{
+          left: 5px;
+        }
+        .button{
+          width: $height;
+          height: $height;
+        }
+      }
+      .slider{
+        height: $height;
+        .label{
+          height: 100%;
+          line-height: $height;
+        }
+        .bg-green{
+          height: $height;
+          line-height: $height;
+        }
+      }
+    }
+  }
 }
 
 .popup-form__title {

src/components/passport/bindingTel/index.js

@@ -5,11 +5,7 @@ import { http, getParam } from "@/utils"
 import { compose } from "redux"
 import { connect } from "react-redux"
 import { setCurrentUser } from "@/store/userAction"
-import Captcha from '@/common/Captcha'
-import { HeaderBar } from '@/common'
-
-
-// import ClearableInput from '@common/ClearableInput'
+import { HeaderBar, CaptchaAli } from '@/common'
 import ClearableInput from '../common/clearableInputWithCountryCodes'
 import Button from '../common/Button'
 import VeriCodeInput from '../common/veriCodeInput'
@@ -21,7 +17,8 @@ class BindingTel extends Component {
 
   state = {
     validate: null,
-    captchaInstance: null
+    captchaInstance: null,
+    validationData: null
   }
 
   getCaptchaInstance = instance => {
@@ -29,15 +26,12 @@ class BindingTel extends Component {
       captchaInstance: instance
     })
   }
-  onVerify = (err, data) => {
-    if (err) {
-      console.log(err)
-    } else {
+  onVerify = (data) => {
     this.setState({
-        validate: data.validate
+      validate: true,
+      validationData: data
     })
   }
-  }
 
   render() {
     const {
@@ -79,16 +73,16 @@ class BindingTel extends Component {
                     placeholder={'验证码'}
                     account={values.tel}
                     tel={values.tel}
-                    challenge={this.state.validate}
                     instance={this.state.captchaInstance}
                     action={'auth'}
                     country={country}
+                    validationData={this.state.validationData}
                   />
 
                 )
               }}
             />
-            <Captcha onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/>
+            <CaptchaAli onVerify={this.onVerify} getInstance={this.getCaptchaInstance} mb={0}/>
             <Button className={'complete-btn'}
                     active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button>
           </Form>

src/components/passport/common/veriCodeInput/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import './veri-code-input.scss'
 import { http, validateEmail } from '@/utils';
 import { Toast } from "antd-mobile";
-import { has } from 'lodash'
+import { has, isEmpty } from 'lodash'
 
 
 import classnames from 'classnames'
@@ -23,7 +23,7 @@ class VeriCodeInput extends Component {
     let {count} = this.state
     if (!this.state.isFirst) {
       Toast.info('请重新进行滑块验证', 2, null, false)
-            this.props.instance.refresh()
+      this.props.instance.reset()
       this.setState({
         isFirst: true
       })
@@ -61,10 +61,10 @@ class VeriCodeInput extends Component {
   }
 
   sendEmail = () => {
-        const {email, challenge} = this.props
+    const {email, validationData} = this.props
     http.post(`${API['passport-api']}/send_email_code`, {
       email,
-            challenge
+      ...validationData
     }).then(res => {
       if (res.data.errno === 0) {
         Toast.info('验证码发送成功', 2, null, false)
@@ -79,7 +79,7 @@ class VeriCodeInput extends Component {
   }
 
   sendSMS = () => {
-        const {action, tel, account, challenge, checking, country} = this.props
+    const {action, tel, account, validationData, checking, country} = this.props
     if (!tel) {
       Toast.info('请输入手机号')
       return
@@ -87,9 +87,9 @@ class VeriCodeInput extends Component {
     http.post(`${API['passport-api']}/quick_sms`, {
       phone_num: tel || account,
       action: action || 'login',
-            area_code: '00'+country.num,
-            challenge,
-            checking
+      area_code: '00' + country.num,
+      checking,
+      ...validationData
     }).then(res => {
       if (res.data.errno === 0) {
         Toast.info('验证码发送成功', 2, null, false)
@@ -104,7 +104,7 @@ class VeriCodeInput extends Component {
 
 
   validate = () => {
-        const {tel, challenge, email} = this.props
+    const {tel, validationData, email} = this.props
     let hasTel = has(this.props, 'tel')
     let content
 
@@ -129,8 +129,7 @@ class VeriCodeInput extends Component {
       return false
     }
 
-
-        if (!challenge) {
+    if (isEmpty(validationData)) {
       Toast.info('请进行滑块验证', 2, null, false)
       return false
     }
@@ -138,7 +137,7 @@ class VeriCodeInput extends Component {
   }
 
   render() {
-        let {className, ...rest} = this.props
+    let {className, validationData, ...rest} = this.props
     return (
       <Input
         type={'number'}

src/components/passport/forgotPassword/index.js

@@ -6,7 +6,7 @@ import { withFormik, Form, Field } from 'formik';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Toast } from "antd-mobile";
-import { HeaderBar, Captcha } from "@/common";
+import { HeaderBar, CaptchaAli } from "@/common";
 import ClearableInput from '../common/clearableInputWithCountryCodes'
 import { http } from "@/utils";
 import { quickLogin } from '@/store/userAction';
@@ -18,7 +18,8 @@ class ForgotPassword extends Component {
 
   state = {
     validate: null,
-        captchaInstance: null
+    captchaInstance: null,
+    validationData: null
   }
 
 
@@ -27,15 +28,12 @@ class ForgotPassword extends Component {
       captchaInstance: instance
     })
   }
-    onVerify = (err, data) => {
-        if (err) {
-            console.log(err)
-        } else {
+  onVerify = (data) => {
     this.setState({
-                validate: data.validate
+      validationData: data,
+      validate: true
     })
   }
-    }
   onSubmissionError = () => {
     const errors = Object.values(this.props.errors);
     errors.length && Toast.info(errors[0], 2, null, false)
@@ -84,13 +82,14 @@ class ForgotPassword extends Component {
                       action={'auth'}
                       checking={1}
                       country={country}
+                      validationData={this.state.validationData}
                     />
                   )
                 }}
               />
             }
             <OnSubmissionError callback={this.onSubmissionError}/>
-                        <Captcha getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
+            <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
             <Button className={'next_step'} active={isValid}>下一步</Button>
             <Link className={'to-email'} to={`/passport/forgot-password-email`} replace>邮箱找回</Link>
           </Form>
@@ -123,7 +122,7 @@ const formikConfig = {
     http.post(`${API['passport-api']}/check_phone_code`, {
       phone: values.tel,
       code: values.veriCode,
-            area_code: '00'+props.country.num
+      area_code: '00' + props.country.num
     }).then(res => {
       if (res.data.errno == 0) {
         props.history.push('/passport/set-password', {from: props.location})

src/components/passport/forgotPasswordEmail/index.js

@@ -6,8 +6,8 @@ import { withFormik, Form, Field } from 'formik';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Toast } from "antd-mobile";
-import { HeaderBar, Captcha, ClearableInput } from "@/common";
-import { validateEmail, http, api } from "@/utils";
+import { HeaderBar, ClearableInput, CaptchaAli } from "@/common";
+import { validateEmail, http } from "@/utils";
 import { quickLogin } from '@/store/userAction';
 import OnSubmissionError from '../common/OnSubmissionError'
 import { Link } from "react-router-dom";
@@ -17,7 +17,8 @@ class ForgotPassword extends Component {
 
   state = {
     validate: null,
-        captchaInstance: null
+    captchaInstance: null,
+    validationData: null
   }
 
 
@@ -26,15 +27,12 @@ class ForgotPassword extends Component {
       captchaInstance: instance
     })
   }
-    onVerify = (err, data) => {
-        if (err) {
-            console.log(err)
-        } else {
+  onVerify = (data) => {
     this.setState({
-                validate: data.validate
+      validationData: data,
+      validate: true
     })
   }
-    }
   onSubmissionError = () => {
     const errors = Object.values(this.props.errors);
     errors.length && Toast.info(errors[0], 2, null, false)
@@ -78,6 +76,7 @@ class ForgotPassword extends Component {
                       email={values.email}
                       challenge={this.state.validate}
                       instance={this.state.captchaInstance}
+                      validationData={this.state.validationData}
                       action={'auth'}
                       checking={1}
                     />
@@ -86,7 +85,8 @@ class ForgotPassword extends Component {
               />
             }
             <OnSubmissionError callback={this.onSubmissionError}/>
-                        <Captcha getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
+            {/*<Captcha getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>*/}
+            <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
             <Button className={'next_step'} active={isValid}>下一步</Button>
             <Link className={'to-phone'} to={'/passport/forgot-password'} replace>手机号找回</Link>
           </Form>

src/components/passport/login/index.js

 import React, { Component } from 'react'
 import './wechatLogin.scss'
-// import Input from "../common/Input"
 import Input from '../common/inputWithCountryCodes'
 import LoginButton from '../common/LoginButton'
 import LoginWays from '../common/LoginWays'
 import Header from '../common/Header'
 import VeriCodeInput from '../common/veriCodeInput'
 import { Form, Field, withFormik } from "formik"
-import Captcha from '@/common/Captcha'
 import { quickLogin } from '@/store/userAction';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { isEmpty } from 'lodash'
 import { Toast } from 'antd-mobile';
-import { HeaderBar } from "@/common";
+import { HeaderBar, CaptchaAli } from "@/common";
 
 
 class Login extends Component {
   state = {
     validate: null,
-        captchaInstance: null
+    captchaInstance: null,
+    validationData: null
   }
 
   loginWaysClick = method => {
@@ -56,18 +55,16 @@ class Login extends Component {
       captchaInstance: instance
     })
   }
-    onVerify = (err, data) => {
-        if (err) {
-            console.log(err)
-        } else {
+
+  onVerify = (data) => {
     this.setState({
-                validate: data.validate
+      validationData: data,
+      validate: true
     })
   }
-    }
 
   toStudentRegister = () => {
-        const { history } = this.props;
+    const {history} = this.props;
     history.push('/passport/student-login')
   }
 
@@ -77,11 +74,9 @@ class Login extends Component {
     let pathname = location.state && location.state.from && location.state.from.pathname
     let search = location.state && location.state.from && location.state.from.search
 
-        console.log(action,pathname,search);
-
-        if(action !== 'POP'){
+    if (action !== 'POP') {
       let historyUrl = `${pathname}${search}`
-            window.localStorage.setItem('HistoryUrl',historyUrl)
+      window.localStorage.setItem('HistoryUrl', historyUrl)
     }
 
   }
@@ -107,6 +102,7 @@ class Login extends Component {
                 placeholder={'手机号快捷登录(免注册)'}
                 wrapperClass={'tel-input'}
                 country={country}
+                id={'tel'}
               />
             )}
           >
@@ -124,18 +120,17 @@ class Login extends Component {
                            style={{fontSize: '20px', left: '12px'}}
                   />}
                   tel={values.tel}
-                                    challenge={this.state.validate}
                   errors={errors}
                   placeholder={'请输入验证码'}
                   instance={this.state.captchaInstance}
+                  validationData={this.state.validationData}
                   country={country}
                 />
               )}
             />
           }
-                    <Captcha mrBtm={this.state.validate ? '20px' : '33px'} getInstance={this.getCaptchaInstance}
-                             onVerify={this.onVerify}
-                    />
+          <CaptchaAli onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/>
+
           <LoginButton active={values.tel && values.veriCode && isEmpty(errors)}/>
 
           {/* 助学计划 */}
@@ -159,7 +154,7 @@ const FormikConfig = {
     props.quickLogin({
       phone_num: values.tel,
       phone_code: values.veriCode,
-            area_code: '00'+props.country.num,
+      area_code: '00' + props.country.num,
       redirect: from && encodeURIComponent(window.location.origin + from.pathname + from.search + from.hash)
     }).then(res => {
       if (res.hasError) {

src/components/passport/studentRoot/index.js

@@ -5,8 +5,7 @@ import { studentLogin } from '@/store/userAction';
 import { http } from '@/utils';
 import { Formik, Form, Field } from 'formik';
 import { Toast } from "antd-mobile";
-import { HeaderBar } from "@/common";
-import Captcha from '@/common/Captcha'
+import { HeaderBar, CaptchaAli } from "@/common";
 import Header from '../common/Header';
 import Input from '../common/inputWithCountryCodes';
 import VeriCodeInput from '../common/veriCodeInput';
@@ -33,6 +32,7 @@ class StudentRoot extends PureComponent {
       list: [],
       schoolList: [],
       schoolName: '',
+      validationData: null,
     };
   }
 
@@ -73,7 +73,7 @@ class StudentRoot extends PureComponent {
       redirect: from && window.location.origin + from.pathname + from.search + from.hash,
     }).then(res => {
       if (res.hasError) {
-        captchaInstance.refresh();
+        captchaInstance.reset();
         Toast.info(res.msg, 2, null, false);
       }
     });
@@ -85,12 +85,11 @@ class StudentRoot extends PureComponent {
     });
   }
 
-  onVerify = (err, data) => {
-    if (!err) {
+  onVerify = (data) => {
     this.setState({
-        validate: data.validate
-      });
-    }
+      validationData: data,
+      validate: true
+    })
   }
 
   selectSwitch = (key, value) => {
@@ -194,11 +193,7 @@ class StudentRoot extends PureComponent {
                     placeholder="密码需要包含6-16位字母和数字"
                   />
                 </div>
-                <Captcha 
-                  mrBtm={'15px'} 
-                  getInstance={this.getCaptchaInstance}
-                  onVerify={this.onVerify}
-                />
+                <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify} mb={15}/>
                 {
                   validate &&
                   <Field
@@ -210,7 +205,7 @@ class StudentRoot extends PureComponent {
                         className={'student-form__code'}
                         icon={<i className={'iconfont iconduanxin'} style={{fontSize: '20px', left: '12px'}}/>}
                         tel={props.values.tel}
-                        challenge={validate}
+                        validationData={this.state.validationData}
                         errors={props.errors}
                         placeholder={'请输入验证码'}
                         instance={captchaInstance}

src/store/userAction.js

@@ -16,7 +16,6 @@ const accountLogin = user => dispatch => {
 
 const studentLogin = params => dispatch => {
     return http.post(`${API['passport-api']}/phone_reg`, {
-        challenge: params.validate,
         phone: params.tel,
         password: params.password,
         code: params.code,

src/utils/index.js

@@ -67,6 +67,15 @@ function initCaptcha(cb) {
 
 }
 
+function initCaptchaNC(cb) {
+  if (window.NoCaptcha && typeof window.NoCaptcha.init === 'function') {
+    cb()
+  } else {
+    const url = '//g.alicdn.com/sd/nch5/index.js' + '?t=' + getTimestamp(1 * 60 * 1000)
+    loadScript(url, cb)
+  }
+}
+
 
 export const is_weixin = () => {
   var ua = window.navigator.userAgent.toLowerCase();
@@ -126,11 +135,12 @@ export {
 export {
   html,
   initCaptcha,
+  initCaptchaNC,
   validateTel,
   validateEmail,
   browser,
   isLogin,
-  dateCountDown
+  dateCountDown,
 }
 export {
   default as SendMessageToApp