Microsoft also offers other versions of this library for Windows Phone, Android and iOS applications – all of them also open source.
You can find all the code of the sample application that we will write on my git hub. You can also see a running demo here.
To use the demo you can login with a guest account:
- Some details about our sample application
- Azure: Create a Microsoft Azure Active Directory and add an Application to it
- How to use ADAL to add Authorization to a AngularJS state
- How to use ADAL to add Authorization to a WebAPI controller
Some details about our sample application
We will add authentication to a very simple application – a list of tasks to do. This application uses SignalR to notify all connected clients when a note was added/removed.
ToDO list – Application architecture
The user will be asked for his user and password when he tries to open a restricted section of the application and all request to the “Authorized” WebAPI controller will return a “401 Unauthorized” error if the user was not identified.
Azure: Create a Microsoft Azure Active Directory and Add an Application to it
We need a Microsoft Azure Active Directory, by default you should have one on your azure account. If you want to create a new one just open Azure > Active Directory and add it. Continue reading
The goal of this post is to connect and use SignalR from AngularJS. All the code is available in GitHub.
All code is available here: GitHub Link
The application used in this post allows to add tasks to a collaborative list of tasks to do. The application displays a list with all the tasks pending to do and also allows to remove them from the list. SignalR will push the notification “newTask” and “taskDone” to all connected users.
Feel free to get the code from github and run the application in more than one place (different tabs in your explorer) to see how SignalR synchronizes all of them.
The simplicity of the application allows to focus on the goal of this post: SignalR and AngularJS.
This is a screenshot of the running application.
The first thing that we need is to configure the OWIN startup, we need this class in our project:
public class Startup
public void Configuration(IAppBuilder app)
The signalR hub type is “INotesCallbacks”, this interface defines the callbacks that the hub can make to the connected clients.
// Client callbacks
public interface INotesCallbacks
// Notify note added
Task BroadcastNewNote(Note newNote);
// Notify note removed
Task BroadcastRemoveNote(int noteId);
The hub also implement the interface “INotesCalls” this interfaces defines the hub methods that clients can call.
// Client calls
public interface INotesCalls
// Add note
Task AddNote(string note);
// Get all notes
// Remove note
Task RemoveNote(int roomId);
This is the implementation of the hub: