Android 使用firebase phone进行react native身份验证失败

我正试图通过firebase电话验证使react成为本地版本 我得到了这个错误

错误：此应用未被授权使用Firebase身份验证。请验证Firebase控制台中是否配置了正确的程序包名称和SHA-1。[应用程序验证失败]

我已经创建了debug.keystore

keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -storepass android -keypass android -keyalg RSA -validity 14000

然后我就得到了SHA1

keytool -list -alias androiddebugkey -keystore "C:\Users\adirz\.android\debug.keystore" -storepass android -keypass android

并粘贴到firebase控制台，下载google-services.json并添加到我的react原生应用程序。 然后我写进我的代码

    import React, { Component } from 'react';
import {
  View,
  Button,
  Text,
  TextInput,
  Image,
  ActivityIndicator,
  Platform,
} from 'react-native';

import firebase from 'react-native-firebase'

const imageUrl =
  'https://www.shareicon.net/data/512x512/2016/07/19/798524_sms_512x512.png';

export default class PhoneAuth extends Component {
  static getDefaultState() {
    return {
      error: '',
      codeInput: '',
      phoneNumber: '+44',
      auto: Platform.OS === 'android',
      autoVerifyCountDown: 0,
      sent: false,
      started: false,
      user: null,
    };
  }

  constructor(props) {
    super(props);
    this.timeout = 20;
    this._autoVerifyInterval = null;
    this.state = PhoneAuth.getDefaultState();
  }

  _tick() {
    this.setState({
      autoVerifyCountDown: this.state.autoVerifyCountDown - 1,
    });
  }

  /**
   * Called when confirm code is pressed - we should have the code and verificationId now in state.
   */
  afterVerify = () => {
    const { codeInput, verificationId } = this.state;
    const credential = firebase.auth.PhoneAuthProvider.credential(
      verificationId,
      codeInput
    );

    // TODO do something with credential for example:
    firebase
      .auth()
      .signInWithCredential(credential)
      .then(user => {
        console.log('PHONE AUTH USER ->>>>>', user.toJSON());
        this.setState({ user: user.toJSON() });
      })
      .catch(console.error);
  };

  signIn = () => {
    const { phoneNumber } = this.state;
    this.setState(
      {
        error: '',
        started: true,
        autoVerifyCountDown: this.timeout,
      },
      () => {
        firebase
          .auth()
          .verifyPhoneNumber(phoneNumber)
          .on('state_changed', phoneAuthSnapshot => {
            console.log(phoneAuthSnapshot);
            switch (phoneAuthSnapshot.state) {
              case firebase.auth.PhoneAuthState.CODE_SENT: // or 'sent'
                // update state with code sent and if android start a interval timer
                // for auto verify - to provide visual feedback
                this.setState(
                  {
                    sent: true,
                    verificationId: phoneAuthSnapshot.verificationId,
                    autoVerifyCountDown: this.timeout,
                  },
                  () => {
                    if (this.state.auto) {
                      this._autoVerifyInterval = setInterval(
                        this._tick.bind(this),
                        1000
                      );
                    }
                  }
                );
                break;
              case firebase.auth.PhoneAuthState.ERROR: // or 'error'
                // restart the phone flow again on error
                clearInterval(this._autoVerifyInterval);
                this.setState({
                  ...PhoneAuth.getDefaultState(),
                  error: phoneAuthSnapshot.error.message,
                });
                break;

              // ---------------------
              // ANDROID ONLY EVENTS
              // ---------------------
              case firebase.auth.PhoneAuthState.AUTO_VERIFY_TIMEOUT: // or 'timeout'
                clearInterval(this._autoVerifyInterval);
                this.setState({
                  sent: true,
                  auto: false,
                  verificationId: phoneAuthSnapshot.verificationId,
                });
                break;
              case firebase.auth.PhoneAuthState.AUTO_VERIFIED: // or 'verified'
                clearInterval(this._autoVerifyInterval);
                this.setState({
                  sent: true,
                  codeInput: phoneAuthSnapshot.code,
                  verificationId: phoneAuthSnapshot.verificationId,
                });
                break;
              default:
              // will never get here - just for linting
            }
          });
      }
    );
  };

  renderInputPhoneNumber() {
    const { phoneNumber } = this.state;
    return (
      <View style={{ flex: 1 }}>
        <Text>Enter phone number:</Text>
        <TextInput
          autoFocus
          style={{ height: 40, marginTop: 15, marginBottom: 15 }}
          onChangeText={value => this.setState({ phoneNumber: value })}
          placeholder="Phone number ... "
          value={phoneNumber}
          keyboardType = 'phone-pad'
        />
        <Button
          title="Begin Verification"
          color="green"
          onPress={this.signIn}
        />
      </View>
    );
  }

  renderSendingCode() {
    const { phoneNumber } = this.state;

    return (
      <View style={{ paddingBottom: 15 }}>
        <Text style={{ paddingBottom: 25 }}>
          {`Sending verification code to '${phoneNumber}'.`}
        </Text>
        <ActivityIndicator animating style={{ padding: 50 }} size="large" />
      </View>
    );
  }

  renderAutoVerifyProgress() {
    const {
      autoVerifyCountDown,
      started,
      error,
      sent,
      phoneNumber,
    } = this.state;
    if (!sent && started && !error.length) {
      return this.renderSendingCode();
    }
    return (
      <View style={{ padding: 0 }}>
        <Text style={{ paddingBottom: 25 }}>
          {`Verification code has been successfully sent to '${phoneNumber}'.`}
        </Text>
        <Text style={{ marginBottom: 25 }}>
          {`We'll now attempt to automatically verify the code for you. This will timeout in ${autoVerifyCountDown} seconds.`}
        </Text>
        <Button
          style={{ paddingTop: 25 }}
          title="I have a code already"
          color="green"
          onPress={() => this.setState({ auto: false })}
        />
      </View>
    );
  }

  renderError() {
    const { error } = this.state;

    return (
      <View
        style={{
          padding: 10,
          borderRadius: 5,
          margin: 10,
          backgroundColor: 'rgb(255,0,0)',
        }}
      >
        <Text style={{ color: '#fff' }}>{error}</Text>
      </View>
    );
  }

  render() {
    const { started, error, codeInput, sent, auto, user } = this.state;
    return (
      <View
        style={{ flex: 1, backgroundColor: user ? 'rgb(0, 200, 0)' : '#fff' }}
      >
        <View
          style={{
            padding: 5,
            justifyContent: 'center',
            alignItems: 'center',
            flex: 1,
          }}
        >
          <Image
            source={{ uri: imageUrl }}
            style={{
              width: 128,
              height: 128,
              marginTop: 25,
              marginBottom: 15,
            }}
          />
          <Text style={{ fontSize: 25, marginBottom: 20 }}>
            Phone Auth Example
          </Text>
          {error && error.length ? this.renderError() : null}
          {!started && !sent ? this.renderInputPhoneNumber() : null}
          {started && auto && !codeInput.length
            ? this.renderAutoVerifyProgress()
            : null}
          {!user && started && sent && (codeInput.length || !auto) ? (
            <View style={{ marginTop: 15 }}>
              <Text>Enter verification code below:</Text>
              <TextInput
                autoFocus
                style={{ height: 40, marginTop: 15, marginBottom: 15 }}
                onChangeText={value => this.setState({ codeInput: value })}
                placeholder="Code ... "
                value={codeInput}
              />
              <Button
                title="Confirm Code"
                color="#841584"
                onPress={this.afterVerify}
              />
            </View>
          ) : null}
          {user ? (
            <View style={{ marginTop: 15 }}>
              <Text>{`Signed in with new user id: '${user.uid}'`}</Text>
            </View>
          ) : null}
        </View>
      </View>
    );
  }
}

/*
 { user ? (
 <View
 style={{
 padding: 15,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#77dd77',
 flex: 1,
 }}
 >
 <Image source={{ uri: successImageUri }} style={{ width: 100, height: 100, marginBottom: 25 }} />
 <Text style={{ fontSize: 25 }}>Signed In!</Text>
 <Text>{JSON.stringify(user)}</Text>
 </View>
 ) : null}
 */

// Example usage if handling here and not in optionalCompleteCb:
// const { verificationId, code } = phoneAuthSnapshot;
// const credential = firebase.auth.PhoneAuthProvider.credential(verificationId, code);

// Do something with your new credential, e.g.:
// firebase.auth().signInWithCredential(credential);
// firebase.auth().linkWithCredential(credential);
// etc ...

