Firebase Authentication (Remix.asia)

　Google の Firebase Authentication を使えば、自前のデータベース無しでユーザー認証できる。React,webpack,Visual Studio Code(VS Code),Vue Router,jquery などに一切依存しないシンプルな実装サンプル。スタティックファイルだけの既存サイトに javascriptだけで新規登録・ログイン・ログアウトを追加する備忘録。

▼新規登録・ログイン ▲ログアウト

前提は
●以前の「Firebase Functions 1」で「プロジェクト」と「ウェブ(web appli)」まで作成済。
●firebasejs 10.1.0 (Firebase v10)
...▼

■Firebase Console
https://console.firebase.google.com/

　トップメニュー / 構築 / Authentication
▼

▼

　Sign-in method

[ネイティブのプロバイダ] メール/パスワード
▼

▼

　プロジェクトの概要 / プロジェクトの設定
▼

　SDKの設定と構成 / CDN

firebaseconfigパラメータを使用。
▼
auth.html ファイルへフォームと javascript を実装。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Firebase Authentication Sample</title>
</head>
<body style="background-color:black;color:silver">
	<div id="info"></div>
	<form id="formLogin">
		メールアドレス<input id="mail" type="mail" />
		パスワード<input id="pass" type="password" autocomplete="off" />
		<button id="login">ログイン</button>
		<button id="regist">新規登録</button>
	</form>
	<div id="formLogout">
		<button id="logout">ログアウト</button>
	</div>
	<a href="./auth_.html">./auth_.html</a>

	<script type="module">
		import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-app.js';
		import { getAuth
			, createUserWithEmailAndPassword
			, signInWithEmailAndPassword
			, onAuthStateChanged
			, signOut
		} from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-auth.js';

		const firebaseConfig= {
			apiKey: "AIzaSyAm7iF81bPgDrO9RAXC0LyJlCKX8I99999",
			authDomain: "myproject-99999.firebaseapp.com",
			projectId: "myproject-99999",
			storageBucket: "myproject-99999.appspot.com",
			messagingSenderId: "92488499999",
			appId: "1:92488457108:web:3e4835e5fb290378999999"
		};
		const app= initializeApp( firebaseConfig );
		const auth= getAuth();

		const elementInfo= document.getElementById( "info" );
		const elementMail= document.getElementById( "mail" );
		const elementPass= document.getElementById( "pass" );
		const elementFormLogin= document.getElementById( "formLogin" );
		const elementFormLogout= document.getElementById( "formLogout" );

		regist.addEventListener( "click", function( ev ){
			ev.preventDefault();//イベントデフォルト動作をキャンセル
			let m= elementMail.value;
			let p= elementPass.value;

			createUserWithEmailAndPassword( auth, m, p ).then( rt => {
				console.log( "登録 OK" + rt.user.uid );
			} ).catch( er => {
				console.log( "登録 NG" + er.code + "/" + er.message );
				elementInfo.innerText= new Date().toLocaleString() + " 登録エラー";
			} );
		} );

		login.addEventListener( "click", function( ev ){
			ev.preventDefault();//イベントデフォルト動作をキャンセル
			let m= elementMail.value;
			let p= elementPass.value;

			signInWithEmailAndPassword( auth, m, p ).then( rt => {
				console.log( "ログイン OK" + rt.user.uid + "/" + rt.user.email );
				console.log( rt.user );
			} ).catch( er => {
				console.log( "ログイン NG" + er.code + "/" + er.message );
				elementInfo.innerText= new Date().toLocaleString() + " ログインエラー";
			} );
		} );

		logout.addEventListener( "click", function( ev ){
			ev.preventDefault();//イベントデフォルト動作をキャンセル

			signOut( auth ).then( () => {
				console.log( "ログアウト OK" );
			} ).catch( er => {
				console.log( "ログアウト NG" + er.code + "/" + er.message );
			} );
		} );

		onAuthStateChanged( auth, user =>{
			if( user ){
				// User is signed in, see docs for a list of available properties
				// https://firebase.google.com/docs/reference/js/auth.user
				console.log( "onAuthStateChanged" + user.uid + "/" + user.email );
				elementInfo.innerText= new Date().toLocaleString() + " " + user.email + " ログイン中";
				elementFormLogin.style.display= "none";
				elementFormLogout.style.display= "block";
			}else{
				console.log( "onAuthStateChanged User is signed out" );
				elementInfo.innerText= new Date().toLocaleString() + " ログアウト状態";
				elementFormLogin.style.display= "block";
				elementFormLogout.style.display= "none";
			}
		} );
	</script>
</body>
</html>

auth_html ファイルは認証状態を判定するだけ。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Firebase Authentication Sample</title>
</head>
<body style="background-color:black;color:silver">
	<div id="info"></div>
	<a href="./auth.html">戻る</a>

	<script type="module">
		import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-app.js';
		import { getAuth
			, createUserWithEmailAndPassword
			, signInWithEmailAndPassword
			, onAuthStateChanged
			, signOut
		} from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-auth.js';

		const firebaseConfig= {
			apiKey: "AIzaSyAm7iF81bPgDrO9RAXC0LyJlCKX8I99999",
			authDomain: "myproject-99999.firebaseapp.com",
			projectId: "myproject-99999",
			storageBucket: "myproject-99999.appspot.com",
			messagingSenderId: "92488499999",
			appId: "1:92488457108:web:3e4835e5fb290378999999"
		};
		const app= initializeApp( firebaseConfig );
		const auth= getAuth();

		const elementInfo= document.getElementById( "info" );

		onAuthStateChanged( auth, user =>{
			if( user ){
				// User is signed in, see docs for a list of available properties
				// https://firebase.google.com/docs/reference/js/auth.user
				console.log( "onAuthStateChanged" + user.uid + "/" + user.email );
				elementInfo.innerText= new Date().toLocaleString() + user.email + " ログイン中";
			}else{
				console.log( "onAuthStateChanged User is signed out" );
				elementInfo.innerText= new Date().toLocaleString() + " ログアウト状態";
			}
		} );
	</script>
</body>
</html>

■動作確認
https://remix.asia/auth.html

　メールとパスワードを入力して新規登録。
▼

https://remix.asia/auth.html
↓↑遷移してもOK
https://remix.asia/auth_.html
　このままでは、auth.htm, auth_.html をダウンロード・コピー出来る為イタズラされる恐れ。有効な https サイトからに制限する場合...▼
■Google Cloud Console
https://console.cloud.google.com/home/