Question

我有一个登录页面和个人资料页面。用户登录后，我希望他们重定向到他们的个人资料页面。 Firebaseui有一个重定向successsignInUrl，但这不允许我传递用户的个人资料信息等信息。我尝试将它们作为道具传递，但无法弄明白。下面是我的LoginPage代码。这是我的代码：

import React, { Component } from 'react';
import Profilepage from './Profilepage';
import Loginuser from './Loginuser';


var firebase = require('firebase');
var firebaseui = require('firebaseui');
var userProfile, checkLog;
var userInfo={
    name: "",
    email: "",
    photoUrl: "",
    uid: ""
};
class ProfileCheck extends Component{
constructor(props){
    super(props);
    this.state=({userIn: checkLog});
}

render(){
// FirebaseUI config.
var uiConfig = {
   signInSuccessUrl: 'http://localhost:3000/ProfilePage',
    signInOptions: [
      // Leave the lines as is for the providers you want to offer your users.
      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,
    ],
    // Terms of service url. -- DO NOT FORGET TO ADD THIS LATER
    tosUrl: '<--Smething--->'
  };

  // Initialize the FirebaseUI Widget using Firebase.
  var ui = new firebaseui.auth.AuthUI(firebase.auth());
  // The start method will wait until the DOM is loaded.
  ui.start('#firebaseui-auth-container', uiConfig);

  function initApp(){
        firebase.auth().onAuthStateChanged(function(user){
          if(user){
              //user signed in  
            userProfile = user;           
            userInfo.name = user.displayName;
            userInfo.email = user.email;
            userInfo.photoUrl = user.photoURL;
            console.log(userInfo.name + " " + userInfo.email + " "+ userInfo.photoUrl);
            checkLog=true;
          } else{
              //user is signed out
          }
      },function(error){
          console.log("Error");
      });
  };
  window.addEventListener('load', function() {
    initApp()
  });
    return(
        <div className="loginSection">
        <div className="card loginCard" width="40rem" >
            <div className="card-block">
                <h4 className="card-title"><strong>ChallengeMe</strong></h4>
                <hr/>
                <p className="card-text">
                    ChallengeMe is <strong>a place where people can showcase their skills and get challenged by others.</strong> The goal is to have fun while improving yourself. 
                </p>
            </div>
        </div>
        <div className="card loginCard text-center" >
            <div className="card-block">
                <form className="form-signin" id="validationForm">       
                    <h2 className="form-signin-heading text-center">Login</h2>
                    <hr/>
                            <div id="firebaseui-auth-container"></div>
                    </form> 
            </div>
        </div>
</div>
         );
    }
}
export default ProfileCheck;

我在线阅读了大量文件，但由于我是Reactjs的新手，所以无法弄明白。如果有人能指出我正确的方向或帮助我逐步理解，那将是非常好的。谢谢!!

ReactJS登录用户使用Firebaseui和多个网页设计

0 个答案: