タグ: firebase authentication

  • Firebase AuthenticationにFacebook Accountでログインする

    Firebase AuthenticationにFacebook Accountでログインする

    はじめに

    Firebase AuthenticationにFacebook Accountでログインを有効にさせる方法をまとめます。

    設定

    Facebook for Developers(以下Facebook)にログインして、アカウントのセットアップをします

    https://developers.facebook.com/?locale=ja_JP

     

    Firebaseのログインプロバイダの画面で「Facebookログイン」を有効にします。

    Facebook側のページに戻り、左側の設定のからベーシックを押し、アプリID/app secretを確認します。

    Firebase側に戻り、それぞれ埋めます。

    Facebookでクイックスタートからウェブを選択します。

    WebアプリケーションのURLを入力。

    Firebaseの画面に表示されているOAuth リダイレクト URI を Facebook アプリの設定に追加します。

    以上で設定は完了です。

    Signin

    自作のアプリケーションからSigninします

    Facebookログインを試みると、

    よく見るFacebookの承認画面が表示され、ログインを押すと、無事アプリケーションにログインできるようになりました。

    注意すべきところ

    接続元の環境がhttp

    ローカルで開発しているので、http://localhost/ で確認していたのですが、httpでFacebookログインを試みると

    Facebook側で以下のようなアラートが出て、invalid_request

    無視して進めたところ認証エラーが。

    Error getting verification code from facebook.com response: error=invalid_request&error_code=191&error_description

    というエラーが表示されるようになりました。

    その対策としてFirebase Hostingへdeployして、httpsで接続できるようにした上でFacebookとの接続をするようにしました。

    メールアドレスの重複

    既に他のソーシャルアカウントでログインした後に、Facebookアカウントでログインを試みるとエラーが。。

    An account already exists with the same email address but different sign-in credentialsSign in using a provider associated with this email address

    どうやらFirebaseのデフォルトの動きとしてソーシャルアカウントに登録したメールアドレスが、他のソーシャルアカウントで使っている場合、「既に登録してある」と見なされアカウント作成できないようです。

    もちろんFirebaseで承認したアカウントを削除することで、Facebookアカウントでログインできるようになりました。

     

    しかし、やはりユーザーによっては複数ソーシャルアカウントが同一メールアドレスで登録している人も少なくありません。

    設定変更画面から複数メールアドレスの登録を許可させることができます。

    デフォルトでは上段が選択されていますが、下の「複数のアカウントを作成できるようにする」を選択します。

    Google認証に加え、Facebookアカウントでもログインできるようになりました。
    登録アカウントは以下の通り。

    Firebaseはシンプルな認証機能を提供してくれるので、これからアプリケーションを作っていくという場合は最適な選択肢になるのではないでしょうか。

     

     

  • firebase authenticationでユーザーのimport/exportについて調べた

    firebase authenticationでユーザーのimport/exportについて調べた

    はじめに

    Firebase Authentication は、firebase での認証処理を行うための機能です。
    ID/PWによるパスワード認証、電話番号認証、Google、Facebook、Twitterなどソーシャルアカウントを使用した認証を行うことができます。

    本記事はfirebase authenticationでユーザーのimport/exportについて調べました。

    firebase authenticationの責務について

    責務としては認証までです。
    認可については本機能のスコープ外になります。

    詳細は以下参考

    https://apps-gcp.com/firebase-authentication/

     

    コンソール画面での見え方について

    コンソール画面にcsv/json形式でimportする機能があっても良さそうですが、残念ながらそのボタンは見当たりません。

    青い「ユーザーを追加」ボタンを押しても、メールアドレスとパスワードを入力する画面が表示されるのみです。

    対応

    firebase cliを使うことで、具体的には “` firebase auth:import “` コマンドを使うことでimportが可能ということが分かりました。

    https://firebase.google.com/docs/cli/auth-import#syntax

    firebase cliのinstall方法はこちら

    https://firebase.google.com/docs/cli?hl=ja

    jsonファイルを作成する

    試しにtwitter認証アカウントを2つ、Google認証というアカウントを1つ。合計3ユーザーを作成することにします。

    {
      "users": [
        {
          "localId": "1",
          "email": "ec@sumito.jp",
          "emailVerified": null,
          "passwordHash": null,
          "salt": null,
          "displayName": "test1",
          "photoUrl": null,
          "providerUserInfo": [
            {
              "providerId": "twitter.com",
              "rawId": "xxxxxxxxxxxx",
              "email":  null,
              "displayName": "test1",
              "photoUrl": null
            }
          ]
        },
        {
          "localId": "2",
          "email": "sute@sumito.jp",
          "emailVerified": null,
          "passwordHash": null,
          "salt": null,
          "displayName": "test2",
          "photoUrl": null,
          "providerUserInfo": [
            {
              "providerId": "twitter.com",
              "rawId": "xxxxxxxxxxxx",
              "email":  null,
              "displayName": "test2",
              "photoUrl": null
            }
          ]
        },
        {
          "localId": "3",
          "email": "mitsuisumito.viva@gmail.com",
          "emailVerified": true,
          "displayName": "sumito tsukada",
          "photoUrl": "https://lh3.googleusercontent.com/a-/xxx,
          "providerUserInfo": [
            {
              "providerId": "google.com",
              "rawId": "1234",
              "email": "mitsuisumito.viva@gmail.com",
              "displayName": "sumito tsukada",
              "photoUrl": "https://lh3.googleusercontent.com/a-/xxx"
            }
          ]
        }
      ]
    }

     今回はuser.jsonという名前で保存し、読み込ませます。

    $ firebase auth:import ./user.json --hash-algo=HMAC_SHA256  --hash-key=hogehoge
    Processing ./user.json (1451 bytes)
    Starting importing 3 account(s).
    ✔  Imported successfully.
    

    今回はハッシュアルゴリズムをHMAC_SHA256にしましたが、適宜変更してください。

    firebase authentication上でimport確認

    無事importされたようです。

    ちなみに、デフォルトでFirebase authenticationを使いアカウント作成すると、ユーザーUIDはランダム数字になりますが、import形式では任意のIDを指定することができるようです。

    動作確認

    自作のアプリケーションのログイン画面からログインを試みます。

    無事ログインできたようです。

    無事ログイン日時も記載されました

    export

    firebase authenticationに登録されたユーザーは“` firebase auth:export “` コマンドでexportすることができます

    $ firebase auth:export hogehoge --format=json
    Exporting accounts to hogehoge
    ✔  Exported 3 account(s) successfully.

    所感

    firebase authenticationを使えば既存システムからの移行も現実的に見えるかもしれません。
    とはいえ、まだまだ調査すべきところは山のようにあるので、一つ一つ調べていこうと思います。