如何使用react在firebase中为电子邮件/密码帐户updateProfile phoneNumber

npm install firebase

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);

import React, { useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';

function UpdatePhoneNumber() {
  const [phoneNumber, setPhoneNumber] = useState('');

  const updatePhoneNumber = async () => {
    try {
      const user = firebase.auth().currentUser;
      if (user) {
        // 发送带有新电话号码的验证链接
        await user.updatePhoneNumber(phoneNumber);
        alert('电话号码更新成功！');
      } else {
        alert('用户未登录！');
      }
    } catch (error) {
      console.error('更新电话号码时出错:', error);
      alert('更新电话号码失败：' + error.message);
    }
  };

  return (
    <div>
      <input
        type="text"
        placeholder="输入新的电话号码"
        value={phoneNumber}
        onChange={(e) => setPhoneNumber(e.target.value)}
      />
      <button onClick={updatePhoneNumber}>更新电话号码</button>
    </div>
  );
}

export default UpdatePhoneNumber;

import React, { useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';

function VerifyPhoneNumber() {
  const [verificationId, setVerificationId] = useState('');
  const [code, setCode] = useState('');

  const onPhoneNumberChange = async (phoneNumber) => {
    const phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
    try {
      const verificationId = await phoneAuthProvider.verifyPhoneNumber(phoneNumber);
      setVerificationId(verificationId);
    } catch (error) {
      console.error('发送验证码时出错:', error);
    }
  };

  const onVerifyCode = async () => {
    try {
      const credential = firebase.auth.PhoneAuthProvider.credential(verificationId, code);
      await firebase.auth().currentUser.linkWithCredential(credential);
      alert('电话号码验证成功！');
    } catch (error) {
      console.error('验证验证码时出错:', error);
      alert('验证失败：' + error.message);
    }
  };

  return (
    <div>
      <input
        type="text"
        placeholder="输入电话号码"
        onChange={(e) => onPhoneNumberChange(e.target.value)}
      />
      <input
        type="text"
        placeholder="输入验证码"
        value={code}
        onChange={(e) => setCode(e.target.value)}
      />
      <button onClick={onVerifyCode}>验证</button>
    </div>
  );
}

export default VerifyPhoneNumber;