PROTECTING ACCESS TOKENS

The access tokens are generated for individual users in Yammer and given to client applications when requested. The client token is generated for an indefinite time and never expires. It is recommended that the client application store the access token for each user. It is recommended that developers strongly protect the access token like any other security key or password. Developers should implement encryption in the client application to protect the access token.

EXERCISE 4-1: IMPLEMENTING SERVER-SIDE OAUTH FLOW IN AN ASP.NET WEB APPLICATION

In this exercise, we will demonstrate how to implement server-side OAuth flow in an ASP.NET web application called SPDS University Training Application. We will create an ASP.NET web application and implement OAuth authentication using the Yammer app called “SPDS University” that you created in Chapter 3.

Create New Project

1. Launch Microsoft Visual Studio.
2. The first screen presented to you is the Visual Studio Start page, as illustrated in Figure 4-10.

   

   Figure 4-10. The Visual Studio Start page offers a quick way to get started

3. On the left side of the start page, on the navigation pane, choose new project. Alternatively, you can use the File New Project command.
4. This brings up the New Project window. Select ASP.NET Web Forms Application. Then select Web Visual Studio 2012 ASP.NET Web Forms Application, as shown in Figure 4-11.

   

   Figure 4-11. Select the ASP.NET web application template for the new project

5. Enter the name as “SPDS UniversityWebApplication”.
6. Click OK.
7. Visual studio will create a new ASP.NET project with the Web.config file as part of the project, as illustrated in Figure 4-12.

   

   Figure 4-12. The ASP.NET web site structure

   Add the yammer_signin.png and SPDS-Uni.png files to the Images folder (the yammer_signin.png file can be downloaded from Yammer’s site and SPDS-Uni.png is available from the Source Code/Download area of the Apress web site at http://www.apress.com/9781484209448).

8. Right-click on the Images folder and then choose Add Existing Items. Find both images and click OK.

   

   Figure 4-13. The Yammer_signin.png and SPDS-Uni.Png files added to the Images folder

9. Open the Site.Master file.
10. Replace this text in line 7:

    <title><%: Page.Title %> - My ASP.NET Application</title>

    with:

    <title><%: Page.Title %> - SPDS University</title>

11. Replace the text in line #43:

    <a runat="server" href="~/">your logo here</a>

    with

    <a runat="server" href="~/"><img src="Images/SPDS-Uni.png" /></a>

    Configuration Values in Web.config

    We will use the Web.config file to configure the Yammer App configuration values like client_id, client_secret key, and redirect_uri. These parameters are required in order to call the OAuth URLs from your ASP.NET web application. The best place to configure those parameters is in the <AppSettings> section within Web.Config.

12. Add the following code to your Web.Config file (add the code at end of the file just above </Configuration>):

    <appSettings>
      <add key="client_id" value="Fmi5JYfF5jqMLCcydqkJWQ" />
      <add key="client_secret" value="GBE5vp3mOUZuRVKqFPsXOA6eOLro95DOFVP5PPgSII0" />
      <add key="redirect_uri" value="http://localhost:54173/Default.aspx" />
      <add key="OAuthURL" value="https://www.yammer.com/dialog/oauth?client_id=" />
    <add key="AccessTokenURL" value="https://www.yammer.com/oauth2/access_token.json?" />
    </appSettings>

    Table 4-11 provides details about each key-value pair used in the previous code.

    Table 4-11. Key-Value Pairs Configured in Web.config

    Key	Value
    client_id	Replace value with “SPDS University” Yammer app’s client_id.
    client_secret	Replace value with “SPDS University” Yammer app’s client_secret.
    redirect_uri	Replace value with “SPDS University” Yammer app’s redirect_uri.
    OAuthURL	https://www.yammer.com/dialog/oauth?client_id=, we will form the complete URL in the code
    AccessTokenURL	https://www.yammer.com/oauth2/access_token.json?, the OAuth’s access token URL

     Note  When you use the Microsoft Visual Studio Development Server to run a file system web application project, by default, the development server is invoked on a randomly selected port for the localhost. You can change the port number using the project property windows in Visual Studio.

13. Navigate to https://www.yammer.com/client_applications, click on your Yammer app, and then click on the Basic Info section. You will see a screen as shown in Figure 4-14. Ensure that the redirect URI has the same value as configured in the previous Web.config file.

    

    Figure 4-14. Ensure that redirect URI is the same as the value in web.config

    Application’s Home Page

14. To start designing the default.aspx file as the home page of your application, add the following code to default.aspx by opening it in the source view of Visual Studio. You need to replace the following markup in default.aspx with the content within <asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">:

    <h3>Welcome to SPDS University Application:</h3>
     <ol class="round">
       <li class="one">
         <h2><asp:Label ID="lbllogin" runat="server" Text="You are not Loged in, You can login using Yammer Credential, click on Log In button on top right"></asp:Label>   </h2>
       </li>
     </ol>
     <asp:TextBox ID="txtCode" runat="server" Visible="False"></asp:TextBox>
     <asp:TextBox ID="txtaccesstoken" runat="server" Visible="false"></asp:TextBox>

15. Remove the following content placeholder from Default.aspx:

    <asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">

16. Login.aspx: You now need to modify the login.aspx file to add the “Log In with Yammer” button. Open login.aspx from account/login.aspx, find <section id="socialLoginForm">, and replace it with the following code:

    <asp:ImageButton ID="imgbtnLogin" runat="server" ImageUrl="~/Images/yammer_signin.png" OnClick="imgbtnLogin_Click" />

17. Login.aspx: Remove all the validation controls from login.aspx:

    <asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="The user name field is required." />
    
    <asp:RequiredFieldValidator runat="server" ControlToValidate="Password" CssClass="field-validation-error" ErrorMessage="The password field is required." />

18. Login.aspx.cs: Remove the code from Page_Load() event.
19. Login.aspx.cs: Open the code-behind file Login.aspx.cs and add the following code in the using directive. This namespace is required to write code in order to read the app settings value from the Web.config file.

    using System.Web.Configuration;

20. Login.aspx.cs: Add the following code to handle the “Login In with Yammer” button event. Open the Login.aspx file in Design view and double-click on the Login button. This will open the code-behind file Login.aspx.cs.

    /// <summary>
    ///
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
        protected void imgbtnLogin_Click(object sender, ImageClickEventArgs e)
         {
               string YammerURL = WebConfigurationManager.AppSettings["OAuthURL"] + WebConfigurationManager.AppSettings["client_id"] + "&redirect_uri=" + WebConfigurationManager.AppSettings["redirect_uri"];
                Response.Redirect(YammerURL);
          }

    The button click event forms the OAuth URL. The final OAuth URL should be:

    https://www.yammer.com/dialog/oauth?client_id= 9aax1mFox7yMVBS2LpIJQ&redirect_uri=http://localhost:54173/Default.aspx"

    Table 4-12 describes the query string parameters.

    Table 4-12. OAuth URL’s Query String Parameters

    Parameter	Description
    client_id	Obtain the Client_ID for the SPDS University Yammer app using the Yammer UI. Use the https://www.yammer.com/client_applications link for a list of registered client IDs.
    redirect_uri	The redirect_uri should match the redirect_uri configured for the SPDS University app.

    After forming the OAuth URL by reading values from the Web.Config file, the code calls Response.Redirect(YammerURL).

    If the redirect_URI does not match the configuration of the SPDS University Yammer app, Yammer will throws an error entitled “Invalid Redirect URI”. So be sure that the redirect_uri matches.

    Handle the Yammer’s Response

    Once the OAuth flow is complete, Yammer will redirect to the Redirect URI with the query string parameter, as illustrated in the following URL:

    http://localhost:54173/Default.aspx?code=4G5y1ipTNt5nCtCw8DS1sw

21. Default.aspx.cs: Open the code-behind file called Default.aspx.cs and add the following code to the using directive. This namespace is required to write code in order to read app settings value from the Web.config file:

    using System.Web.Configuration;

22. Default.aspx.cs: Add the following code to the Page_Load event to read the query string passed by Yammer in order to find the key "Code" and retrieve the value of the key. Once the code is retrieved, we will store it in a textbox and invoke the call to Yammer using the given code to get the access token.

    /// <summary>
    /// Page load event to check if query string contains a key called "Code"
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
            protected void Page_Load(object sender, EventArgs e)
            {
    
                string qsCode = Request.QueryString["Code"];
                if (qsCode != null)
                {
                    txtCode.Text = qsCode;
                    Obtain_Access_Token();
                }
                else
                {
                }
            }

    The previous code reads the query string key "Code", if it is present, and then stores the code in a textbox and hides the Login button. Finally, we call the Obtain_Access_Token() method to obtain the access token.

    Obtain the Access Token

    To obtain the access token, we need to submit a GET request using an OAuth 2.0 endpoint, with these three parameters—client_id, client_secret, and code.

    The complete endpoint is:

    https://www.yammer.com/oauth2/access_token.json?client_id=[:client_id]&client_secret=[:client_secret]&code=[:code]

    So let’s implement the code to obtain the access token.

    The response you’ll receive from Yammer will be in JSON or XML format based on the API endpoint you invoke. The JSON endpoint is https://www.yammer.com/oauth2/access_token.json and the XML endpoint is https://www.yammer.com/oauth2/access_token.xml. Your application should convert the given JSON string into an object. In this particular case, the response needs to be deserialized first. Then you retrieve the access token from the instance using DataContractJsonSerializer. So we will start adding few classes to help with serialize and deserialize, back and forth.

23. In Solution Explorer, right-click on References and select Add Reference. In the assemblies group of references, select the assembly called System.Runtime.Serialization.
24. In Solution Explorer, right-click on the project and select Add ASP.NET Folder App_Code. The App_Code folder is a special folder that stores classes, typed data sets, and other supporting classes for the project. The classes that are stored in App_Code are accessible throughout the application.
25. In Solution Explorer, right-click on the App_Code folder and then choose Add Class, as illustrated in Figure 4-15.

    

    Figure 4-15. Add a new class to your web site project

26. You will be presented with a window, as illustrated in Figure 4-16, where you need to select the class template.

    

    Figure 4-16. Select the class template from the available list and then enter the class name

27. Enter the name of the class as SerializedJson.
28. Click Add.
29. Once the class is added, open the class in code mode and add the following code snippet to the class:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Runtime.Serialization;
    using System.Runtime.Serialization.Json;
    using System.IO;
    
    namespace SPDS UniversityWebApplication.App_Code
    {
        [Serializable]
        public abstract class SerializedJson<T> where T : new()
        {
    
            public static T GetObjectInstanceFromJson(string data)
            {
                T returnInstance = default(T);
    
                try
                {
                    MemoryStream m_stream = new MemoryStream();
                    byte[] buf = System.Text.UTF8Encoding.UTF8.GetBytes(data);
                    m_stream.Write(buf, 0, Convert.ToInt32(buf.Length));
                    m_stream.Position = 0;
                    DataContractJsonSerializer sdc_JSON_Ser = new DataContractJsonSerializer(typeof(T));
                    returnInstance = (T)sdc_JSON_Ser.ReadObject(m_stream);
                }
                catch (Exception ex)
                {
    
                }
    
                return returnInstance;
            }
    
        }
    
    }

    The SerializedJson class implements an abstract method called GetObjectInstanceFromJson, which accepts a JSON string. The method will then convert JSON to stream by using the MemoryStream class and then use the DataContractJsonSerializer class’s ReadObject method to read the JSON into an object.

    The next step is to add classes for data contracts for different objects, including for access token, user, messages, and so on, using the DataContract and DataMember attributes.

30. Add a new class called User to the App_Code folder by right-clicking on App_Code folder and choosing Add Class. Specify the name of the class as illustrated in Figures 4-14 and 4-15.
31. After the class is created, add the following code snippet for the User class.

    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Runtime.Serialization;
    using System.Runtime.Serialization.Json;
    using System.IO;
    using System.Diagnostics;
    
    namespace SPDS UniversityWebApplication.App_Code
    {
        [DataContract]
        public class User : SerializedJson<User>
        {
            [DataMember(Name = "id")]
            public string UserID { get; set; }
    
            [DataMember(Name = "network_id")]
            public string NetworkID { get; set; }
    
            [DataMember(Name = "state")]
            public string AccountStatus { get; set; }
    
            [DataMember(Name = "job_title")]
            public string JobTitle { get; set; }
    
            [DataMember(Name = "expertise")]
            public string Expertise { get; set; }
    
            [DataMember(Name = "full_name")]
            public string FullName { get; set; }
    
            [DataMember(Name = "first_name")]
            public string FirstName { get; set; }
    
            [DataMember(Name = "last_name")]
            public string LastName { get; set; }
    
            [DataMember(Name = "url")]
            public string ApiUrl { get; set; }
    
            [DataMember(Name = "web_url")]
            public string WebUrl { get; set; }
    
            [DataMember(Name = "mugshot_url")]
            public string PhotoUrl { get; set; }
    
            [DataMember(Name = "mugshot_url_template")]
            public string PhotoTemplateUrl { get; set; }
    
            [DataMember(Name = "department")]
            public string Department { get; set; }
    
            [DataMember(Name = "contact")]
            public ContactInfo ContactInfo { get; set; }
    
            [DataMember(Name = "web_preferences")]
            public SettingsAndFeedsAndGroups SettingsAndFeedsAndGroups { get; set; }
    
            [DataMember(Name = "previous_companies")]
            public List<EmployerData> PreviousEmployers { get; set; }
    
            [DataMember(Name = "schools")]
            public List<YammerSchool> Schools { get; set; }
    
            [DataMember(Name = "stats")]
            public UserStats UserStats { get; set; }
    
            public User()
            {
                this.ContactInfo = new ContactInfo();
                this.SettingsAndFeedsAndGroups = new SettingsAndFeedsAndGroups();
                this.PreviousEmployers = new List<EmployerData>();
                this.Schools = new List<YammerSchool>();
                this.UserStats = new UserStats();
            }
        }
    
        [DataContract]
        public class UserStats
        {
            [DataMember(Name = "followers")]
            public int Followers { get; set; }
    
            [DataMember(Name = "following")]
            public int Following { get; set; }
    
            [DataMember(Name = "updates")]
            public int Updates { get; set; }
        }
    
        [DataContract]
        public class YammerSchool
        {
            [DataMember(Name = "degree")]
            public string Degree { get; set; }
    
            [DataMember(Name = "description")]
            public string Description { get; set; }
    
            [DataMember(Name = "end_year")]
            public string EndYear { get; set; }
    
            [DataMember(Name = "start_year")]
            public string StartYear { get; set; }
    
            [DataMember(Name = "school")]
            public string School { get; set; }
        }
    
        [DataContract]
        public class EmployerData
        {
            [DataMember(Name = "description")]
            public string Description { get; set; }
    
            [DataMember(Name = "employer")]
            public string Employer { get; set; }
    
            [DataMember(Name = "end_year")]
            public string EndYear { get; set; }
    
            [DataMember(Name = "position")]
            public string Position { get; set; }
    
            [DataMember(Name = "start_year")]
            public string StartYear { get; set; }
        }
    
        [DataContract]
        public class SettingsAndFeedsAndGroups
        {
            [DataMember(Name = "network_settings")]
            public NetworkSettings NetworkSettings { get; set; }
    
            [DataMember(Name = "home_tabs")]
            public List<GroupsAndFeeds> GroupsAndFeeds { get; set; }
    
            public SettingsAndFeedsAndGroups()
            {
                this.NetworkSettings = new NetworkSettings();
                this.GroupsAndFeeds = new List<GroupsAndFeeds>();
            }
        }
    
        [DataContract]
        public class GroupsAndFeeds
        {
            [DataMember(Name = "name")]
            public string Name { get; set; }
    
            [DataMember(Name = "select_name")]
            public string SelectName { get; set; }
    
            [DataMember(Name = "type")]
            public string Type { get; set; }
    
            [DataMember(Name = "feed_description")]
            public string Description { get; set; }
    
            [DataMember(Name = "ordering_index")]
            public int OrderingIndex { get; set; }
    
            [DataMember(Name = "url")]
            public string Url { get; set; }
    
            [DataMember(Name = "group_id")]
            public string GroupID { get; set; }
    
            [DataMember(Name = "private")]
            public bool IsPrivate { get; set; }
        }
    
        [DataContract]
        public class NetworkSettings
        {
            [DataMember(Name = "message_prompt")]
            public string MessagePrompt { get; set; }
    
            [DataMember(Name = "allow_attachments")]
            public bool AllowAttachments { get; set; }
    
            [DataMember(Name = "show_communities_directory")]
            public bool ShowCommunitiesDirectory { get; set; }
    
            [DataMember(Name = "enable_groups")]
            public bool EnableGroups { get; set; }
    
            [DataMember(Name = "allow_yammer_apps")]
            public bool AllowYammerApps { get; set; }
    
            [DataMember(Name = "admin_can_delete_messages")]
            public bool AdminCanDeleteMessages { get; set; }
    
            [DataMember(Name = "allow_inline_document_view")]
            public bool AllowInlineDocumentView { get; set; }
    
            [DataMember(Name = "allow_inline_video")]
            public bool AllowInlineVideo { get; set; }
    
            [DataMember(Name = "enable_private_messages")]
            public bool EnablePrivateMessages { get; set; }
    
            [DataMember(Name = "allow_external_sharing")]
            public bool AllowExternalSharing { get; set; }
    
            [DataMember(Name = "enable_chat")]
            public bool EnableChat { get; set; }
        }
        [DataContract]
        public class ContactInfo
        {
            [DataMember(Name = "has_fake_email")]
            public bool HasFakeEmail { get; set; }
    
            [DataMember(Name = "email_addresses")]
            public List<EmailAddresses> EmailAddresses { get; set; }
    
            [DataMember(Name = "phone_numbers")]
            public List<PhoneNumbers> PhoneNumbers { get; set; }
    
            [DataMember(Name = "im")]
            public IM IM { get; set; }
    
            public ContactInfo()
            {
                this.EmailAddresses = new List<EmailAddresses>();
                this.PhoneNumbers = new List<PhoneNumbers>();
                this.IM = new IM();
            }
        }
    
        [DataContract]
        public class EmailAddresses
        {
            [DataMember(Name = "address")]
            public string Address { get; set; }
    
            [DataMember(Name = "type")]
            public string Type { get; set; }
    
            public EmailAddresses() { }
    
            public EmailAddresses(string address, string type)
            {
                this.Address = address;
                this.Type = type;
            }
        }
    
        [DataContract]
        public class PhoneNumbers
        {
            [DataMember(Name = "number")]
            public string PhoneNumber { get; set; }
    
            [DataMember(Name = "type")]
            public string Type { get; set; }
        }
    
        [DataContract]
        public class IM
        {
            [DataMember(Name = "provider")]
            public string Provider { get; set; }
    
            [DataMember(Name = "username")]
            public string UserName { get; set; }
        }
    }

32. Add a new class called Data to the App_Code folder by right-clicking on the App_Code folder and choosing Add Class. Specify the name of the class as illustrated in Figures 4-14 and 4-15.

    The Data.cs class defines two classes, AccessToken and TokenResponse by attaching DataContractAttribute to the classes and DataMemberAttribute to the members you want to serialize.

33. Replace the following code snippet in the Data.cs. It defines the AccessToken and TokenResponse classes.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Runtime.Serialization;
    using System.Runtime.Serialization.Json;
    using System.IO;
    using System.Diagnostics;
    
    namespace SPDS UniversityWebApplication.App_Code
    {
    
        [DataContract]
        public class TokenResponse
        {
            [DataMember(Name = "user_id")]
            public string UserID { get; set; }
    
            [DataMember(Name = "network_id")]
            public string NetworkID { get; set; }
    
            [DataMember(Name = "network_permalink")]
            public string NetworkPermaLink { get; set; }
    
            [DataMember(Name = "network_name")]
            public string NetworkName { get; set; }
    
            [DataMember(Name = "token")]
            public string Token { get; set; }
        }
    
        [DataContract]
        public class AccessToken : SerializedJson<AccessToken>
        {
            [DataMember(Name = "access_token")]
            public TokenResponse TokenResponse { get; set; }
    
            [DataMember(Name = "user")]
            public User CurrentUser { get; set; }
    
            public AccessToken()
            {
                this.TokenResponse = new TokenResponse();
                this.CurrentUser = new User();
            }
        }
    }

34. Add a new class called YammerUtility to the App_Code folder by right-clicking on that folder and choosing Add Class. Specify the name of the class as illustrated in Figures 4-14 and 4-15.
35. Add the following code to the YammerUtility.cs file.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Net;
    using System.IO;
    
    namespace SPDS UniversityWebApplication.App_Code
    {
        public class YammerUtility
        {
            private static HttpWebResponse HTTPWebRes;
            private static HttpWebRequest HTTPWebReq;
    
            /// <summary>
            ///
            /// </summary>
            /// <param name="Url"></param>
            /// <param name="authHeader"></param>
            /// <param name="AddCookies"></param>
            /// <returns></returns>
            public static string InvokeHttpGetRequest(string Url, string authHeader = null, bool AddCookies = false)
            {
                string results = string.Empty;
    
                try
                {
                    HTTPWebReq = WebRequest.CreateHttp(Url);
                    HTTPWebReq.Method = "GET";
    
                    if (!string.IsNullOrEmpty(authHeader))
                        HTTPWebReq.Headers.Add("Authorization", "Bearer " + authHeader);
    
                    HTTPWebRes = (HttpWebResponse)HTTPWebReq.GetResponse();
    
                    Stream dataStream = HTTPWebRes.GetResponseStream();
                    StreamReader reader = new StreamReader(dataStream);
    
                    results = reader.ReadToEnd();
    
                    reader.Close();
                }
                catch (Exception ex)
                {
                    Console.WriteLine("Error in MakeGetRequest: " + ex.Message);
                }
    
                return results;
            }
    
        }
    }

    In the previous class definition, the AccessToken class contains two other objects—TokenResponse (defined in Data.cs) and User (defined in user.cs).

36. Add the method Obtain_Access_Token() to the Default.aspx.cs file.

    /// <summary>
            /// Obtain the access Token
            /// </summary>
            private void Obtain_Access_Token()
            {
                string accessToken = default(string);
                string AccesTokenURL = WebConfigurationManager.AppSettings["AccessTokenURL"] + "client_id=" + WebConfigurationManager.AppSettings["client_id"] + "&client_secret=" + WebConfigurationManager.AppSettings["client_secret"] + "&code=" + txtCode.Text;
                string response = SPDS UniversityWebApplication.App_Code.YammerUtility.InvokeHttpGetRequest(AccesTokenURL);
                if (!string.IsNullOrEmpty(response))
                {
                    SPDS UniversityWebApplication.App_Code.AccessToken jat = SPDS UniversityWebApplication.App_Code.AccessToken.GetObjectInstanceFromJson(response);
    
                    if (!string.IsNullOrEmpty(jat.TokenResponse.Token))
                    {
                        accessToken = jat.TokenResponse.Token;
                        lbllogin.Text = "Welcome " + jat.CurrentUser.FullName;
                        txtaccesstoken.Text = accessToken;
                        Session["accesstoken"] = accessToken;
                    }
                }
            }

    We added three classes to the project. Figure 4-17 shows the class diagrams

    

    Figure 4-17. The Yammer authentication classes

    The access token received from Yammer will be valid for a very long time, so you should save the token for a user and keep using it. For the ASP.NET application, the best approach is to store it in the cookies.

     Note  Once the access token expires, developers have to re-run the previous steps to generate a new code and access token. If a new access token is requested for the user who has already authorized your app, that user will not be promoted to authorize the app again.

    Run the Application

37. Press F5 to execute the application. It will open in Internet Explorer with the Default.aspx file as the home page. The page will look similar to Figure 4-18.

    

    Figure 4-18. The Default.aspx file in run mode

38. Click on the “Log In” button, which will redirect you to the Login page. That page allows users to log in using their registered accounts or using Yammer, as illustrated in Figure 4-19.

    

    Figure 4-19. The Login.aspx page in run mode

39. Click on the “Sign In with Yammer” button.
40. You will be prompted with the Yammer Login page. Enter your login credentials and click “Log In,” as shown in Figure 4-20.

    

    Figure 4-20. Yammer Login page

41. You will be presented with the Default.aspx page showing a message, as illustrated in Figure 4-21.

At this point, you have successfully implemented OAuth 2.0 server-side flow in an ASP.NET web application. In the next section, you will look at the client-side flow using a similar exercise. It will showcase the client-side flow in a Microsoft SharePoint-hosted app.

EXERCISE 4-2: CLIENT-SIDE FLOW USING THE “SIGN IN WITH YAMMER” BUTTON WITH THE JAVASCRIPT SDK

In this exercise, we will create a SPDS University, Microsoft SharePoint-hosted app for Microsoft SharePoint Online. There will be a “Log In with Yammer” button on the Microsoft SharePoint App’s target page.

Prerequisites for Creating a Basic Microsoft SharePoint-Hosted App

• A computer that is configured for app isolation with Microsoft SharePoint 2013 installed on it. If you’re using an Office 365 Developer Site, you already have a Microsoft SharePoint 2013 environment that supports OAuth.
• Visual Studio 2012 or higher.
• Office Developer Tools for Visual Studio 2012.

Create a New Microsoft SharePoint App Project

1. Start Visual Studio by using the Run as Administrator option.
2. The first screen presented to you is the Visual Studio Start page, as illustrated in Figure 4-25.

   

   Figure 4-25. Visual Studio Start page offers a quick way to get started

3. On the left side of the start page, on the navigation pane, choose New Project. Alternatively you can use the File New Project menu command.
4. This brings up the New Project window, as illustrated in Figure 4-26. Expand the Visual C# node, expand the Office/SharePoint node, and then choose Apps App for SharePoint 2013.

   

   Figure 4-26. Select the app for the SharePoint template under Office/SharePoint

5. You will be presented with the Specify the App for SharePoint Settings window. Name your app and provide the URL of the Microsoft SharePoint 2013 site that you want to use to debug your app. Under the “How do you want to host your app for SharePoint” option, choose SharePoint-hosted. Then click the Finish button, as shown in Figure 4-27.

   

   Figure 4-27. Specify the app for the SharePoint settings and provide the URL of the SharePoint web site that you want to use for debugging

   After the wizard finishes, you should have a structure in Solution Explorer that resembles Figure 4-28. The solution comprises one App Project that contains the SharePoint-hosted app structure with an AppManifest.xml file.

   

   Figure 4-28. The SharePoint-hosted app project structure

   Create Customer Ribbon Action

   We will now add a new “Menu Item Custom Action” item to the SharePoint app. But first we will add a page for the custom action.

6. Right-click on the Page node in the web project and add a new page. Name the page CustomActionTarget.aspx, as shown in Figure 4-29.

   

   Figure 4-29. Adding a new page to the SharePoint app project

   Add a Control “Menu Item Custom Action”

7. Right-click on the page node for the SharePoint project and add a new “Menu Item Custom Action” item. Name it MenuItem_PosttoYammer, as illustrated in Figure 4-30.

   

   Figure 4-30. Add a new menu item custom action to the SharePoint app project

8. You’ll be presented with the Specify the Properties to Create Custom Action Menu Item window, as illustrated in Figure 4-31. From there, you need to set the following properties for the custom action (refer to Table 4-16 for each property value).

   

   Figure 4-31. Set the properties for the custom action

   Table 4-16. OAuth URL’s Query String Parameter

   Property Question	Answer
   Where do you want to expose the custom action?	Choose Host Web
   Where is the custom action scoped to?	Choose List Template
   Which particular item is the custom action scoped to?	Choose Custom List
   What is the text on the menu item?	Type “Invoke post to Yammer custom action”

9. You’ll be presented with another window, entitled Specify the Properties to Create Custom Action Menu Item, as illustrated in Figure 4-32. From there, you need to set the following properties for the custom action (refer to Table 4-17 for property value).

   

   Figure 4-32. Set the properties for the custom action

   Table 4-17. Specify the Properties for the Custom Action

   Property Question	Answer
   What is the text on the menu item?	Enter “Invoke ’Post To Yammer Action”
   Where the custom action does navigates to?	Choose the CustomActionTarget.aspx which we created in previous step

10. After setting the properties for the custom action menu item, click Finish.

    Visual Studio generates the following markup in the elements.xml file of the menu item custom action feature:

    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
      <CustomAction Id="75be0d47-8c42-4f9b-afd4-7bb601ffc5e0.MenuItem_PostToYammer"
                    RegistrationType="List"
                    RegistrationId="100"
                    Location="EditControlBlock"
                    Sequence="10001"
                    Title="Invoke &apos;Post To Yammer&apos; action">
        <!--
        Update the Url below to the page you want the custom action to use.
        Start the URL with the token ~remoteAppUrl if the page is in the
        associated web project, use ~appWebUrl if page is in the app project.
        -->
        <UrlAction Url="~appWebUrl/Pages/CustomActionTarget.aspx?{StandardTokens}&amp;SPListItemId={ItemId}&amp;SPListId={ListId}" />
      </CustomAction>
    </Elements>

    Implement the Authentication

    We have all controls in the project so now we can start implementing the authentication using the JavaScript SDK. First we’ll modify the CustomActionTarget.aspx page by adding some code in the HTML markup.

11. Add the following HTML markup to CustomActionTarget.aspx. Add this within the <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"> placeholder:

    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <script type="text/javascript" data-app-id="Fmi5JYfF5jqMLCcydqkJWQ" src="https://c64.assets-yammer.com/assets/platform_js_sdk.js"></script>

    Here you need to replace data-app-id with your Yammer app’s ID. You need to get the client ID that was generated when you registered the app on Yammer.com.

    The second parameter sec refers to the JavaScript SDK.

12. Replace the following code snippet with ContentPlaceHolderID="PlaceHolderMain" in the CustomActionTarget.aspx file:

    <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
          <div>
            <h3>Yammer Authenication Example</h3>
            <br />
            <span id="yammer-login"></span>
          </div>
    
          <div class="logged-in" style="display:none">
                <p>User is now signed in to the app using Yammer</p>
                <button id="disconnect" class="yj-btn yj-btn-alt">Log out from your Yammer account</button>
          </div>
          <div class="logged-in" style="display:none">
                <h2>Authentication Logs</h2>
                <pre id="authResult"></pre>
          </div>
    
    </asp:Content>

    This code will display the “Log In with Yammer” button, as illustrated in Figure 4-33. It uses an HTML span control with ID="yammer-login" to create that button.

    

    Figure 4-33. The “Log In with Yammer” button created using the span control with Id=“yammer-Login”

13. Add the following JavaScript code to ContentPlaceHolderID="PlaceHolderAdditionalPageHead" of CustomActionTarget.aspx:

    01:  <script>
    02:        yam.connect.loginButton('#yammer-login',
    03:              function (resp) {
    04:                  if (resp.authResponse) {
    05:                      console.log(resp);
    06:                      displayAuthResult(resp);
    07:                  }
    08:              });
    
    09:        function displayAuthResult(resp) {
    10:            document.getElementById("yammer-login").innerHTML = 'Welcome to Yammer!, The user ID is:  ' + resp.access_token.user_id;
    11:           toggleLoginStatus(true);
    12:            $('#authResult').append(' ========= <br/>');
    13:            $('#authResult').append(' Access Token: <br/>');
    14:            $('#authResult').append(' ========= <br/>');
    15:            for (var field in resp.access_token) {
    16:                $('#authResult').append(' ' + field + ': ' +
    17:                   resp.access_token[field] + '<br/>');
    18:           }
    19:        }
    
    20:        function toggleLoginStatus(loggedIn) {
    21:            if (loggedIn) {
    22:                $('.not-logged-in').hide();
    23:                $('.logged-in').show('slow');
    24:            } else {
    25:                $('.not-logged-in').show('slow');
    26:                $('.logged-in').hide();
    27:            }
    28:        }
    29:  </script>

    This JavaScript code on line 2 calls the yam.connect.loginButton function by passing two parameters—the selector (ID of span control "yammer-login" as a selector) and the callback function (function that will be fired after the login flow is completed). The span control <span id="yammer-login"></span> in the ContentPlaceHolderId="PlaceHolderMain" will become a standard “Log In with Yammer” button. When this button is clicked, it will initiate the Yammer client-side OAuth workflow. Once the user approves or denies the SPDS University app, the OAuth callback will fire. The callback function on lines 3-8 first checks if AuthResponse is true and then calls the displayAuthResult function by passing the resp parameter. The displayAuthResult function code on line 9 changes the inner HTML of the span control to a welcome message and the user ID of the logged in user. The for loop on lines 15-18 displays all the properties of the resp.

14. The complete code of CustomActionTarget.aspx is shown in the following code snippet:

    <%@ Page Language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    
    <%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    
    <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
       <SharePoint:ScriptLink Name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
       <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <script type="text/javascript" data-app-id="Fmi5JYfF5jqMLCcydqkJWQ" src="https://c64.assets-yammer.com/assets/platform_js_sdk.js"></script>
        <script>
          yam.connect.loginButton('#yammer-login',
             function (resp) {
                  if (resp.authResponse) {
                      console.log(resp);
                      displayAuthResult(resp);
                  }
              });
        function displayAuthResult(resp) {
            document.getElementById('yammer-login').innerHTML = 'Welcome to Yammer!, The user ID is:  ' + resp.access_token.user_id;
            toggleLoginStatus(true);
            $('#authResult').append(' ========= <br/>');
            $('#authResult').append(' Access Token: <br/>');
            $('#authResult').append(' ========= <br/>');
            for (var field in resp.access_token) {
                $('#authResult').append(' ' + field + ': ' +
                   resp.access_token[field] + '<br/>');
            }
        }
        function toggleLoginStatus(loggedIn) {
            if (loggedIn) {
                $('.not-logged-in').hide();
                $('.logged-in').show('slow');
            } else {
                $('.not-logged-in').show('slow');
                $('.logged-in').hide();
            }
        }
    </script>
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
       <div>
          <h3>Yammer Authenication Example</h3>
          <br />
          <span id="yammer-login"></span>
      </div>
       <div class="logged-in" style="display: none">
              <h2>Authentication Logs</h2>
              <pre id="authResult"></pre>
          </div>
    </asp:Content>

    Run the Solution

15. You can run this app now and see that Visual Studio deploys the app to your site. To deploy it from Visual Studio, select Deploy from the project’s context menu, as illustrated in Figure 4-34.

    

    Figure 4-34. Visual Studio’s deploy solution

16. Visual Studio will deploy the solution to the SharePoint Online site. In the first step, it will prompt you to log in to your SharePoint Online site, enter your Office 365 credentials, and click on Sign In, as shown in Figure 4-35.

    

    Figure 4-35. Log in to the Office 365 site

17. You will be prompted to authorize the app. Click on the Trust It button and Visual Studio will deploy the app in the target site, as shown in Figure 4-36.

    

    Figure 4-36. SharePoint prompts you to authorize the app

18. You will be presented with the SharePoint app’s default page, as shown in Figure 4-37.

    

    Figure 4-37. The app’s default page

19. Now click on the “Log In with Yammer” button. You will be prompted with the Yammer Login screen, as illustrated in Figure 4-38.

After you log into Yammer using your Yammer credentials, Yammer will return to the callback function you have written in the Default.aspx function. In this case it is the inline callback function that checks if resp.authResponse is not null. If it is not null, that means the user is already logged into Yammer. The code then displays the fields available in access_token—user_id, network_id, network_permalink, network_name, token, view_members, view_groups, view_message, view_subscriptions, modify_subscriptions, modify_message, view_tags, created_at, authorized_at, and expires_at, as shown in Figure 4-39.

At this point, you have successfully implemented OAuth 2.0 client-side flow in a SharePoint-hosted app.