Firebaseでログイン認証機能を実装する方法(iOS, Facebook, etc)

Firebaseでログイン認証機能を実装

WebサイトにGoogleアカウントやメールなどを利用したログイン認証機能を実装する場合は従来はサーバー側の準備などが必要なため、かなり手間がかかった。

しかし、現在ではFirebaseの認証(Authentication)を使用すれば数分で実装することが可能だ。

ログイン認証の種類は2018年12月現在では9種類が用意されている。一般的なWebサイトやアプリに利用する目的であれば十分だ。

• メール / パスワード
• 電話番号
• Google
• Playゲーム
• Game Center
• Facebook
• Twitter
• GitHub
• 匿名

Firebaseにログインする

Firebaseを使用する場合はまずGoogleアカウントでFirebaseにログインする必要がある。

下記のURLにアクセスしてページ右上のログインから入る。

https://firebase.google.com/

ログインしたらコンソールのページからプロジェクトを作成する。プロジェクト名は何でも良いがサンプルとしてMyLoginとする。

プロジェクトIDは自動で設定されるのでそのままで良い。アナリティクスの地域は日本、Cload Firestoreのロケーションはデフォルトのus-centralにする。

https://console.firebase.google.com/

次にFirebaseを使用するためのコードを取得する。

Firebaseのプロジェクトのページにある</>をクリックすると必要なコードが表示されるのでコピーしてHTMLに貼り付ける。 

ただし、firebase.jsは210KB以上あるので本番でこれを読み込むのは避けたほうが良い。

ログイン認証だけならfirebase-app.jsとfirebase-auth.jsを読み込めば実装できる。(合計約60KB)

<script src="https://www.gstatic.com/firebasejs/5.7.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.1/firebase-auth.js"></script>

ちなみにfirebase.jsを読み込むと開発用の警告がConsoleに表示される。

匿名でログイン認証する方法

まずは一番実装が簡単な匿名ログイン認証について説明する。

簡単すぎるので実際のWebサイトやアプリで利用することはほとんどないだろう。用途は匿名チャットや匿名掲示板くらい。

まず、前述のコードをコピペしたHTMLファイルにログインボタンとログアウトボタンを配置する。

idを付与してボタンはclass="hidden"でdisplay: none;にする。

Firebaseでログイン・ログアウトの状態が判明するのは少し時間がかかるのでロード中のアニメーションを入れて処理が完了した際に必要な箇所を表示させると良いだろう。

<p id="uid"><img src="loading.gif"> Loading...</p>
<button id="login" class="hidden">login</button>
<button id="logout" class="hidden">logout</button>

.hidden {
  display: none;
}

次にfirebase.auth()をconst authに代入してログイン・ログアウト時の処理を記述する。

const auth = firebase.auth()
const login = document.getElementById('login')
const logout = document.getElementById('logout')
login.addEventListener('click', () => auth.signInAnonymously())
logout.addEventListener('click', () => auth.signOut())

これだけでログイン・ログアウトのボタンの実装は完了だ。

あとはログイン状態かどうかをauth.onAuthStateChangedで取得する。

引数にuserを指定してuserがあればログイン状態、userがnullならログアウト状態だ。

サンプルではログイン時はログアウトボタンを表示、ログアウト時はログアウトボタンを表示する処理が記述されている。

ログイン状態がわかりやすいように`${user.uid}でログイン中`と'ログアウト中'も記述されていることに注目してほしい。

auth.onAuthStateChanged(user => {
  if (user) {
    login.classList.add('hidden')
    logout.classList.remove('hidden')
    uid.textContent = `${user.uid}でログイン中`
  } else {
    login.classList.remove('hidden')
    logout.classList.add('hidden')
    uid.textContent = 'ログアウト中'
  }
})

匿名でログイン認証するサンプル

ログインした際のユーザーUIDはFirebaseのAuthenticationにすべて記録される。

Googleでログイン認証する方法

Firebaseでログイン認証をいくつか実装した場合、Googleでログイン認証する人が一番多いだろう。

現在Googleアカウントはほとんどの人が持っているため、アカウントとパスワードを新規作成する手間がないのがメリットだ。

Googleログイン認証のログインは匿名ログインの
auth.signInAnonymously()を
auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider())に書き換えて承認済みドメインに登録するだけだ。

承認済みドメインはAuthenticationのログイン方法の下の方にある。

開発時にはlocalhostや127.0.0.1などの登録も必要になることがある。

この承認済みドメインの登録がないとログインを実行しても以下のエラーがConsoleに表示されログイン不可となる。

Uncaught to {code: "auth/unauthorized-domain", message: "This domain (iwb.jp) is not authorized to run this…se console -> Auth section -> Sign in method tab."}

匿名ログイン認証の際は名前がないのでuidを表示していたが、Googleアカウントであればuser.displayNameで登録されている名前を取得できる。

auth.onAuthStateChanged(user => {
  if (user) {
    login.classList.add('hidden')
    logout.classList.remove('hidden')
    uid.textContent = `${user.displayName}でログイン中`
  } else {
    login.classList.remove('hidden')
    logout.classList.add('hidden')
    uid.textContent = 'ログアウト中'
  }
})

Googleでログイン認証するサンプル

Facebookでログイン認証する方法

Facebookでログイン認証するにはログインプロバイダを有効にするのは同じだが、さらにアプリケーション IDとアプリ シークレットが必要になる。

アプリケーション IDとアプリ シークレットはfacebook for developersから取得できる。

OAuthリダイレクトURIをFacebookアプリの設定に追加するのも忘れずに。

Twitterでログイン認証する方法

手順はFacebookとほぼ同じ。https://apps.twitter.com/ にアクセスしてAPIキーなどを取得・設定する。

ログイン時はTwitterAuthProvider()を使用する。

auth.signInWithRedirect(new firebase.auth.TwitterAuthProvider())

FacebookやTwitterは設定や審査などに時間がかかるので使用する機会は少ないだろう。

GitHubでログイン認証する方法

ログイン時はGithubAuthProvider()を使用する。GitHubAuthProvider()ではないため注意が必要。

FacebookやTwitterよりも設定が簡単。

auth.signInWithRedirect(new firebase.auth.GithubAuthProvider())

長くなりそうなので後半に続く。