Follow this blog

Thursday, May 22, 2014

.NET project on online Source control

Visual Studio 2013 express have a option to add your project to Source Control. It is easy to add project to local repository location. In this article you will find step by step tutorial how to add your project to free private Source control located on the internet.

Bitbucket supports private or public Git/Mercurial repositories up to 5 users.

Why you need online Source control Repository?

Let's say you developing your project and one day your computer crash down. It is pity to lose all your development effort till this point. So if you have local Source Control repository you will lost everything. But if you have online repository you could continue to work from your last check in on other computer.

Of course, there are other reasons why you should use online Source safe like sharing work and code with other people who are distant from you but in my case online backup is main reason to use online source control.

Step by step guide for online Source Control with Visual Studio 2013 express
  • To add your project to Source control click FILE --> Add to Source Control



  • Choose Git radio button and click OK

  • If you get error like this: "The current solution has projects that are located outside the solution folder. These projects will not be source controlled in the Git repository..." check Add ASP .NET Empty Web Site to Git Source control

  • Open Team Explorer, VIEW --> Team Explorer

  • Choose Changes in dropdown of Team Explorer window



  • Commit to local GIT, enter the comment (eg. "Initial Commit") and choose Commit from dropdown



  • Click on "Unsynced Commits"



  • Now you need to enter URL of an empty GIT repo, to get this URL you need to create account on Bitbucket

    • Creating Bitbucket repository

    • Go to Bitbucket and Sign up for free

    • Click on button Create to create new Bitbucket repository


    • enter Name, Description, Access level (in this sample I checked private repostiroy checkbox), Repository type (Git) and Language (C#)

    • after Create repository button is clicked you create new repository

    • next step is to copy URL,
      URL is in format :
      https://bitbucket.org/[ProfileName]/[RepoName]
      So if my profile on bitbucket is Me URL will be:
      https://bitbucket.org/Me/newwebsite

    • let's go back on Visual Studio 2013

  • In Visaul Studio in Team Explorer paste link of your BitBucket Repository and click Pubish


  • Enter you BitBucket username and password if you are asked. If everything is ok you will see meassage : "The origin remote has been added and the current branch has been published."

  • If you click Sync button your code will be synced on online BitBucket location

  • You can check it by going on BitBucket web page, choose repository and clicking Source under Navigation tab.

Monday, May 19, 2014

Add ASP .NET Empty Web Site to Git Source control

Visual Studio 2013 have feature to add your .NET projects to Git source control. But when you try to add your ASP NET Empty Web Site solution to Git Source control it failed. The message is:
The current solution has projects that are located outside the solution folder. These projects will not be source controlled in the Git repository. To add all the projects to a single Git repository please consolidate all projects under a singe folder.

Here are step by step instruction how to create new ASP NET Empty Web Site which can be added to GIT source control.

  • First open New Web Site in Visual Studio



  • the second step is to choose ASP .NET Empty Web Site,I choose NewWebSite for name of a site, after button OK is clicked site will be created in
    C:\Users\Name\Documents\Visual Studio 2013\WebSites\NewWebSite
    folder.
    Inside path instead of Name will be User name on your computer



  • Solution is created. If you click on Solution NewWebSite and look in the properties prpoerty Path you will see solution file is located inside:
    C:\Users\Name\Documents\Visual Studio 2013\Projects\NewWebSite\
    It is not good if you want to add your web site to source control

  • Click on the solution file, click menu FILE --> Save NewWebSite.sln As ...
    Now save your solution file inside WebSite folder:
    C:\Users\Name\Documents\Visual Studio 2013\WebSites\NewWebSite
    Your .sln file should be in same folder as WebSite project

  • maybee it is good idea to delete folder:
    C:\Users\Name\Documents\Visual Studio 2013\Projects\NewWebSite\
    to make things simpler

  • Now you can click FILE --> Add to Source Control


  • Choose Git radio button and click OK.

  • So, you successfully created Local Git Repository for your ASP .NET Empty WebSite

Tuesday, May 13, 2014

ASP.NET authentication with Facebook, LinkedIn and Google

How to make possible to authenticate with some of social network ID (such as Google authentication, facebook login and LinkedIn) to your ASP.NET web form application?


Use Visual Studio 2013 built in functionality

One possibility is to use Visual Studio 2013 built in functionality inside ASP .NET Web Form Site template (it is not only template with built in authentication). You need to configure project to work with social networks logins.

To learn more how to configure Visual Studio 2013 to work with external social sites visit: External authentication services c# and Logging In Using External Sites in an ASP.NET Web Pages.


    Why I do not like VS built in authentication inside templates

  • I find it difficult to understand and change to my application needs

  • do not know what happens under the hood, for example in ASP .NET Web Form Site template, attached database is created with tables for storing data about users, I do not know when this database is created and do not know how methods exactly work

  • connecting to external social networks is relatively new and have bugs

  • so if you want to use proposed model go with it, but if you have some specific ideas maybe it is good idea to start from scratch

How Asp.NET logging communicate with Facebook

This is simplified and User agent is not taken into account
  • ASP.NET site sends facebook Application ID and URL of ASP.NET application to facebook
    (https://graph.facebook.com/oauth/authorize?client_id=[ApplicationID]&redirect_uri=[ASP.NET_ADDRESS])

  • user is redirected to facebook site where he need to login with his facebook login

  • facebook authorization page is redirected to ASP.NET authorization page, inside URL is "code" query parameter

  • ASP.NET read code parameter and send web request to facebook with ApplicationID, Application secret and code which is received two steps before

  • ASP.NET get response from facebook site, now ASP.NET have a token

  • Now ASP.NET can send request to facebook site with token to get data about user


There is a code for authentication to your ASP.NET application with Facebook login.

  • Facebook button is first clicked

  • when facebook page redirect back to ASP.NET page GetAuthToken method is called and then GetUserInfo method is called

  • inside GetUserInfo method ASP.NET get id of facebook user and user facebook name

  • you must create facebook application to get APP_KEY and APP_SECRET, find more about it here

Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.IO;
using Newtonsoft.Json.Linq;
using System.Net;

public partial class JustFacebook : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {       
        if (Request.Url.AbsolutePath.IndexOf("/OnFacebookAuth") > 0 && !string.IsNullOrEmpty(Request.Params["code"]))
        {          
            GetAuthToken();
            GetUserInfoAction();
        }

    }

    protected void btnFacebookLogin_Click(object sender, EventArgs e)
    {
        string redirectTo = Request.Url.Scheme + "://" + Request.Url.Authority + Request.Url.AbsolutePath + "/OnFacebookAuth";
        string request = string.Format("https://graph.facebook.com/oauth/authorize?client_id={0}&redirect_uri={1}", "APP_KEY", redirectTo);
        Response.Redirect(request);
    }

    private void GetAuthToken()
    {
        string redirectTo = Request.Url.Scheme + "://" + Request.Url.Authority + Request.Url.AbsolutePath;
        string code = Request.Params["code"];
        string facebookApplicationSecret = "APP_SECRET";
        string request = string.Format("https://graph.facebook.com/oauth/access_token?client_id={0}&redirect_uri={1}&client_secret={2}&code={3}", APP_KEY, redirectTo,facebookApplicationSecret, code);

        var httpRequest = (HttpWebRequest)WebRequest.Create(request);
        var httpResponse = (HttpWebResponse)httpRequest.GetResponse();

        Encoding enc = Encoding.UTF8;
        var loResponseStream = new StreamReader(httpResponse.GetResponseStream(), enc);
        string response = loResponseStream.ReadToEnd();
        try
        {
            string[] pairResponse = response.Split('&');
            string accessToken = pairResponse[0].Split('=')[1];
            Session["FacebookAccessTokenSession"] = accessToken;
        }
        catch
        {
            throw;
        }
    }

    private void GetUserInfoAction()
    {
        if (Session["FacebookAccessTokenSession"] != null)
        {
            object token = Session["FacebookAccessTokenSession"];
            string request = string.Format("https://graph.facebook.com/me?access_token={0}", token);
            var httpRequest = (HttpWebRequest)WebRequest.Create(request);
            var httpResponse = (HttpWebResponse)httpRequest.GetResponse();

            Encoding enc = Encoding.UTF8;
            var loResponseStream = new StreamReader(httpResponse.GetResponseStream(), enc);

            string response = loResponseStream.ReadToEnd();
            JObject jsonObject = JObject.Parse(response);

            var id = (string)jsonObject["link"];
            var displayName = (string)jsonObject["name"];
        }
    }
}


Simplest way to authenticate using external social network logins

Some good people make various classes to make easier to login using Facebook, Google authenticate, LinkedIn and others. Those classes hides complexity of communicating with LogIn services.

I find ASPSnippets very handy and easy for use. There is simple step by step tutorial for:


Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using ASPSnippets.LinkedInAPI;
using ASPSnippets.FaceBookAPI;
using System.Web.Script.Serialization;
using System.Data;

public partial class JustASPSnippets : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        FaceBookConnect.API_Key = FACEBOOK_KEY;
        FaceBookConnect.API_Secret = FACEBOOK_SECRET;
        if (!string.IsNullOrEmpty(Request.Params["code"]) && Session["SocialNetworkCalled"] == "Facebook")
        {
            string code = Request.QueryString["code"];
            string data = FaceBookConnect.Fetch(code, "me");
            FaceBookUser faceBookUser = new JavaScriptSerializer().Deserialize<FaceBookUser>(data);

            string id = faceBookUser.Id;
            string userName = faceBookUser.UserName;
            string name = faceBookUser.Name;
            string email = faceBookUser.Email;
        }

        LinkedInConnect.APIKey = LINKEDIN_KEY;
        LinkedInConnect.APISecret = LINKEDIN_SECRET;
        LinkedInConnect.RedirectUrl = Request.Url.AbsoluteUri.Split('?')[0];
        if (LinkedInConnect.IsAuthorized && Session["SocialNetworkCalled"] == "LinkedIn")
        {
            DataSet ds = LinkedInConnect.Fetch();
            string a = ds.Tables["person"].Rows[0]["first-name"].ToString();
            string b = a + " " + ds.Tables["person"].Rows[0]["last-name"].ToString();
            string email = ds.Tables["person"].Rows[0]["email-address"].ToString();
            string linkeinemail = ds.Tables["person"].Rows[0]["id"].ToString();
        }
        
        Session["SocialNetworkCalled"] = "";

    }

    protected void btn_FacebookLogin_Click(object sender, EventArgs e)
    {
        Session["SocialNetworkCalled"] = "Facebook";
        FaceBookConnect.Authorize("email,user_birthday", Request.Url.AbsoluteUri.Split('?')[0]);
    }

    protected void btn_LinkedInLogin_Click(object sender, EventArgs e)
    {
        Session["SocialNetworkCalled"] = "LinkedIn";
        LinkedInConnect.Authorize();    
    }
}