import React，{Component}来自'React'；
进口{
看法
按钮
文本，
文本输入，
形象,，
活动指示器，
平台，
}从“反应本机”；
从“react native firebase”导入firebase
常量图像URL=
'https://www.shareicon.net/data/512x512/2016/07/19/798524_sms_512x512.png';
导出默认类PhoneAuth扩展组件{
静态getDefaultState（）{
返回{
错误：“”，
代码输入：“”，
电话号码：'+44'，
auto:Platform.OS===“android”，
自动验证倒计时：0，
发送：错误，
开始：错，
用户：null，
};
}
建造师（道具）{
超级（道具）；
这是超时=20；
这是。_autoVerifyInterval=null；
this.state=PhoneAuth.getDefaultState（）；
}
_勾选（）{
这是我的国家({
autoVerifyCountDown:this.state.autoVerifyCountDown-1，
});
}
/**
*当按下确认代码时调用-我们应该使代码和verificationId现在处于状态。
*/
afterVerify=（）=>{
const{codeInput，verificationId}=this.state；
const credential=firebase.auth.PhoneAuthProvider.credential(
验证ID，
代码输入
);
//TODO使用凭证执行某些操作，例如：
火基
.auth（）
.signiWithCredential（凭证）
。然后（用户=>{
log（'PHONE AUTH USER->>>>，USER.toJSON（））；
this.setState（{user:user.toJSON（）}）；
})
.catch（控制台错误）；
};
签名=（）=>{
const{phoneNumber}=this.state；
这是我的国家(
{
错误：“”，
开始：是的，
autoVerifyCountDown:此为.timeout，
},
() => {
火基
.auth（）
.verifyPhoneNumber（电话号码）
.on（'state_changed'，phoneAuthSnapshot=>{
日志（phoneAuthSnapshot）；
开关（phoneAuthSnapshot.state）{
case firebase.auth.PhoneAuthState.CODE_SENT://或“SENT”
//使用发送的代码更新状态，如果android启动间隔计时器
//用于自动验证-提供视觉反馈
这是我的国家(
{
是的，
verificationId:phoneAuthSnapshot.verificationId，
autoVerifyCountDown:此为.timeout，
},
() => {
if（this.state.auto）{
这是。_autoVerifyInterval=setInterval(
这个。_勾选绑定（这个），
1000
);
}
}
);
打破
案例firebase.auth.PhoneAuthState.ERROR://或“ERROR”
//出现错误时重新启动电话流
clearInterval（此为自动验证间隔）；
这是我的国家({
…PhoneAuth.getDefaultState（），
错误：phoneAuthSnapshot.error.message，
});
打破
// ---------------------
//仅ANDROID事件
// ---------------------
case firebase.auth.PhoneAuthState.AUTO\u VERIFY\u TIMEOUT://或“TIMEOUT”
clearInterval（此为自动验证间隔）；
这是我的国家({
是的，
汽车：错，
verificationId:phoneAuthSnapshot.verificationId，
});
打破
案例firebase.auth.PhoneAuthState.AUTO_VERIFIED://或“VERIFIED”
clearInterval（此为自动验证间隔）；
这是我的国家({
是的，
codeInput:phoneAuthSnapshot.code，
verificationId:phoneAuthSnapshot.verificationId，
});
打破
违约：
//永远都不会到这里来-只是为了皮棉
}
});
}
);
};
renderInputPhoneNumber（）{
const{phoneNumber}=this.state；
返回(
输入电话号码：
this.setState（{phoneNumber:value}）
占位符=“电话号码…”
值={phoneNumber}
键盘类型='phone pad'
/>
);
}
renderSendingCode（）{
const{phoneNumber}=this.state；
返回(
{`正在向${phoneNumber}发送验证码。`}
然后我在我的项目中复制
我签入了AndroidManifest.xml，我有相同的packagename。
我知道有时候一步一步地重复会有点烦人，但通常是找到错误的更好方法

我不知道你使用的是什么IDE，所以我用android Studio制作了这个，但是你可以复制到你的IDE中，或者导入android项目在android Studio中完成

首先转到firebase控制台并检查程序包名称

现在在Android Studio中，检查您的包是否与AndroidManifest.xml中的包完全相同

如果不一样，您应该在firebase中进行更改，甚至启动一个新项目

下一步SHA-1

您可以完全使用此代码（无需更改）
keytool-list-v-keystore~/.android/debug.keystore-alias androiddebugkey-storepass android-keypass android

在Android Studio中打开终端（视图>工具窗口>终端）并复制/粘贴


复制SHA-1（建议保存在一些p中