【WPF】C# で Firebase Authentication を使う２

2020-01-13C#Authentication,Firebase,MaterialDesign,WPF

1. はじめに
2. アカウント作成画面を作る
3. メールとパスワードでアカウント作成

はじめに

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

【WPF】C# で Firebase Authentication を使う

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

/wpf-firebase-authentication/

なので今回はその続きです。

アカウント作成画面を作る

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 側にちゃんとデータが出来上がっています。

成功ですね。

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

2020-01-13C#Authentication,Firebase,MaterialDesign,WPF