React Native+firebaseで自動ログイン機能を作る~その1~

最近では、最速でサービスをリリースするのであれば、React Native+firebaseが最強という声も上がり始めています。

しかし、気軽に試してみようにもいかんせんドキュメントは少ないですし、どこから始めていいのやら?という感じですよね。

今回は、どのようなサービスを作るにも欠かせない自動ログイン機能をReact Native+firebaseで実装してみます。

React Nativeとは

その前に簡単にReact Nativeとfirebaseの説明をしておきます。

React Nativeとは、facebookがオープンソースで提供しているJavaScriptのフレームワークです。

最大の特徴としては、なんといってもiOSとAndroidの両方を一つのソースで開発することができることです。

つまり、従来のようにiOSならばSwift、AndroidならばKotolinといったように別でソースコードを用意する必要がありません。

JavaScript(というかJSX)で動作するので、学習コストが比較的小さいというのも特徴でしょう。

firebaseとは

firebaseとは、Googleが提供しているMBaaSです。

簡単に言ってしまうとバックエンド側で必要な機能を一通り全て提供してくれてるサービスです。

サーバのセットアップやメンテナンスなどはもちろん、auth認証やスマホのpush通知といったアプリに必要な機能もついています。

オンラインでサインアップするだけで、これらの機能が全て使えるので非常に開発スケジュールを短縮することができるというわけなのです。

今回は、firebaseを使って自動ログインを実装するためにreact-native-firebaseというsdkを使います。

自動ログインは、react-native-firebaseを使わなくても実装できるのですが、auth認証だけでなく、storageやDB、push通知などあらゆるサービスを提供してくれており、汎用性が高いので今回はreact-native-firebaseを使うことを考えて進めていきます。

React Nativeのアプリを作成する

では、実際にauth認証をするためのアプリを作成していきましょう。

環境としては、Nodejsがインストールされている前提で進めていきます。

公式に書いてある通り、まずは下記コマンドで制作するアプリを作ってみます。

$ npm install -g create-react-native-app
$ create-react-native-app firebaseAuth
$ cd firebaseAuth

ただ、create-react-native-appで作成したアプリは、Android StudioとXcodeを必要とせず開発できるもののネイティブコード、つまりSwiftやJavaなどのライブラリをコンパイルすることができません。

react-native-firebaseを利用するために、これをejectします。

$ npm run eject

これで、新しいReact Nativeのアプリを制作できました。ついでにreact-native-firebaseのライブラリも追加しておきましょう。

$ npm install --save react-native-firebase

続いて、ログインの認証機能のためにfirebaseを利用するので、firebaseにアプリを登録します。

firebaseにアプリを登録する

firebaseの公式ページに行きます。

そして右上のコンソールへ移動というボタンを押し、プロジェクト作成画面に行きます。

プロジェクトを追加というボタンをクリックすると下記の画面が出てくるので、適当にプロジェクト名を入力して国/地域を日本に設定しておきましょう。

そうするとプロジェクトの画面に移動することができます。

今回はiOSで自動ログイン機能を実装することを考えるので、iOSアプリにFirebaseを追加をクリックして下記の画面が表示されることを確認します。

iOSのバンドルIDの登録を求められるので、作成アプリのバンドルIDを確認しましょう。

バンドルIDの確認方法は firebaseAuth/ios/firebaseAuth.xcodeprj をxcodeで開きます。

firebaseAuth.xcodeprjを開くとIdentify → Bundle Identifier からバンドルIDを確認することができます。

このバンドルIDを入力してアプリを登録を押すと、GoogleService-info.plistをダウンロードできるようになります。

これを記載通り、Xcodeプロジェクトのルートに配置します。

アプリにFirebaseの設定を加える

アプリにFirebaseの初期化を行うため、ios/fiebaseAuth/AppDelegate.mに #import と [FIRApp configure]; を下記のように設定します。

続いてFirebaseのライブラリを読み込ませるためにCocoapodsを使用します。Cocoapodsがインストールされてない場合はここなどでインストールを済ませておいてください。

cd firebaseAuth/ios/
pod init

上記コマンドでCocoapodsのファイルを初期化した上で、Podfileを下記のように編集します。

platform :ios, '9.0'
target 'firebaseAuth' do
  pod 'Firebase/Core', '~> 5.3.0'
end

上記のようにPodfileを変更したら、pod install でFirebaseのライブラリをアプリに読み込ませます。また、react-native-firebaseにもこれらをリンクします。

pod install
react-native link react-native-firebase

これで事前準備は完了です。続いて実際に自動ログインのコードを見ていきましょう。

と言いたいところですが、ここから先は次回の記事に持ち越すことにします笑

まとめ

今回は、React Native + firebaseを使って自動ログインを実装するため前段階の説明をしました。

おそらくしばらくこのシリーズは続くので、気長に見ていってもらえればと思います笑

次回はfirebaseにアプリを登録するところから始めていきます!

SNSでもご購読できます。

コメントを残す

*