Firebase UI - Auth - 使用自己的布局

Posted 2023-02-23

【中文标题】Firebase UI - Auth - 使用自己的布局

【英文标题】：Firebase UI - Auth - Use own layout

【发布时间】：2017-03-27 21:56:44

【问题描述】：

是否可以在 Android 上使用我的自己的布局和按钮进行 Firebase UI 身份验证？

我基本上想自己实现用于选择身份提供者（google、facebook 等）的屏幕，并从我的点击侦听器开始相应的流程（例如使用 Butterknife）：

@OnClick(R.id.login_btn_signInGoogle)  
public void signInGoogle(View view)   
  // Start google sign in flow <--- This is what I do not know how to do it  


@OnClick(R.id.login_btn_signInFacebook)  
public void signInFacebook(View view)   
  // Start facebook sign in flow <--- This is what I do not know how to do it 

我知道 firebase 提供了自定义屏幕/主题的可能性，但这对我的情况来说还不够。

在最坏的情况下，我将不得不使用标准的 firebase sdk 方法来实现它。

【问题讨论】：

您可以通过此链接使用 Firebase 自己的 UI 进行自定义和流程：github.com/firebase/FirebaseUI-android/tree/master/auth

【参考方案1】：

是的，您可以在 Android 上为 Firebase UI Auth 使用自己的布局和按钮。

对于 Google 和 Facebook，您可以使用 XML 文件中提供的小部件，例如：

        <com.google.android.gms.common.SignInButton
            android:id="@+id/btn_google_login"
            android:layout_
            android:layout_
            android:layout_marginTop="10dip"
            android:background="@color/colorAccent"
            android:text="@string/btn_google_login"
            android:textColor="@android:color/black" />

        <com.facebook.login.widget.LoginButton
            android:id="@+id/btn_facebook_login"
            android:layout_
            android:layout_
            android:layout_marginTop="10dip"
            android:background="@color/colorAccent"
            android:text="@string/btn_facebook_login"
            android:textColor="@android:color/black"/>

然后你可以使用你的“android:id”在onClick上执行操作

希望您的问题得到解答。

编辑： 对于谷歌流程：

// Configure sign-in to request the user's ID, email address, and basic
        // profile. ID and basic profile are included in DEFAULT_SIGN_IN.
        GoogleSignInOptions gso = new GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
                .requestIdToken(Your web_client_id)
                .requestEmail()
                .build();

    btn_google_login = (SignInButton) findViewById(R.id.btn_google_login);

    btn_google_login.setSize(SignInButton.SIZE_STANDARD);
    btn_google_login.setScopes(gso.getScopeArray());

    btn_google_login.setOnClickListener(new View.OnClickListener() 
        @Override
        public void onClick(View v) 

            //If you want everytime for user to ask the account to select.
            mGoogleApiClient.clearDefaultAccountAndReconnect();

            Intent signInIntent = Auth.GoogleSignInApi.getSignInIntent(mGoogleApiClient);
            startActivityForResult(signInIntent,RC_SIGN_IN);
        
    );

【讨论】：

您好，感谢您的回复，但我知道如何在 android 中使用按钮、clicklisteners 等，问题更多的是在 onclick 方法中启动什么来启动 firebase 流？我更新了问题以进行澄清

更新了答案

这是使用标准的firebase SDK来做的吧？那么我将不得不自己实现整个智能锁等，对吗？

好的，那我会等几天，也许其他人可以提供答案，我可以使用 firebase ui 提供的东西，但更定制化。谢谢你:)！

自定义主题是 FirebaseUI 中的一项功能，但所谓的 Nascar 屏幕的自定义布局不是。如果您想这样做，您可以分叉 FirebaseUI 存储库并在您的分叉中进行更改。

【参考方案2】：

目前我们所能做的就是接受他们在 FirebaseUI 上的布局，如 here 所述。如果我们不喜欢，我们必须自己登录。 我真的希望他们将来提供一些定制。

在我的应用程序中，我有一个单独的徽标和单独的背景，因此当您尝试使用电子邮件注册时，徽标会消失，并且注册对话框不会干扰徽标，例如 here 您可以使用 .SetTheme 和 .SetLogo

 startActivityForResult(
                        AuthUI.getInstance()
                                .createSignInIntentBuilder()
                                .setTheme(R.style.FirebaseLoginTheme)
                                .setLogo(R.drawable.logo)
                                .setProviders(Arrays.asList(
                                        new AuthUI.IdpConfig.Builder(AuthUI.FACEBOOK_PROVIDER).build(),
                                        new AuthUI.IdpConfig.Builder(AuthUI.GOOGLE_PROVIDER).build(),
                                        new AuthUI.IdpConfig.Builder(AuthUI.EMAIL_PROVIDER).build()))
                                .setIsSmartLockEnabled(false)
                                .build(),
                        RC_SIGN_IN);

在styles.xml 中为您的FirebaseLoginTheme 编辑windowBackground：

 <style name="FirebaseLoginTheme" parent="FirebaseUI">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowBackground">@drawable/login</item>
</style>