Easy Web App Integration with Windows Azure Active Directory, ASP.NET & Visual Studio

Easy Web App Integration with Windows Azure Active Directory, ASP.NET & Visual Studio

  • Comments 2
  • Likes

Howdy folks,

Today's post is a deep dive on some of the cool new capabilities in our developer tools and frameworks that we announced today. Working with the ASP.NET and Visual Studio teams, we've made some big enhancements that make it easy for developers to use Windows Azure Active Directory as their authentication service.

Our guest blogger for today is Vittorio Bertocci who many of you already know from his many identity presentations and webcastes.  Vittorio is a Principal Program Manager here in the Active Directory team and probably our most famous team member. He worked closely with the ASP.NET Team on this project.

Best regards,

Alex (Twitter @Alex_A_Simons)

 ---------------------------------------------------------------

Hello everybody,

In the last few months we worked in close collaboration with the ASP.NET team to make Windows Azure Active Directory a first class citizen in the Visual Studio project creation experience. Today Sayed announced the availability of the ASP.NET and Web Tools for Visual Studio 2013 Preview, which extends the new ASP.NET project templates and tooling experience to integrate Windows Azure Active Directory authentication and management features right at project creation time. We are excited to finally have a public preview of the new feature for you to try!

You can head to Sayed’s post (or to the preview documentation) for a comprehensive overview and release notes, but in a nutshell: imagine if you could in just few clicks create the solution already configured to authenticate users from your organization and/or easily onboard new organizations, support distributed sign out, automatically refresh authentication settings and securely query the directory through the Graph API. That’s exactly what the new templates enable you to do.

If you had a chance of reading the developer walkthroughs we published when Windows Azure AD reached general availability: those new templates create the same solution described in our walkthrough for web sign with LoB applications, or even a solution which combines all of our Windows Azure GA walkthroughs.

An In-Depth Example: Creating a New Multitenant Application

Let’s walk through the creation of a project with the new tool, to give you a feeling of how the new feature works. Let’s tackle upfront the application type with the highest number of moving parts, a multitenant application (described here).

Please note: none of the info below is required for using the new tools. We are describing how things work under the hood for the developers that have been working on Windows Azure AD and want to know how those new tools relate to existing artifacts, but in fact one developer could just go through the template wizard and obtain a working app with nearly no knowledge of the underlying infrastructure.

You can refer to this post for instructions on how to get and install the bits on your machine; also, don’t forget that we are still in preview!

Start by creating a new project; select Web from the project types list on the left.

As you can see, there is now one single entry point: ASP.NET Web Application. Simple! Select it and click OK. You will be given the chance to select the technologies you want to feature in your project. For our sample we’ll select MVC.

 

In the next step you are given the chance to select the technologies you want to feature in your project. For our sample we’ll select MVC.

You might have noticed that the dialog also informs you about the authentication settings currently selected: the default is “Individual user Accounts”, which correspond to the case in which your app maintains its own account database (though it still can outsource credentials verification to external providers, such as Facebook).

We want to change that option and connect to Windows Azure AD. Click on “Change Authentication”. You’ll get a new dialog, which offers you to choose different authentication types (on the left) and provides controls (on the right) to enter the details required to implement your chosen settings.

Choose “Organizational Accounts”.

The UI changes to help you to choose which kind of app you want to create: an app tied to a single Windows Azure AD tenant, a SaaS app meant to be used by multiple Windows Azure AD tenants or an app tied to a traditional on-premises identity provider (such as an ADFS2.0 instance).

Choose “Cloud – Multiple Organizations”.

 

Note: This UI shows a lot of options right now. Post preview we will be looking at ways to simplify it. The only field you are required to fill is the “Domain” one, as Visual Studio must know which Windows Azure AD tenant should be used for creating the application entry.

The Access Level combo box offers you the chance of adding directory reading capabilities to your app, in addition to the default Single Sign On.

The Application ID URI will be assigned automatically by the tool if you don’t enter anything.
Hit OK on this screen.

At this point the tool will ask you to enter your Windows Azure AD credentials for the tenant you specified: the tool needs them to access the Graph on your behalf and create the application entry for the project automatically. 

 

 

Once you have done that, click “Create project”.

The tool will go through the classic project creation phases: template instantiation, acquisition of the necessary NuGet packages, and so on. However it will follow those up with the creation (via Graph API) of the necessary entries in Windows Azure AD, and the automatic configuration of the project bits to support Web sign on and Graph invocation.

 Let’s take a look a bit more in-depth on what the tool created.

 

What’s in the Visual Studio Project?

Immediately after creation, the project

  • is already configured for Web sign on with Windows Azure AD (both protocol and UI gestures)
  • contains all the necessary automation for validation keys refresh logic
  • is wired up for supporting single sign out
  • contains all the credentials and call logic for invoking the Graph
  • it contains a full sign up experience which generates and processes consent messages

Where does all that logic live? It is wired up in the right places through the project. Here there’s a quick reference map to start your exploration:

The Application Entry in Windows Azure AD

That settles what’s in the Visual Studio project. What about the entries created in Windows Azure AD?

If you head to the Windows Azure portal and select your applications list, you’ll find that a new entry (with the same name of the Visual Studio project) has been created.

 

