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

Uncategorized
467 words

はじめに

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

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

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

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

MaterialDesign の Flipper コントロールを使って、こんな機能を盛り込んでみました。

ログイン画面と、アカウント作成画面が入れ替わります。

Flipper コントロール の使い方は簡単で、このように表面と裏面を書くだけで機能しちゃいます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>

それで、表面と裏面をひっくり返したい場合は、ボタンに下記コマンドを付けるだけ。

1
Command="{x:Static materialDesign:Flipper.FlipCommand}"

App.xaml で「Flipper.xaml」リソースも読み込むようにします。

1
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml" />

メールとパスワードでアカウント作成

ボタンのクリックイベントに直接書いちゃってます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 側に ちゃんとデータが出来上がっています。

成功ですね。

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