Skip to Content
Technical Articles
Author's profile photo Naoto Akiyama
Naoto Akiyama
June 12, 2022

SAP AppGyver x Firebase② Firebase Authenticationによるユーザー認証機能

はじめに

本ブログではSAPのローコード・ノーコードプログラミングツールであるSAP AppGyverとGoogle Firebaseの連携について３回にわたって紹介します。

SAP AppGyver

モバイル、デスクトップ、ブラウザ、テレビなど、あらゆるデバイスに対応したアプリケーションが作成可能なノーコードプラットフォームです。ドラッグ＆ドロップの操作を中心に少ないコーディングで簡単にアプリケーションを開発できます。

参考：SAP AppGyverの基本　変数の操作

今回は、SAP AppGyverで接続やロジックの作成が標準でサポートされているGoogle Firebaseを使用します。Google Firebaseと連携させることで、簡単にユーザー認証機能やデータベース機能、ストレージ機能を付け加えることができ、開発できるアプリケーションの幅を広げることができます。近々に、SAP AppGyverオリジナルとなるBackend as a Serviceの機能がリリース予定となっていますので、そちらの機能にもご期待ください。

前回は、Google Firebaseの連携に必要な基本設定について説明しました。今回は、Firebase Authenticationによるユーザー認証機能（ログイン機能やサインアップ機能）の追加について説明します。目次は以下の通りです。

  1. Firebase側の設定
  2. SAP AppGyver側の設定（Auth）
  3. Loginページの作成
  4. Signupページの作成
  5. Current Userの取得
  6. Sign out機能の作成

対象者

  • SAP AppGyverでアプリを作ったことがある人（簡易的なものでもOK）
  • Firebaseを初めて触る人

必要準備

  • SAP AppGyver、Firebaseのアカウントの作成
  • SAP AppGyverとFirebaseの連携済み（第1回のブログの内容）

１. Firebase側の設定

まず、Firebase側でユーザー認証機能の設定を行います。Authenticationのページを開き、始めるを選択します。

SAP AppGyverでは、メール/パスワードのログインプロバイダがサポートされているため、今回はメール/パスワードを選択します。

メール/パスワード、メールリンクそれぞれ有効にするか選択できますが、今回はメール/パスワードのみ有効にします。

保存を押すことで、Firebase側のメール/パスワードを使用したユーザー認証機能の設定が完了しました。

2. SAP AppGyver側の設定

続いては、SAP AppGyver側の設定を行っていきます。

まずは、Authタブを開き、Authenticationを有効化します。

認証方法は、先ほどFirebase側で設定を行ったGoogle Firebsae email/password authenticationを選択します。

このとき、自動で生成されたFirebase Authenticationというログインページが作成されます。

下の画面のChoose initial viewより、アプリを起動したとき、最初に現れるページを設定できます。今回はログインページであるFirebase Authenticationに設定します。

続いて、Global canvasのロジックキャンバスを開きます。Firebaseの機能を使うためにはアプリが起動したときに、Firebaseを初期化する必要があります。Flow function marketよりInitialize Firebaseをインストールし、App launchedブロックに接続します。

3. Loginページの作成

先ほど作成したFirebase Authenticationページは以下のような画面になっています。

作りたいUIに合わせて、ロゴやボタンのスタイル、テキストを変更することが可能です。

現在、ログイン機能しかないため、サインアップ機能を追加します。まずは、このログインページにサインアップページへと飛ぶリンクを作成します。

左側のコンポーネントから、TextをLog inボタンの下に配置し、Sign upと表示させます。

Sign upのTextを選択した状態で、下のshow logicを押します。左側のFlow FunctionよりOpen pageをキャンバスへと移動させ、Component tapとつなぎます。Open pageを選択し、propertiesのPage項目に、Sign upページを選択します。（事前にSign upページを作成する or 後ほどSign upページを作成したあとに設定してください。）

続いて、Sign upページのAdvanced PropertiesのAllow page to be opened without authenticationをONにします。そうすることで、ログインしていない状態でもページを開くことが可能になります。

以上により、Sign upのテキストを押すことで、Sign upページへと遷移します。

4. Sign upページの作成

続いて、Sign upページを作りこんでいきます。

同じようなUIを使用するため、Log inページよりContainer2をコピーして、Sign upページに貼り付けます。

ここで、emailとパスワードを一時的に保存するため変数（page variables）をそれぞれ作成します。ここに入力したemailとパスワード情報が保存されます。

サインアップ機能はAPIを使うことで実現します。こちらがサインアップ機能で使用するAPI Referenceです。

DATAタブよりREST API direct integrationをデータリソースに追加します。Resource URLにhttps://identitytoolkit.googleapis.com/v1を設定、またQuery parameterにFirebaseのAPI Keyを設定します。API KeyはFirebaseダッシュボードのプロジェクト設定画面より、確認することができます。

Resource URL https://identitytoolkit.googleapis.com/v1
Key（Query parameter項目） FirebaseのAPI Key

今回は、Create Record（POSTメゾット）を使用します。Create Recordを有効にしたのち、Relative pathに /accounts:signUp を追加します。

Relative path /accounts:signUp

API Referenceに沿って、Schemaを作成します。Custom Schemeを選択し、下の図のようにPropertyを設定していきます。

APIの準備ができたので、ロジックを使って実際にサインアップ機能を実装します。まず、Component tapブロックとCreate Recordをつなぎます。フォームに入力されたメールアドレスとパスワードのユーザーの作成をRecord propertiesより設定を行います。

メールアドレスとパスワードは、page variablesより設定し、ReturnSecureTokenでは、trueを入力します。以上により、フォームに入力されたメールアドレスとパスワードによって、サインアップがなされます。

参考：How to Build User Signup for Firebase in Appgyver?

5. その他の機能

Get Current User

現在ログインしているユーザーのuid（ユーザー固有のid）、メールアドレスなどの情報を得取得。詳細はこちら。

Sign out

サインアウト機能。詳細はこちら。

まとめ

今回は、Firebase Authenticationによるユーザー認証機能について説明しました。あらかじめロジックのFunctionが用意されているFirebase Authenticationを使用することで、ログインやサインアップ、サインアウトなどの機能を簡単に追加することができました。

次回は、Cloud FirestoreとFirebase Storageを使ってデータベース機能、ストレージ機能を追加していきます。

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.