Change the windows authentication to Form Based authentication for SharePoint 2007 Site

I am assuming  that you have already created a SharePoint site on your machine which is already running with a windows authentication as it is requires minimum configuration to start with. If you don’t have a site running on windows authentication you can create it using the following link

Link: http://technet.microsoft.com/en-us/library/cc262668(office.12).aspx

We will split our tutorial in 6 steps as below.

Step 1: Create SQL Server Database for membership

Step 2: Adding user to the database.

Step 3: Web.config Modifications

Step 4: Add newly created user to the SharePoint site

Step 5: Enable the “Forms” Authentication

Step 6: Run the application

Step 1: Create SQL Server Database for membership

To enable Form based authentication, we need to have a database to store the user information such as user credentials, roles associated, etc. To create the database Microsoft has provided a utility which creates a database for us. Utility can be found here %windir%\Microsoft.Net\Framework\vx.x.xxxxx on your server. Refer the image below.

Run the aspnet_regsql application and it will start the ASP.net SQL Server wizard. Refer the image below

Click Next >

Select the first option “Configure SQL Server for application services” and then click next >

It will display the server name. Select the proper Authentication and Database (I have kept it at default aspnetdb) Click Next >

It will start creating the database “aspnetdb” in your SQL Server and required tables, store procedures for user membership. Click on finish and exit the wizard.

You can open SQL Server to check if the database is created and what tables/Store Procedures wizard has created.

Step 2: Adding user to the database.

We have all the necessary stored procedure to create new user in the database. Using these procedures we can create our custom user interface to add user to the database or we can use the membership seeder tool provided by Codeplex

http://cks.codeplex.com/releases/view/7450#DownloadId=19598

For simplicity, We will use these tool to create user. Extract the download folder  and execute the MembershipSeeder.exe file

Enter the username, password, email address in the screen as shown below

Currently we have to create just one user so don’t forget to check the “Only create or delete 1 user; don’t user the # of users field” Else it will create 50 users with the prefix specified in the User Prefix.

Click on Create Button and it will add the user in the aspnetdb. To check if user has been added, you can execute the following query on the table “aspnet_Users”

SELECT  [UserName]       ,[LoweredUserName]       ,[MobileAlias]       ,[IsAnonymous]       ,[LastActivityDate]   FROM [aspnetdb].[dbo].[aspnet_Users]

Step 3: Web.config Modifications

Following changes has to be made din web.config file of the site. Open the web.config of the SharePoint site you want to change the authentication to Forms.

Add the following connection string in the <connectionStrings > part of the file.

<add name="fbaSQL" connectionString="server=localhost;database=aspnetdb;Trusted_Connection=true" />

Replace the localhost with the database server name if Databaser server is hosted on other  machine.

Replace the aspnetdb with the database name you specified in Step 1.

Add the following Lines in the <system.web> part of the file.

<membership  defaultProvider="fbaMembers">       <providers>         <add connectionStringName="fbaSQL" applicationName="/" name="fbaMembers" type="System.Web.Security.SqlMembershipProvider, System.Web,&#xD;&#xA;          Version=2.0.3600.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />       </providers>     </membership>

Note : Do not forget to specify the “deafultProvider” attribute in the membership tag

Add the following line inside the <PeoplePickerWildcards> tag

<PeoplePickerWildcards>       <clear />       <add key="AspNetSqlMembershipProvider" value="%" />       <add key="fbaMembers" value="%" />     </PeoplePickerWildcards>

Step 4: Add newly created user to the SharePoint site.

Go to the application and make sure that site is running in Windows authentication.

Go to the setting s page http://<Sitename>/_layouts/settings.aspx  of the site.

Click on “Advanced Permissions” -> Click on “New” -> “Add Users”

It will open the Add User screen. Enter the username you created in the step 2 and click the people picker button, It will find user. Refer the image below

Give him the required permissions and then click on Ok. Your user will be added to the sharepoint site.

Step 5: Enable the “Forms” Authentication

Open the web.config file of the site. Search for the tag “authentication”. It would be running in “Windows” authentication. Change it to “Forms” and add the <forms loginUrl="~/_layouts/login.aspx"/> in it.

Your authentication tag should look like  below

<authentication mode="Forms" >       <forms loginUrl="~/_layouts/login.aspx"/>     </authentication>

Step 6: Run the application

Open the site. It will redirect you to the SharePoint default login page as shown below

Enter the required credentials and click on “Sign in”. It will redirect you to the SharePoint site with the logged in user as “Dhaval”

Congratulations! Your site is running in the Form Based Authentication mode.

More Features:

As we are done with the basics of FBA, you can further explore more features of the FBA,