FaceBookUser class:

Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for Facebook
/// </summary>
public class FaceBookUser
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string UserName { get; set; }
    public string PictureUrl { get; set; }
    public string Email { get; set; }
    public string Birthday { get; set; }
    public string Gender { get; set; }
    public FaceBookEntity Location { get; set; }
}

public class FaceBookEntity
{
    public string Id { get; set; }
    public string Name { get; set; }
}

Let's try explain code in few lines:


  • when btn_FacebookLogin is clicked, FaceBookConnect.Authorize method is called, it redirect user to facebook login page

  • if user successfully login to facebook, he is redirected back to ASP.NET application Login page

  • then inside Page_Load it is recognized ASP.NET page is loaded after facebook login page

  • FaceBookConnect.Fetch method is called and ASP.NET application can get data about user

  • with LinkedIn authentication is similar process

A few more things

Be careful with Google OpenId identifier because it change if you change domain.


Thursday, August 8, 2013

Open localhost web aplication on iphone from your local IIS

Find how to open and test your ASP.NET application located on your Win 7.0 from your iPhone.



  • 1. turn on WLAN on your PC

  • 2. place your ASP.NET application on your IIS 7.0
    For example I deployed simple WebTest ASP.NET application to my IIS 7.0. Try click "Browse *:80 (http)" from IIS to be sure your application properly running















  • 3. find your computer IPv4 Address
    - open Command Prompt (All Programs --> Accessories --> Command Prompt)
    - type ipconfig
    - remember IPv4Address (in format 192.x.x.x)

  • 4. try to open your ASP.NET application from your PC
    - instead of localhost type IPv4Address, in my case it is "http://192.x.x.x/WebTest/"
    - if it works proceed to next step

  • 5. connect your iPhone to your WLAN
    - on your iPhone: Settings --> Wi-Fi
    - Wi-Fi should be "ON" and you need to choose your WLAN Network

















  • 6. try to type address in your browser on your iphone (in my example something like this "http://192.x.x.x/WebTest/")

  • 7. if "http://192.x.x.x" open IIS page on your iphone but "http://192.x.x.x/WebTest/" (of course WebTest is in only in my example) does not open web application try open Control Panel --> Window Firewall --> Allow a Program through Windows Firewall
    - in "Allowed programs" click "Change setting" button and check "World Wide Web Services (HTTP)" and "Home/Work (Private)"
    - after this change you should see your web applicatio in your iPhone browser

