Community Toolbar

Conduit API

Case Study

Case Study -> Personal App -> User Login

In this section you will learn how to create a login component for the "Date Me" site.
User login can be implemented in one of two ways:

1. Gadget login: log in directly through the toolbar (demostrated here).

2. Site login: redirect to your website login page.

- Description

- Gadget login

1. On the HTML component, add client side onclick event to the login button. onclick="OpenFloatingWindow(LOGIN_FORM_URL)"

2. Implement a login form on your website which will be used as the gadget window source.

3. Implement the server side login onclick event button in the gadget login form. Use same user credentials validation logic as implemented in your website.

3.1. If validation failed, reload the gadget login form with a suitable error message.

3.2. If validation succeeded, use java script to refresh the toolbar and close the gadget login window.

Before Login:

After Login:

Flow chart:

+ Site login

Logout:

1. On the HTML component add client side onclick event to the logout button and use Ajax to invoke logout through server side handler (See code sample section for server side handler implementation).

2. Use java script to refresh the toolbar.

- 'Date Me' Code Sample

'Date Me' login button on the HTML component (personal data component)

 <input type="image" src="/developers/api/Images/login.gif" alt="Login" style="display:inline-table;vertical-align:middle" onclick="OpenFloatingWindow('http://212.235.77.237/Toolbar/ToolbarLogin.aspx', 340, 230);return false;"  />

'Date Me' login gadget window form aspx file

 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="ToolbarLogin.aspx.cs" Inherits="ToolbarLogin" %>    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns="http://www.w3.org/1999/xhtml" >  <head runat="server">      <title>Date Me | Toolbar Login</title>            <!-- Conduit API script declaration -->      <script type="text/javascript" language="JavaScript" src="http://api.conduit.com/BrowserCompApi.js" ></script>              <script type="text/javascript" language="JavaScript" src="../Scripts/ToolbarApiCommunication.js"></script>            <style type= "text/css">          body          {  	        font-size:12px;  	        font-family:Verdana;          }      </style>  </head>  <body>      <form id="loginForm" runat="server">      <div class="centered" style="height:180px;width:314px;background-image:url('/developers/api/Images/login_frame.gif');background-repeat:no-repeat;background-position:center"&gt;              &lt;table cellpadding="3" cellspacing="0" border="0" style="position:relative;top:4px;left:4px"&gt;                          &lt;tr style="vertical-align:top"&gt;                  &lt;td colspan="3"&gt;                      &lt;img src="/developers/api/Images/title_login.gif"  /&gt;                  &lt;/td&gt;              &lt;/tr&gt;              &lt;tr&gt;                  &lt;td style="width:17px"&gt;&lt;/td&gt;                  &lt;td&gt;                      User Name:                  &lt;/td&gt;                  &lt;td&gt;                      &lt;asp:TextBox runat="server" ID="userNameTextBox" Width="180px" Height="20px" BorderStyle="Solid" BorderColor="#ACCEFF"&gt;&lt;/asp:TextBox&gt;                  &lt;/td&gt;              &lt;/tr&gt;              &lt;tr&gt;                  &lt;td style="width:17px"&gt;&lt;/td&gt;                  &lt;td&gt;                      Password:                  &lt;/td&gt;                  &lt;td&gt;                      &lt;asp:TextBox runat="server" ID="passwordTextBox" Width="180px" Height="20px" BorderStyle="Solid" BorderColor="#ACCEFF"&gt;&lt;/asp:TextBox&gt;                  &lt;/td&gt;              &lt;/tr&gt;              &lt;tr&gt;                  &lt;td style="width:17px"&gt;&lt;/td&gt;                  &lt;td colspan="2"&gt;                      &lt;asp:CheckBox runat="server" ID="rememberMeCheckBox" Text="Remember Me" Checked="true"  /&gt;                  &lt;/td&gt;              &lt;/tr&gt;              &lt;tr align="right"&gt;                  &lt;td style="width:17px"&gt;&lt;/td&gt;                  &lt;td colspan="2" style="padding-right:30px" valign="top"&gt;                                          &lt;asp:Label runat="server" ID="userMessageLable" ForeColor="red"&gt;&lt;/asp:Label&gt;                       &lt;asp:ImageButton runat="server" ID="loginButton" ImageUrl="~/Images/login_up.gif" onmouseout="this.src='/developers/api/Images/login_up.gif'" onmouseover="this.src='/developers/api/Images/login_dn.gif'"  /&gt;                  &lt;/td&gt;              &lt;/tr&gt;          &lt;/table&gt;      &lt;/div&gt;      &lt;/form&gt;  &lt;/body&gt;  &lt;/html&gt;

'Date Me' login gadget window form aspx.cs file

 using System;  using System.Web.Security;    public partial class ToolbarLogin : System.Web.UI.Page   {      protected void Page_Load(object sender, EventArgs e)      {          // If first time load a script that sets the user name and password          if (!Page.IsPostBack)          {              String loadScript = "<script language='javascript'>loadUser();</script>";              Page.ClientScript.RegisterStartupScript(this.GetType(), "load", loadScript);          }      }        protected void loginButton_Click(object sender, EventArgs e)      {          if (FormsAuthentication.Authenticate(userNameTextBox.Text, passwordTextBox.Text))          {              userMessageLable.Text = "Success";              String script = "<script language='javascript'>";              if (rememberMeCheckBox.Checked)              {                  script += "StoreKey(\"userName\",\"" + userNameTextBox.Text + "\"); StoreKey(\"password\",\"" + passwordTextBox.Text + "\");";              }              script += "RefreshToolbar();CloseFloatingWindow();</script>";              Page.ClientScript.RegisterStartupScript(this.GetType(), "refresh", script);              FormsAuthentication.SetAuthCookie(userNameTextBox.Text, rememberMeCheckBox.Checked);          }          else          {              userMessageLable.Text = "Failed to login";          }      }  }

'Date Me' logout handler ashx file

 <%@ WebHandler Language="C#" Class="LogoutUser" %>    using System;  using System.Web;  using System.Web.SessionState;    public class LogoutUser : IHttpAsyncHandler, IReadOnlySessionState  {          #region IHttpAsyncHandler Members        private AsyncProcessorDelegate m_AsyncProcessorDelegate;      protected delegate void AsyncProcessorDelegate(HttpContext context);        public IAsyncResult BeginProcessRequest(HttpContext context, AsyncCallback cb, object extraData)      {          m_AsyncProcessorDelegate = new AsyncProcessorDelegate(ProcessRequest);          return m_AsyncProcessorDelegate.BeginInvoke(context, cb, null);      }        public void EndProcessRequest(IAsyncResult result)      {          m_AsyncProcessorDelegate.EndInvoke(result);      }        #endregion        #region IHttpHandler Members        public void ProcessRequest(HttpContext context)      {          if (context.User.Identity.IsAuthenticated)          {              // Delete the users auth cookie              HttpCookie cookie = System.Web.Security.FormsAuthentication.GetAuthCookie(context.User.Identity.Name, false);              cookie.Expires = DateTime.Now.AddDays(-1);              context.Response.Cookies.Remove(Common.LOGIN_COOKIE_NAME);              context.Response.Cookies.Add(cookie);              context.Session.Clear();          }      }        public bool IsReusable      {          get          {              return false;          }      }        #endregion      }