1.  Create your own custom membership so that you can override the “ValidateUser” method to do custom validation on the SharePoint.
2.  It is not necessary to use the separate database for Forms authentication. You can use the same existing database of your application. You just need to add the required tables in your application database. The script files can be found under %windir%\Microsoft.Net\Framework\vx.x.xxxxx of your server.

Silverlight Visual Datagrid

In my previous post I showed you how to make your own 3D chart. Here in this post I have demonstrated about making your normal Data Grid to more visual and enhanced Silverlight Datagrid.

Data Grid is generally used to retrieve the list of data in the table on the user front. Silverlight provides the flexibility to represent the data in different way that helps the end user to understand the data in more clear way and with the minimal efforts.

By default the data grid without any style looks like this.

By the end of this tutorial you will be able to create data grid that is more attractive and suitable for rich user interface.

You can easily see that both the data grids shows the same level of details but the later one is more fancy and jazzy, very suitable for the Rich UI applications.

 

Create Silverlight Application:

Open Visual studio 2008 -> File -> New Project -> select ‘Silverlight’ in Project types and Silverlight Application in Templates.

‘Add Silverlight Application’ box appears with two types of host to choose from.  We can either host the Silverlight content in an ASP.NET web site or to host it in a HTML web site. We will choose the first option “Add a new ASP.NET Web project to the solution to host Silverlight” and the project type as ASP.NET Web Application Project and click OK. This will create new application in IDE.

On Clicking ok It will create two projects

1)    VisualDataGrid –Silverlight Application which will generate .xap file

2)    VisualDataGrid.Web- To Host the .xap file generated by the previous project

Preparing the Sample Data for Data Grid:

Create a xml file called Users.xml in the VisualDataGrid project as shown below

Click on Add will create a Users.xml file. Paste the following contents into the file.

<?xml version="1.0" encoding="utf-8" ?> <Users>   <user>     <FirstName>Roger</FirstName>     <LastName>Fred</LastName>     <ImagePath>../Images/Roger.JPG</ImagePath>     <Age>30</Age>     <Gender>Male</Gender>     <EMail>Roger_Fred@infosys.com</EMail>   </user>   <user>     <FirstName>Sharon</FirstName>     <LastName>Silver</LastName>     <ImagePath>../Images/Sharon.JPG</ImagePath>     <Age>30</Age>     <Gender>Female</Gender>     <EMail>Sharon_Silver@infosys.com</EMail>   </user>   <user>     <FirstName>Catherine</FirstName>     <LastName>Zeta Jones</LastName>     <ImagePath>../Images/Catherine.JPG</ImagePath>     <Age>30</Age>     <Gender>Female</Gender>     <EMail>Catherine_Jones@infosys.com</EMail>   </user>   <user>     <FirstName>Elliot</FirstName>     <LastName>Brunes</LastName>     <ImagePath>../Images/Elliot.JPG</ImagePath>     <Age>25</Age>     <Gender>Male</Gender>     <EMail>Elliot_Brunes@infosys.com</EMail>   </user>   <user>     <FirstName>Benjamin</FirstName>     <LastName>Button</LastName>     <ImagePath>../Images/Benjamin.JPG</ImagePath>     <Age>40</Age>     <Gender>Male</Gender>     <EMail>Benjamin_Button@infosys.com</EMail>   </user>   <user>     <FirstName>Darren</FirstName>     <LastName>Fredrick</LastName>     <ImagePath>../Images/Darren.JPG</ImagePath>     <Age>30</Age>     <Gender>Male</Gender>     <EMail>Darren_Fredrick@infosys.com</EMail>   </user>   <user>     <FirstName>Elton</FirstName>     <LastName>Joseph</LastName>     <ImagePath>../Images/Elton.JPG</ImagePath>     <Age>30</Age>     <Gender>Male</Gender>     <EMail>Elton_Joseph@infosys.com</EMail>   </user>   <user>     <FirstName>Dorothy</FirstName>     <LastName>Deborah</LastName>     <ImagePath>../Images/Dorothy.JPG</ImagePath>     <Age>23</Age>     <Gender>Female</Gender>     <EMail>Dorothy_Deborah@infosys.com</EMail>   </user>   <user>     <FirstName>Charlie</FirstName>     <LastName>Bewley</LastName>     <ImagePath>../Images/Charlie.JPG</ImagePath>     <Age>23</Age>     <Gender>Male</Gender>     <EMail>Charlie_Bewley@infosys.com</EMail>   </user>   <user>     <FirstName>Harry</FirstName>     <LastName>Potter</LastName>     <ImagePath>../Images/Harry.JPG</ImagePath>     <Age>16</Age>     <Gender>Male</Gender>     <EMail>Harry_Potter@infosys.com</EMail>   </user> </Users>

Creating Data Grid:

In VisualDataGrid project it has created MainPage.xaml. This will be the default starting page of the application. Go to the design part and drag and drop the DataGrid control from the toolbox inside the xaml view of the page.