Wednesday, March 27, 2013

HTML5 canvas

Canvas is perhaps one of those features of HTML5 which caused a great deal of stir among the web developers. In simple sense, canvas tag allows you to specify a region on your document where you can draw stuff. One thing to be noted is we have to use some sort of a scripting language (usually JavaScript) to interact with canvas. For today's article I'll assume you know the basics of JavaScript.



Creating a Canvas Element

Creating a canvas element is quite simple:


<canvas height = "200" width = "200" id = "canvas1" ></canvas>
It is advised to always give a height and width to canvas element. A id is also necessary as there can be more than one canvas element in a single page.

The above code is actually as far as only HTML will take us, for functionalities of canvas we gotta use JavaScript as mentioned earlier. Please bear in mind any subsequent codes seen in this article must be written inside script tag or an external script file.

Understanding the Context

When we draw something on canvas, we actually retrieve the "context" of the canvas and put stuff on it. Broadly speaking, there are two types of context, 2d (mostly used) and 3d (still experimental). We will use the 2d context. Our first job is to identify our canvas element and create a handler to its 2d context. We do this by the following fragment:


 var canvas = document.getElementById('canvas1');
 var ctx = canvas.getContext('2d');
 
We are first creating a handler to our canvas element (recall it had the id 'canvas1'), then we are retrieving its 2d context through the function getContext().

