Javascript ログイン認証実装
実行＆記述日 2020/5/18
参考にしたURL：
https://www.youtube.com/watch?v=CvkCjfHts9A
この動画だと不十分（2分50秒くらい）
firabase uiのログインのコピペ部分
https://firebase.google.com/docs/auth/web/firebaseui
この動画をログイン実装部分（〜5分くらいまで）
この内容だと不十分で
この記述のあるページ（2020/5月時点）https://firebase.google.com/docs/web/setup#cdn-%E3%81%8B%E3%82%89
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>login</title>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
</head>
<body>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>
<!-- Add Firebase products that you want to use -->
<script src="js/fire.js"></script>
<script src="js/login.js"></script>
</body>
</html>
不便だった点
動画だとfirebaseのドキュメント に行ってそこから必要なコードをコピーしていくのだが、firebaseの最新ページからだとページレイアウトが変わっていて該当ページへ行けない
ちなみに該当ページはこれ
URL:
https://firebase.google.com/docs/auth/web/firebaseui?hl=ja
上記を組み合わせればログインまでは実装可能となる。
ログアウトはまた別途
2020/5/19追記
ログアウト
ログアウトの際の注意点
ログアウトの際に追加する以下の記述はメインのjsと同じファイルにすると
エラーが出てしまった。
別のjsファイル＆別のhtmlファイルを用意し対応することで今回は回避したが、根本的な解決には至らず。
var mainApp = {};
(function(){
var firebase = app_fireBase;
var uid = null;
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
uid = user.uid;
} else {
// No user is signed in.
uid = null;
window.location.replace('login.html');
}
});
function logOut(){
firebase.auth().signOut();
};
mainApp.logOut = logOut;//ここのmainAPPはkadai.htmlならkadaiApp???→回答：ここのmainApp.logOutをkadai.htmlのログアウトボタンのクリックイベントに指定するのでこのままでOK
})();
動画では上記のベースとなるコードをAuthのドキュメント から取得しているが、firebaseドキュメント から同様のページは見つからず（動画が古い為恐らく画面のレイアウトが変更されている）以下の画像のページを見つけlogoutのコードを書いた。
コピペは画像でドラッグしている箇所
url: https://firebase.google.com/docs/auth/web/manage-users
これでログイン＆ログアウトの実装は完結できた
