Tag Archives: AngularJS

Back to blog home page

Integrating Backand with Ionic Creator

Posted by on Mar 14, 2017

Ionic Creator is an online IDE for Ionic apps that can greatly speed the development of your cross-platform mobile and web application. However, like any IDE, it can pose problems when integrating with some external service providers like Backand. Below, we’ll look at the steps needed to get your Ionic Creator app up and running with the Backand SDK, allowing you to implement serverless apps in the Ionic framework with ease.

Configuring the Connection to Backand

To Enable Back with, you’ll need to update your Ionic Creator app’s “Other JS” section to include a new file name – bkndconfig.js. In this file, replace the entire contents with the following code:

Once the code has been modified, replace the values above with the appropriate values from your Backand application:

  • BACKAND_APP_NAME – This is your app’s name in Backand
  • BACKAND_API_SIGNUP_TOKEN – This is your app’s signup token. It is available in the ‘Security & Auth -> Social & Keys’ section.
  • BACKAND_ANONYMOUS_ACCESS_TOKEN – This is your app’s anonymous access token. It is available in ‘Security & Auth -> Configuration’.

Once these changes have been made, you’ll need to update your application’s code settings.

Code Settings

Next, we’ll update the app’s Code Settings to import the Backand SDK. In ‘Code Settings’, under the ‘External JS’ tab, add these two script URLs:

Once you’ve finished, the External JS tab will have the following content:

Next, under ‘Angular Modules’, add ‘backand’ and ‘app.config’. The end result will have the following content:

Working with the Backand Provider

Now that the external code has been configured, you can start working with the Backand provider in your service class. For example, you can use the following code to pull rows from an ‘items’ object in a Backand application:

Next, we’ll add this function call into a page for display.

Updating the Page Controller

To access this data, we’ll update the page controller to call our ItemsModel and return the relevant rows. To do so, use the following JavaScript to define a getAll() function and store the results in $scope:

Now, we’ll need to update the page’s design to display the new information. To show a list of all the items you’ve obtained:

  • Drag a “List Item” element onto your UI
  • In the page list pane (upper left hand corner), click on ‘List’
  • On the right side of the pane, click on ‘Angular Directives’ and add a new directive with the following details:
    Directive: ng-repeat
    Value: object in data
  • Finally, click on the ‘list-item’ element and change the content to {{object.name}}

And with that, your Ionic Creator app is now connected to Backand!

Learning More

At this point, you have the full power of the Backand SDK available in your Ionic Creator app. You can use the SDK to add more services to your app, providing CRUD functionality, real-time communications, server-side code execution, and more! Simply head over to our documentation to get started.

Back to blog home page

Upgrade Your Apps to Work with Our New Serverless SDK

Posted by on Mar 02, 2017

This post is a quick guide to upgrading your existing Backand-powered applications to work with the new Backand Serverless SDK we announced a couple of weeks ago. We’ll cover the changes made in the SDK, and explore the steps you need to take to get your Backand application up and running with the new API.

What’s changed?

We’ve made a number of changes in our new SDK that make developing against Backand faster than ever. Here’s a brief overview of what changed:

  • Streamlined authentication, making it easier for you to authenticate your users.
  • Improved the process for registering with – and signing in via – social media providers with the addition of new SDK methods.
  • Greatly improved the method in which you interact with Backand objects. Gone are the days of needing to manually construct a URL – simply specify the object name as part of a clearly-named function call to the API, and we handle the complexity for you.
  • We have also streamlined our response data, allowing you to work with the results of calls to your Backand back-end in a more straightforward manner.

And on top of all this, we continue to offer the same secure, scalable, and responsive backend-as-a-service that we always have!

Converting old app code to the Serverless SDK

Next, let’s look at what steps are needed to change a Backand application to work with the new SDK. For reference, we are basing this code off of our base Ionic starter app – see it on the Ionic marketplace at https://market.ionic.io/starters/backand-simple.

Step 1: Add new SDK to bower.json

First, you’ll need to add the new SDK to your bower file.

Step 2: Update Script includes in index.html to include the new SDK.

Start with removing the old SDK by commenting out – or deleting – the following line:

Then, replace it with the new SDK links:

Or, use the CDN files:

Note: You may want to check your dependencies directory for any lingering versions of the old Backand SDK – this can cause cache issues due to competing HTTP Interceptors. Simply remove the old folder from the appropriate directory in your project.

