Firebaseのログイン機能を試す

Firebaseで遊ぶ続きです。前回の記事。

Firebaseの「Authentication」の機能を使えば、会員ログイン機能を簡単に実装できます。メールアドレスとパスワードを使ったものから、TwitterやFacebookなどのSNSアカウントと連携したものまで簡単に実装できます。会員サイトを構築するのであればとても役に立ちますね。

試しに使ってみました。

概要

Authenticationを有効にする
ユーザーアカウントを作成
ログイン状態の確認
デフォルトのログインウィジェットを利用してみる
ユーザー情報の更新

Authenticationを有効にする

Firebaseの管理画面でAuthenticationの項目へ移動して、有効にします。ログイン方法としていろんな方法が用意されています。メールアドレス以外にもtwitterなどのSNSを利用することも出来ます。とりあえず「メール/パスワード」を有効にして実験してみます。

アプリとFirebaseの紐付け

先にWebアプリとして登録を行いFirebaseに接続する必要があります。

管理画面の「Project Overview」からWebアプリを作成します。

連携するHostingサイトを設定した後、firebaseの利用に必要なスクリプトが生成されます。その後、HostingページのHTMLに生成されたスクリプトを貼り付けましょう。デフォルトでHosting内に設置されていたindex.htmlにはすでに存在しています。

これらを設定することでFirebaseのプロジェクトとの紐付けが出来ます。他のスマホアプリなども、同じプロジェクトに紐付ければ、アカウントを共有したり相互にやり取りができる様子です。

ユーザーアカウントを作成

アカウントを作成してみます。基本的にはドキュメントに書いてあるのをやってみます。

これをフロント側で実行すればアカウントが出来ます。emailとpasswordに文字列入れれば出来ます。出来たアカウントを管理画面で確認しましょう。

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

ログイン状態の確認

アカウント作成を行うと自動的にログインされます。ログインしているかどうかは以下のメソッドをフロントで実行すれば確認可能です。

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    console.log("login");
  } else {
    // No user is signed in.
    console.log("logout");
  }
});

ログアウトする場合は以下です。

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});

再度ログインする場合はこちら、emailとpasswardに必要な文字列をわたせば良いです。

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

これで一通りのログイン機能でしょうか。後はログインUIを作ったり、肝心のログイン時に利用できる機能を作成していきましょう。

デフォルトのログインウィジェットを利用してみる

ドキュメントに記載されている、デフォルトのログインウィジェットを利用してみます。以下を追加すればできます。簡単です。

必要なライブラリをロードします。firebaseuiという形で利用できるようです。

<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />

フォーム要素に必要な設定を作成して、ログインフォームを定義します。ログイン後のリダイレクト先とか、プライバシーポリシーページへのリンクURLなど設定項目がいくつかあります。

signInOptionの部分で、ログインするために必要な情報を選択出来ます。不要なものは取り除きましょう。

var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      document.getElementById('loader').style.display = 'none';
    }
  },
  signInFlow: 'popup',
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>',
  // Privacy policy url.
  privacyPolicyUrl: '<your-privacy-policy-url>'
};

ログインフォームを表示させる要素をHTMLに設置しておく必要があります。 id=“firebaseui-auth-container”の要素にフォームをレンダリングするつもりです。 <body>の中においておきましょう。

<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>
<p id="load">Firebase SDK Loading&hellip;</p>

最後にレンダリングを開始させればフォームが表示されます。表示されたフォームでログイン等試してみましょう。簡単に実装できとても便利です。

// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

ユーザー情報の更新

メールアドレスとパスワード、管理用の一意なIDのみがある状態です。他の情報も登録できるようなのでやってみます。表示用の名前と、電話番号とかでしょうか。

以下をフロントで実行すればユーザーアカウントの情報を取得できます。もちろんログインしていないとダメです。

var user = firebase.auth().currentUser;
var name, email, photoUrl, uid, emailVerified;

if (user != null) {
  name = user.displayName;
  email = user.email;
  photoUrl = user.photoURL;
  emailVerified = user.emailVerified;
  uid = user.uid;  // The user's ID, unique to the Firebase project. Do NOT use
  // this value to authenticate with your backend server, if
  // you have one. Use User.getToken() instead.
}
console.log(user);

いよいよ更新です。特別なことはせずドキュメントに忠実にやって試します。

var user = firebase.auth().currentUser;

user.updateProfile({
  displayName: "kos",
  photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(function() {
  // Update successful.
}).catch(function(error) {
  // An error happened.
});

もう一度アカウント情報を取得すれば変更後の内容になっています。