Tag Archives: AngulaJS

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

All About AngularJS Unit Testing – Part I

Posted by on Jul 07, 2015

Determining Testing Success

Software is highly complex. Even the simplest of programs can have hundreds of lines of code with extensive and complex inter-dependencies. Additionally, the code evolves rapidly as new features are added – and old features have bugs fixed. One of the ways to mitigate these issues is to build a robust unit and functional testing suite, but these tests are successful proportionately to the amount of code and functionality they cover.  Below we’ll look at some of the common metrics used to gauge unit test success and see the best practices for each in AngularJS.

Continue reading

Back to blog home page

MVVM Deep Dive

Posted by on Jun 24, 2015

One of the key advantages of AngularJS’ implementation of two-way data binding is that it enables a true implementation of the Model-View-ViewModel (MVVM) pattern. The MVVM pattern originated as an architectural approach for Microsoft’s WPF framework, but has since evolved into a more common web-development paradigm driven by the proliferation of JavaScript frameworks. As it is focused on truly separating the user interface from the underlying data and logic, it is in many ways similar to the MVC architecture we have already discussed. However, there are a few crucial differences that make the MVVM architecture a unique selling point of frameworks like AngularJS. Below we’ll look deep into the thought process behind MVVM, and see what AngularJS provides us for implementing this architecture in a web application.

Continue reading