Step 3: Update the user authentication method

User authentication is largely unchanged, with a few notes below:

  • If you have previously disabled anonymous auth in your app, you can re-enable it using Backand.useAnonymousAuth(). This value defaults to true, so if you do not modify the default value you do not need to make any changes.
  • We’ve added new social media authentication functions: socialSignin, and socialSignup. Please note that while some of the examples in our github repos – and some of our documentation – used socialSignUp to refer to the specified function in the Backand SDK, this is no longer valid – the “up” will not be capitalized in the new SDK.

Step 4: Update the method used to detect unauthorized users

The getToken() method has been expanded, to use a promise. Originally this method would return undefined when a user was unauthorized, but this functionality can now be managed via the promise method. In the new SDK, the getToken() method is not as prominent as it was in previous versions, and you are likely to not need it as you work on your app.

Step 5: Change $http usage to use the Backand SDK REST methods:

The Serverless SDK features wrapper methods that can be used in place of the direct HTTP calls used in the previous method. Here’s a quick comparison of the old SDK’s HTTP communications, as compared to the new function-based Serverless SDK:

Step 6: Update data result usage

The old SDK would use code similar to the following when handling responses from Back& API calls:

The new SDK does not store the results in a nested data member, but rather in a root data element. The old SDK stored the response contents in a root property, meaning that the actual data was a subset of this data property – hence the use of result.data.data in the old SDK. With the new SDK, you no longer need the extra level of disambiguation, and can store the data in your application’s object with the following code:

Conclusion

In this post, we covered the Backand Serverless SDK. We touched briefly on the features the new SDK has to offer and walked through the process necessary to convert an existing Backand-powered app to the new API. Most importantly, though, is that we built this SDK based on your feedback, and we want more! Connect with us via social media (Twitter, Facebook), or on StackOverflow, or even directly via comments on our Git repos and contacting customer support – we’d love to incorporate your thoughts and suggestions into the next version.

Don’t have a Backand account? You can get one for free

Back to blog home page

Meet Backand’s New Serverless SDK

Posted by on Feb 14, 2017

Backand is proud to announce our new Serverless SDK. With the launch of this SDK, we offer super-easy access to all core functionality of our powerful backend-as-a-service. We also have compartmentalized our SDK to allow for easy integration on multiple major serverless app development platforms.

In this post, we’ll walk through the new Serverless SDK structure. We’ll outline the core functionality, take a look at the new platform-specific SDKs, and then provide a few examples of how to easily work with Backand in your application.

Serverless SDK Functionality

The Backand Serverless SDK offers quick and easy access to core Backand app functionality:

  • Authentication and Security – The SDK provides easy-to-use functions that wrap all of the functionality necessary to authenticate users with your application, whether via a custom user structure, or by leveraging social media providers for authentication.
  • Object Manipulation – The Backand Serverless SDK offers intuitive and flexible methods that you can use to interact with objects in your Backand application. These are available in the SDK under the ‘object’ property – simply provide the name of the object you wish to work with, and you’re ready to go!
  • Custom Actions and Queries – The SDK offers quick and easy ways to access the custom actions you have defined in your Back& application, again via the ‘object’ interface. We also offer a ‘query’ object, which allows you to easily leverage custom SQL queries built for your application’s specific database needs.
  • File Management for Node.JS Actions – This release makes working with custom server-side Node.JS JavaScript actions a snap. Simply access the ‘file’ property of the Backand SDK, and you can easily add or remove files from your server-side Node.JS action.
  • Quick and Easy Real-time Functionality – Through our integration with Socket.io, you can easily add real-time communication features to your application. Simply make use of the “.on” event handler to subscribe to broadcast events, and you are ready to go!

New SDK Structure

The original SDK was fully built out for each platform on which it was offered. This led to a lot of duplication in functionality. Recognizing this, we’ve chosen a new approach that lets developers more easily work with the SDK on their chosen platform. Below is a quick list of the available SDKs that comprise our Serverless SDK, and how they work together:

  • https://github.com/backand/vanilla-sdk – This is our plain vanilla JavaScript SDK. It can be used with any web application via simple includes. All other SDKs wrap this project and depend upon this project.
  • https://github.com/backand/angular1-sdk – This is our Angular 1 wrapper SDK. This wraps the Vanilla SDK, providing objects and services for Angular 1-based apps that make the SDK a snap to integrate.
  • https://github.com/backand/angular2-sdk – This is our Angular 2 wrapper SDK. Similar to the Angular 1 SDK, it wraps the Vanilla SDK’s functionality with several useful Angular 2 objects, encapsulating all of the functionality into an easy-to-use service provider object.
  • https://github.com/backand/redux-sdk – This is our Redux/ReactJS wrapper SDK. It offers tools to construct all of the Actions, Reducers, and Types necessary to work with the underlying Vanilla SDK, making it very easy to integrate Back& with your Redux application.

