Token-based authentication using Asp .Net, JW Player 4.3, Web Services and Flash Media Server 3.5

Tags: JW Player, Web Service, Flash Media Server, Flash Interactive Server, Flash CS 4 Professional, Token Authentication JW Player, User Authentication Introduction With the release of Abode Flash Media Server 3.5 companies can expand their media capabilities through a suite of web distribution channel such as Video-on-Demand, Multi-Communication Chat and Live streaming. The server provides security mechanisms to verify Flash players, encrypt media streams and cross-domain authorization. However, in order to use a customized security solution the server can use web services to integrate with your application. This article will cover how to get your Adobe Flash Media server to authenticate users then authorize media resources for streaming content. The nice thing is we’ll use a real world example ASP .Net Web Site and one of the most popular Flash Players on the market to do it, the JW Player 4.3. To download free complete pdf article click here To download the free demo code click here Architecture Before we dive too deep, let’s take a look at our system architectural approach by piecing together our solution into a holistic offering. Our components consist of a Flash Media Server (FMS), an IIS Web Server, a Sql Server 2005, ASP .Net and the JW Player. The open source JW Player is a nice offering because it’s free, we don’t need to do much and it’s easy to add into web page. The only hurdle, is overcoming our understanding of ActionScript and server-side development. We don’t have to worry too much because Adobe has done a good job of using Object-Oriented technology to develop the language which will smooth our efforts. So let’s take our technology stack and put it in perspective. The FMS along with the JW Player will stream our content, IIS will server up the Asp .Net pages and Microsoft Sql Server 2005 will handle membership and roles authentication service. As a note, if you’re unfamiliar with Membership and Roles in Asp .Net, I’ve included resources to some of the leading authors in this area namely, Scott Guthrie and Scott Mitchell. Now that we know what needs to be in place, let’s get a visual of what this looks like. [APPLICATION ARCHITECTURE] Below is a summary of how our technology blocks will interoperate with each other: 1. A clients request the web page from our IIS server with the Open Source JW Player SWF file. 2. The client presses play to request the streaming video. 3. An encrypted client token that includes the user information, file requested and SWF file is sent via RTMP to the Flash Media Server (FMS). 4. A SWF verification process is enacted by the FMS to ensure the client’s JW player is authorized. After completion of SWF verification, the FM Server contacts the authentication web service to request client authorization credential. 5. Successful authentication will load and stream the media from the share. Failed authentication will refuse the request. 6. The streaming media is displayed to the client. Let’s move on to what we’ll need to develop our solutions. Requirements To complete this demonstration you’ll need the following software and files: 1. Download - Flash Media Development Server 3.5 2. Download - Flash CS4 Professional 3. Download - Microsoft Visual Studio 2008 4. Download - Microsoft Sql Server 2005 5. Download - JW Player Source Code (note: Subversion is used to connect to the source control for the JW Player. The source control path – {svn co http://developer.longtailvideo.com/svn/tags/wmvplayer-1.1} 6. Download – Subversion 7. Reference - Creating ASP.NET Web Applications. ASP .Net Web Project configured to use the Membership and Role providers. The project should include the Login.aspx to authenticate users and a Default.aspx to display the JW Player. Application Development Now let review what we will be implementing in a more concrete manner. The below item will keep us focused on each piece that needs to be developed. 1. Modify the JW Player to pass our user token and requested resource 2. Embed the JW Player in our secure web page 3. Set an encrypted user token for the JW Player to send to the FMS Server 4. Implement an ActionScript component to accept and authenticate the user token then authorize the resource for streaming. 5. Implement a web service to accept the user token and requested resource then return the authentication/authorization result. 6. Notify the JW Player to accept or refuse the connection. So in summary, we have to modify the JW Player, create an ASP .Net Web Form, develop a Server-Side ActionScript Component, build a web service then configure our FMS Server. Great, let’s move on to make this happen. Modifying the JW Player Using Subversion you should have downloaded the latest code from the open source repository for the JW player to a working folder. To create the JW Player Flash project follow the instructions below: To create a new project: 1. Do one of the following to open a new project: Select New Project from the Project pop-up menu. If no other project is open, open the Flash Project panel and select Create a New Project in the panel window. Select File > New. On the General tab, select Flash Project. If no project is currently open, right-click (Windows) or Control-click (Macintosh) in the Document window of a saved Flash document or ActionScript file and select Add to New Project from the context menu. 2. In the New Project dialog box, enter a name for the project and click Save. To open an existing project, do one of the following: Select Open Project from the Project pop-up menu. Navigate to the project and click Open. Double-click the file. If no other project is open, open the Flash Project panel and select Open an Existing Project in the panel window. Navigate to the project and click Open. Select File > Open. Navigate to the project and click Open. Modify the JW Player code base Once we have the project setup, we need to modify two files the com/jeroenwijering/player/Player.as and com/jeroenwijering/models/RTMPModel.as. These are the key pieces of code that will take our user access and resource tokens then pass them to the server to be authenticated. Player.as This file holds the configuration object that receives the flashvars from the JW Player player. We need to add a variable called “accesstoken:undefined” to the “public var config:Object” array. The flashvars are parameters Flash Players can use to provider necessary parameters to players, the server or both. Our parameter will be set to the {accesstoken} parameter we’ll set using code-behind in our web page. This will also give us an opportunity to encrypt the user information. The media resource will come from the {file} parameter which is already available. We only have to pass the two parameters to the server. RTMPModel.as Since we’re streaming content our player will connect to the server over the RTMP protocol. The RTMPModel component will initiate the connection then passes our parameters to the server-side component. We add the access token and file resource as parameters to the connection object. Below is the example code: [SEE DOWNLOAD FOR CODE BLOCK] Deploy the code After completion of the code changes then click File > Publish to compile the code. We’re done with the JW Player. A nice feature of completing this step is the SWF verification uses a checksum process to verify players. By adding this code we’ve automatically made sure the player is unique. What this means is we can now take this player include it in our SWFs folder and our web site, without worrying about others hacking another player to retrieve our secure content. Create the secure web page embedded with the JW Player Now we can create your Asp .Net C# web project then add a folder called /embed. We’re going to copy both the player.swf and swfobject.js from the JW Player Flash project we just published into this location. Also, we’ll add a Default.aspx and Login.aspx to the project. The Default.aspx will hold the JW Player and the Login.aspx will allow us to login user. Please review the Reference resource provided at the end of this document if you’re unfamiliar with ASP .Net web project and membership based security. We’re going to include our JW Player in the secured web page using the tag below: [SEE DOWNLOAD FOR CODE BLOCK] The flashvars will be left blank for the time being. We’re going to use our code-behind populate this parameter with access token. Below is the information we’re going to provide to the flashvar: file=media_resource_path&streamer=rtmp://flash_media_server_address/application_name&encrypted_accesstoken media_resource_path: The path location of the file resource on the network server flash_media_server_ip: The flash media server url or IP address application_name: The name of your Flash Media Server application encrypted_accesstoken: Encrypted user access token passed to the FMS for authentication/authorization Before we dive deeper into the web application and code, lets’ make sure we setup the database to store the file path and user security permissions. All systems are different but this is a minimum baseline for granting access to media resources. We need to ensure that users only have permissions to “Read” their media content as defined by the business rules [ERD DIAGRAM GRAPHIC] Below is the code along with a few inserts to get the database created and some demo data populated. You’ll notice that the aspnet_Membership table was created by the ASP .Net Membership process and we didn’t include the code here. Also, as a note the insert statements include a GUID that is the UserId in the aspnet_Membership table. You can use this to populate your own information. [SEE DOWNLOAD FOR CODE BLOCK] Asp .Net Web Page The Login.aspx is very straight forward. Just create the page then drop the necessary login components on the page. Below is a page mockup. [LOGIN GRAPHIC] Next we need the web page to display the JW Player and file listing. [PAGE GRAPHIC] Asp .Net HTML We’ll use a Gridview for the files and labels to display the file information as we select through each item. The code of this page is below. [SEE DOWNLOAD FOR CODE BLOCK] As we mention earlier, the {_flashvarpath} variable is set in our code-behind. We gave the format of the parameters and you will notice the {file} and {accesstoken} parameters. Both are synonymous with the config object in the Player.as. We’ll it turns out with our Player.as code entry the variable will be mapped by name to the config object. Any parameter we provide will be passed along and set. _flashvarpath = string.Format("file={0}&streamer=rtmp://{1}&accesstoken={2}", _filepath, ConfigurationManager.AppSettings["FMSPathLocation"].ToString(), _usertoken); Also our appSettings need to be in place for security and path information. [SEE DOWLOAD FOR CODE BLOCK] Create the Flash Media Server ActionScript Component For the Flash Media Server to accept the tokens then communicate with our web service for user authentication, Main.asc is needed. This component will sit in the application directory on the server and handle all requests for media content. This can be created using a text editor or Flash CS4 Professional. The code is commented and self-explanatory. Since this is scripted code we don’t need to compile anything, we just needed to include it in the application folder then reload the application. The application can be reloaded through the Flash Media Server Admin Console. [SEE DOWLOAD FOR CODE BLOCK] Implement a Web Service to authenticate the user and media resource Now we’re moving towards the final pieces. The web service will accept the user token, resource file token and web service access token then authenticate the user. The information returned to the Main.asc will be parsed to allow or reject a connection. One important note, since we’re using Asp .Net Membership security we need to allow access to the service without using any credentials. To do this we set a tag in the web.config file to allow anyone to access the web service. Hence the reason for the web service access token. We only want our Flash Media Server to connect to the service. Here is the code for the web.config. [SEE DOWLOAD FOR CODE BLOCK] Flash Media Server configuration Now that our coding is completed, we only have to ensure the server is configured correctly. A copy of the JW Player should be in the SWFs directory as well as the /embed directory of the Asp .Net application. [FOLDER GRAPHIC] The application.xml file should be located in the SecurityDemo folder. [FOLDER GRAPHIC] The Application.xml information is below. Note three important nodes Streams, SWFVerification and SWFFolder. • Streams – is local or network location of your media. If a network is used then the FMS service executables should run an account that has access to the shares. Also note the {/} in front of the path location. This is required. • SWFVerification – enabled is set to true. This will use a checksum to validate that no other player is being used to contact your Flash Media Server. • SWFFolder – this is the location of your swf file for the SWF verification process. Summary In summary, this is a fun product to work with and has incredible potential. We’ve created our application with web services, loaded the server-side components and authenticated our users for their media. I’ve included the references used along with a zip of all the project files. Good luck with your endeavors into the Flash Media Server. References ASP.NET 2.0 Membership, Roles, Forms Authentication, and Security Resources - Article Scott Guthrie ASP.NET 2.0 Security, Membership and Roles Tutorials - Article Scott Guthrie Examining ASP.NET 2.0's Membership, Roles, and Profile - Article Scott Mitchell Configuring ASP.NET 2.0 Application Services to use SQL Server 2000 or SQL Server 2005 - Article Scott Guthrie Creating ASP.NET Web Applications - Article .NET Framework Developer Center Creating a Simple ASP.NET Application - Article Kirupa Chinnathambi Get Started with ASP.NET - Reference Website Manipulating Web Services with Flash Media Server - Article Robert A. Colvin Dynamic streaming in Flash Media Server 3.5 – Part 1: ActionScript 3.0 dynamic stream API - Article David Hassoun Beginner's guide to installing Flash Media Server 3.5 - Article Tom Green Adobe Flash Media Server – Reference Website Martijn's C# Coding Blog - Reference Website martijn@dijksterhuis.org