【WPF】C# で Firebase Authentication を使う

Firebase Authentication とは、Google が無料で提供している サービスの１つで 簡単に認証処理を入れることができます。

Authentication 以外にも Cloud Storage や Realtime Database もあるので、簡単に高機能なアプリケーションを作ることができます。

今回はそのうちの Authentication サービスを使って WPF に認証機能を入れてみようと思います。

開発環境

• Windows 10 Home 1903
• Microsoft Visual Studio 2019
• MaterialDesignThemes 3.0.1
• MaterialDesignColors 1.2.2
• FirebaseAuthentication.net 3.4.0

ログイン画面を作る

まず初めに、ログイン画面を作ります。

「MaterialDesignThemes」を使うと こんな画面がサクッと作れちゃうのでおすすめです。

https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit

私は常に使っているので、今回もバンバン使っていきます！！

NuGet から「MaterialDesignThemes」パッケージを入れる

新規プロジェクトを作って NuGet から「MaterialDesignThemes」パッケージを入れます。

必要な Resource を読み込む

MaterialDesignThemes で画面を作成するため、使うコントロールのリソースを「App.xaml」で読み込みます。

<Application x:Class="WpfApp1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBox.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.LightGreen.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

Button、Card、TextBlock、TextBox のコントロールを使うので それぞれ読み込んでいます。

あとアプリケーションのテーマカラーを設定するため「LightGreen.xaml」も読み込みます。

このテーマカラーを変えれば、簡単に色が変えれるので便利です。

例えば「LightBlue.xaml」を読み込めばこんな感じに変わります。

ログインに必要なコントロールを配置する

ログインに必要なコントロールを配置します。

今回は、メールアドレスとパスワードで認証するので その入力用の TextBox と、認証処理を開始する Button を配置しました。

アカウント作成とパスワード再発行の機能は今回入れないけど、付けておきました。

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp1"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800" Background="#FFE9E9E9">
  <Grid>
    <materialDesign:Card Background="#FFFAFAFA" Foreground="{DynamicResource PrimaryHueMidForegroundBrush}" Width="370" Padding="8" Margin="0,30,0,0" VerticalAlignment="Top" HorizontalAlignment="Center">
      <StackPanel Margin="30,0">
        <TextBlock Style="{StaticResource MaterialDesignHeadline4TextBlock}" Text="Sign In" HorizontalAlignment="Center" Margin="0,10" />
        <TextBox x:Name="Email" materialDesign:HintAssist.Hint="Email Address" Style="{StaticResource MaterialDesignFloatingHintTextBox}" VerticalAlignment="Center" Margin="0,5" />
        <TextBox x:Name="Password" materialDesign:HintAssist.Hint="Password" Style="{StaticResource MaterialDesignFloatingHintTextBox}" VerticalAlignment="Center" Margin="0,5" />
        <Button x:Name="SignIn" Style="{StaticResource MaterialDesignRaisedDarkButton}" Content="Sign In" Margin="0,30" />
        <Button x:Name="CreateAccount" Style="{StaticResource MaterialDesignFlatButton}" Content="Create an account" />
        <Button x:Name="ForgotPassword" Style="{StaticResource MaterialDesignFlatButton}" Content="Forgot password?" Margin="0,0,0,20" />
      </StackPanel>
    </materialDesign:Card>
  </Grid>
</Window>

スタイルは全て「MaterialDesignThemes」を適応しているので 必要なコントロールを配置するだけで完成します。

認証処理を入れる

ここから処理を入れていきます。

NuGet から「FirebaseAuthentication.net」パッケージを入れる

まず初めに、NuGet から「FirebaseAuthentication.net」パッケージを入れます。

同時にたくさんの必須パッケージも入ります。

Firebase Authentication 処理

「SignIn」ボタンをクリックしたら認証処理を実行するように処理を書きます。

ボタンクリック時

まずは、ボタンクリック時の処理です。

private async void SignIn_Click(object sender, RoutedEventArgs e)
{
  await SignInAsync(Email.Text, Password.Text);
}

ボタンをクリックしたら SignInAsync に メールアドレスとパスワード を渡しています。

SignInAsync

次に、SignInAsync です。

private async Task<FirebaseAuthLink> SignInAsync(string email, string password)
{
  try
  {
    // 認証オブジェクト作成
    var auth = new FirebaseAuthProvider(new FirebaseConfig(string.Empty));
    // 認証
    return await auth.SignInWithEmailAndPasswordAsync(email, password);
  }
  catch (Exception ex)
  {
    throw;
  }
}

これだけで認証処理の完成です。

動作確認１

とりあえず、実行してみます。

応答の状態コードは成功を示していません: 403 (Forbidden)

エラーになりました。

エラーメッセージを見ると「The request is missing a valid API key.」と書いてあります。

直訳すると、API key がねーよ。

Firebase の準備をしていなかったので、至極当然な結果ですね。

Firebase を準備する

Firebase に 専用のプロジェクトを作って API key を発行します。

https://firebase.google.com/

まず「プロジェクトを作成」を押して、

適当な プロジェクト名 を入力して「続行」を押します。

大したことはしないので アナリティクス は無効にしておきます。

新しいプロジェクトの完成です。

API Key を取得する

作ったばかりのプロジェクトへ行って API Key を取得します。

Firebase のプロジェクトの左メニューにある 歯車をクリックして「プロジェクトの設定」を選択します。

「ウェブ API キー」が API Key なので、コピーして覚えておきます。

認証処理に API Key を設定する

先程手に入れた API Key を認証処理に設定します。

private const string API_KEY = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
private async Task<FirebaseAuthLink> SignInAsync(string email, string password)
{
  try
  {
    // 認証オブジェクト作成
    var auth = new FirebaseAuthProvider(new FirebaseConfig(API_KEY));
    // 認証
    return await auth.SignInWithEmailAndPasswordAsync(email, password);
  }
  catch (Exception ex)
  {
    throw;
  }
}

こんな感じになります。

動作確認２

再度実行して動作確認をします。

応答の状態コードは成功を示していません: 400 (Bad Request)

まだエラーのようですね。

エラーメッセージを見ると「PASSWORD_LOGIN_DISABLED」と書いてありました。

要するに、パスワードログイン機能を有効にしてねって事です。

Firebase Authentication の パスワードログイン を有効にする

Firebase のプロジェクトの左メニューにある「Authentication」をクリックし「ログイン方法を設定」を選択します。

ログイン方法の「メール / パスワード」が 無効 になっているので 有効 にします。

トグルボタン をクリックして有効にします。

動作確認３

もういーかげん飽きてきたと思うけど、もう少し付き合って下さい。

動作確認をします。

エラーだったのでエラーメッセージを見ます。

EMAIL_NOT_FOUND

「EMAIL_NOT_FOUND」ですね。つまり「そんなメールアドレスねーですの」ってことです。

確かにそうですよね。

まだ「test@example.com」でアカウント作ってないですから。

おわりに

という事で認証処理は出来たんですが、アカウント作成処理を忘れていました。

次回、アカウント作成処理を作って行きたいと思います。

続き

Firebase Authentication のアカウント作成 記事を書きました。

https://noitaro.github.io/wpf-firebase-authentication-2/