nativescript-facebook-oauth

Facebook SDKを使用して、iOS、Android共にOAuth認証を実現するNativeScriptプラグインです。

使い方

インストール

npm install nativescript-facebook-oauth

Android

your_app/App_Resources/Android/values/strings.xmlを作成し下記のコードを入力してください。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">sample</string>
    <string name="title_activity_kimera">sample</string>
    <string name="facebook_app_id">{your-app-id}</string>
</resources>

your_app/App_Resources/Android/AndroidManifest.xmlに下記のuses-permission meta-data activityを追加してください。

<?xml version="1.0" encoding="utf-8"?>
<manifest>
	<uses-permission android:name="android.permission.INTERNET"/>
    ...
	<application>
        ...
		<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
		<activity android:name="com.facebook.FacebookActivity"
		          android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
		          android:theme="@android:style/Theme.Translucent.NoTitleBar"
		          android:label="@string/app_name"/>
        ...
	</application>
</manifest>

iOS

your_app/App_Resources/iOS/Info.plistの最下部にある</dict>の前に下記のコードを追加してください(詳細)。

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fb{your-app-id}</string>
    </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>{your-app-id}</string>
<key>FacebookDisplayName</key>
<string>{your-app-name}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>

下記のコードを追加し、Objective-CのAppDelegateクラスをFBSDKApplicationDelegateにconnectしてください(詳細)。

import { connectToFacebookDelegate } from "nativescript-facebook-oauth";
connectToFacebookDelegate();
application.start({ moduleName: "main-page" });

Android/iOS共通

import { FacebookLoginHandler } from "nativescript-facebook-oauth";

// コールバックの処理
const successCallback = function(result) {
  console.log(result.token);
};

const cancelCallback = function() {
  console.log("Login was cancelled");
};

const failCallback = function(error) {
  console.log(error);
};

// ログインの処理
const facebookLoginHandler = new FacebookLoginHandler();
facebookLoginHandler.logInWithReadPermissions(["email"], successCallback, cancelCallback, failCallback); // Permissionsを追加 https://developers.facebook.com/docs/facebook-login/permissions

検証の手順

sample以下にサンプルアプリケーションを作成してあります。

Facebook Applicationの作成

Facebook developersで検証用のアプリケーションを作成します。

basic setupを選択します。

Display Name Contact Email Categoryを入力します。

Create App IDでApplicationが作成されます。Settingを選択し、+Add Platformをクリック、Androidを選択します。

検証用なので、Google Play Package Nameだけ入力します。これでApplicationの作成は完了です。

Application IDの読み込み

Androidの検証ではsample/app/App_Resources/Android/values/strings.xmlの{your-app-id}を作成したアプリケーションのApplication IDに、iOSの検証ではsample/app/App_Resources/iOS/Info.plistの{your-app-id}を作成したアプリケーションのApplication IDに、{your-app-name}をアプリケーションの名前に置き換えてください。

サンプルアプリの実行

下記コマンドで実行できます。

初回

cd sample
tns install
tns platform add [ios | android]
tns run [ios | android]

2回目以降

cd sample
tns plugin remove nativescript-facebook-oauth && tns plugin add ../
tns run [ios | android]