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

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

React Native用JavaScript SDKで認証情報を保存できるようになりました

f:id:mbaasdevrel:20180306160753p:plain

スマートフォンアプリはSwiftやJavaのように特定のプラットフォームで利用できるもの、そしてUnityやMonacaのように複数のプラットフォームで動作するものがあります。React Nativeは後者に属する技術です。

以前React Native用SDKを開発していたのですが、バージョンアップなどに伴って利用できなくなっていました。そこでTypeScriptに沿う形で改めてReact Native SDKを開発しはじめました。なお、これは非公式のSDKになりますので、サポート外になります。

今回は認証情報をストレージに保存し、再利用できる仕組みについて紹介します。

使い方

まず React Native のAsyncStorageを用意します。これを ncmb の storage オプションに渡してください。React Native SDK自体に組み込んでも良いのですが、React Nativeのバージョン番号でコンフリクトが発生する場合があるので分けています(expoと組み合わせると発生してしまうようです)。

import { StyleSheet, Text, View, Button, AsyncStorage } from 'react-native';

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

そしてユーザ認証を行います。

user = await ncmb.User.login('userName', 'password');

この時、セッション情報をストレージに記録しています。次に読み込んだ時には、このストレージからユーザ情報を復元しています。

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

ストレージを変更する

まだ実装していませんが、AsyncStorage以外のストレージ(SecureStorageなど)にも対応させる予定です。React Nativeではストレージが幾つか存在するため、必要に応じて変更できるようにします。

コード

コードはNCMBMania/ncmb-react-native: NCMB SDK for React Nativeにて公開しています。ライセンスはMIT Licenseです。

まとめ

使い勝手はなるべくJavaScript SDKに寄せていきます。React Nativeを使った開発でもNCMBをご活用ください!

中津川 篤司

中津川 篤司

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