When building an app with Appery.io, you can use social networks to authenticate users, this can be handy if your app requires registration. Instead of providing new credentials, they can use their​ social network login. We currently have the following OAuth supported providers:

• Twitter;
• Facebook;
• Google.

When a user logs in via a social network, a new user will be created in Users collection of the Appery.io database. Appery.io X-Appery-Session-Token will be returned for further API calls.

📘

Invoking Social Network API

Returned token doesn’t allow triggering social network providers API. It’s only valid for Appery.io API calls, for example, the Database REST API. In other words, you won't be able to invoke a Facebook API to get a list of your friends. In order to do this, you will need to setup the standard Facebook login functionality.
You can find instructions on how to do it here

Creating Your App on the OAuth Provider Side

🚧

Before You Begin

Before you can complete the following steps you must make sure you have an account with the social media platform you wish your app to connect to.

📘

Video instructions

Some of these steps are described in our video tutorials about social login. The only difference is that the video shows how to set up social integration, not social login.

Facebook

1. Go to https://developers.facebook.com/ and log in.
2. Click My Apps > Create App.
3. Choose Build Connected Experiences and click Continue.
4. Enter your App Display Name and App Contact Email and click Create App.
5. In the section Add Products to Your App find Facebook Login and click Set Up.
6. At left find and click Facebook login -> Settings.
7. In Valid OAuth Redirect URIs paste URL according to your project type:

https://appery.io/app/view/<YOUR APPERY.IO APP ID>/assets/static/social_login.html

https://appery.io/app/view/<YOUR APPERY.IO APP ID>/

https://appery.io/app/view/<YOUR APPERY.IO APP ID>/SomePage.html

8. At the left, click Settings -> Basic.
9. Add appery.io to App Domains.
10. Scroll down and click Add Platform. Choose Web. Use the following Site URL as a template, but use your own Appery.io App ID:

https://appery.io/app/view/<YOUR APPERY.IO APP ID>/

11. Click Add Platform and choose Android. In Google Play Package Name fill your package name. Use this template to fill Class Name input, but use your own android package name:

<YOUR ANDROID PACKAGE NAME>.MainActivity

12. Go to https://appery.io/app/res page.
13. Find your Android certificate and click the Export to zip button.
14. Save the archive to your computer and extract its files.
15. Copy the contents of <cert_name>.sha1 file and convert it to base64. Paste base64 value into the Key Hashes input on the Facebook page.

📘

Debug builds

For the debug builds, Key Hashes will be the same for all projects:
Ojrok9wK7TfjqFwcUQyl9NugzmM=
For the release builds, Key Hashes will depend on the certificate you used to sign the application.

16. Enable Single Sign On toggle.
17. Click Add Platform and choose iOS. Fill Bundle ID and Enable Single Sign On toggle.
18. Click Save Changes
19. Scroll up. Copy App ID. Go to your Appery project -> App Settings -> Cordova Plugins. Enable Facebook Connect plugin. Click Options, add "APP_ID" as key and paste App ID as value. Add "APP_NAME" as key and your Facebook app Display Name as value. Click Save Options.
20. Return to the Facebook page. On the opened page there will be App ID and App Secret values. Use them as Client Id and Secret Id for setting up database social connection as described here

Twitter

1. To create a new Twitter app, go to https://apps.twitter.com/. Click Create New App, enter the required information. Enable Sign in with Twitter option during app creation. As Callback URL paste URL according to your project type:

https://appery.io/app/view/<YOUR APPERY.IO APP ID>/assets/static/social_login.html

https://appery.io/app/view/<YOUR APPERY.IO APP ID>/

https://appery.io/app/view/<YOUR APPERY.IO APP ID>/SomePage.html

2. Click Create your Twitter application.
3. Then, open the Keys and Access Tokens tab to locate the API Key and API Secret. Use them as Client Id and Secret Id for setting up database social connection as described here

Google

📘

Google Sign-In difference

Unlike other sign-in options, for Google social sign in you will need to create three client Id for a web application, Android and iOS builds.