Basic Canvas Properties

Remember we grabbed the context just on the previous section? Now we are going to set some of its properties. First let's have a look at three basic properties:

  • fillStyle:
    style to use when filling. We can specify CSS colors,gradients or patterns (defaults to black).

  • strokeStyle:
    style to use when filling. Constraints similar to that of fillStyle.

  • lineWidth:
    width of the lines drawn by our imaginary pen on canvas.

Drawing with colors and styles is a two step process. First one is to set the above properties. Other one is to perform the drawing operation i.e. calling the function which performs drawing.

Fill and Stroke

While dealing with canvas you'll find two versions of a function to create rectangles. these are fillRect and strokeRect ("Rect" standing for rectangle). What fill does is it creates the solid shape filled with the designated color/pattern, whereas stroke simply outlines the shape with that color. An example is presented shortly.

Before we append the following fragment to our code, let's have a look at the arguments that the fillRect or strokeRect takes:
x-coord, y-coord, width, height
The coordinates specify the position of upper-left corner of the rectangle, and width and height denotes the size of the rectangle. One reminder, the origin of the coordinate system is situated at the top-left corner of the canvas. Now we can append the following segment:


 ctx.fillStyle = 'tan';
 ctx.fillRect(10, 10, 100, 100);
  
 ctx.lineWidth = 5;
 ctx.strokeStyle = 'red';
 ctx.strokeRect(10 , 10, 100, 100);
 

