背景
- Firebaseについて、以下の文書に紹介したことがありました。
- Product for Google IoT Solutions - Firebaseを触ってみた
- Product for Google IoT Solutions - Firebaseとraspberry piをリアルタイムで通信してみる
- Firebaseの認証についての質問がよくあって、この文書に紹介します。
Email/Password認証
Firebase設定
- https://{app_name}.firebaseio.com/ Firebaseマネージメント画面に入ります。
- 左のmenuボタンから、「Login&Auth」をクリックします。
- Email/Password認証画面が表示されて、以下のように設定します
- ドメイン追加
- Email/Password認証を有効化
コード実装
- jsbinを使って、コードを実装して試しました。output専用画面を利用したので、ドメインがjsbin.comじゃなくて、output.jsbin.comです。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>firebase test</title>
<script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="login" type="submit" class="btn btn-default">Firebase Register</button>
</div>
</div>
</form>
<script>
var ref = new Firebase("https://{app_name}.firebaseio.com");
$("#login").click(function () {
ref.createUser({
email : $("#inputEmail3").val(),
password : $("#inputPassword3").val()
}, function(error, userData) {
});
})
</script>
</body>
</html>
Register
- EmailとPasswordを入力して、Firebase Registerボタンをクリックします。
結果
- FirebaseのEmail/Password認証画面の下に、registerしたユーザを表示されます。
Oauth認証(Twitter)
Firebase設定
- https://{app_name}.firebaseio.com/ Firebaseマネージメント画面に入ります。
- 左のmenuボタンから、「Login&Auth」をクリックします。
- Twitterタブをクリックします。
- Twitter認証画面が表示されて、以下のように設定します
- Twitter認証を有効化
- Twitter API KeyとTwitter API Secretを追加
Twitter Callback URL設定
コード実装
- jsbinを使って、コードを実装して試しました。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>firebase test</title>
<script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<button id="login" class="btn btn-primary">Firebase Twitter</button>
<p id="result"></p>
<script>
var ref = new Firebase("https://{app_name}.firebaseio.com");
$("#login").click(function () {
ref.authWithOAuthPopup("twitter", function (error, authData) {
if (error) {
$("#result").text("Login Failed!");
} else {
$("#result").text("Authenticated successfully with payload");
}
});
})
</script>
</body>
</html>
Twitter OAuth 認証
- Firebase Twitter認証ボタンをクリックして、Twitter認証が続きます。
結果
- 画面で、認証成功のログが確認できます。
まとめ
- Firebaseの認証が簡単ですね。
- Facebook, Github, GoogleのOAuth認証もサポートします。Firebaseを使って、アプリを作れば、とても便利ですよね。