Social login is one of the new major features in Baasic. It is a form of single sign-on using existing login information from other major social networking services. At this moment we currently support the most popular providers, including Facebok, Twitter, GitHub and Google.
This post starts a series of articles demonstrating the capabilities of the Baasic social login infrastructure. In this first part we will explain how to configure various social login providers in order to use them with Baasic.
In order to enable social login functionality in your Baasic application, you will first have to set-up login providers on their respective platforms. In this section we’ll guide you through the steps required for each platform - so grab some coffee and join us in this exciting endeavor.
Head over to Facebook Developers page and log in using your Facebook account. Under
My Apps menu, click on the
Add a New App button.
You will be offered with several options, select the
If you did everything correctly, Facebook will now ask you to enter a name for your app. Enter it and you’re ready to click on the
Create a new Facebook App ID button.
We are not done yet, Facebook will now want us to assign our app into a category. For our demo app I’ve chosen the “utilities” category - you can do the same and click on the
Create App ID button.
Now we’ve come to one of the more important parts - the domain configuration. The next step will show you some general information on how you can setup Facebook integration on your site. This is helpful if you intend to do any Facebook integration on your own, however for a Baasic social login this is not needed, as we handle this process for you through our API. Once you’ve entered your site URL, click on the
Unfortunately we’re not done yet, as we still have to configure valid OAuth redirect URIs. This step is important if you intend to use this on multiple domains and it’s also recommended to increase your app’s security. Please note that if you want to allow Baasic dashboard login in your Baasic dashboard app (example: dashboard.baasic.com/apps/my-app-identifier) you must whitelist our redirect URI handler which is
https://dashboard.baasic.com/modules/SocialLoginLandingPage.html. This step is completely optional and you can ignore this if you intend to utilize our API only. So in order to tweak this, from
My Apps menu click on your newly created app.
On the left hand side you should see a
settings menu options - click on that.
Now select the
Scroll down until you see the
OAuth Settings section, then under
Valid OAuth redirect URIs enter your allowed redirect URIs. In my example I used my example app and the Baasic dashboard app.
Since we’re on the settings screen, we can as well copy the App Id and App Secret keys as you will need these to configure the Facebook login in the Baasic dashboard backend. I know that you must be exhausted at this point, but just bear with me as this final step is not complicated. Select the
Basic tab and copy your keys as seen below.
To configure this in the Baasic backend, go to the dashboard and log in using your account. If you are not familiar with the Baasic dashboard, there is an excellent article which covers it. This will explain how to create an app and navigate through it. Once you’re in your app go to Application Settings and simply paste the keys you’ve copied from the Facebook app settings page. Make sure to enter the correct values in the appropriate fields - in this case the Consumer Key is the Facebook App Id and the Consumer Secret is the Facebook App Secret.
We’re finally done, Facebook login is now configured for your Baasic app. Didn’t I tell you that this will be easy?
Facebook frequently changes things on their end, so please give us a shout in the comments section if you notice that the instructions are outdated. We’ll do our best to update it as soon as possible.
Configuring Google is similar in complexity to Facebook. Head over to Google API console and log in. While at the homepage, click on the topmost dropdown field and click on the
Create a project button.
A modal dialog will open up, asking you to enter a project name. Enter it and click on the
Wait a while for Google to set everything up, you can see the status in the lower right corner of the page.
Enable and Manage APIs button in the dashboard.
Credentials option on the left hand side of the following screen.
To use the social login in Baasic we need to configure OAuth2, so from
Add Credentials menu option select
OAuth 2.0 client ID.
You will now be prompted with multiple options; select
Now we should set up authorized domains. Similar to Facebook, Google requires that we include redirect URIs for redirect protection. If you want to allow Baasic dashboard login, simply follow the same steps as for Facebook and whitelist our own redirect URI handler as well. In my example I’ve whitelisted both my example domain and Baasic dashboard domain. When ready, click on the
Once this is done you should see your Client ID and Client Secret in a modal window - this is what you will need to enter on the Application Settings section of your Baasic dashboard app. We’re done with Google.
Configuring GitHub login is pretty straightforward. Head over to GitHub and log in. Click on your account picture and select the
Applications option under
Personal settings menu .
Developer Applications tab and click on the
Register New Application button.
Enter your app name, home page and callback URL and click on
Register Application. GitHub also offers redirect protection, although it does have a wildcard system. More is explained in the GitHub OAuth documentation.
All that is left to do is to copy the Client ID and Client Secret to the Application Settings section of your Baasic dashboard app.
Head over to Twitter Apps page and log in using your credentials. Click on the
Create New App button.
Enter your app name and homepage and click on the
Create your Twitter Application button. Of course, if you don’t have a phone number associated with your account you will have to enter a mobile phone under your account settings and wait for a while until everything syncs up. It is kind of odd that Twitter doesn’t allow a person to create an app without a mobile phone attached to an account. Lucky for me, I already had and older app created for testing purposes.
Once your app is created, copy your Client Id and Client Secret to the Application Settings section of your Baasic dashboard app. You can find your API keys by selecting your application from the Twitter Apps homepage screen and subsequently selecting the
Keys and Access Tokens tab.
This is the first part of a blog post series explaining the social login functionality in Baasic. In this article we’ve demonstrated how to setup various login providers. In the next article we will explain how to use social login in AngularJS.