Mobile apps built with AppBuilder can't be submitted to Facebook App Center

[Don]

The phonegap-facebook-plugin (https://github.com/Wizcorp/phonegap-facebook-plugin) does not work with AppBuilder.  If you try to import the plugin it fails with a cryptic error.  It seems that Telerik is already aware of this (see Anton's message from Aug. 6 in this thread:  http://www.telerik.com/forums/using-facebookconnect-plugin-(setup) ).  I know I'm not the only one trying to get Facebook integration in my AppBuilder app.  Here's another thread on the topic:  http://www.telerik.com/forums/icenium-and-facebook-connect-facebook-sdk .

I've already submitted a support ticket but I'm also writing this as a warning to those who are planning on or have already started on an AppBuilder app with Facebook integration (especially login).  Until they fix this, you will not be able to have you app show up in the Facebook App Center.  Considering how hard it is to get people to download apps these days, not being able to have it in the Facebook App Center is a big blow to getting your app out there.  I have an app that I have completed with AppBuilder and Facebook integration using the method that Telerik suggests via their Facebook Sample (http://docs.telerik.com/platform/appbuilder/sample-apps/sample-facebook-api).  Here's the response I get from Facebook when I try to submit it to their App Center for iOS and Android:

"Your app cannot embed the Facebook Login dialog inside a custom web view. Utilize our native Facebook Login SDK, so that users do not need to login twice."

In other words, if your app is using Facebook for login and a user is already logged into Facebook.com or the Facebook app on your mobile device, when the user opens your app they should already be logged in, automatically.  This is not possible with Telerik's Facebook Sample method.  The best, developed solution for this is the phonegap-facebook-plugin.

[Guilherme]

Hello Don

I'm also have the need as you and perhaps we are in a similar situation.
My app also use facebook api using Graph and is not possible to logout.

Telerik should address this issue ASAP!

[Anton Dobrev]

Hello,

The Telerik team is still researching this. Our aim is to construct an AppBuilder-compatible version of the plugin.

Just for your information - the latest version of the plugin contains files that are not supported in the plugin engine that AppBuilder uses and it needs to be entirely re-configured. However, we will need some more time in order to investigate it thoroughly.

@Guilherme - I assume that the user is logged in the native FB app on the device, thus the issue with the logging out your app that you are experiencing.

I will update this thread with more information till the end of the week.

Best regards,
Anton Dobrev
Telerik

 

 

[Anton Dobrev]

Hello,

Just a quick update.  We investigated thoroughly the issue with the plugin.

Here are the results from the current stage of the research:

- The Telerik team will need to update the AppBuilder plugin engine that builds the plugins in the cloud for a project in order to support the import of the plugin in its current form. This is considered for the next AppBuilder 2.6 release.

- We are working on a workaround that will enable the usage of the plugin inside an AppBuilder project. We expect that it will be available in the very near future, possibly next week.


Regards,

Anton Dobrev
Telerik

 

 

[Anton Dobrev]

Hi,

Please find attached the AppBuilder-compatible version of the plugin.

In order to build your application with the plugin:

• Import it in your favorite AppBuilder client.

• Navigate to Plugins > Facebook-AB > plugin.xml from the Project Navigator in the right and open it.

• Remove the two <preference> tags with names – APP_ID and APP_NAME

• Locate the $APP_ID and $APP_NAME configurations for Android and iOS.

• Replace them with the App ID that you obtained from FB and its name.

• Do not forget to add the APP ID also in the CFBundleURLSchemes for iOS. It must look something like fb1111111111111111 after the replacement with an actual App ID.

We prepared a small sample project based on the previous sample Connecting AppBuilder Projects to Facebook with the new plugin and the slightly changed methods of the plugin’s API. It is also attached in the thread. You can import it in AppBuilder following the instructions for recreating existing projects from archive. Do not forget to configure the plugin.xml as explained above.

Let me know if further questions or suggestions arise.

Regards,
Anton Dobrev
Telerik

 

 

[HSLaw]

Thanks Anton, I have some more questions:

1. I have tried the sample Hello-FB-Plugin and used my AppID but in an Android Device, I get the error after tapped Login for the second time (first tap it can login):

This app has no Android key hashes configured.  Configure your app key hashes at ...

How should we fix this? Is it a setting in the Facebook App page ?

2.  Is there a full guide on how we should setup the Facebook App if we want to use for Android & IOS?
E.g:
a) Do we need to create a platform for each and what are the values should we key in for the fields? (for example the Bundle ID in IOS)

b) Do we need to submit item for approval in the setting page?

3. Can this plugin work in Appbuilder / Simulator or it can only works installed as App Package / real device?

Thanks again.

[Anton Dobrev]

Hello,

@HSLaw

1. Yes, for the Android version of the app you need to configure a hash key into the FB app settings in the FB developer portal. In your FB app you need to add a platform - Android. Then follow the instructions from here.

2. I am no entirely familiar with the requirements for iOS. The sample works in iOS without additional configuration. In case your app's submission to the App Store requires approval from FB I assume that the iOS platform should also be configured in the FB Dev Center. You can read more about iOS configurations here. Probably this page and other FB resources would be more informative on this matter.

3. It is recommended that you work with the plugin on real devices. It does not work in the simulator or in the AppBuilder companion app.

Let me know if you have questions.

Best regards,
Anton Dobrev
Telerik

 

 

[HSLaw]

Hi Anton,

May I ask what is actually <RELEASE_KEY_ALIAS> and <RELEASE_KEY_PATH> for the command below?

keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> | openssl sha1 -binary | openssl base64

[HSLaw]

According to the URL: http://stackoverflow.com/questions/17309461/creating-release-key-for-facebook-sdk-3-0-in-android,
it is as below:

-exportcert -alias "youraliasnamethatwasgivenwhileexportineclipse"
-keystore yourkeystorethatsavedwhileexportineclipse >
c:\openssl\bin\release.txt

But we don't use eclipse here, so how do we proceed?

Thanks.

[Anton Dobrev]

Hi,

@HSLaw

Yes, you are right that the procedure for creating a hash in AppBuilder slightly differs than this in Eclipse. Before going to the FB developer portal and create a new Android app you will need to do the following.
 
For Android you need:

• PackageName - as it is entered in the Application Identifier of the AppBuilder project, for example com.mycompany.myappname.
• ClassName - the name of the main activity in the project, which you can see in the AndroidManifest.xml file. You can follow the steps outlined in this tutorial to open the AndroidManifest configuration file in AppBuilder. The activity tag describes the main activity in the project and by default its name is [thePackageName].TelerikCallbackActivity, for example com.mycompany.myappname.TelerikCallbackActivity.
• Key Hashes - you can get the hash for the key used to sign your app in AppBuilder for Google Play or for Development by following these steps:
  
  1. Verify that you have the latest Java Development Kit installed on your machine.
  2. In AppBuilder, open the User Options. (In the title bar, click Welcome, User Name -> Options).
  3. Go to General -> Certification Management.
  4. In the Cryptographic Identities panel select your Google Play cryptographic identity. If you do not have one, create it.
  5. Click Export to export the cryptographic identity, set a password for it, and store it on your local file system.
  6. Run a command prompt and the command below.

Note that you will need also installed the OpenSSL library. The creators of the plugin recommend that If you are generating this hash on Windows (specifically 64 bit versions) to use version 0.9.8e or 0.9.8d of OpenSSL for Windows and not 0.9.8k.

keytool -exportcert -alias "ALIAS" -keystore "path to the .p12 from AppBuilder" -storepass "password-here" -storetype PKCS12 | "path to openssl.exe" sha1 -binary | "path to openssl.exe" base64

Note that ALIAS should be replaced with the name of the .p12 file as exported from AppBuilder, for example, USER NAME, if the .p12 is exported as USER NAME.p12. After you have a release certificate for Google Play, you can follow the same procedure, to obtain a hash for the release ALIAS.

You will receive a key hash which should be entered in the FB app settings. This is the hash of the certificate used to sign the app which will be verified by FB in order to determine that the authorized app is making the request.

Let me know if this works for you and if you have further questions.

Regards,
Anton Dobrev
Telerik

 

 

[Don]

