Walkthrough: Login with Twitter Account in ASP.NET MVC 5 APP using ASP.NET Identity 2.0

ASP.NET Identity 2.0 simplifies task of social authentication in an ASP.NET MVC App at the great extent. There are lot to learn about ASP.NET Identity 2.0 and in further posts I will cover that. However In mean time if you are curious you can find the resources for ASP.NET Identity 2.0 here

To start with I created an ASP.NET MVC Application in Visual Studio 2013 y choosing MVC project template as follows:

clip_image002

Great, once the project is created next you need to configure Twitter for the application. To start with navigate to https://apps.twitter.com and select Create New App as shown below:

clip_image004

To create the Twitter application fill the form as follows. Off course you should provide Name, Description and Website information as of your application. Callback URL filed is worth discussing here, for development environment use 127.0.0.1 instead of localhost as the server for Callback URL. For any other server give fully qualified server name. To create the new Twitter application form can be filled as follows:

clip_image006

That’s it. Now click on API Keys and copy the API Key and API Secret, you will need them in the application.

 clip_image008

At the last step you need to open the project and browse to the App_Start folder. In this folder you will find a file Startup.Auth.cs. Open this file and uncomment the code app.UseTwitterAuthentication. You should also provide the consumerKey and consumerSecret key from Twitter here. (we created these keys in previous steps)

Startup.Auth.cs

clip_image010

This is it Press F5 to run the application. And click on Login, you should see the Twitter option in Use another Service to log in.

clip_image012

Click on the Twitter option and you will be asked to authorize the app.

clip_image014

Once authorization is done, you can register with the Twitter username.

clip_image016

Now you are logged in to the application using Twitter account. So as you see ASP.NET Identity 2.0 makes it super easy to work with social authentication in the ASP.NET MVC or the ASP.NET application.

In further posts, I will share more on ASP.NET Identity 2.0 learning. Happy Coding.

User Instance login flag is not allowed when connecting to a SQL Server instance: Solved

While working with an ASP.NET MVC application I encountered following exceptions:

clip_image002

Exception clearly says that user instance login flag is not allowed when connecting to a SQL Server instance. For sure this error is related to SQL Server instance I am working on in this particular application. I examined the connection string in the web.config file.

clip_image003

There are two important points about this connection string:

  1. It points to local SQL Server database.
  2. User Instance is set to true

All local database runs under user instance and hence they don’t allow to configure user instance value in the web.config file. Removing User Instance entry should solve this problem. I modified connection string as follows:

clip_image001

And changing this resolved the issue. Hope it helps.

Three simple steps to use Kendo UI Web in ASP.NET MVC 5

I have seen the developers struggling to work with the KendoUI Web in an ASP.NET MVC application. In this post I will show you three steps required to get working with the KendoUI Web in the ASP.NET MVC application. At the end of the post we will take a look on working with the autocomplete widget.

Let us follow the steps as given below:

Step 1: Add Reference

Add the reference of KendoUI Web the project using Package Manager Console. After successful addition, you should find reference added in the Content folder and the Scripts folder.

image

Step 2: Bundle the required files

Open BundleConfig.cs file. In this file add two entries, one for the KendoUI Web scripts and other for Kendo UI Web CSS.

Add the script entry as follows:


bundles.Add(new ScriptBundle("~/bundles/kendoui").Include(
                 "~/Scripts/kendo/2014.1.318/kendo.web.min.js"
                ));


Next add the CSS files for KendoUI widgets. CSS for all the widgets can be bundled as follows:


    bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
            "~/Content/kendo/2014.1.318/kendo.common-bootstrap.min.css",
            "~/Content/kendo/2014.1.318/kendo.bootstrap.min.css"));


Step 3: Refer the Bundles

Once bundle for the Kendo UI Web has been created, you need to add them on the layout file. That can be added as follows:


    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/kendo/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/kendoui")


By default you will find the jQuery bundle at the end of the layout file. To work with Keno UI widgets, you should move the jQuery bundle at the top of the file and as well include the bundles of KendoUI CSS and Scripts.

These are the three steps you should follow to work with KendoUI in an ASP.NET MVC 5 application.

Use KendoUI Web Widgets

Now let us see the autocomplete widget in the action. I have created controller returning JSON data as follows:


        public ActionResult Index()
        {
          
           return View();
        }

        public ActionResult GetMP()
        {
            var result = from r in _db.GetMPDetails()                      
                         select r;            
            return Json(result, JsonRequestBehavior.AllowGet);
        }


We will bind returned JSON from the GetMP() action to the autocomplete widget. On the razor view you can create autocomplete as follows:

<input id="mp" />

<script type="text/javascript">
    $(document).ready(function () {
       
        //create AutoComplete UI component
        $("#mp").kendoAutoComplete({
            dataTextField: "Name",
            filter: "startswith",
            minLength: 3,
            dataSource: {
                
                transport: {
                    read: "/Mpsearch/GetMP",
                    type:"json"
                }
            }
        });

    })
</script>

Make sure the View is using the layout file in which you added reference of the bundles.

Summary

As we seen in this post that working with Kendo UI Web widgets are as simple as following above three steps:

  1. Add reference of Kendo UI Web
  2. Create the bundles
  3. Add bundles reference in layout page

I hope this post is useful. Happy coding.