Firebase Authを使ったメール認証・Twitter認証のサンプル (React版)

11/1/2017

ウェブ・サービスやスマホ・アプリの開発に欠かせない、ユーザー認証機能。プライバシーに関わる情報も扱うため、精度の高い実装が必要となります。そのため工数も必要となりますが、実装内容は地味で変化も乏しいため、エンジニアのモチベーションが上がらないパートでもあります。

Firebase Authは、Firebaseが提供するクラウド型のユーザー認証サービスです。メール+パスワードの一般的な認証システムだけでなく、Twitter/Facebook/GitHub/Googleアカウントでのログインもサポートし、最小限の作業で認証システムを実装できます。

今回、Reactベースのウェブ・アプリケーションからFirebase Authを利用するサンプルコードを公開しました。Firebase AuthはJavaScriptによるインタフェースを提供しており、ダイナミックにコンテンツを書き換えるシングル・ページ・アプリケーションとの相性も良くなっています。こうした特性をデモするため、Create React Appを使って作成したJavaScriptアプリケーションにFirebase Authを組み込んでみました。UIにはMaterial UIを使用しています。

ソースコード: https://github.com/mshk/firebase-auth-sample

※サンプルを動作させるには、Firebase上にプロジェクトを作成する必要があります。

Firebase Authを設定する

Firebase Authはデフォルトでは全ての認証システムがOFFになっていて、管理者が設定を変更する必要があります。Firebaseコンソールでプロジェクトを開き、サイドバーのメニューから「Authentication」を選択、右ペインのタブから「ログイン方法」を選択します。

Firebase ConsoleでAuthenticationの設定をする

メール/パスワード認証を設定する

「メール/パスワード認証」をクリックすると設定画面が表示されます。この認証パターンでは「有効にする」をチェックするだけでOKです。

Twitter認証を設定する

Twitter認証を行うには、まず認証のベースとなるTwitterアカウントが必要です。ウェブ・アプリケーションを作る場合、アプリケーションの公式アカウントを使うのが良いでしょう。アカウントを作ってログインしたら、https://apps.twitter.com/  で「アプリケーション」を作成します。Twitterアカウントは複数のアプリケーションをもつことができます。ここで「Keys and Access Tokens」のタブをクリックし、「API Key」「API Secret」をコピーします。

Firebase Authの「Twitter」をクリックして、先ほどの「API Key」「API Secret」をフィールドにセットします。今度はFirebase側の「コールバックURL」をコピーし、Twitterのサイトに戻って「Details」タブの「Callback URL」にセットします。

JavaScriptでクライアントを実装する

Firebaseをウェブ・アプリケーションに追加する

Firebaseをウェブ・アプリケーションに組み込むには「Overview」ページで「ウェブアプリにFirebaseを追加」をクリック、表示されるパラメータを自分のプロジェクトにコピーします。

今回のサンプルでは、src/lib/firebase/config.js にこの内容をコピーしています。

アプリケーション起動時に、このパラメータを使ってFirebaseクライアントを初期化します。初期化処理は、src/lib/firebase/index.js にあります。

 

メール+パスワード認証の実装

ユーザー登録

メール+パスワードでユーザーを新規登録するには「email」「password」を引数にして、firebase.auth().createUserWithEmailAndPassword()を呼び出します。

この状態では、Firebaseはアドレス確認のためのメールを送信しません。サービス内でfirebase.auth().currentUser.sendEmailVerification()を呼び出す必要があります。

このサンプルでは「メールアドレスを確認」をタップすると、確認メールが送信されるようになっています。

ログイン

この状態でFirebaseコンソールをチェックすると、ユーザーが追加されていると思います。ユーザーは、同じメールアドレスとパスワードの組み合わせでログインができるようになります。認証処理は、firebase.auth()..signInWithEmailAndPassword()  を呼び出します。

ログイン処理が完了すると、後述するonAuthStateChangedが呼び出されます。

Twitter認証の実装

Twitter認証はポップアップ・ウィンドウの表示から全ての処理をFirebaseが実行してくれるため、必要なのは firebase.auth().signInWithPopup() を呼び出すことだけです。先に `firebase.auth().TwitterAuthProvider()` でTwitter認証用のプロバイダーを作成しておく必要があります。

ログイン状態のチェック

Firebaseのログイン状態のフローは下記のようになります。

  1. firebase.auth().onAuthStateChanged() でログイン状態が変化した時のハンドラーを設定
  2. Firebaseクライアントが初期化を完了すると、1.で設定されたハンドラーが呼び出される
  3. 認証ステータス変更ハンドラーで、firebase.auth().currentUserをチェックする。
    ユーザーが認証済みの場合、currentUserにユーザー情報がセットされている

このサンプルでは、ログイン状態をReactのstateで管理していて、src/components/Login のhandleAuthStateChanged() でsetStateを呼び出してユーザー情報をセットしています。

メールログイン、Twitterログインが完了するとonAuthStateChanged()で指定されたハンドラーが呼び出されます。

このハンドラーは「ログアウト」を実行した場合も呼ばれます。その場合は、同じようにsetStateでユーザー情報をクリアします。

終わりに

非常にざっくりとですが、Firebase Authを使ったログイン処理の実装について解説しました。バックエンドの実装が必要ないため、これだけの処理で面倒な認証を提供することができます。クライアントUIやサービスの開発により長く時間をかけることができるのではないでしょうか?

 

シェアする