I've tried to import the plugin (FacebookConnect-0-7-1-AppBuilder.zip) into my project but import fails.  I've attached the log files to the ticket associated with this thread (Ticket #859991).  Please help.

[Anton Dobrev]

Hi,

@Don
I assume that the issue is caused by the file and folder names requirements in AppBuilder. The folder nesting which along with the relatively long name of the plugin creates a file path that may exceed the maximum of 260 characters. Could you try with renaming the zip to a very short name and re-import it in AppBuilder?

Regards,
Anton Dobrev
Telerik

 

 

[Don]

Renaming the zip on its own did not work.  So, I tried to rename my project but the "Rename" option was greyed out.  Can you tell me why?

I ended up creating a new project with a very short name and imported everything from my old project into it and that seems to work.  However, I don't have access to my source control history now because it's a new project, which is a drag.  Can you tell me why I couldn't rename my old project?

[HSLaw]

Hi Anton, I still receive error on Facebook Apps:
Invalid Key hash. The key has ... does not match any stored key hashes. Configure you app key hases at ...

These are the settings I have done:

1. Facebook Apps setting:
http://postimg.org/image/63scdlu1r/

2. App Builder
http://postimg.org/image/wmbb1hboh/

3. Cryptographic Identities
http://postimg.org/image/kja61j5a1/

4. Generate hash key
http://postimg.org/image/5rrtj6dhn/

5. Plugin.xml:

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://www.phonegap.com/ns/plugins/1.0"
    xmlns:android="http://schemas.android.com/apk/res/android"
    id="com.phonegap.plugins.facebookconnect"
    version="0.7.1">

    <name>Facebook Connect</name>

    <description>
      This is the official plugin for Facebook in Apache Cordova/PhoneGap!

      The Facebook plugin for Apache Cordova allows you to use the same JavaScript code in your
      Cordova application as you use in your web application.
      Docs: https://github.com/Wizcorp/phonegap-facebook-plugin.
    </description>

    <license>Apache 2.0</license>


    <engines>
        <!-- Requires > 3.3.* because of the custom Framework tag for iOS [CB-5238] -->
        <engine name="cordova" version=">=3.3.0" />
    </engines>

    <!-- JavaScript interface -->
    <js-module src="www/phonegap/plugin/facebookConnectPlugin/facebookConnectPlugin.js"
              name="FacebookConnectPlugin"
            target="phonegap/plugin/facebookConnectPlugin/facebookConnectPlugin.js">
        <clobbers target="window.facebookConnectPlugin" />
    </js-module>

    <!-- android -->
    <platform name="android">

        <config-file target="res/xml/config.xml" parent="/*">
            <feature name="FacebookConnectPlugin">
                <param name="android-package" value="org.apache.cordova.facebook.ConnectPlugin" />
            </feature>
            <access origin="https://m.facebook.com" />
            <access origin="https://graph.facebook.com" />
            <access origin="https://api.facebook.com" />
            <access origin="https://*.fbcdn.net" />
            <access origin="https://*.akamaihd.net" />
        </config-file>

        <source-file src="platforms/android/res/values/facebookconnect.xml" target-dir="res/values" />
        <config-file target="res/values/facebookconnect.xml" parent="/*">
            <string name="fb_app_id">292452870960161</string>
            <string name="fb_app_name">Nice Food</string>
        </config-file>

        <config-file target="AndroidManifest.xml" parent="application">
            <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/fb_app_id"/>
            <activity android:label="@string/fb_app_name" android:name="com.facebook.LoginActivity"></activity>
        </config-file>

        <framework src="platforms/android/FacebookLib" custom="true" />

        <!-- cordova plugin src files -->
        <source-file src="platforms/android/src/org/apache/cordova/facebook/ConnectPlugin.java" target-dir="src/org/apache/cordova/facebook" />

    </platform>

    <!-- ios -->
    <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="FacebookConnectPlugin">
                <param name="ios-package" value="FacebookConnectPlugin"/>
                <param name="onload" value="true" />
            </feature>
            <plugin name="FacebookConnectPlugin" value="FacebookConnectPlugin"/>
            <access origin="https://m.facebook.com" />
            <access origin="https://graph.facebook.com" />
            <access origin="https://api.facebook.com" />
            <access origin="https://*.fbcdn.net" />
            <access origin="https://*.akamaihd.net" />
        </config-file>

        <header-file src="platforms/ios/HelloCordova/Plugins/com.phonegap.plugins.facebookconnect/FacebookConnectPlugin.h" />
        <source-file src="platforms/ios/HelloCordova/Plugins/com.phonegap.plugins.facebookconnect/FacebookConnectPlugin.m" />

        <config-file target="*-Info.plist" parent="FacebookAppID">
            <string>292452870960161</string>
        </config-file>

        <config-file target="*-Info.plist" parent="FacebookDisplayName">
            <string>Nice Food</string>
        </config-file>

        <config-file target="*-Info.plist" parent="CFBundleURLTypes">
          <array>
            <dict>
              <key>CFBundleURLSchemes</key>
              <array>
                <string>fb292452870960161</string>
              </array>
            </dict>
          </array>
        </config-file>

        <!-- Facebook framework -->
        <framework src="platforms/ios/FacebookSDK.framework" custom="true" />

        <!-- System frameworks -->
        <framework src="libsqlite3.dylib" />
        <framework src="Social.framework" weak="true" />
        <framework src="Accounts.framework" weak="true" />
        <framework src="AdSupport.framework" weak="true" />
        <framework src="Security.framework" weak="true" />

    </platform>
</plugin>

I manage to generate the hash key and key in the required information in Facebook Apps.
Then I deployed the apps into Android Phone via App Builder's App Package.

What could be wrong here?

Thanks again.

[Zdravko]

Hello,

@Donald
Would you please open a private ticket where to provide us additional information like the client you use (in-browser or Windows) and project name so we can investigate further?
We might need the steps you have followed as well.

@HS Law
As a solution attempt you can provide the key hash from the error to your app registration settings.
"Key hash <KEY HASH TO ADD IN FACEBOOK> does not match any stored key hashes"

The ultimate process is to create a Google Play certificate, build your app using it via our Publish wizard, export the certificate, obtain the hash and add it to Facebook.

Regards,
Zdravko
Telerik

 

 

[Don]

I can't make a private ticket because I only get one per month and I've already used it.  However, I put the details of the project with the renaming issues in ticket 859991.

[Teo]

Hello,
I have the following problem: when I add the example project I receive the following error:

Failed to load resource: the server responded with a status of 404 (Not Found) http://local/Simulator/cdv-plugin-fb-connect.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://local/Simulator/facebook-js-sdk.js

Why the simulator search the .js files into the main directory ?

[Anton Dobrev]

Hi,

@Teo

The plugin would not work in the simulator and in the companion app. This error is produced from the way the plugins are added to the plugin storage of the app. However, the error should not be displayed in the simulator and block the app, which is a bug that will be addressed with some of the next AppBuilder releases.

For now you will be able to test the app containing this plugin on a physical device.

Let me know if you have questions.

Regards,
Anton Dobrev
Telerik