禁用帐户选择器 FirebaseUI React

Posted 2023-02-23

【中文标题】禁用帐户选择器 FirebaseUI React

【英文标题】：Disable account chooser FirebaseUI React

【发布时间】：2018-08-17 07:35:07

【问题描述】：

我正在为看似小菜一碟的事情苦苦挣扎，但我仍然无法找到解决方案。

我正在使用 reactjs 和 firebaseUI web react 实现一个 firebase 身份验证过程。一切都很好，除了当我尝试使用电子邮件/密码登录时，它会将我带到accountchooser，这是我不想要的行为。

我搜索了文档、github 问题等...但我发现的只是在 uiConfig 对象中添加以下行：

credentialHelper: firebaseui.auth.CredentialHelper.NONE

问题是 react 会抛出一个错误，抱怨 firebaseui 没有被定义，我想这很正常，因为我从未导入过它。

我在浏览时发现了一个提示，告诉将 uiCallback 属性传递给组件，但我无法弄清楚。

到目前为止，这是我的代码：

import React,  Component  from 'react';
import '../App.css';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import * as firebase from 'firebase'

const uiConfig = 
    signInFlow: 'popup',
    signInSuccessUrl: '/signedIn',
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
;

export default class SignInScreen extends Component 

    render() 
        return (
            <div>
            <h1>My App</h1>
            <p>Please sign-in:</p>
            <StyledFirebaseAuth uiConfig=uiConfig firebaseAuth=firebase.auth()/>
            </div>
        );
    

 

我什至不知道我是否在尝试正确的事情。任何帮助将不胜感激。

【问题讨论】：

当您尝试运行带有 UI 回调的代码时，错误消息是什么？

【参考方案1】：

谢谢，拉菲克！几个小时以来，我一直在寻找解决方案。

原来firebaseui.auth.CredentialHelper.NONE === 'none'，所以我使用它而不是导入额外的 firebaseui。

我不喜欢这两种解决方案（导入额外的东西或使用常量的底层值），我当然希望他们能在 react-firebaseui 中包含那个常量。

【讨论】：

你能否补充一些细节，你的答案不清楚。

他的意思是firebaseui.auth.CredentialHelper.NONE 常量的值是字符串litteral "none"。所以你可以简单地用它的值替换常量（这隐含地迫使你需要更多的东西）。

这就是我的意思。再次感谢拉菲克。

所以不要使用 firebaseui.auth.CredentialHelper.NONE，只需使用 'none'

【参考方案2】：

这对我有用：根据上面的 cmets，在 uiConfig 中的 signInOptions 数组下方添加 credentialHelper。完整代码如下：

import React,  Component  from 'react';
import '../App.css';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import * as firebase from 'firebase'

const uiConfig = 
    signInFlow: 'popup',
    signInSuccessUrl: '/signedIn',
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
    credentialHelper: 'none'
;

export default class SignInScreen extends Component 

    render() 
        return (
            <div>
            <h1>My App</h1>
            <p>Please sign-in:</p>
            <StyledFirebaseAuth uiConfig=uiConfig firebaseAuth=firebase.auth()/>
            </div>
        );
    

 

【讨论】：

这是正确的答案，不需要为 firebaseui.auth.CredentialHelper.NONE 再次导入 firebaseui ... 因为它的值只是 'none'。

【参考方案3】：

好吧，对于那些可能有帮助的人，我找到了解决该问题的方法。

yarn add firebaseui import firebaseui from 'firebaseui' 在 uiConfig 对象中设置credentialHelper: firebaseui.auth.CredentialHelper.NONE。

我不知道通过 firebaseUI web react 安装 firebaseui 是否好用，但它解决了我的问题。

【讨论】：

Rafik，您的解决方案在功能上没有问题，但不会将firebaseui 导入到您的代码中，只是因为不断不必要地膨胀您的包大小？似乎矫枉过正。自己还没有找到好的解决方案。

是的，这太过分了。 Jeff Bergman 的回答解决了这个问题。

【参考方案4】：

尝试将uiConfig 设为SignInScreen class 的属性，然后在将其传递给组件时使用this.uiConfig 引用回调

import React,  Component  from 'react';
import '../App.css';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import * as firebase from 'firebase'

export default class SignInScreen extends Component 

  uiConfig = 
    signInFlow: 'popup',
    signInSuccessUrl: '/signedIn',
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
    'credentialHelper': firebaseui.auth.CredentialHelper.NONE
;

    render() 
        return (
            <div>
            <h1>My App</h1>
            <p>Please sign-in:</p>
            <StyledFirebaseAuth uiConfig=this.uiConfig firebaseAuth=firebase.auth()/>
            </div>
        );
    

 

这是基于here提供的示例

【讨论】：

我试过这个，但我怎样才能添加属性 credentialHelper ？可惜还是没有效果。

进行更改时收到的错误消息是什么？

我没有任何错误信息，它什么也没做

你说你没有导入 Firebase UI，你也试过了吗？

我刚刚找到了解决方案，我正在更新帖子。谢谢:)