Improvements over the previous SDK

In addition to refactoring the code to more closely match how it is used by developers, we’ve made several changes that make working with Back& easier than ever:

  • No more $http – The original SDKs were built around web requests sent with the $http object. All of this has been encapsulated within the SDK, allowing you to replace complex and obtuse JavaScript dedicated to constructing a request with a simple, one-line function call.
  • Promises – The new SDK returns objects as promises, allowing you to more easily handle the responses from your app’s backend in an asynchronous manner. Simply define your callbacks and provide them to the SDK using the ‘.then()’ and ‘.catch()’ functions.
  • Easy Social Sign-On – The new SDK provides quick and easy integration with social media providers, handling all of the back-end complexity of user management and authentication so that you can focus on what makes your app unique.
  • Token Management – Gone are the days of having to manually construct headers – the SDK handles authentication and authorization tokens on your behalf. Simply tell the SDK when someone has signed in or signed out, or even enable anonymous authentication – all with easy-to-use function calls.

Conclusion

Our goal at Backand is to help developers and organizations more easily achieve their application development goals. With the release of our Serverless SDK, we’ve made huge strides in usability and availability of our SDK. You can read more in our documentation, take a look at our Vanilla SDK for an overview of the API, or begin working with the examples on our Github page. With Back&’s new Serverless SDK, you’ll find that creating a cross-platform and cohesive Progressive Web App experience is easier than ever.

Don’t have a Backand account? You can get one for free

Back to blog home page

Are Progressive Web Apps the Future or Just a Fad?

Posted by on Jan 24, 2017

The industry has been talking about progressive web apps (PWAs) for some time now – Google introduced them in 2015, but they’ve taken some time to come mainstream. In case you’re a bit late to the game, PWAs tap into the modern capabilities of the web yet offers a native app-like experience for the user.

Native apps were previously seen by businesses as the golden child of the mobile world as they offered unique experiences that web apps just couldn’t compete with. Most importantly they worked offline and allowed for push notifications – both big selling points for brands but not necessarily deal breakers for the end user. However, as the technology of the web has advanced by leaps and bounds in the last few years, this selling points no longer hold water.

From a user perspective, why would one download an app which takes up precious space on their devices when they could get more or less the same experience on the web? Need to know what the dollar exchange rate is? The weather? Thanks for the quick answers Google! Want to browse an e-commerce site? No problem thanks to the development of responsive web design.

However, by tapping into the technological advances of the modern web which is exactly what progressive web apps do, it’s hard to see the value of developing a native app. The benefits of PWAs for both the company and users are undeniable.

The Advantages of PWAs

No Updates: For users, ensuring that apps are up to date is a pain whereas with PWAs, just like web pages, users get the most updated version every time they visit the site.

Low Friction: Users don’t need to go to app stores, search for the app, download it, wait for it to finish installing and then open it – each of these steps, although simple, will cost you 20% of your users.

High Engagement: PWAs can easily be added to a user’s home screen allowing for instant accessibility. Service Workers offer the ability to send push notifications and can handle caching and content fetching quite easily.

Reliable: Again, Service Workers handle the brunt of things, enabling PWAs to work quickly and smoothly even when the user is offline or has a low-quality network.

Shareable: A positive review from a friend is worth its weight in gold so the fact that PWAs can be shared just like websites (and unlike native apps) via a URL. Building on this, PWAs can easily be bookmarked on a device for quick access without taking up precious space on a device.

Discoverable: Search engines can easily find PWAs because they act as websites. Ever tried getting your native app into the top 50 apps on an app store?

The Disadvantages of PWAs

With all that’s good, comes some bad but is it enough to derail the sudden lunge towards PWAs?

Social Logins: Users have become so used to the simplicity of one-click social logins which aren’t possible with PWAs.

Hardware Technology: PWAs are browser based so if a browser can’t support a technology that your app needs (for example, fingerprint scans), then it’s basically useless.