To create projects with Google, you need to register with https://console.developers.google.com first.

1. Select a project or create a new one, naming it (here: ApperyioGoogle) and accepting the terms of usage.
2. On the main page, paste Api & Services into the search input. Click on Api & Services found product.
3. Click on OAuth consent screen option on the left. Follow instructions to set up the consent screen. During set up, add ./auth/userinfo.profile scope.
4. After set up, click Credentials options on the left. Click Create credentials and choose OAuth client ID option.
5. Now, on the opened screen, choose the Web application option as the Application type. Set application name (ex: ApperyAppWeb). In Authorized JavaScript origins section, click Add URI and paste https://appery.io. In Authorized redirect URIs section click Add URI and paste URL according to your project type:

https://appery.io/app/view/<YOUR APPERY.IO APP ID>/assets/static/social_login.html

https://appery.io/app/view/<YOUR APPERY.IO APP ID>/

https://appery.io/app/view/<YOUR APPERY.IO APP ID>/SomePage.html

6. Click Create. Click again Create credentials and choose OAuth client ID option.
7. Now, on the opened screen, choose the Android option as the Application type. Set application name (ex: ApperyAppAndroid). Fill in the Package name input.
8. Go to https://appery.io/app/res page.
9. Find your Android certificate and click the Export to zip button.
10. Save the archive to your computer and extract its files.
11. Copy the contents of <cert_name>.sha1 file and paste them to the Signing-certificate fingerprint input.

📘

Signing-certificate fingerprint

For the debug builds, Signing-certificate fingerprint will be the same for all projects:
3A:3A:E8:93:DC:0A:ED:37:E3:A8:5C:1C:51:0C:A5:F4:DB:A0:CE:63
For the release builds, Signing-certificate fingerprint will depend on the certificate you used to sign the application.

12. Click Create. In the opened popup copy to the clipboard Client Id.
13. Open your project.
14. Go to Project -> App settings -> Cordova plugins.
15. Locate Google SignIn, click the corresponding checkbox to activate it. Open Options.
16. Add the WEB_APPLICATION_CLIENT_ID as parameter name and paste the copied value from the clipboard.
17. Return to Google Developers Console. Click again Create credentials and choose OAuth client ID option.
18. Now, on the opened screen, choose the iOS option as the Application type. Set application name (ex: ApperyAppiOS). Fill in the Bundle ID input. Click Create
19. Find the list of created OAuth 2.0 Client IDs, find created iOS line, and click on the download icon on the right. You will download .plist file. Open it with text editor and find REVERSED_CLIENT_ID string. Copy it to the clipboard.
20. Open your project.
21. Go to Project -> App settings -> Cordova plugins.
22. Locate Google SignIn. Open Options.
23. Add the REVERSED_CLIENT_ID as parameter name and paste the copied value from the clipboard.
24. Find the list of created OAuth 2.0 Client IDs, find created Web Application line, and click on the edit icon on the right. On the opened page there will be Client ID and Client secret values. Use them for setting up database social connection as described here

Using Your Credentials

📘

Google and Facebook providers

For Google and Facebook providers, this step is required only if you need to test social login on preview.

After your app has been created, use the provided credentials to configure the connection under the database settings: go to Database > Your database > Social connections, click the Add an app button, select the needed social network, and specify the needed credentials:

Social Login API

Please go to the Social Login JavaScript API page.

Authentication Events and Statuses

There are some events and statuses that are generated during the authentication process. You can use these events or status to properly track an authentication phase or hook any custom logic. Status can be retrieved by using the getStatus method.

Initially, authentication status equals to unauthorized. Before starting the authentication procedure, the dbloginstart event fires and the authentication status changes from unauthorized to inProgress.

After getting the response from an Appery.io database or a social network, the dbloginend event fires. Also, the status changes to authorized if successful or to error in case of a failure.

Normally, when launching an app on a mobile device, the token will be received automatically a few seconds after a user has logged in. The token will be returned as a parameter to the defined callback.