スマートフォンアプリはSwiftやJavaのように特定のプラットフォームで利用できるもの、そしてUnityやMonacaのように複数のプラットフォームで動作するものがあります。React Nativeは後者に属する技術です。
以前React Native用SDKを開発していたのですが、バージョンアップなどに伴って利用できなくなっていました。そこでTypeScriptに沿う形で改めてReact Native SDKを開発しはじめました。なお、これは非公式のSDKになりますので、サポート外になります。
今回はFacebook認証の使い方を紹介します。
下準備
まずFacebook DevelopersでFacebookアプリを登録します。
次に app.json を開いて、下記を追加します。facebookAppIdはアプリのIDで、facebookSchemaはiOS - Facebookログインの4.プロジェクトを構成するを構成する、の下にある fb
ではじまる文字列です。これは fb + アプリID となっているようです。
"facebookScheme": "fb369...982", "facebookAppId": "369...982", "facebookDisplayName": "NCMB Login",
また、このアプリIDはmBaaSの管理画面でも設定し、Facebook認証を有効にしてください。
使い方
では実際の使い方です。まずExpoのFacebook認証ライブラリをインストールします。
$ expo install expo-facebook
そしてこのライブラリを読み込みます。
import * as Facebook from 'expo-facebook';
まず logInWithReadPermissionsAsync
を実行して、Facebook認証を行うためのダイアログが出します。
const response = await Facebook.logInWithReadPermissionsAsync(config.facebook.appId, { permissions: ['public_profile'], });
許可が得られるとアクセストークンが返ってきますので、自分のプロフィール情報を取得します。
const data = await fetch(`https://graph.facebook.com/me?access_token=${response.token}`); const json = await data.json();
そしてmBaaSに送信する認証情報を組み立てます。認証処理は user.signUpWith('facebook', authData)
にて行います。
const authData = { id: json.id, access_token: response.token, expires: response.expires }; const user = new ncmb.User(); if (await user.signUpWith('facebook', authData)) { console.log('Logged in'); } else { console.log('Login failed.'); }
セットアップ
インストールは npm で行います。
npm i ncmb-react-native -S
まずライブラリを読み込みます。
import NCMB from 'ncmb-react-native';
そして初期化します。
import config from './config.json'; const ncmb = new NCMB(config.applicationKey, config.clientKey);
コード
SDKはNCMBMania/ncmb-react-native: NCMB SDK for React Nativeにて公開しています。ライセンスはMIT Licenseです。
まとめ
認証機能はよく使われる機能です。スマートフォンアプリであれば、Facebook認証はよく使われるものになるでしょう。ぜひ使ってみてください。