nativescript-facebook-oauth
by okmttdhr | v0.0.1
Facebook SDKを使用して、iOS、Android共にOAuth認証を実現するNativeScriptプラグインです。
npm i --save nativescript-facebook-oauth
  • Version: 0.0.1
  • GitHub:
  • Downloads:
    • Last Day:   0
    • Last Week:  1
    • Last Month: 7

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]