Back to blog home page

Social Login for AngularJS with Backand

Posted by on Dec 14, 2015

Most users of your web application will likely have user profiles with a number of other common websites, and as such may have trouble trying to remember yet another unique username and password when signing up for your application. To help with this, Backand provides integration with three common social media providers – Facebook, Github, and Google+ (Twitter and LinkedIn are planned for future release). Below we’ll look at the general techniques used for authenticating with a social media provider, and how you can configure your app to leverage these tools effectively.

Setting Access Keys

There are two sets of keys that need to be managed with your Backand application. The first set of keys are used to govern access to your application once a user has been authenticated. These are the Master token and the API Sign-Up Token. The Master token, when coupled with a User’s GUID, allows the user access to your application without requiring a username and password. The API Sign-Up Token is used to register new users with your application programmatically, through the API. Simply send this token through during the registration request to ensure your users are properly created.

The second set of keys is application-specific, and provided by each social media provider. Social media integration requires you to first set up an application object for each social media provider you wish to integrate with. Each one has slightly different requirements, but all three follow the same general pattern – once registered as an API-accessible app, you’ll be given an application ID and an application secret. Enter these items into the appropriate fields on the “Security & Auth” → “Social & Keys” section. Upon completion of sign-in, you will be given a token and an API key to work with that particular application’s authentication and data settings. Don’t forget to disable “Use your credentials for signing in…” for each social media provider with which you wish to integrate.

Upon completion of registration/login via social media, you will likely want to link the new user to an existing user object in your system. This is done using the API Sign-Up Token and Master Token referenced before. Simply use these tokens to register the user with your application, and you are set!

Authentication with GitHub

To integrate with GitHub, perform the following steps:

  1. Register your application on GitHub’s Developer Applications Tab. Include the following details, which are mandatory for new applications:
  2. Application name: A name for your app. Something users will recognize and trust
  3. Homepage URL: Your application’s url (you can use http://localhost for testing purposes)
  4. Authorization callback URL: https://api.backand.com/1/user/github/auth
  5. Record the Client ID and the Client Secret from GitHub
  6. In Backand’s Social Configuration section, enter the Client ID and Client Secret in the correct fields in the GitHub section..

One this has been completed, simply update your client code to handle GitHub logins and you are ready to go. More details on GitHub integrations are available in GitHub’s developer documentation.

Authentication with Google+

In order to add Google app sign-in, follow these steps:

  1. Un-check the ‘Use Back& app for signing in with Google’ toggle/
  2. Open the Google Developer’s Console.
    1. In the Google Developer’s Console, Click Create Project.
    2. Enter a name and a project ID, or accept the defaults, and click Create.
    3. After the project has been created, expand the APIs & auth section on the left sidebar.
    4. Click APIs to view the API Library, which lists all available APIs. The APIs are grouped by product family and popularity. Click on Google+ API under Social APIs
    5. Click Enable API (You should see this under the Google+ API button).
    6. In the sidebar on the left, select Consent screen and enter your product name (this can be your Backand app name).
    7. In the sidebar on the left, select Credentials.
    8. ClickCreate new Client IDand enter the following details:
      1. Application type: Web application (default)
      2. Authorized JavaScript origins: Delete the default example URL and leave this field empty
      3. Authorized redirect URIs: Replace the default example URL withhttps://api.backand.com/1/user/google/auth
    9. Click Create Client ID
    10. Record your Client ID and Client Secret from the dashboard. They can be found in the Client ID for web application
  3. Finally, on the Social & Keys section of the Backand app management dashboard, fill out the Client ID and Client Secret you copied down in the last step.

And with that, you’re ready to use Google+ for user management. For more details on integrating with Google, review their developer documentation.

Authentication with Facebook

In order to add Facebook login integration, follow these steps:

  1. Un-check the ‘Use Back& app for signing in with Facebook’ toggle.
  2. Go to the Facebook Developers console.
  3. Optional: Click MyApps and register as developer
    1. Under My Apps, select Add a new app
    2. Select WWW (web site)
    3. In the wizard that follows, provide your app’s name and click Create New Facebook App ID
    4. Choose a Category and a Sub-Category, then click Create App ID
    5. Click on Skip Quick Start (In the upper right side of the window)
    6. In the sidebar on the left, select Settings
    7. Click on the Advanced Tab
    8. In Valid OAuth redirect URIs enter: https://api.backand.com/1/user/facebook/auth
    9. Click Save Changes
    10. In the sidebar on the left, select Dashboard
    11. Record the App ID
    12. Click Show (near App Secret) and enter your Facebook password.
    13. Record the App Secret
  4. In the Backand dashboard, copy the App ID and App Secret you recorded into the appropriate fields in the Facebook integration section.

And with that, you’re ready to manage users with Facebook. Find out more information on Facebook integration on Facebook’s developers portal.

Conclusion

Backand’s Social Media Integration feature is a powerful offering that allows you to easily manage user information by integrating with a common social media provider. It allows you to quickly get users up-and-running with your app, removing the need to build a complex login and verification system. Backand’s Simple Noterious App, a demo app on Backand’s GitHub page, gives you a ready-to-use example application featuring demonstrations of both techniques of user registration – both native and via social media. Use the example code as a base for driving your app’s user registration, and you’ll find integration with Facebook, Google+, and GitHub easy to implement and manage.

Want to try it now? Login or Signup for a Free-Forever Backand Account.