はじめに
Firebaseで簡単なログイン機能を実装します。
前回の記事でプロジェクトを作成してあることが前提です。
ほとんどのwebサービスはユーザー認証を行い、ユーザーの情報を保存してます。
今回はユーザー認証の定番emailとpasswordを使ったログイン機能を実装します。
参考にした記事
ログイン機能を作ろう
手順1
Authをクリック
手順2
①ログイン方法をクリック
②メール/パスワードをクリック
③有効にするにチェックして、保存してください
手順3
①ウェブ設定をクリック
②①をコピーしといてください
手順4
①index.htmlを作成
②手順3でコピーしたのを①のコピーを貼り付ける
に貼り付けてください
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>認証テスト</title>
<style>
.header-title {
border-bottom: 1px solid #aaa;
padding: 10px;
text-align: center;
}
.hide {
display: none;
}
#info {
text-align: center;
font-size: 50px;
font-weight: bold;
}
.container {
text-align: center;
}
input[type="email"],
input[type="password"] {
border-radius: 4px;
border: solid 1px #ccc;
font-size: 18px;
margin: 20px 0;
padding: 10px;
width: 250px;
}
#login, #logout {
padding: 5px 40px;
text-decoration: none;
background: #fff;
border-bottom: solid 2px #d0d0d0f7;
border-radius: 4px;
font-weight: bold;
margin-right: 9px;
}
#newuser {
padding: 5px 40px;
text-decoration: none;
background: #fff;
border-bottom: solid 2px #d0d0d0f7;
border-radius: 4px;
font-weight: bold;
margin-left: 9px;
}
</style>
</head>
<body>
<h1 class="header-title">ユーザー認証テスト</h1>
<div class="container">
<div id="input-area">
<div class="email">
<input id="email" type="email" placeholder="メールアドレスを入力" required/>
</div>
<div class="password">
<input id="password" type="password" placeholder="パスワードを入力" required/>
</div>
<button id="login">ログイン</button>
<button id="newuser">新規登録</button>
</div>
</div>
<!-- テキスト表示用 -->
<p id="info"></p>
<div class="container">
<button id="logout" class="hide">ログアウト</button>
</div>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase.js"></script>
<script>
//手順4:①のコピーを貼り付ける
//DOM取得
var inputarea = document.getElementById('input-area');
var newuser = document.getElementById('newuser');
var login = document.getElementById('login');
var logout = document.getElementById('logout');
var info = document.getElementById('info');
//新規登録処理
newuser.addEventListener('click', function(e) {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
firebase.auth().createUserWithEmailAndPassword(email, password)
.catch(function(error) {
alert('登録できません(' + error.message + ')');
});
});
//ログイン処理
login.addEventListener('click', function(e) {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
firebase.auth().signInWithEmailAndPassword(email, password)
.catch(function(error) {
alert('ログインできません(' + error.message + ')');
});
});
//ログアウト処理
logout.addEventListener('click', function() {
firebase.auth().signOut();
});
//認証状態の確認
firebase.auth().onAuthStateChanged(function(user) {
if(user) {
loginDisplay();
}
else {
logoutDisplay();
}
});
function loginDisplay() {
logout.classList.remove('hide');
inputarea.classList.add('hide');
info.textContent = "ログインに成功";
}
function logoutDisplay() {
logout.classList.add('hide');
inputarea.classList.remove('hide');
info.textContent = "";
}
</script>
</body>
</html>
手順5
①メールアドレスを入力
②パスワードを入力
③新規登録をクリック
④ログイン成功画面表示されます
手順6
Firebaseに戻り、Authenticationのユーザーをクリック
先ほど新規登録した情報が表示されます
emailとpasswordを使った認証機能の完成です。
他にも色々な認証機能があるので試してみてください。
終わりに
ハンズシェアでは、エンジニアやデザイナーを募集してます。
部活活動、社内イベント、社外イベント、なども行なっております。
エンジニア
デザイナー
社外イベント
管理画面チラ見せ♡ナイト
11月4日
ハンズシェア もくもく会@六本木
11月7日
ハンズシェア ボドゲ会@六本木
絶賛人気中!もくもく会
ハンズシェア もくもく会 #4