Help us understand the problem. What is going on with this article?

Firebaseでログイン画面を作る

More than 1 year has passed since last update.

やりたいこと

Firebaseでログイン画面を実装する(簡単に)

前提

  • Firebaseページのデプロイができる
  • FirebaseコンソールのAuthentificationでEメール、Googleアカウントを有効にしている
  • ファイルの構造はこんな感じのツリーになっている
tree
project
|___functionsなど
|
|___public
| |
| |___login.html #ログインコードを書く場所
| |
| |___success.html #ログイン成功後のページ
| |
| |___terms-of-services.html #利用規約のページ
| |
| |___privacy-policy.html #プライバシーポリシーのページ
...

参考

https://github.com/firebase/firebaseui-web/blob/master/README.md

Next Step

ユーザー管理

コード

login.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Login</title>

    <!-- *******************************************************************************************
       * Firebaseコンソール→全般からWebアプリの初期化に必要なスニペットを貼り付ける*
       ***************************************************************************************** -->

    <!--
    authentificationに必要なライブラリを読み込む
    参考:https://firebase.google.com/docs/web/setup#available-libraries
    -->
    <script src="/__/firebase/6.2.0/firebase-auth.js"></script>

    <!--firebase UIの読み込み-->
    <script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />

    <script type="text/javascript">
        var uiConfig = {
          callbacks: {
            signInSuccessWithAuthResult: function(authResult, redirectUrl) {
              //trueにするとsignInSuccessUrlで定めた場所にリダイレクトされる
              //falseにするとページは遷移しない
              return true;
            },
            uiShown: function() {
              // ログイン画面が出たときに行う作業
            }
          },
          signInFlow: 'popup',
          //認証成功後のページ
          signInSuccessUrl: './success.html',
          signInOptions: [
            firebase.auth.EmailAuthProvider.PROVIDER_ID,
            firebase.auth.GoogleAuthProvider.PROVIDER_ID
          ],
          // 利用規約のページ
          tosUrl: './terms-of-services.html',
          // プライバシーポリシーのページ
          privacyPolicyUrl: './privacy-pocily.html'
        };

        // FirebaseUI ウィジェットの初期化と上のConfigの登録
        // headでauthentification用のライブラリを読み込まないとfirebase.auth()でエラーが出ます。
        var ui = new firebaseui.auth.AuthUI(firebase.auth());
        ui.start('#firebaseui-auth-container', uiConfig);
    </script>
</head>
<body>
    <div id="firebaseui-auth-container"></div>
</body>
</html>

ログインページ

ログインページ

Terms of Service部分は./privacy-pocily.html, Privacy Policy部分は./terms-of-services.htmlで設定したページです。

ちなみに言語の変更も可能です。

認証画面

認証画面

簡単に認証画面ができました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away