Discoverability (the other side): App stores get tons of traffic, and while a website can direct traffic to the store for a download, the reverse direction doesn’t work.

The Bottom Line

The real question is, if you’re about to build an app, should you put your time and resources towards a native app or start with a PWA? Like with any decision, there are benefits and drawbacks to both options. But, with the rapid development of web technologies, it seems to us that PWAs are here to stay and they are only going to get better.

Back to blog home page

Authenticate Angular with Azure Active Directory Using Backand

Posted by on Jan 17, 2017

Last week, we discussed at a high level using Azure Active Directory for SSO with Backand. This week, we’re taking a deeper dive into how to do it.

Most apps of a non-trivial nature will, at some point, need to tackle user authentication. While a custom user management system can be a good option, usually you can save some development time by offloading your registration, authentication, and verification functionality to a third party.

If you’ve been working on a hybrid app using tools like Ionic, AngularJS, and Backand, you are given access to multiple authentication options provided by third parties due to Backand’s extensive integration with authentication providers.

Microsoft Azure is one such option that’s growing in popularity among developers and users. Below we’ll look at the steps necessary to integrate Azure Active Directory (Azure AD) and Active Directory Federation Services (ADFS) into your Backand-powered hybrid app.

Configuring Azure AD

Azure AD is Microsoft’s multi-tenant cloud-based directory and identity management system. It allows you to quickly incorporate Azure AD-based Single Sign On into your application, giving you access to thousands of users in the Microsoft ecosystem that will now be able to use your app without having to go through the headache of registration and verification. By leveraging Microsoft’s software in the cloud, you can both reduce your development budget and provide a level of ease-of-use to your users that is becoming the standard in many corners of the web.

To integrate your app with Azure AD, you first need to register your application with Azure. To do so, follow these steps:

  1. Log into the Azure portal at https://portal.azure.com
  2. Select “Azure Active Directory” from the navigation menu on the left(1)
  3. Select “App Registrations”
  4. Click “Add”, and use the following parameters for your new application:
    a) Name: Backand
    b) Application Type: Native
    c) RedirectURI: https:///api.backand.com/1/user/azuread/auth
  5. Click “Create”
  6. Click on the new Backand app, and copy down the Application/Client ID. An example value is 7c799275=11-2=4aa6=b36a-fac7aa7fee60
  7. Click on the “Endpoints” menu and copy the “OAUTH 2.0 AUTHORIZATION ENDPOINT” URI(2)

Notes:
(1) If you do not have an Azure AD subscription, this page will show a warning indicating that you do not have access. You’ll either need to contact the admin for your Azure AD account, or register a trial developer account to continue. Consult Microsoft’s documentation in this case
(2) For Backand applications, only a portion of the OAuth 2.0 Authorization Endpoint – copy everything in the URI up to and including “/oauth2”, and ignore the remaining components of the URI.

At this point, you’re ready to integrate Azure AD into your Backand Dashboard. But first, let’s explore how to configure ADFS.

Configuring ADFS

If you’re not comfortable having a third party own your user’s data, you can connect your application to a local implementation of Active Directory Federated Services, or ADFS. ADFS provides you with all of the functionality of Microsoft’s ActiveDirectory infrastructure, but without having to compromise your organization’s IT security by integrating an internet product into the stack. To integrate your app with a local ADFS installation, follow these steps:

  1. Open a Windows Shell on your ADFS server with Administrator privileges (right click cmd.exe and select “Run as Administrator”)
  2. Run the Add-AdfsRelyingPartyTrust with the following parameters (adjust the defaults as necessary):
    Authenticate Angular with Azure Active Directory using Backand
  3. Run Add-ADFSClient to register Backand as a client application within your ADFS install.(1) Make note of the ClientId and RedirectUri you use here – you will need them later:
    Authenticate Angular with Azure Active Directory using Backand
  4. Run the following command to configure Persistent Single Sign-On, and allow your application to display the “Keep me signed in” checkbox:(2)
    Authenticate Angular with Azure Active Directory using Backand

Notes:
(1) You can set ClientID to any valid GUID value. Obtain new GUID values here.
(2) -KmsiLifetimeMins accepts Minutes as a parameter. The value presented here is 30 days’ worth of minutes (60 * 24 * 30) – you can change this to whatever value better matches your organization’s security policies.