Edit the design code and change it to following

<StackPanel x:Name="LayoutRoot">

        <data:DataGrid x:Name="myDataGrid" HorizontalAlignment="Left"

                        AutoGenerateColumns="True"

FontFamily="Verdana" FontSize="11" HeadersVisibility="All"

HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto"

                        Width="400">

        </data:DataGrid>

</StackPanel>

Now open the source code of the file. Make the User Class in the file which will act as our source to the data grid.

public class User

{

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string Age { get; set; }

        public string Gender { get; set; }

        public string ImagePath { get; set; }

        public string EMail { get; set; }

}

Now to retrieve the values from the xml we need to use the LINQ to XML. For this you need to add reference of System.xml.Linq and System.Windows.Data, using the Add Reference.

After adding the references, add the following code in the constructor of the MainPage.xaml.cs.

XDocument oDoc = XDocument.Load("Users.xml");

var myData = from info in oDoc.Descendants("user")

             select new User

            {

            FirstName = Convert.ToString(info.Element("FirstName").Value),

            LastName = Convert.ToString(info.Element("LastName").Value),

            Age = Convert.ToString(info.Element("Age").Value),

            Gender = Convert.ToString(info.Element("Gender").Value),

            ImagePath = Convert.ToString(info.Element("ImagePath").Value),

            EMail = "mailto:" + Convert.ToString(info.Element("EMail").Value)

            };

myDataGrid.ItemsSource = new PagedCollectionView(myData);

Now if you run the application using F5 it will show the output as follows

This is the default data grid provided by the Silverlight without any styling. Now we have to make our grid as fancy as I have showed you earlier. We are proceeding in the right direction.

First of all change the following properties of Data Grid

AutoGenerateColumns="False" HeadersVisibility="None"

As we will create our own columns and we don’t require any headers.

Now we will add our column to the data grid. We will use just one column as it solves our purpose although user is permitted to add any number of template columns in it.

<data:DataGrid.Columns>                 <data:DataGridTemplateColumn>                     <data:DataGridTemplateColumn.CellTemplate>                         <DataTemplate>                         </DataTemplate>                     </data:DataGridTemplateColumn.CellTemplate>                 </data:DataGridTemplateColumn>             </data:DataGrid.Columns>

Now we have to prepare the DataTemplate for our column. Clearly The layout we want for our each row has to be similar to this.

So we have to Create a grid with 2 Columns. First column will have only image element while the other column will have 5 StackPanels Oriented Vertically  having individual Details as shown in the figure. (These Layout changes according the different perspectives of the user)

<Grid> <Grid.ColumnDefinitions>             <ColumnDefinition Width="100" />             <ColumnDefinition Width="300"/>       </Grid.ColumnDefinitions>       <Image Source="{Binding ImagePath}" Grid.Row="0" Grid.Column="0" Margin="10" Width="80" Height="80"/>       <StackPanel Grid.Row="0" Grid.Column="1" Orientation="Vertical" Margin="10"> <StackPanel Orientation="Horizontal">             <TextBlock Text="First Name : " FontWeight="Bold" />             <TextBlock Text="{Binding FirstName}" /> </StackPanel>       <StackPanel Orientation="Horizontal">             <TextBlock Text="Last Name : " FontWeight="Bold" />             <TextBlock Text="{Binding LastName}" /> </StackPanel>       <StackPanel Orientation="Horizontal">             <TextBlock Text="Age : " FontWeight="Bold" />             <TextBlock Text="{Binding Age}" />       </StackPanel>       <StackPanel Orientation="Horizontal">             <TextBlock Text="Gender : " FontWeight="Bold" />             <TextBlock Text="{Binding Gender}" />       </StackPanel>       <StackPanel Orientation="Horizontal">             <HyperlinkButton Content="Mail Me.." NavigateUri="{Binding EMail}" />       </StackPanel>       </StackPanel> </Grid>

Also we need to add Pagination to the data grid as It takes more space than the default grid. Its good to have pagination. Silverlight provides the built in functionality to add pagination.

Drag and drop the DataPager control from the Toolbox below the DataGrid Tag.

Bind the Source of the Pager to the Itemsource of the Datagrid  directly. This automatically adds the pagination to the Datagrid.

<data:DataPager Source="{Binding Path=ItemsSource,ElementName=myDataGrid}" PageSize="5" AutoEllipsis="True" Background="#FFFFFF" Width="400" HorizontalAlignment="Left"/>

This completes the pagination as well. Now we need to have the user images located in the ClientBin/Images Folder of the VisualDataGrid.Web project.

Now we are ready with our custom data grid. Run the Application using F5 and it should show the output as follows.

This is how one can achieve the usability of the application. It is  more readable, eye catching and fancy.