So, as I believe most users want the option to choose between logging in via email or an oAuth service, I have created a work around for this that allows Appery developers the ability to add Facebook users (or other oAuth services) into their system User Collections. I'm sure it's not the prettiest or 100% best fix, but it does seem to do the job. Here is how I set it up;
Add the facebook API plugin.
The UI.
Whether you have a login page or dialog, somewhere you will have a "sign-in with facebook button" (see attached image for my dialog as an example). However you have it, in the Design Events for the "facebook" button set it to run the following javascript on click: Helper.init();
Now, build a "facebookUser" page similar to the image I have attached (ignore the pages FacebookLogin and Facebook_me automatically created by the plugin found in your project pages, as you will not be using them). Now, create 3 inputs on the new facebookUser page and set all to "hidden" (uncheck the "visible" boxes in the components properties).
Here is how I have them;
text_input1: FBfirstName
text_input2: FBuserName
password_input1: facebookPassword (here you have to fill in this input's value manually with something generic like "allFBpasswords567") That means, essentially all of your facebook users will have the same "password" in your system User collection. (see attached UI image for example) This is a plus for a couple reasons and I'll discuss why later.
Now (assuming you have added the Facebook API Plugin), you'll have to make a few changes.
In the Facebook_helper.JS file, you'll need to change the URLs from the auto-populated Plugin to this new "facebookUser.html" page target. (the default URL from the plugin is Facebook_Me.html... change this.)
You will also need to make sure you make this change to the website URL callback within your Facebook developer app settings.
Now, to run the services and map the data accordingly into your system collection;
On your "facebookUser" page, set up THREE services;
First service: setup the facebookMe service on this page. This is where you grab the facebook access_token out of local storage and map it to the service request. (assuming you have already created this. If not, be sure you add a local storage access_token variable to which the oAuth service can store the token.) Now, for the response, map the facebook data parameters "username" and "first_name" into the hidden input fields on your facebookUser page mentioned above. You'll notice you don't map anything into the facebookPassword field because you already have that generic password manually set in the UI. Awesome!! Now you have your Facebook User's username, first_name and generic password set in the page's inputs.... Now let's take that data and talk to your system User collection.
Second service (run this service on the above Facebook_me service success): Use your normal userLogin (or whatever you called it) database service here and call it "loginFacebookUser". Map the hidden fields from the facebookUser page into the services request parameters. This should be the info from your FBfirstName, FBuserName & facebookPassword input fields (the ones the FacebookMe service populated). Now map the response into the appropriate local storage variables.
IMPORTANT. if this is a NEW facebook user signup attempt and not a returning facebook user (you'll see why this is important near the end), the login service will not complete because this FBusername doesn't exist. Meaning their username isn't in your User Collection. No problem, on Error, invoke the Third service detailed below (unless of course they WERE already in your User Collection, then you can just set the onSuccess to navigate to the desired page and the user will be both logged in your User collection and oAuth access_token will be stored in local storage).
Third service: Use your normal newUser/userRegistration/userSignup (or whatever you called it) database service here and call it "createFacebookUser". Map the hidden fields from the facebookUser page into the services request parameters. This should be the info from your FBfirstName, FBuserName & facebookPassword input fields (the ones the FacebookMe service populated). Now map the response into the appropriate local storage variables.
Lastly, you need to kickstart the services;
On the facebookUser page, in the design events, invoke the facebookMe service on pageLoad.
In your data events, set your facebookMe service to, onSuccess, invoke loginFacebookUser service. What this does is it takes your facebook user's "username" (which is unique to them. it looks something like firstname.lastname.6), their "first_name" and generic "password" and logs them into your Appery system's User Collection. Then, onSuccess of that login service, navigate your user to whatever page you desire.
Now, if it's a NEW facebook user, on Error, invoke the third createFacebookUser service and navigate to the appropriate page on Success.
Voowala! You should now have your oAuth users logged in or added to your system User Collection.
Of course, if your facebook user somehow manages to logout of the app and wants to log back in, here is the work around for that and why we've created 3 separate services. (again, not pretty, but does the trick).
When any user logs out of your app, I'll assume you have a login page that handles this. Users that originally signed in with Facebook won't know their User email and password (because they used an oAuth service), but they'll more then likely attempt anyway. What I've done here is create a basic javascript alert on the login service error that states something along the lines of;
"oops, incorrect username or password, please try again. If you originally signed in with facebook, be sure to log back in using the "connect with facebook" option." (here you can also set up a password recovery service for those that did NOT use facebook, but simply forgot their credentials.)
Now, when original facebook connect users that got logged out hit the "login with facebook" button again, they'll re-invoke the facebookMe service that grabs the access_token and pulls their facebook username (the same unique username that's stored in your system User collection), first_name, and maps them again to your facebookUser page inputs and that then lastly invokes the loginFacebookUser service.
The great thing about this is you've set the same singular generic password for all facebook users and the loginService will log those users in using their username already in the system User collection with the generic password (which is the same for all).
I have been fiddling with this for a few days now and it seems to work for me as well in-logic. This is in no way an official fix or solution and I take no responsibility for issues these suggested steps may cause within your project. I'm merely trying to share my findings.
