Realmアプリの機能を利用して認証機能を作ろう

2022年3月29日(火)
平 昇治千村 健太朗

はじめに

前回は、Visual Studio 2022を利用してモバイルアプリケーションを作成し、MongoDB Realmと接続するまでを説明しました。今回からは、いよいよ実際のモバイルアプリケーションを作っていきます。

作成するアプリ

タイトル

「スーパーマーケットのお惣菜コーナーにおける販売商品の在庫状況と値段の見える化」

目的

共通:フードロスを減らす
販売者側のメリット:割引価格でも売れれば売上を確保できる
購入者側のメリット:定価より安い状態で物を買える機会が増える

概要

登場人物

購入者(買い物客)
販売者(お店の従業員)

ユースケース

・購入者
 ・ユーザ登録(サインアップ)を行う
 ・サインインを行う
 ・トップ画面にて、商品情報を参照する

・販売者
 ・商品情報を登録する
 ・在庫情報や価格を更新する

今回は、上記の「ユーザ登録(サインアップ)」と「サインイン」について、実際に画面と処理を用意していきます。なお、本連載ではMongoDB Realmの機能紹介に比重を置いているので、UIの作りこみをしない想定で進めます。

サインアップの流れ

アプリ起動後の初期画面としてサインイン画面を表示します。サインアップボタンを押すとサインアップ画面へ遷移し、登録に必要な情報(Eメールアドレスなど)を入力してサインアップを実施(このタイミングで認証用のメールをEメールアドレスに送付)します。

メールに書かれているURLにアクセスすることで登録完了となり、サインイン可能な状態になります。赤囲みはMongoDB Realmの機能を用いて実装するものを表現しています。

サインインの流れ

サインインはサインアップ完了後に行います。サインインに必要な情報(Eメールアドレスとパスワード)を入力してサインインを行い、サインイン後はトップページを表示します。赤囲みはMongoDB Realmの機能を用いて実装するものを表現しています。

Realmアプリの設定

まずは、サインアップの流れに記載した「認証用メール送付」と「認証用URLにアクセスした際の登録処理」を実装していきます。MongoDB Realmの認証機能、HTTPSエンドポイント機能、Function機能を活用するので、各機能について簡単に紹介します。

・MongoDB Realm認証機能
MongoDB Realmには、Realm DBをはじめとするRealmの各機能にアクセスするための認証・認可の機能が備わっています。今回扱う認証機能では、第3回で利用したAPI Keyによる認証の他にもEメールアドレスとパスワードを利用した認証や、Google、AppleなどのOIDCプロバイダを利用した認証、後述するRealm Functionを利用したカスタム認証など、様々な認証方式を手軽に利用できるようになっています。

【参照】https://docs.mongodb.com/realm/authentication/providers/

・MongoDB Realm Function機能
MongoDB RealmではAWS lambdaのようないわゆるFaaSの機能が提供されています。Realm Functionを利用すると、node.jsを利用して簡単な処理をさせることができます。作成したFunctionは先述の認証時に利用したり、外部からのアクセスを受け付けてWebサーバのように利用したり、定期的なスケジュール実行に利用したりできます。ただし、2022年3月現在ではライブラリ含めてサイズに10MBの上限があり、あまり重い処理をさせることはできません。

【参照】https://docs.mongodb.com/realm/functions/

・MongoDB Realm HTTPSエンドポイント機能
Realm Functionを呼び出せるHTTPSのエンドポイントを作成する機能です。特定のパスとFunctionを紐付けたり、認証認可の機能を付けたりできます。

【参照】https://docs.mongodb.com/realm/endpoints/

それでは、これらの機能で実際にEメールを利用した認証をアプリに実装していきましょう。

認証用URLにアクセスした際のユーザ登録処理

エンドポイントを用意

左メニューのHTTPS Endpointsから「Add An Endpoint」をクリックします。

HTTPS Endpointを作成する画面が開くので、以下のとおりに入力します。

Route:/user/confirm
HTTP Method:GET
Function:+New Function
Function Name:confirmEmailFunc
Functions:以下に置き換え

