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

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

React Native SDK ver.2系の使い方【認証の使い方】

f:id:mbaasdevrel:20180306160753p:plain

React NativeでmBaaSを使いやすくするReact Native SDKを非公式に開発しています。

NCMBMania/ncmb-react-native: NCMB SDK for React Native

これまでJavaScript SDKに似せる形で開発してきましたが、TypeScriptに沿った形で書くのに限界があったこと、React Native for Webでも使える形にしたかったので、バージョンアップすることにしました。これまでとは互換性はありませんが、より使いやすくなったはずです。

今回は会員管理(認証)の使い方について解説します。

インストール

SDKのインストールはnpmで行います。

npm i ncmb-react-native

読み込み

import NCMB, { NCMBUser } from 'ncmb-react-native';

読み込めるライブラリはほかにも下記があります。

  • NCMBUser(会員管理)
  • NCMBObject(データストア。保存、更新、削除)
  • NCMBQuery(データストア。検索、取得)
  • NCMBFile(ファイルストア)
  • NCMBAcl(権限管理)
  • NCMBRole(ロール、ユーザやロールのグルーピング)
  • NCMBRequest(NCMBへのリクエスト用。通常は利用しません)
  • NCMBRelation(データストアのリレーション)
  • NCMBGeoPoint(位置情報�)
  • NCMBInstallation(デバイストークン)
  • NCMBPush(プッシュ通知)

初期化

SDKの初期化はアプリケーションキーとクライアントキーで行います。

const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
new NCMB(applicationKey, clientKey);

会員登録処理

ここではユーザ名、パスワードを使った会員登録処理を紹介します。

const user = new NCMBUser;
user
  .set('userName', userName)
  .set('password', password);
await user.signUpByAccount();

ソーシャルを使った認証をサポートしています。

async signUpWith(provider: string, authData: authData): Promise<boolean>

ログイン処理

ユーザ名とパスワードを使ったログイン処理は次のようになります。

const user = await NCMBUser.login(userName, password);

他にメールアドレスとパスワードを使ったログイン処理もあります。

NCMBUser.loginWithMailAddress(mailAddress: string, password: string)

匿名認証は次のようにします。

NCMBUser.loginAsAnonymous(uuid?: string | null)

認証状態の永続化

認証状態を永続的に利用する場合、スマホネイティブの場合は react-native-async-storage/async-storage を、Webの場合はlocalStorageを使います。これは実行時に適用する必要があるので注意してください。設定していない場合は永続化されません。

// Webの場合
NCMB.storage = localStorage;

そして NCMBUser.currentUser() でログインしているユーザ情報が取り出せます。スマホネイティブの場合、AsyncStorageになるので、async/awaitで呼び出す必要があります。

const user = await NCMBUser.currentUser();

ログアウト

ログアウトは NCMBUser.logout() です。これはAPIは呼び出さず、セッションIDを削除しているだけです。

await NCMBUser.logout();

デモ

以下のExpo Snackでデモができます。実機で試す場合にはストレージをAsyncStorageに変更しなければいけません。

NCMB Auth - Snack

まとめ

React Native SDKはネイティブに依存する機能を除いて、すべての実装が完了しています。React Native(Webを含む)でサーバ機能が必要になりましたら、ぜひ使ってみてください。

NCMBMania/ncmb-react-native: NCMB SDK for React Native

中津川 篤司

中津川 篤司

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