React Native SDKを使ってニュースアプリを作る（匿名認証を組み込む）

React Native SDKを使ってサンプルアプリを開発してみます。今回はexpoを使って、iPhoneシミュレータで開発を進めていきます。

前回は記事一覧を表示するところまで作りましたので、今回はアプリに匿名認証を組み込みます。次回、ニュースをお気に入り登録する機能を追加します。

React Native SDKで匿名認証を利用する

React Native SDKで匿名認証にはまずReact NativeのAsyncStorageを用意します。

import { AsyncStorage } from 'react-native';

このAsyncStorageをReact Native SDKにセットします。

import config from './config.json';
import NCMB from 'ncmb-react-native';
const ncmb = new NCMB(config.applicationKey, config.clientKey);
ncmb.storage = AsyncStorage;

匿名認証の方法

匿名認証は次のメソッドを実行するだけです。

await ncmb.User.loginAsAnonymous();

ただし、これだけではアプリを起動する度に認証（会員登録）を行ってします。また、認証データの有効期限切れもチェックが必要です。

ストレージに保存された会員情報の取得は次のコードで行います。

let user = await ncmb.User.currentUser();

そして有効期限の確認として、自分自身の情報を取得してみます。

const userData = await ncmb.User.equalTo('objectId', user.get('objectId')).fetch();

この処理がエラーになる場合は、セッションの有効期限が切れていますので、ログアウトします。

await ncmb.User.logout();
let user = null;

そしてセッションの有効期限が切れている場合を含めて、ユーザ情報がない場合は再度匿名認証を実行します。

if (!user) {
  await ncmb.User.loginAsAnonymous();
}

一連の流れについて

一連の流れは次のようになります。これでセッションの有効期限を防ぎながら、匿名認証を利用できます。

import { AsyncStorage } from 'react-native';
import config from './config.json';
import NCMB from 'ncmb-react-native';
const ncmb = new NCMB(config.applicationKey, config.clientKey);
ncmb.storage = AsyncStorage;
(async () => {
  let user = await ncmb.User.currentUser();
  try {
    const userData = await ncmb.User.equalTo('objectId', user.get('objectId')).fetch();
  } catch (e) {
    await ncmb.User.logout();
    let user = null;
  }
  if (!user) {
    await ncmb.User.loginAsAnonymous();
  }
})();
global.ncmb = ncmb;

まとめ

認証できればACLを使ってデータを安全に管理できるようになります。次のステップはニュースのお気に入り登録になります！

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。