ユーザー認証機能を作ろう!Firebaseでプロジェクトを作り込んでいく

前回Firebaseのプロジェクト基本設定が終ったのでFirebaseでプロジェクトを作りんでいきます。

管理画面にログインして自分のプロジェクトのダッシュボードを開くとこんな感じの画面があるので、今回は「ウェブアプリに Firebase を追加」を選択します。

すると、こんな感じのソースコードが表示されるので、プロジェクトで読み込みます。

javascriptなので、</body>の直前あたりがいいでしょう。

フォーム操作をしたいのでjQueryも読み込みます。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var config = {
    apiKey: "123412341234123412341234",
    authDomain: "sample.firebaseapp.com",
    databaseURL: "https://sample.firebaseio.com",
    storageBucket: "sample.appspot.com",
    messagingSenderId: "123412341234"
};
firebase.initializeApp(config);
</script>
</body>

抜粋するとこんな感じになります。

これでfirebaseのinitは完了です。

ユーザー登録機能を作ってみる

コンソールのAuthenticationからログイン方法のタブに移動します。

プロバイダが選択できるのでメール/パスワードを有効にします。

 

JavaScriptのコードはこんな感じ

 firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
   // 失敗した時の処理 
   var errorCode = error.code; //失敗した時のエラーコード
   var errorMessage = error.message; //失敗した時のエラーメッセージ
 }).then(function(user) {
   // 成功した時の処理
   console.log(user); //ここにユーザー情報が入る
 });

emailとパスワードのところに実際の値を入れます。

jQueryで書く、実践的なコードだとこんな感じになるでしょう

$("#user-create-btn").on("click", function(){
  var email = $("#email").val();
  var password = $("#password").val();
 
  firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
     var errorCode = error.code;
     var errorMessage = error.message;
     if(errorCode == "auth/invalid-email"){
       alert("メールアドレスの形式が不正です")
     }
   }).then(function(user) {
     console.log(user);
   });
});

管理者は登録されたユーザーのログイン情報などをコンソールから確認できますし、ユーザー登録後のメール送信などの文章などもコンソールから編集できます。

その他のAPIなどヘルプはこちら

もっとガッツリ書こうと思ってましたが、思ったより短い記事になってしまいましたがそれくらいすごくシンプルにユーザー登録することができます。

 

The following two tabs change content below.

西尾学

会社の代表やってます。遊ぶように仕事やってます。

最新記事 by 西尾学 (全て見る)