Create an authentication UI

1. Create a user interface to retrieve the user’s authentication credentials.

   The following is a Flex example of a simple user interface for retrieving user credentials. It consists of a panel object containing two TextInput objects, one for each of the user name and password credentials. The panel also contains a button that launches the credentials() method.

   <mx:Panel x="236.5"
             y="113"
             width="325"
             height="204"
             layout="absolute"
             title="Login">
       <mx:TextInput x="110"
                     y="46"
                     id="uName"/>
       <mx:TextInput x="110"
                     y="76"
                     id="pWord"
                     displayAsPassword="true"/>
       <mx:Text x="35"
                y="48"
                text="Username:"/>
       <mx:Text x="35"
                y="78"
                text="Password:"/>
       <mx:Button x="120"
                  y="115"
                  label="Login"
                  click="credentials()"/>
   </mx:Panel>
   
   

2. Write the credentials() method to process the user-provided authentication values.

   The credentials() method is a user-defined method that passes the user name and password values to the setDRMAuthenticationCredentials() method. Once the values are passed, the credentials() method resets the values of the TextInput objects.

   <mx:Script>
       <![CDATA[
         public function credentials():void {
             videoStream.setDRMAuthenticationCredentials(uName, pWord, "drm");
             uName.text = "";
             pWord.text = "";
   } ]]>
   </mx:Script>
   
   

   One way to implement this type of simple interface is to include the panel as part of a new state. The new state originates from the base state when the DRMAuthenticateEvent object is thrown. The following example contains a VideoDisplay object with a source attribute that points to a protected video file. In this case, the credentials() method is modified so that it also returns the application to the base state. This method does so after passing the user credentials and resetting the TextInput object values.

   <?xml version="1.0" encoding="utf-8"?>
   <mx:WindowedApplication xmlns:mx="https://www.adobe.com/2006/mxml"
       layout="absolute"
       width="800"
       height="500"
       title="DRM FLV Player"
       creationComplete="initApp()" >
       <mx:states>
           <mx:State name="LOGIN">
               <mx:AddChild position="lastChild">
                       <mx:Panel x="236.5"
                                 y="113"
                                 width="325"
                                 height="204"
                                 layout="absolute"
                                 title="Login">
                       <mx:TextInput x="110"
                                     y="46"
                                     id="uName"/>
                       <mx:TextInput x="110"
                                     y="76"
                                     id="pWord"
                                     displayAsPassword="true"/>
                       <mx:Text x="35"
                                y="48"
                                text="Username:"/>
                       <mx:Text x="35"
                                y="78"
                                text="Password:"/>
                       <mx:Button x="120"
                                  y="115"
                                  label="Login"
                                  click="credentials()"/>
                       <mx:Button x="193"
                                  y="115"
                                  label="Reset"
                                  click="uName.text='';
               </mx:Panel>
           </mx:AddChild>
       </mx:State>
   </mx:states>
   pWord.text='';"/>
   
   <mx:Script>
       <![CDATA[
           import flash.events.DRMAuthenticateEvent;
           private function initApp():void {
               videoStream.addEventListener(DRMAuthenticateEvent.DRM_AUTHENTICATE,
                                            drmAuthenticateEventHandler);
           }
           public function credentials():void {
               videoStream.setDRMAuthenticationCredentials(uName, pWord, "drm");
               uName.text = "";
               pWord.text = "";
               currentState='';
           }
           private function drmAuthenticateEventHandler(event:DRMAuthenticateEvent):void {
               currentState='LOGIN';
           }
       ]]>
   </mx:Script>
   <mx:VideoDisplay id="video"
                    x="50"
                    y="25"
                    width="700"
                    height="350"
                    autoPlay="true"
                    bufferTime="10.0"
                    source="https://www.example.com/flv/Video.flv" />
   </mx:WindowedApplication>
   
   

Business.Adobe.com resources

Personalized Experiences Email Deliverability Flow Analysis Real Time Data Demand Side Platform Creative Management