読者です 読者をやめる 読者になる 読者になる

C#でFirebaseを使ってみよう!(1) FirebaseとEmail-Password認証

C# WPF Xamarin Firebase

あすかです。

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

概要

そもそもFirebaseとは?

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

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

  • 認証(Authentication)
  • データベース(Database)
  • ストレージ(Storage)

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

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

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

です。

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

本連載について

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

www.nuget.org

www.nuget.org

www.nuget.org



連載第1回ということで

今回やること

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

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

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

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

  • 新規ユーザ作成
  • 認証

を行います。

今回利用するライブラリでは、実はTwitterFacebookと連携した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の複合プロジェクトということで、
以下の3つのプロジェクトを作成します。

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

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

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;
	}
}

認証、たったのこれだけでできてしまうのは気持ちいいですね。

実行!

さて、早速実行しましょう!
WPFの場合は、こんな画面が出てきまして、

f:id:kmynews:20170209204244p:plain

そのままログインしようとするとエラーになりますね。

f:id:kmynews:20170209204316p:plain

ユーザ作成ボタンを押すと、成功しましたと表示されます!

f:id:kmynews:20170209204335p:plain

ここでFirebaseの管理コンソールのAuthenticationをこっそり覗くと、新しいユーザが追加されています。

f:id:kmynews:20170209204354p:plain

今度こそログインボタンを押すと‥‥おおっ、おっ、おおっ!?

f:id:kmynews:20170209204440p:plain

やったー!成功じゃ!ファイヤー!

さて早速Androidでも!その前に、さっきWPFで作ったユーザを削除しておきます。
もしくはAndroidアプリ側でユーザ作成に使うメールアドレスをちょっといじっても可。

f:id:kmynews:20170209204930p:plain

こんな画面が表示されるので、ネギを持ってログイン。はい、だめでしたー!

f:id:kmynews:20170209205007p:plain

ユーザを作成したら、

f:id:kmynews:20170209205027p:plain

やったー成功したよわーいわーい!ファイヤー!

f:id:kmynews:20170209205055p:plain

今回はここまで!

次回は、Firebase Storageでファイヤー!します!

kmycode.hatenablog.jp