npm: possibly marvellous

    nativescript-facebook-oauth

    0.0.1 • Public • Published

    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]
    

    Keywords

    none

    Install

    npm i nativescript-facebook-oauth

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • okmttdhr