Once this is complete, you’re ready to configure Backand to connect to your internal ADFS system.

Connecting to your Backand App

At this point, you a client ID and a URL for your Azure AD or ADFS install. To configure your Backand application to use these links, you just need to make a few more changes in the Backand dashboard:

  1. Log into the Backand dashboard at https://www.backand.com
  2. Find your Backand application on the dashboard, and select “Manage App”
  3. Navigate to Security & AuthSocial & Keys using the navigation menu on the left
  4. To enable an Azure AD integration:
    a) Click the toggle button next to “Use your credentials when signing in with Azure AD” to begin using your custom integration(1) 
    b) Paste your Client ID into the field marked “Client ID”
    c) Paste your OAuth 2.0 Endpoint URI into the field marked “OAuth 2.0 Endpoint” 
  5. To enable a custom ADFS integration:
    a)Click the toggle button next to “Use your credentials when signing in with Azure AD” to begin using your custom integration(2)

    b) Paste your Client ID into the field marked “Client ID”
    c) Paste your OAuth 2.0 Endpoint URI into the field marked “OAuth 2.0 Endpoint” 

Notes:
(1) By default, Backand apps are configured to use Backand’s internal integration with Azure AD. This means that your users will see the provider as “Backand” when they log in. If you wish to change this, follow the instructions above for obtaining a new Azure AD Application ID
(2) As with Azure AD, Backand apps are configured to use Backand’s internal integration with an ADFS installation. This means that your users will see the provider as “Backand” when they log in. If you wish to change this, follow the instructions above for connecting your ADFS installation to your Backand app.

Once this is complete, you’re ready to implement authentication with Azure AD and ADFS in your hybrid app! You can use the process laid out in our Ionic sample application on market.ionic.co – Easy Starter with Social Login – to implement the sign-on page; simply modify the portions using Google and Facebook login to connect to either Azure AD or ADFS instead, and you are set.

Conclusion

By using a system like Azure AD or ADFS, you can quickly and easily centralize both your user management and registration functionality in a common provider. This allows you to easily work your hybrid Backand application into your organization’s authentication system, leveraging the tools you are already using to manage your IT infrastructure more efficiently. By circumventing the need to create a custom login process, you can also reduce your development time and testing process, saving you research and development costs. For more information, visit https://www.backand.com for code samples, tutorials, and more.

Back to blog home page

Single Sign-On with Azure Active Directory and Backand

Posted by on Jan 11, 2017

Most internet users have accounts with many different service providers. As these providers have grown, they have also opened up their authentication systems to third-party developers. By leveraging these authentication systems, third party apps can reduce their scope and complexity, offloading user registration, verification, and authentication to a package solution like Google Plus, Github, Facebook, or Azure AD (Active Directory).

Building on this functionality, many providers offer Single Sign-On (SSO) functionality.   Continue reading

Back to blog home page
Back to blog home page

Handling Geolocation on the Backend

Posted by on Jan 26, 2016

We’re pleased to announce a new feature in Backand: geolocation support in the database. Backand now lets you save locations in the database with latitude/longitude (Geography Points) and the ability to perform advanced filters and queries on it. For example, you can filter all the rows that are within a certain distance from a particular location (e.g., the location of the device).

Continue reading

Back to blog home page

Making a Node.js Project into an NPM Package

Posted by on Jan 05, 2016

We recently published an NPM package, backand-hosting-s3, intended to sync a local project folder to Backand AWS S3 bucket. This bucket serves our users as a static web site for their AngularJS projects. The package is to be used in GulpJS files and in the forthcoming Backand CLI (more on this soon).
After completing development, while trying to publish the package, we encountered a few salient holes in the vast amount of guides and articles.

Below we provide some instructions on these points that will hopefully make your life easier when trying to publish an NPM package.

Continue reading

Back to blog home page

Hosting and Deployment of Your AngularJS App

Posted by on Dec 15, 2015

There is a wide range of options for hosting and Angular app. If your app is primarily client-side, there’s no need for a  powerful server – a recurring cost that is a hindrance to app development. Luckily, Backand gives you a secure, reliable, and high-performance hosting environment for your application.

And the best part, to celebrate the holiday season and the new year,  we’re giving you your first 12 months free! (limited to 10GB of storage and 500GB/month of data transfer).

Below we’ll look at the features offered by Backand Hosting, and see how they can be integrated into your project.

Continue reading