exports = async function(payload, response){

  const token = payload.query.token;
  const tokenId = payload.query.tokenId;

  await context.http.post({
    url:"https://<REGION>.aws.realm.mongodb.com/api/client/v2.0/app/<APP-ID>/auth/providers/local-userpass/confirm",
    body:{ 'token': token, 'tokenId': tokenId} ,
    encodeBodyAsJSON: true
  });

  response.setBody("サインアップが上手くいったよ");
  
  response.setHeader("Content-Type","text/html; charset=UTF-8");
  
  return { status: 'success' };

};

<REGION>には、Endpoints画面上部のOperation Typeに記述されているリージョン名を指定します。この場合は「us-east-1」を指定します(この値はRealmアプリをdeployしているリージョンに沿った値になります)。

<APP-ID>はRealmアプリのIDです。例えば「sampleApp-xxxxx」のようになります。/api/client/v2.0/app/<APP-ID>/auth/providers/local-userpass/confirmは、ユーザ確認を行うAPIです。リクエストパラメータからtokenとtokenidの値を受け取りユーザ確認を行います。

RealmSDKでの「confirmUserAsync()」に相当する処理になります。

【参照】https://docs.mongodb.com/realm-sdks/dotnet/latest/reference/Realms.Sync.App.EmailPasswordClient.html#Realms_Sync_App_EmailPasswordClient_ConfirmUserAsync_System_String_System_String_

この設定を行うことにより、指定したHTTPSエンドポイントにアクセスがあった場合にFunctionが実行されるようになります。入力が終わったらSaveを押します。

Functionの認証を変更

Functionsメニューよりさきほど作成したFuntionのSetting画面を開きます。

AuthenticationをSystemに変更し、Saveします。

サインアップ時に確認メールを送る設定

認証プロバイダの設定

Authenticationメニューより、Email/PasswordがEnableになっていることを確認し、EDITを押します。

User Confirmation Method:Send a confirmation email
Email Confirmation URL:さきほど作成したHTTPエンドポイントを指定します
Email Confirmation Subject:送付するEメールの件名になります。任意の値を入れます。

Saveを押して変更内容を確定します。

この設定により、RealmSDKを用いてRegisterUserAsync()をcallした場合に確認用のメールが飛ぶようになります。

おわりに

今回は、MongoDB Realmの認証機能、Function機能、HTTPSエンドポイント機能を利用して、ユーザー登録(サインアップ)とサインインを行うための処理を構成しました。今回説明した情報をまとめると、以下のとおりです。
  • 認証プロバイダの設定により、ReamSDK(≒モバイルアプリ)からユーザ登録処理(RegisterUserAsync())を呼ぶことで登録確認用のメールを送付
  • メール文中には確認用のURLが入る。その値はHTTPSエンドポイントで設定したURL
  • 作成したHTTPSエンドポイントにGETリクエストがあった場合、confirmEmailFuncファンクションを実行
  • confirmEmailFuncファンクションでユーザ確認処理をする

次回は、実際にモバイルアプリケーションからユーザーの登録処理(サインアップ)とサインインを行なう処理を実装していきます。お楽しみに!

クリエーションライン株式会社 EDIT所属
通信キャリア会社のクラウドポータル開発や自動車関連会社のIoTシステム開発などを経験。最近は社内向けのシステム開発に従事。北陸を愛し、北陸を盛り上げたいエンジニア。富山事業所のツイッターで何人かでいろいろと呟いてます。
Twitter: https://twitter.com/cl_toyama
クリエーションライン株式会社 Exploratory Development & Incubation Team
クリエーションライン株式会社 EDIT所属、Linux Foundation公認kubernetesインストラクター。アプリケーション開発と千台規模のオンプレミスサーバ運用を経て、DevOpsとkubernetesの世界に触れる。 現在はKubernetes基盤の構築やサポートやトレーニングに従事。富山事業所メンバーと富山を盛り上げるべく活動中。
Twitter: https://twitter.com/cl_toyama

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています