C#でFirebaseを使ってみよう！（１）　FirebaseとEmail-Password認証

あすかです。

今回は、Firebaseでファイヤー！してみるおはなしです。

概要

そもそもFirebaseとは？

Google社が提供している、ファイヤー！する人のためのファイヤー！するサービスです。
もっと難しい言葉を使うと、クラウドです。
スマホアプリを作る時に便利なサービスをいろいろ提供してくれる、mBaaSです。

Firebase公式サイトでも紹介されているように、いくつかのサービスが提供されていますが、今回はそのうち以下のサービスに絞ります。

認証（Authentication）
データベース（Database）
ストレージ（Storage）

なんと！クラウドのデータベースやストレージでファイヤー！できちゃう！
ユーザ管理も代わりにやってくれてセキュリティ万全！おトク！
主婦も真っ青になって逃げ出すレベル！

実は他にもRemote Configとか紹介したいものはたくさんあるんですけれど、
どうして上の３つに絞ったかといいますと、

PCLで使えるnugetパッケージが提供されているから！

です。

PCLってことは、スマホはもちろん、Windows Desktopでも使えるってことですよ！！

本連載について

今回は、以下の３つのnugetパッケージを使って、WPF、Xamarin Formsでファイヤー！してみます！

www.nuget.org

連載第１回ということで

今回やること

データベース、ストレージの話は後々するとして、
今回は、認証のおはなしをします！

Firebaseは認証なしでももちろん使うことはできますが、
認証して使うのが基本です。
認証経由しないと、特に誰かにAPI トークン抜かれた時にセキュリティ上問題になります。

というわけで、実用を考えて、まず認証から始めます。

今回は、メールアドレス、パスワードの２つを使って、

新規ユーザ作成
認証

を行います。

今回利用するライブラリでは、実はTwitterやFacebookと連携したSNS認証も可能ですが、今回は扱いません。

設計

ということで！さっそく！設計します！
WPFとXFで動かすということで、やっぱりMVVMです！
青はView、橙はViewModel、緑はModelです。

f:id:kmynews:20170208211817p:plain

FirebaseModelに、Firebaseに接続していろいろするためのあれこれを書き殴ります！

Firebase側の準備

ファイヤー！は、クラウドサービスです。
なので、ファイヤー！するためには、ファイヤー！の準備が必要です。Googleアカウント作成とか。

ファイヤー！公式サイトの右上にある「コンソールへ移動」をクリックします。
Googleアカウントでログインしていない方は、ここでGoogleログイン画面が出てくると思いますので、新規登録するなりログインするなりします。

コンソール画面を開くと「新規プロジェクトを作成」ボタンが出てきますので、これを押します。

f:id:kmynews:20170209192247p:plain

すると、こういう画面が出てきますので、てきとーに情報を入力して新規作成します！

f:id:kmynews:20170209192419p:plain

新規作成処理が完了したらプロジェクトの管理画面にとびますので、
まず、画面左側のメニューから「Authentication」
画面上川のメニューから「ログイン方法」を、順番に選びます。

f:id:kmynews:20170209193602p:plain

ログインプロバイダの一番上に「メール・パスワード」がありますので、これをクリックして、

f:id:kmynews:20170209193655p:plain

有効にして、保存します。

f:id:kmynews:20170209193722p:plain

ぎゃー！かわいい！

f:id:kmynews:20170209193745p:plain

おつぎに、画面左上の設定アイコンを押して、「プロジェクトの設定」を押します。

f:id:kmynews:20170209192531p:plain

こうゆう画面が出てくるので、「ウェブアプリにFirebaseを追加」を押します！

f:id:kmynews:20170209192729p:plain

するとこういう画面が出てきます！

f:id:kmynews:20170209192831p:plain

ここに書いてあるものを使ってFirebaseと通信を行いますので、控えておいてくださいね！
後述しますが、ここに出てきたAPIKeyを、Firebaseと通信を行うメソッドで使うことになります。

プロジェクトの準備

作成するプロジェクト

今回は、Xamarin.Forms、WPFの複合プロジェクトということで、
以下の３つのプロジェクトを作成します。

Xamarin.Forms (Android/iOS)　（「Cross-Platform」のところにあります）　名前：FirebaseNetTest
WPF　名前：FirebaseNetTest.WPF
共有プロジェクト　名前：FirebaseNetTest.Shared

次に、XFとWPFの２つのプロジェクトから、共有プロジェクトへの参照を作成します。

nugetパッケージ

Install-Package FirebaseAuthentication.net

より、nugetパッケージをインストールします。

f:id:kmynews:20170209210605p:plain

プログラミング！

大切なところ以外は全部省略します。詳細なソースコードはGitHubにあげてます。
github.com

FirebaseNetTest.Shared/Models/FirebaseModel.csより。

/// <summary>
/// サインインを行う
/// </summary>
public async Task SignInAsync()
{
	try
	{
		// 認証するためのオブジェクトを作成
		var auth = new FirebaseAuthProvider(new FirebaseConfig(FirebaseToken.ApiKey));

		// 認証を行い、リンクを取得する
		this._authLink = await auth.SignInWithEmailAndPasswordAsync(this.Email, this.Password);

		this.AuthMessage = "サインインに成功しました";
	}
	catch (FirebaseAuthException ex)
	{
		// エラー発生！
		this.AuthMessage = "エラー発生しました！エラーコード：" + ex.Reason;
	}
}

/// <summary>
/// ユーザ作成を行う
/// </summary>
public async Task SignUpAsync()
{
	try
	{
		// 認証するためのオブジェクトを作成
		var auth = new FirebaseAuthProvider(new FirebaseConfig(FirebaseToken.ApiKey));

		// サインアップを行い、リンクを取得する
		this._authLink = await auth.CreateUserWithEmailAndPasswordAsync(this.Email, this.Password);

		this.AuthMessage = "ユーザ作成に成功しました";
	}
	catch (FirebaseAuthException ex)
	{
		// エラー発生！
		this.AuthMessage = "エラー発生しました！エラーコード：" + ex.Reason;
	}
}