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

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

React Native用JavaScript SDKがFacebook認証に対応しました

f:id:mbaasdevrel:20180306160753p:plain

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

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

今回はFacebook認証の使い方を紹介します。

下準備

まずFacebook DevelopersでFacebookアプリを登録します。

f:id:mbaasdevrel:20190809154159p:plain

次に app.json を開いて、下記を追加します。facebookAppIdはアプリのIDで、facebookSchemaはiOS - Facebookログインの4.プロジェクトを構成するを構成する、の下にある fb ではじまる文字列です。これは fb + アプリID となっているようです。

"facebookScheme": "fb369...982",
"facebookAppId": "369...982",
"facebookDisplayName": "NCMB Login",

また、このアプリIDはmBaaSの管理画面でも設定し、Facebook認証を有効にしてください。

f:id:mbaasdevrel:20190809154222p:plain

使い方

では実際の使い方です。まず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認証はよく使われるものになるでしょう。ぜひ使ってみてください。

中津川 篤司

中津川 篤司

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