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.
Configuring logins
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 Website option.
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 Next button.
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 Advanced tab.
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 Create button.
Wait a while for Google to set everything up, you can see the status in the lower right corner of the page.
Click the Enable and Manage APIs button in the dashboard.
Select the 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 Web Application.
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 Create button.
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.
GitHub
Configuring GitHub login is pretty straightforward. Head over to GitHub and log in. Click on your account picture and select the Settings option.
Select the Applications option under Personal settings menu .
Select the 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.
Conclusion
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.
Feel free to leave a comment
comments powered by Disqus