Firebase Authentication について (FirebaseUI)

FirebaseUI について

FirebaseUI とは、Firebase Authentication のログイン画面を簡単に作ることができるオープンソースのライブラリです。

Firebase Authentication の各種認証方法に対応しています。

ログイン画面のデザインは予め決まった物となっていますが、テーマなどを変更することができます。


機能の有効化

使用したい認証方法ごとに、Firebase コンソールで有効化する必要があります。

幾つかの認証方法の有効化手順については、過去の記事で紹介しましたので参考にして下さい。

Google 認証を使う場合は、SHA-1 フィンガープリントを登録する必要があります。

もし、実行時に「code:10 message:10」のようなエラーが出た場合は、この設定がされているかチェックしてみて下さい。


また、アプリレベルの build.gradle に以下の依存関係を追加する必要があります。

implementation 'com.firebaseui:firebase-ui-auth:4.3.1'


ログイン画面への遷移処理

以下のコードのようにインテントを作成し、startActivityForResult メソッドを呼び出すことで、ログイン画面に遷移します。

このコードは、ログインボタンのコールバックなどに実装すると良いかと思います。

providers リストに、使用したい認証方法を追加します。

説明の簡略化のために省略していますが、Twitter や Facebook 認証を使う場合は、このリストに追加します。

このリストに、1つだけ認証方法をセットした場合は、認証方法を選択する画面はスキップして、認証画面に直接遷移します。


createSignInIntentBuilder メソッドでインテントを作成していますが、その後に、設定のための set メソッドが連なっています。

設定が不要の場合は、これらの set メソッドは省略できます。

setIsSmartLockEnabled は、スマートロックの機能の有効無効を切り替えます。

setLogo は、ログイン画面にロゴを表示します。

setTheme は、テーマを変更します。

setTosAndPrivacyPolicyUrls は、利用規約とプライバシーポリシー画面へのリンクを作成します。


画面遷移すると、以下のようなログイン画面が表示されます。

電話番号認証をエミュレータ上で行った際は、「This app is not authorized to use Firebase Authentication. ……」の様なエラーが出ます。Firebase コンソールの Authentication→ログイン方法→電話番号→テスト用の電話番号 のところに電話番号をセットしておくと、エミュレータでテストできます。


ログイン結果の受け取り

ログイン画面で、ユーザがログインに成功したりキャンセルしたりした場合、以下のコールバック関数が呼び出されます。


テーマの変更

テーマを設定することで、ログイン画面の見た目を変えることができます。

例えば、以下のようにスタイルを定義し、インテント作成時に setTheme メソッドを呼び出します。


レイアウトの変更

ログイン画面 (認証方法を選択する画面) のレイアウトを変更することができます。

各認証画面に遷移するためのボタンを配置した、以下のようなレイアウトファイルを用意します。

そして、以下のようにインテントを作成します。

すると、デフォルトのものではなく、ここで定義したレイアウトの画面が表示されます。

※掲載内容は、記事公開時点のものです。紹介されているサービス内容は変更される場合がありますので、ご利用の際は事前にサービス提供元等をご確認ください。

銀座ITラボ

銀座ITラボは、FIrebase、iOS/Androidアプリ、AI、クラウドサービス等の技術情報に関する記事を紹介するシンプルメーカーのオウンドメディアです。

0コメント

  • 1000 / 1000