1. /
  2. /
  3. [Firebase] Authenticationでログアウトを実装
     

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

  • このエントリーをはてなブックマークに追加
  • LINEで送る
この記事は 2019年2月24日 に書かれたものです

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

結論

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

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

サンプル

実行結果

Hello Firebase Auth (ログアウト)
https://miku3.net/auth/logout/
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>

参考ページ

Authenticate with Firebase using Password-Based Accounts using Javascript &nb...
https://firebase.google.com/docs/auth/web/password-auth
Firebase

コメント

コメント欄は休止中です。お問い合わせはこちらからどうぞ。ご質問はTwitterにリプを投げてください。

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal（ペイパル）
PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -

関連した記事

同じカテゴリの記事