Hello Everyone…..

Myself Ramesh Sai working as a Software Developer in a company located in Hyderabad.I like coding and learning new techniques.I am having good command on C#,ASP.NET,SQL server,MVC,LINQ,Entity Framework,JSON

Advertisements

Angular Application with Node.js step-by-step installation

Angular5 Setup:

Step 1:
Create new folder in your desired location.for instance i’ve created a folder with name Node in E drive

Step 2:
download Node.js from https://nodejs.org/en/download/

step 3:
open command prompt and navigate to Node folder location

step 4:
write npm install @angular/cli and hit Enter some files will be downloaded.wait till the download get’s complete.usually it takes couple of minutes.

step 5:
After installation a folder with name ‘node_modules’ will be created in Node folder.

step 6:
come back to command prompt and type npm install -g @angular/cli then hit Enter. Again some set of files will be downloaded.wait till the download get’s completed.

step 7:
Type ng and hit Enter. Some files will be initialised.

step 8:
create new Angular project
Type ng new yourprojectname and hit Enter. Again some will be initialised.A new folder with name ‘yourprojectname’ will be created in Node folder.
After Successful project creation u will get these messages

Installed packages for tooling via npm.
Successfully initialized git.
Project ‘yourprojectname’ successfully created.

Now Node.js has been successfully installed.Next u need to download Visual Studio Code from https://code.visualstudio.com/download . A zip file will be downloaded extract it and install it after download.

Step 9:
Open Visual Studio code
Press Ctrl+Shift+E an explorer will be opened inside that there will be button with name Open Folder click on it and load ‘yourprojectname’ project from Node folder.Now all project related will be loaded in Explorer.

Step 10:
Click View –> Integrated Terminal
a powershell will be loaded in that type ng serve and hit Enter.The project will be compiled.
After compilation u will get a message like this
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:6200/ **

copy http://localhost:6200/ and search in browser.

That’s it u a basic have created Angular Application using Node.js.

Enjoy!!!!

How to login with facebook in asp.net mvc

Step1:  Add Facebook Nuget Package

In first step we need to add Facebook Nuget Package, Right click on References and choose Manage Nuget Packages then It’s open fallowing window, Search Facebook  and select it

Facebook package will add in your references section as like this

Step2: Write fallowing code in HomeController

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Facebook;

using Newtonsoft.Json;

using System.Web.Security;

namespace FaceboolLoginMVC.Controllers

{

public class HomeController : Controller

{

//

// GET: /Home/

public ActionResult Index()

{

return View();

}

private Uri RediredtUri

{

get

{

var uriBuilder = new UriBuilder(Request.Url);

uriBuilder.Query = null;

uriBuilder.Fragment = null;

uriBuilder.Path = Url.Action(“FacebookCallback”);

return uriBuilder.Uri;

}

}

[AllowAnonymous]

public ActionResult Facebook()

{

var fb = new FacebookClient();

var loginUrl = fb.GetLoginUrl(new

{

client_id = “Your App ID”,

client_secret = “Your App Secret key”,

redirect_uri= RediredtUri.AbsoluteUri,

response_type=”code”,

scope=”email”

 

});

return Redirect(loginUrl.AbsoluteUri);

}

public ActionResult FacebookCallback(string code)

{

var fb = new FacebookClient();

dynamic result = fb.Post(“oauth/access_token”, new

{

client_id = “Your App ID”,

client_secret = “Your App Secret key”,

redirect_uri = RediredtUri.AbsoluteUri,

code = code

});

var accessToken = result.access_token;

Session[“AccessToken”] = accessToken;

fb.AccessToken = accessToken;

dynamic me = fb.Get(“me?fields=link,first_name,currency,last_name,email,gender,locale,timezone,verified,picture,age_range”);

string email = me.email;

TempData[“email”] = me.email;

TempData[“first_name”] = me.first_name;

TempData[“lastname”] = me.last_name;

TempData[“picture”] = me.picture.data.url;

FormsAuthentication.SetAuthCookie(email, false);

return RedirectToAction(“Login”, “Account”);

}

}

}

Step3: Find your App ID and App Secrete
 Find your App ID and App Secret from Facebook Developer Account

Enter that App ID and App Secret in fallowing code section

client_id = “Your App ID”,

client_secret = “Your App Secret key”,

Step4: Add Login View in Account
 Write following code to access data in Index page

@*   @Html.ActionLink(“Login with facebook”, “Facebook”, “Home”)

*@

 

Email: @TempData[“email”]
First Name: @TempData[“first_name”]
Last Name: @TempData[“lastname”]
Picture:

Step5:  Now debug application and get following Output

Capture