[Firebase] Authenticationでログアウトを実装

以前Authenticationによるログインを取り上げましたが、その際にログアウト(サインアウト)処理をすっぱり忘れていましたｗ

結論

結論から言うと以下の通りsignOut()メソッドを実行するだけです。成功したらthen()の箇所に好きな処理を書いてあげます。

firebase.auth().onAuthStateChanged( (user) => {
  firebase.auth().signOut().then(()=>{
    console.log("ログアウトしました");
  })
  .catch( (error)=>{
    console.log(`ログアウト時にエラーが発生しました (${error})`);
  });
});

結論
サンプル
- 実行結果
- ソースコード
参考ページ

サンプル

実行結果

miku3.net

ソースコード

config.js

いつもの設定用JSです。

// コンソールの内容をそのままコピペ
var config = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "test-f76bc.firebaseapp.com",
  databaseURL: "https://test-f76bc.firebaseio.com",
  projectId: "test-f76bc",
  storageBucket: "test-f76bc.appspot.com",
  messagingSenderId: "1111111111111111"
};
firebase.initializeApp(config);

index.html

ログイン画面を担当するページですが、今回こちらは脇役です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Firebase Auth (ログアウト)</title>
  <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
  <style>h1{text-align: center;}</style>
</head>
<body>
  <h1>Hello Firebase Auth (ログアウト)</h1>
  <div id="firebaseui-auth-container"></div>

  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth__ja.js"></script>
  <script src="/js/config.js"></script>
  <script>
    //----------------------------------------------
    // Firebase UIの設定
    //----------------------------------------------
    var uiConfig = {
        // ログイン完了時のリダイレクト先
        signInSuccessUrl: '/auth/logout/done.html',

        // 利用する認証機能
        signInOptions: [
          {
            provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
            signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
            forceSameDevice: false
          }
        ],

        // 利用規約のURL(任意で設定)
        tosUrl: 'http://example.com/kiyaku/',
        // プライバシーポリシーのURL(任意で設定)
        privacyPolicyUrl: 'http://example.com/privacy'
      };

      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      ui.start('#firebaseui-auth-container', uiConfig);
  </script>
</body>
</html>

done.html

今回の主役はこちら。ログアウトボタンを実装しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Firebase Auth (ログアウト)</title>
  <style type="text/css">
    .hide{ display:none; }
  </style>
</head>
<body>
  <h1>...Please wait</h1>
  <div id="info"></div>
  <form>
    <button type="button" id="logout" class="hide">ログアウト</button>
  </form>

  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
  <script src="/js/config.js"></script>
  <script>
    firebase.auth().onAuthStateChanged( (user) => {
      let logout = document.getElementById("logout");

      //-----------------------------------
      // ログインチェック
      //-----------------------------------
      if(! user) {
        showMessage('Not Login', 'ログインしていません');
        logout.classList.add("hide");
        return(false);
      }

      //-----------------------------------
      // ログイン者への処理
      //-----------------------------------
      // ログインメッセージ
      showMessage('Login Complete!', `${user.displayName}さんがログインしました`);

      // ログアウトボタンを表示
      logout.classList.remove("hide");

      // ログアウトボタンを押下
      logout.addEventListener("click", ()=>{
        firebase.auth().signOut().then(()=>{
          console.log("ログアウトしました");
        })
        .catch( (error)=>{
          console.log(`ログアウト時にエラーが発生しました (${error})`);
        });
      });
    });

    /**
     * メッセージ表示
     **/
    function showMessage(title, msg){
      document.querySelector('h1').innerText = title;
      document.querySelector('#info').innerText = msg;
    }
  </script>
</body>
</html>