Want to take a deeper look? Head to the Graph Explorer, sign in and list your applications by requesting https://graph.windows.net/<yourtenantname>/applications. Search for your project name, and you’ll find an entry similar to the following:

   {

      "odata.type": "Microsoft.WindowsAzure.ActiveDirectory.Application",

      "objectType": "Application",

      "objectId": "312176b3-d708-4a79-ad94-e16c3b690cab",

      "appId": "a9ab4c5e-b862-4c7c-ace7-4247e5d8ce4d",

      "availableToOtherTenants": true,

      "displayName": "MyMult1tenantApp",

      "errorUrl": null,

      "homepage": "https://localhost:44307/",

      "identifierUris": [

        "https://cloudidentity.net/MyMult1tenantApp"

      ],

      "keyCredentials": [],

      "mainLogo@odata.mediaContentType": "image",

      "logoutUrl": null,

      "passwordCredentials": [

        {

          "customKeyIdentifier": null,

          "endDate": "2014-06-24T06:56:05.9223695Z",

          "keyId": "0e59c955-3910-4a27-909d-81d4bf371b3c",

          "startDate": "2013-06-24T06:56:05.9223695Z",

          "value": null

        }

      ],

      "publicClient": null,

      "replyUrls": [

        "https://localhost:44307/"

      ],

      "samlMetadataUrl": null

    },

 

The things to note in the above entry are:

    • the AvailableToOtherTenants bit is on, as you would expect form a multitenant app
    • the identifierURIs list contains an URI auto-generated by the tool, combining the tenant domain and the project name
    • the ReplyURLs contains the address assigned to the app by IIS express on the dev machine

Given that a multitenant app is automatically available in its origin tenant, we should expect to find a ServicePrincipal for it as well. And sure enough, if you head to  https://graph.windows.net/<yourtenantname>/servicePrincipals you’ll find something to the effect of the following:

 {

      "odata.type": "Microsoft.WindowsAzure.ActiveDirectory.ServicePrincipal",

      "objectType": "ServicePrincipal",

      "objectId": "f5be2dd9-cbe4-49bb-b784-3e547ea70770",

      "accountEnabled": true,

      "appId": "a9ab4c5e-b862-4c7c-ace7-4247e5d8ce4d",

      "displayName": "MyMult1tenantApp",

      "errorUrl": null,

      "homepage": "https://localhost:44307/",

      "keyCredentials": [],

      "logoutUrl": null,

      "passwordCredentials": [],

      "publisherName": "Vittorio.Bertocci",

      "replyUrls": [

        "https://localhost:44307/"

      ],

      "samlMetadataUrl": null,

      "servicePrincipalNames": [

        "https://cloudidentity.net/MyMult1tenantApp",

        "a9ab4c5e-b862-4c7c-ace7-4247e5d8ce4d"

      ],

      "tags": []

    }

 

No surprises here either; what we really wanted from the ServicePrincipal is its object ID, so that we can verify if the tool actually added the app in the Directory Readers role as requested: you can do it by using a query of the formhttps://graph.windows.net/<yourtenantname>/servicePrincipals/<serviceprincipalObjectID>/memberOf.

{

  "odata.metadata": "https://graph.windows.net/cloudidentity.net/$metadata#directoryObjects",

  "value": [

    {

      "odata.type": "Microsoft.WindowsAzure.ActiveDirectory.Role",

      "objectType": "Role",

      "objectId": "88d8e3e3-8f55-4a1e-953a-9b9898b8876b",

      "description": "Allows access to various read only tasks in the directory. ",

      "displayName": "Directory Readers",

      "isSystem": true,

      "roleDisabled": false

    }

  ]

}

And sure enough, everything is as expected . :-)

Running the Project

The project is ready to be run right after creation. Hit F5 in Visual Studio: you’ll get the following screen.

 

Apart from the theme and few cosmetic differences, this is actually the project described in the multitenant app walkthrough minus the effort of writing it from scratch and provisioning it by hand in the Windows Azure AD portal. You can sign up with a new tenant, sign in, query the Graph, sign out… all out of the box. Pretty neat

Next Steps

This is just the first preview of this new, important capability. As we go on with our collaboration with the ASP.NET team we’ll adjust features according to feedback and expand the scope to address more scenarios.

As usual, your opinions and suggestions are super important for our work prioritization: do give the new ASP.NET and Web Tools for Visual Studio 2013 a try, and let us know what you think!

Best,

Vittorio

 

 

 

Your comment has been posted.   Close
Thank you, your comment requires moderation so it may take a while to appear.   Close
Leave a Comment
  • I would love to see something about using WA ACS in combination with WA AD to create SaaS solutions. Why only target enterprise, if you could target all the people with social logins also.  Either by telling the App here in WAAD that a given ACS can be used to authenticate also, or the other way around. WAAD automatic adds other organizations to my ACS.

    www.s-innovations.net/.../Question-SaaS-on-Windows-Azure-with-ACS-and-WAAD

    Btw I could not get past the authentication setup in the wizard. Using my sinnovations.onmicrosoft.com gave an error about the url for federation meta data. /sinnovations.onmicrosoft.com and I have registed my own domain with the WAAD also, but I dont have any federation metadata hosted on my site so have not tried that.

  • The above error was related to using a LiveId account or what its called these days. It need to be an organizational account for it to work. Found it that the graph explorer also only work with a organizational account. (my live id account is admin of the WAAD). Would be nice if I could merge my accounts to one ( just singed up my company as a organization).