はじめに
本ブログではSAPのローコード・ノーコードプログラミングツールであるSAP AppGyverとGoogle Firebaseの連携について３回にわたって紹介します。
- 第１回：SAP AppGyver x Firebase① Google Firebaseとの連携
- 第３回：SAP AppGyver x Firebase③ Cloud FirestoreとFirebase Storageによるデータベース・ストレージ機能
SAP AppGyver
モバイル、デスクトップ、ブラウザ、テレビなど、あらゆるデバイスに対応したアプリケーションが作成可能なノーコードプラットフォームです。ドラッグ＆ドロップの操作を中心に少ないコーディングで簡単にアプリケーションを開発できます。
参考：SAP AppGyverの基本 変数の操作
今回は、SAP AppGyverで接続やロジックの作成が標準でサポートされているGoogle Firebaseを使用します。Google Firebaseと連携させることで、簡単にユーザー認証機能やデータベース機能、ストレージ機能を付け加えることができ、開発できるアプリケーションの幅を広げることができます。近々に、SAP AppGyverオリジナルとなるBackend as a Serviceの機能がリリース予定となっていますので、そちらの機能にもご期待ください。
前回は、Google Firebaseの連携に必要な基本設定について説明しました。今回は、Firebase Authenticationによるユーザー認証機能（ログイン機能やサインアップ機能）の追加について説明します。目次は以下の通りです。
- Firebase側の設定
- SAP AppGyver側の設定（Auth）
- Loginページの作成
- Signupページの作成
- Current Userの取得
- 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を使ってデータベース機能、ストレージ機能を追加していきます。
- SAP Managed Tags:
