使用电话号码在Firebase上进行身份验证 [英] Authenticate on Firebase with phone number

问题描述

我已经去了Firebase的文档，似乎我们需要提供一个电子邮件来验证用户。

但是我依靠电话号码

有没有办法做到这一点？ 现在Firebase是支持通过电话号码进行身份验证： https://firebase.google.com/docs/ auth / web / phone-auth

更新：
链接是官方的doku，所有指示，因为。

我会推荐使用firebaseui库，为您做所有auth UI的东西。这里是网络版本： https://github.com/firebase/firebaseui-web b $ b也有一些针对Android和iOS的项目。

这里还有一个演示程序，您可以使用它开始自己的演示：
https://github.com/TarikHuber/react-most-wanted

它也有一个运行演示： https://www.react-most-wanted.com/
您可以在那里尝试所有的auth方法。

如果您使用firebaseui，实际的实现非常简单。这是我的一个React组件。

import React，{Component} from 'react';从'prop-types'导入PropTypes;从'react-redux'导入{connect};从'react-intl'导入{injectIntl​​};从'../../components/Activity导入{Activity} ';从'material-ui / styles / muiThemeable'导入muiThemeable;从'react-router-redux'导入{push};从'firebase'导入firebase;从'firebaseui'导入firebaseui;从'..导入{firebaseAuth} .. /../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 ||' ）; //为了避免页面重新加载单页面应用程序返回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; < div title = {intl.formatMessage（{id：'sign_in'}）}>< div style = {{paddingTop：35，width：'100％'}}>< div id = firebaseui-authstyle = {{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} =状态; return {router，browser};};导出默认连接（mapStateToProps，{push}）（injectIntl​​（muiThemeable（）（SignIn）））;

I have gone though the doc of Firebase, and it seems that we need to provide an email to authenticate a user.

However I rely on phone number.

Is there a way to do this ?

解决方案

Firebase is now supporting auth with Phone number: https://firebase.google.com/docs/auth/web/phone-auth

UPDATE: The link is for the official doku so pleas read there all instructions because.

I would recommend to use the firebaseui library that does all the auth UI stuff for you. Here is the web version: https://github.com/firebase/firebaseui-web There are also some for the Android and iOS projects.

Here is also a demo application you can use to start your own one: https://github.com/TarikHuber/react-most-wanted

It has also a running demo: https://www.react-most-wanted.com/ You can there try out all of the auth methods.

The actual implementation is pretty simple if you use the firebaseui. Here is mine in a React Component.

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)));

这篇关于使用电话号码在Firebase上进行身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！