ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

【会員管理・認証】会員情報検索の実装方法

f:id:mbaasblog:20181005094936p:plain

会員管理ではデータストアと同じように検索🔍を行うことができます。
今回は実装方法と注意点をブログにしていきます👌

はじめに

f:id:mbaasblog:20181018163713j:plain

こんにちは。mobile backend企画担当の伊藤です。
本日は会員の検索を行う方法をご紹介します⭐

検索の実装方法

実はほぼデータストアと同じ方法で実装できます😃
検索方法も、完全一致だけでなく、部分一致などの検索🔍も可能です👌

但し、デフォルトでは会員データはデータを登録した当事者しか参照できないようになっています! そこで、会員登録時もしくはログイン時に権限を設定する必要があるので注意が必要です⚠

では以下から、アプリから権限を設定する方法を紹介します。

権限設定方法:全員読み込み・書き込み可能にする場合

//参照権限を作成
var acl = new ncmb.Acl();

//全員読み込みも書き込みも可能に設定する
acl.setPublicReadAccess(true)
   .setPublicWriteAccess(true)

//ACLをセットして新規会員登録
 user.set("userName", userName)
   .set("password", password)
     .set("acl", acl)
     .signUpByAccount() //サインアップ処理
     .then(function(user) {
      //成功時の処理
      )}
      .catch(function(err){
        //失敗時の処理
      )};

検索方法の実装方法:完全一致

ncmb.User.equalTo("**フィールド名**", "**検索したいワード**")

検索方法の実装方法:部分一致

ncmb.User.regularExpressionTo("**フィールド名**", ".*" + "**検索したいワード**" + ".*$")

アプリの例

f:id:mbaasblog:20211221174806p:plain

会員管理にスタッフや顧客データを入れていると仮定しましょう。 権限は以下です。

  • スタッフ:スタッフデータも顧客データも参照可能
  • 顧客:自分で登録したデータのみ閲覧可能

上の画像の通り、テキストエリアに部分一致で検索したいワードを入れると ヒットした結果が検索ボタンの下に出てくるようにしましょう📝
まずはHTMLで以下のようにコーディングします。

<h1>スタッフ専用ページ</h1>
    <h3>名前検索</h3>
    名前:<textarea id="name"></textarea>
    <button onclick="nameSearch()">検索</button>
    <!-- ここに結果を表示させる -->
    <div id="nameResult"></div>

では次はJavaScriptのコードを書いていきます📝

function nameSearch(){
    var name = document.getElementById("name").value;
    var nameResult = "";
    //部分一致
    ncmb.User.regularExpressionTo("userName", ".*" + name + ".*$")
        .fetchAll()
        .then(function(results){
                    for(var i of results){
                        nameResult += '<p>' +i['userName'] + '</p>';
                    }
                    document.getElementById("nameResult").innerHTML = nameResult;
        })
        .catch(function(error){
            alert("検索失敗" +JSON.stringify(error));
        });
}

最後に

上記のアプリの例を参考に是非会員情報検索の機能を付けてみてください👫
今回は「全員書込み・読み込み可能」にしましたが、権限はロールごとにも会員ごとにも設定可能です🔓

方法は以下のドキュメントをご参照ください。

データストア (JavaScript) : アクセス権限設定 | ニフクラ mobile backend

また、その他の会員管理の活用方法はeBookでも公開しています🎁

会員管理・ファイルストア活用事例集

f:id:mbaasblog:20181005111552p:plain

伊藤みなみ

mobile backend企画担当。2018年4月、富士通クラウドテクノロジーズに新卒で入社。大学は文系でプログラミングは全くの未経験ですが、日々勉強しております!