firebase - 如何集成 firebase-auth 来验证电话号码

Question

我已经创建了电话号码验证屏幕，现在我想集成 firebase-auth 以通过 OTP 验证电话号码。但我不知道该怎么做，请帮助我。

我试图找到教程和示例，但这些对我没有帮助。

电话验证屏幕

import React from 'react';  
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView, BackHandler, Alert, AsyncStorage, ToastAndroid } from 'react-native';  
import HandleBack from '../component/backHandler';
import * as firebase from 'firebase';

class BuyerVerify extends React.Component{

    componentDidMount(){
        this.getData();
    };

    onBack = () => {
        return true;
    };

    getData = () => {
        const getNumber = async () => {
            let number = '';
            try {
                number = await AsyncStorage.getItem('number');
            } catch (error) {
              // Error retrieving data
              console.log(error.message);
            }
            //return number;
            alert(number);
        }
        getNumber();
    };    

    render(){
        return(
            <HandleBack onBack={this.onBack}>
            <View style={styles.root}>
            <View style={styles.outer}>

                <View style={styles.inner}>

                    <KeyboardAvoidingView style={styles.container}> 
                    <TextInput style={styles.input}
                        placeholder="Enter OTP"
                        placeholderTextColor="#939eaf"
                        keyboardType="phone-pad"
                     />
                    <TouchableOpacity style={styles.button1Container}>
                        <Text style={styles.buttonText}>
                            Verify Buyer
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.button2Container} onPress={()=> this.props.navigation.navigate('Main')}>
                        <Text style={styles.buttonText}>
                            Change number
                        </Text>
                    </TouchableOpacity>
                    </KeyboardAvoidingView>

                </View>

            </View>
            </View>
            </HandleBack>
        );
    }
}
export default BuyerVerify;

我想使用 firebase 通过 OTP 验证电话号码。

标签： firebasereact-nativefirebase-authentication

Answer 1

从 Firebase 的 PhoneAuthProvider 接口：

// 'recaptcha-container' is the ID of an element in the DOM.
var applicationVerifier = new firebase.auth.RecaptchaVerifier(
    'recaptcha-container');
var provider = new firebase.auth.PhoneAuthProvider();
provider.verifyPhoneNumber('[phone]', applicationVerifier)
    .then(function(verificationId) {
      var verificationCode = window.prompt('Please enter the verification ' +
          'code that was sent to your mobile device.');
      return firebase.auth.PhoneAuthProvider.credential(verificationId,
          verificationCode);
    })
    .then(function(phoneCredential) {
      return firebase.auth().signInWithCredential(phoneCredential);
    });