Google買収後、Firebaseのドキュメントもマテリアルデザインになりいい感じです。 Firebaseは、RNがでてきてすぐに対応したBaasの一つです。途中で、SDKが使えなくなり、古いバージョンで使うみたいなハックがあったように記憶しています。今は、問題なく動く(はず)です。
今回は、ちゃんと動くどうかを確かめる上でもユーザ作成あたりをさくっと実装してみます。
Firebaseのサイトに行き、アカウントを作成し、プロジェクトを作成して、”ウェブアプリにFirebaseを追加”をクリックしましょう。
すると、下記のようなAPIキー情報もろもろが出てくるのでメモっておきます。
<script src="https://www.gstatic.com/firebasejs/3.6.1/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: "YOURS", authDomain: "YOURS", databaseURL: "YOURS", storageBucket: "YOURS", messagingSenderId: "YOURS" }; firebase.initializeApp(config); </script>
忘れずにEmail認証をenableしておきましょう。
React Nativeプロジェクトに追加するには、
1. Firebaseモジュールのインストール
$ yarn add firebase
早い噂のyarnを使ってますが、npm install firebase --save
と同義。
2. 初期化
この手の外部サービスは、app/utils/Firebase.js
のようにutils以下に入れるのが私の流儀です。
import * as firebase from 'firebase'; const config = { apiKey: "YOURS", authDomain: "YOURS", databaseURL: "YOURS", storageBucket: "YOURS", messagingSenderId: "YOURS" }; module.exports = firebase.initializeApp(config);
3. 読み込んで使用する
今回は利用できるかのテストなので、componentDidMountにハードコードしてますが、ちゃんと使うにはテキストフィードを用意して、emailとパスワードを取得すれば良いと思います。
import firebase from './app/utils/Firebase'; export default class Kagami extends Component { componentDidMount(){ let email = `test${new Date().getTime()}@test.com`; let password = "hogehoge"; firebase.auth().createUserWithEmailAndPassword(email, password) .catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; if (errorCode == 'auth/weak-password') { alert('The password is too weak.'); } else { alert(errorMessage); } console.log(error); }); }
これをreloadすると、下記のようにユーザが作成されたのがわかると思います。
Firebaseあっさり使えましたね。APIもParseと似ているので楽に使えそうです。