【React.js】Firebaseの番号認証の確認コードが送れない。reCAPTCHA client element has been removed

番号を入力し、reCAPTCHA ウィジェットにチェックを入れ送信すると
reCAPTCHA client element has been removedといったエラーになり送れません。
コンソールで番号認証は有効にしてあります。

React
1import React from 'react';
2import firebase from '../firebase';
3import '../PhoneCheck.css';
4
5class PhoneCheck extends React.Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9        phone: '',
10    };
11  }
12
13  componentDidMount() {
14    if (window.appVerifier && this.recaptchaWrapperRef) {
15      alert("通過");
16      window.appVerifier.clear();
17      this.recaptchaWrapperRef.innerHTML = `<div id="recaptcha-container"></div>`
18    }
19
20    window.appVerifier = new firebase.auth.RecaptchaVerifier(
21      "recaptcha-container",
22      {
23       size:"normal",
24       'callback': function(token) {
25          console.log(token);
26        },
27        'expired-callback': function() {
28          console.log("コール");
29        }
30      }
31    );
32    window.appVerifier.render().then(function() {
33      window.appVerifier.verify();
34    });
35  }
36
37  handleToPhoneAuth = () => {
38    const { phone } = this.state;
39    if (phone === '') {
40      return;
41    }
42
43
44    firebase
45        .auth()
46        .signInWithPhoneNumber("+818012345678", window.appVerifier)
47        .then(confirmResult => {
48          alert("成功");
49        })
50        .catch(error => {
51          alert(error.message);
52        });
53    this.props.history.push('/phoneauth');
54  }
55
56  handleChange = (event) => {
57    this.setState({phone: event.target.value});
58  }
59
60  render() {
61    let wh = window.innerHeight + 'px';
62    let wrapperStyle = {
63      height: wh
64    };
65    const { phone } = this.state;
66
67    return(
68    <div className="PhoneCheck-page" style={wrapperStyle}>
69      <div className="PhoneCheck-container">
70        <div className="PhoneCheck-center">
71          <input
72            className="PhoneCheck-input"
73            type="text"
74            value={phone}
75            placeholder="08012345678"
76            onChange={this.handleChange}
77          />
78          <div ref={ref => this.recaptchaWrapperRef = ref}>
79            <div id="recaptcha-container"></div>
80          </div>
81          <div className="PhoneCheck-caption">SMSで認証コードを送信します</div>
82          <div className="PhoneCheck-btn" onClick={this.handleToPhoneAuth}>送信</div>
83        </div>
84      </div>
85    </div>
86    );
87  }
88}
89
90export default PhoneCheck;
91

thyda.eiqau

2019/11/10 05:33

問題とは関係ないですが電話番号が普通に載ってるのは大丈夫なんでしょうか

nakamu

2019/11/10 06:33

ありがとうございます！

行動規範の内容に同意します

回答1件

自己解決

不可視のreCAPTCHAでうまく行きました！

React
1import React from 'react';
2import firebase from '../firebase';
3import '../PhoneCheck.css';
4
5class PhoneCheck extends React.Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9        phone: '',
10    };
11  }
12
13  componentDidMount() {
14    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
15      'size': 'invisible',
16      'callback': function(response) {
17        // reCAPTCHA solved, allow signInWithPhoneNumber.
18      }
19    });
20  }
21
22  handleToPhoneAuth = () => {
23    const { phone } = this.state;
24    if (phone === '') {
25      return;
26    }
27
28    var appVerifier = window.recaptchaVerifier;
29    firebase.auth().signInWithPhoneNumber(phone, appVerifier)
30        .then(confirmResult => {
31          alert("成功");
32          window.confirmationResult = confirmResult;
33        }).catch(error => {
34          alert(error.message);
35        });
36  }
37
38  handleChange = (event) => {
39    this.setState({phone: event.target.value});
40  }
41
42  render() {
43    let wh = window.innerHeight + 'px';
44    let wrapperStyle = {
45      height: wh
46    };
47    const { phone } = this.state;
48
49    return(
50    <div className="PhoneCheck-page" style={wrapperStyle}>
51      <div className="PhoneCheck-container">
52        <div className="PhoneCheck-center">
53          <input
54            className="PhoneCheck-input"
55            type="text"
56            value={phone}
57            placeholder="08012345678"
58            onChange={this.handleChange}
59          />
60          <div ref={ref => this.recaptchaWrapperRef = ref}>
61            <div id="recaptcha-container"></div>
62          </div>
63          <div className="PhoneCheck-caption">SMSで認証コードを送信します</div>
64          <div className="PhoneCheck-btn" onClick={this.handleToPhoneAuth}>送信</div>
65        </div>
66      </div>
67    </div>
68    );
69  }
70}
71
72export default PhoneCheck;
73