はじめに
前回 WPF で Firebase Authentication の認証処理を作ったんですが、アカウント作成の処理を忘れていました。

【WPF】C# で Firebase Authentication を使う
Firebase Authentication とは、Google が無料で提供している サービスの1つで 簡単に認証処理を入れることができます。Authentication 以外にも Cloud Storage や Realti...
なので今回はその続きです。
アカウント作成画面を作る
MaterialDesign の Flipper コントロールを使って、こんな機能を盛り込んでみました。

ログイン画面と、アカウント作成画面が入れ替わります。
Flipper コントロール の使い方は簡単で、このように表面と裏面を書くだけで機能しちゃいます。
<materialDesign:Flipper Style="{StaticResource MaterialDesignCardFlipper}">
<!-- 表面 -->
<materialDesign:Flipper.FrontContent>
<StackPanel>
<TextBlock Style="{StaticResource MaterialDesignHeadline4TextBlock}" Text="Sign In" />
<TextBox materialDesign:HintAssist.Hint="Email Address" Style="{StaticResource MaterialDesignFloatingHintTextBox}" />
<TextBox materialDesign:HintAssist.Hint="Password" Style="{StaticResource MaterialDesignFloatingHintTextBox}" />
<Button Style="{StaticResource MaterialDesignRaisedDarkButton}" Content="Sign In" />
<Button Style="{StaticResource MaterialDesignFlatButton}" Command="{x:Static materialDesign:Flipper.FlipCommand}" Content="Create an account" />
<Button Style="{StaticResource MaterialDesignFlatButton}" Content="Forgot password?" />
</StackPanel>
</materialDesign:Flipper.FrontContent>
<!-- 裏面 -->
<materialDesign:Flipper.BackContent>
<StackPanel>
<TextBlock Style="{StaticResource MaterialDesignHeadline4TextBlock}" Text="Create an account" />
<TextBox materialDesign:HintAssist.Hint="Email Address" Style="{StaticResource MaterialDesignFloatingHintTextBox}" />
<TextBox materialDesign:HintAssist.Hint="Password" Style="{StaticResource MaterialDesignFloatingHintTextBox}" />
<Button Style="{StaticResource MaterialDesignRaisedDarkButton}" Content="Create an account" />
<Button Style="{StaticResource MaterialDesignFlatButton}" Command="{x:Static materialDesign:Flipper.FlipCommand}" Content="Sign In" />
<Button Style="{StaticResource MaterialDesignFlatButton}" Content="Forgot password?" />
</StackPanel>
</materialDesign:Flipper.BackContent>
</materialDesign:Flipper>
それで、表面と裏面をひっくり返したい場合は、ボタンに下記コマンドを付けるだけ。
Command="{x:Static materialDesign:Flipper.FlipCommand}"
App.xaml で「Flipper.xaml」リソースも読み込むようにします。
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml" />
メールとパスワードでアカウント作成
ボタンのクリックイベントに直接書いちゃってます。
private async void CreateAccount_Click(object sender, RoutedEventArgs e)
{
// 認証オブジェクト作成
using (var auth = new FirebaseAuthProvider(new FirebaseConfig(API_KEY)))
{
try
{
// 電子メールとパスワードでユーザーを作成する
var authLink = await auth.CreateUserWithEmailAndPasswordAsync(Email.Text, Password.Text);
}
catch (Exception ex)
{
throw;
}
}
}
前回取得した API Key を使って FirebaseAuthProvider を作り、CreateUserWithEmailAndPasswordAsync に メールとパスワードを渡すとアカウントを作成してくれます。
試しに実行してみました。
このように、Firebase 側に ちゃんとデータが出来上がっています。

成功ですね。
あとは、認証した人のデータを出し入れ出来るようにするだけです。