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に変更しなければいけません。
まとめ
React Native SDKはネイティブに依存する機能を除いて、すべての実装が完了しています。React Native(Webを含む)でサーバ機能が必要になりましたら、ぜひ使ってみてください。