First we chose the color tan and created a solid rectangle at (10, 10) having height and width of 100. Then we selected the lineWidth to be 5. Next we again selected a color, this time red; and stroked a rectangle at (10, 10) having similar dimensions as the previous rectangle. Notice although we have used colors as the property of fillStyle and such, we could have also used gradients or patterns, which is quite easily possible using CSS3.

Sample:
Your browser does not support the HTML5 canvas tag.

Sample code:
<canvas id="CanvasFill" width="120" height="120">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById('CanvasFill');
    var ctx = canvas.getContext('2d');
    
    ctx.fillStyle = 'tan';
    ctx.fillRect(10, 10, 100, 100);

    ctx.lineWidth = 5;
    ctx.strokeStyle = 'red';
    ctx.strokeRect(10, 10, 100, 100);
    
</script>


Drawing Lines

For drawing a line we are going to use four functions: beginPath, moveTo, lineTo and stroke. The function beginPath tells that we are going to create path. We move the imaginary pen to a location through lineTo function. Notice that by "moving the pen" I mean picking the tip of the pen up and then placing it down again at the designated coordinate. The function lineTo instructs to draw a line starting from the current point to th point passed as parameter of lineTo. But the line is actually not drawn unless we call the stroke function. Let's have a look at the following fragment of code:


  ctx.lineWidth = 1;
  ctx.strokeStyle = 'black';
  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(110, 110);
  ctx.stroke();
  ctx.lineTo(200, 110);
  ctx.stroke();
 

We are setting the line width to be 1 and the color of the stroke to be black. Then we call the beginPath function. We move our imaginary pen to a point, in this case the point (10, 10). In the next line we instruct to create a line from (10, 10) to (110, 110). And finally to ensure the line is drawn, we call the stroke function. Notice that we created another line from the point where the previous line ended. If we wanted to draw a line from a different point we would have needed to call another moveTo function.

Sample:

Your browser does not support the HTML5 canvas tag.
Sample code:

<canvas id="CanvasStroke" width="200" height="150">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById('CanvasStroke');
    var ctx = canvas.getContext('2d');
    
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.lineTo(110, 110);
    ctx.stroke();
    ctx.lineTo(200, 110);
    ctx.stroke();
    
</script>

Rendering Text

We can draw texts on canvas using fillText and strokeText functions. The arguments are:
text x-coord y-coord
Before calling these functions, we can also specify properties by assigning values to the font property of our context. The order in which these properties are assigned is:
font-style font-weight font-size font-face
The following code illustrates the complete method:


  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.font = "normal normal 24px Tahoma";
  ctx.fillText("Hello world", 10, 140);
 
Sample:
Your browser does not support the HTML5 canvas tag.
Sample code:

<canvas id="CanvasText" width="200" height="100">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById('CanvasText');
    var ctx = canvas.getContext('2d');
    
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = "normal normal 24px Tahoma";
    ctx.fillText("Hello world", 10, 40);
    
</script>



The canvas of HTML5 has a vast domain. In this article I've tried to point out just some of the basic ideas. From here I'd suggest you search the net for a bit more info. As always w3schools has a precise collection of more or less all the features of canvas. Besides this mozilla developer site can also turn out to be really helpful. Although at first canvas might seem a bit intimidating, it is actually quite a great tool to have at hand. Bottom line, this is by far the best light-weight option to create graphic objects on the fly.