使用电话号码在Firebase上进行身份验证

Question

我已经删除了Firebase的文档,似乎我们需要提供一封电子邮件来验证用户身份.

但是我依靠电话号码.

有没有办法做到这一点 ？

Answer 1

刚刚遇到这个问题..你可以将你的域名添加到电话号码的末尾,仍然可以发送电子邮件.787654889@mydomain.com.请务必添加此项以进行注册和登录.这就是我正在做的事情.此方法的唯一缺点是您无法使用firebase提供的功能向用户发送密码重置电子邮件.您必须实现自己的服务服务才能提供.

Answer 2

Firebase现在通过电话号码支持身份验证:https://firebase.google.com/docs/auth/web/phone-auth

更新:该链接是为官方doku所以请求读取所有指令,因为.

我建议使用firebaseui库来为你做所有auth UI的东西.这是网络版:https://github.com/firebase/firebaseui-web 还有一些适用于Android和iOS项目.

这里还有一个演示应用程序,您可以用它来启动自己的应用程序:https: //github.com/TarikHuber/react-most-wanted

它还有一个正在运行的演示:https://www.react-most-wanted.com/ 你可以尝试所有的auth方法.

如果你使用firebaseui,实际的实现非常简单.这是我的React组件.

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {injectIntl} from 'react-intl';
import { Activity } from '../../components/Activity';
import muiThemeable from 'material-ui/styles/muiThemeable';
import { push } from 'react-router-redux';
import firebase from 'firebase';
import firebaseui from 'firebaseui';
import {firebaseAuth} from '../../utils/firebase';

var authUi = new firebaseui.auth.AuthUI(firebaseAuth);

class SignIn extends Component {

  componentDidMount() {
    const {router, browser}= this.props;

    const redirect =((router || {}).location || {}).search;

    var uiConfig = {
      signInSuccessUrl: redirect.slice(1),
      signInFlow: browser.greaterThan.medium?'popup':'redirect',
      callbacks: {
        signInSuccess: function(user, credentials, redirect) {

          push(redirect || '/');

          //To avoid page reload on single page applications
          return false;
        }
      },
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID,
        firebase.auth.GithubAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
        firebase.auth.PhoneAuthProvider.PROVIDER_ID
      ]
    };

    authUi.start('#firebaseui-auth', uiConfig);
    
  }

  componentWillUnmount() {
    authUi.reset();
  }

  render(){

    const  {intl} = this.props;

    return (
      <Activity
        title={intl.formatMessage({id: 'sign_in'})}>
        <div style={{paddingTop: 35, width: '100%'}}>
          <div id="firebaseui-auth" style={{width: '100%'}}></div>
        </div>
      </Activity>
    );

  }

}


SignIn.propTypes = {
  push: PropTypes.func.isRequired,
  intl: PropTypes.object.isRequired,
  router: PropTypes.object.isRequired,
  muiTheme: PropTypes.object.isRequired,
};


const mapStateToProps = (state) => {
  const {router, browser } = state;
  return {
    router,
    browser
  };
};


export default connect(
  mapStateToProps,
  { push}
)(injectIntl(muiThemeable()(SignIn)));