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.