[转]Code! MVC 5 App with Facebook, Twitter, LinkedIn and Google OAuth2 Sign-on (C#)网赌平台哪个信誉好

Another MVC Application: Introduction

All websites are growing faster these days, and once it grows, it is
very hard to write, organize and maintain. As we add new functionality
or developer to a project, any large web applications with poor design
may be go out of control. So the idea behind this article is to design a
website architecture that must be simple, easily understandable by any
web designer (beginner to intermediate) and Search Engines. For this
article I am trying to design a website for any individuals to maintain
their contact details online. However, in future, the same application
could be used by large community all over the world with added
functionality and modules. So, the design should be easily adaptable in
order to cope with the future growth of business.

In this article I will talk about creating and designing User Interface
(UI) in such a manner so that UI will be separated from the business
logic, and can be created independently by any designer/developer. For
this part we will use ASP.Net MVC, Knockout Jquery and Bootstrap. later
in this article we will discuss more about database design and
implementing business logic using structured layers using SQl Server
2008, Entity Framework, and Castle Windsor for Dependency Injection.

本文转自:https://www.asp.net/mvc/overview/security/create-an-aspnet-mvc-5-app-with-facebook-and-google-oauth2-and-openid-sign-on

Separation of Concern: Primary Objective

The key concept is stripping out most or all logic. Logic should not be
bound to a page. What if we need to re-use the logic from one page in
another? In that case we will be tempted to copy-and-paste. If we are
doing this then our project will become maintainable. Another important
concept is to separate data access layer from any business logic, as we
are planning to use Entity Framework this is less of a problem as EF
should already have this end separate. We should be able to easily move
all our EF files to another project and simply add a reference to the
projects that need it. Below is the high level design:
网赌平台哪个信誉好 1
And, the final solution will look like below image in Visual Studio :
网赌平台哪个信誉好 2

This tutorial shows you how to build an ASP.NET MVC 5 web application
that enables users to log in using OAuth 2.0 
with credentials from an external authentication provider, such as
Facebook, Twitter, LinkedIn, Microsoft, or Google. For simplicity, this
tutorial focuses on working with credentials from Facebook and Google.

Seven Projects in One Solution : Is it required ?

It is all about your decision… The proposed designed will offer some
rather relevant benefits, which include:

  • Separation of Concern: Design should allow clear and defined layers;
    means segregate application into distinct areas whose functionality
    does not overlap. such that UI-designers can focus on their job
    without dealing with the business logic (Application.Web), and the
    core developer can only work on main business logic’s
    (Application.DTO or Application.Manager).
  • Productivity: It is easier to add new features to existing software,
    since the structure is already in place, and the location for every
    new piece of code is known beforehand, so any issue can be easily
    identified and separated to cope with complexity, and to achieve the
    required engineering quality factors such as * * robustness,
    adaptability, maintainability, and re-usability.

Maintainability: It is easier to maintain application, due to clear and
defined structure of the code is visible and known, so it’s easier to
find bugs and anomalies, and modify them with minimal risk.

  • Adaptability: New technical features, such a different front ends,
    or adding a business rule engine is easier to achieve, as your
    software architecture creates a clear separation of concerns.

Re-usability: Re-usability is another concern on designing any
application, because it is one of the main factors to decrease the total
cost of ownership, and our design should consider to what extent we can
reuse the created Web application and different layers.
In last section of this article, we will discuss the functionality of
each individual layer’s in details.

Enabling these credentials in your web sites provides a significant
advantage because millions of users already have accounts with these
external providers. These users may be more inclined to sign up for your
site if they do not have to create and remember a new set of
credentials.

Tools & Technology

To achieve the final solution, we need below tools/dll:

  • Visual Studio 2012
  • ASP.NET MVC 4 with Razor View Engine
  • Entity Framework 5.0
  • Castle Windsor for DI
  • SQL Server 2008/2012
  • Knockout.js & JQuery
  • Castle Windsor for DI
  • Bootstrap CSS

See also ASP.NET MVC 5 app with SMS and email Two-Factor
Authentication 
.

What we are trying to achieve: Requirement

The tutorial also shows how to add profile data for the user, and how to
use the Membership API to add roles. This tutorial was written by Rick
Anderson
  ( Please follow me on
Twitter: @RickAndMSFT ).

Screen 1: Contact List – View all contacts

1.1 This screen should display all the contacts available in
Database. 
1.2 User should be able to delete any contact.
1.3 User should able to edit any contact details.
1.4 User should be able to create a new contact.

Initial sketch:
网赌平台哪个信誉好 3

Screen 2: Create New Contact

This screen should display one blank screen to provide functionality
as.

2.1 User should be able to Enter his/her First name, Last Name and Email
Address.
2.2 User should able to add any number of Phone numbers by clicking on
Add numbers. 
2.3 User should able to remove any phone number. 
2.4 User should able to add any number of Addresses by clicking on Add
new address. 
2.5 User should able to remove any address. 
2.6 Click on save button should save Contact details in Database and
user will return back in Contact List page. 
2.7 Click on Back to Profile button should return back the user to
Contact List page. 

Initial sketch:
网赌平台哪个信誉好 4

Getting Started

Start by installing and running Visual Studio Express 2013 for
Web
 or Visual Studio
2013
.   Install Visual
Studio 2013 Update
 or higher. For help
with Dropbox, GitHub, Linkedin, Instagram, buffer,  salesforce, STEAM,
Stack Exchange, Tripit, twitch, Twitter, Yahoo and more, see this one
stop guide
.

Warning: You must install Visual Studio 2013 Update
or higher to use
Google OAuth 2 and to debug locally without SSL warnings.

Click New Project from the Start page, or you can use the menu
and select File, and then New Project.

网赌平台哪个信誉好 5 
 

Screen 3: Update Existing Contact

This screen should display screen with selected contact information
details.

3.1 User should be able to modify his/her First name, Last Name and
Email Address.
3.2 User should able to modify /delete/Add any number of Phone numbers
by clicking on Add numbers or delete link.
3.3 User should able to modify /delete/Add any number of Addresses by
clicking on Add new address or delete link.
3.4 Click on save button should update Contact details in Database and
user will return back in Contact List page.
3.5 Click on Back to Profile button should return back the user to
Contact List page.

Initial Sketch:
网赌平台哪个信誉好 6

Creating Your First Application

 Click New Project, then select Visual C# on the left,
then Web and then select ASP.NET  Web Application. Name your
project “MvcAuth” and then click OK.

网赌平台哪个信誉好 7

In the New ASP.NET Project dialog, click MVC. If the
Authentication is not Individual User Accounts, click the Change
Authentication
button and select Individual User Accounts. By
checking Host in the cloud, the app will be very easy to host in
Azure.

网赌平台哪个信誉好 8

If you selected  Host in the cloud, complete the configure dialog.

网赌平台哪个信誉好 9

 

Part 1: Create Web Application (Knockout.js, Asp.Net MVC and Bootstrap): For Designers

Before kick-off the UI part, let us see what benefits we are getting
using Knockoutjs and Bootstrap along with ASP.NET MVC 4.

Why Knockoutjs: Knockout is an MVVM pattern that works with a
javascript ViewModel. The reason this works well with MVC is that
serialization to and from javascript models in JSON is very simple, and
it is also included with MVC 4. It allows us to develop rich UI’s with a
lot less coding and whenever we modify our data, Immediate it reflect in
the user interface.

Why Bootstrap: Twitter Bootstrap is a simple and flexible HTML, CSS,
and Javascript for popular user interface components and interactions.
It comes with bundles of CSS styles, Components and Javascript plugins.
It provides Cross platform support, which eliminates major layout
inconsistencies. Everything just works! Good documentation and the
Twitter Bootstrap’s website itself is a very good reference for real
life example. And, finally, it saves me plenty of times, as it cut the
development time to half with very less testing and almost zero browser
issues. Some other benefits we can get by using this framework are:

  • 12-Column Grid, fixed layout, fluid or responsive layout.
  • Base CSS for Typography, code (syntax highlighting with Google
    prettify), Tables, Forms, Buttons and uses Icons by Glpyhicons .
  • Web UI Components like Buttons, Navigation menu, Labels, Thumbnails,
    Alerts, Progress bars and misc.
  • Javascript plugins for Modal, Dropdown, Scrollspy, Tab, Tooltip,
    Popover, Alert, Button, Collapse, Carousel and Typehead.

In below steps, we will work through the layout and design to build UI
for above requirement by using dummy javascript data.

Use NuGet to update to the latest OWIN middleware

Use the NuGet package manager to update the OWIN
middleware

Select Updates in the left menu. You can click on the Update
All
 button or you can search for only OWIN packages (shown in the next
image):

网赌平台哪个信誉好 10

In the image below, only OWIN packages are shown:

网赌平台哪个信誉好 11

From the Package Manager Console (PMC), you can enter
the Update-Package command, which will update all packages.

Press F5 or Ctrl+F5 to run the application. In the image below,
the port number is 1234. When you run the application, you’ll see a
different port number.

Depending on the size of your browser window, you might need to click
the navigation icon to see
the HomeAboutContactRegister andLog in links.

网赌平台哪个信誉好 12

 

网赌平台哪个信誉好 13  

Step 1:

Create a new project as Blank Solution; name it as “Application”
网赌平台哪个信誉好 14

Setting up SSL in the Project

To connect to authentication providers like Google and Facebook, you
will need to set up IIS-Express to use SSL.  It’s important to keep
using SSL after login and not drop back to HTTP, your login cookie is
just as secret as your username and password, and without using SSL
you’re sending it in clear-text across the wire. Besides, you’ve already
taken the time to perform the handshake and secure the channel (which is
the bulk of what makes HTTPS slower than HTTP) before the MVC pipeline
is run, so redirecting back to HTTP after you’re logged in won’t make
the current request or future requests much faster.

  1. In Solution Explorer, click the MvcAuth project.
  2. Hit the F4 key to show the project properties. Alternatively, from
    the View menu you can select Properties Window.
  3. Change SSL Enabled to True.

    网赌平台哪个信誉好 15

  4. Copy the SSL URL (which will be https://localhost:44300/ unless
    you’ve created other SSL projects).

  5. In Solution Explorer, right click the MvcAuth project and
    select Properties.
  6. Select the Web tab, and then paste the SSL URL into
    the Project Url box. Save the file (Ctl+S). You will need this
    URL to configure Facebook and Google authentication apps.

    网赌平台哪个信誉好 16

  7. Add
    the RequireHttps attribute
    to the Homecontroller to require all requests must use HTTPS. A
    more secure approach is to add
    the RequireHttps filter
    to the application. See the section “Protect the Application with
    SSL and the Authorize Attribute” in my tutoral Create an ASP.NET
    MVC app with auth and SQL DB and deploy to Azure App
    Service
    .
    A portion of the Home controller is shown below.

    [RequireHttps]
    public class HomeController : Controller
    {
       public ActionResult Index()
       {
          return View();
       }
    
  8. Press CTRL+F5 to run the application. If you’ve installed the
    certificate in the past, you can skip the rest of this section and
    jump toCreating a Google app for OAuth 2 and connecting the app to
    the
    project
    ,
    otherwise, follow the instructions to trust the self-signed
    certificate that IIS Express has generated.

    网赌平台哪个信誉好 17

  9. 网赌平台哪个信誉好,Read the Security Warning dialog and then click Yes if you
    want to install the certificate representing localhost.

    网赌平台哪个信誉好 18

  10. IE shows the Home page and there are no SSL warnings.

    网赌平台哪个信誉好 19

  11. Google Chrome also accepts the certificate and will show HTTPS
    content without a warning. Firefox uses its own certificate store,
    so it will display a warning. For our application you can safely
    click I Understand the Risks

    网赌平台哪个信誉好 20

Step 2:

Right Click on Solution folder and add new Project of type ASP.NET MVC 4
as an Internet Application Template with View engine as Razor.
网赌平台哪个信誉好 21
网赌平台哪个信誉好 22

After Step 2 – the project structure should look like the below image
网赌平台哪个信誉好 23

Creating a Google app for OAuth 2 and connecting the app to the project

  1. Navigate to the Google Developers
    Console
    .
  2. Click the Create Project button and enter a project name and ID
    (you can use the default values). In a few seconds the new project
    will be created and your browser will display the new projects page.
  3. In the left tab, click APIs & auth, and
    then >  Credentials.
  4. Click the Create New Client ID under OAuth.
    1. In the Create Client ID dialog, keep the default Web
      application
       for the application type.
    2. Set the Authorized JavaScript origins to the SSL URL you
      used above (https://localhost:44300/ unless you’ve created
      other SSL projects)
    3. Set the Authorized redirect URI to:
           https://localhost:44300/signin-google
  5. Click the Consent screen menu item, then set your email address and
    product name. When you have completed the form click Save.
  6. Click the APIs menu item, scroll down and click the off button
    on Google+ API.

    网赌平台哪个信誉好 24

    The image below shows the enabled APIs.

    网赌平台哪个信誉好 25

  7. Copy and paste the AppId and App Secret  into
    the UseGoogleAuthenticationmethod.  The AppId and App
    Secret 
    values shown below are samples and will not work.

    public void ConfigureAuth(IAppBuilder app)
    {
        // Configure the db context and user manager to use a single instance per request
        app.CreatePerOwinContext(ApplicationDbContext.Create);
        app.CreatePerOwinContext<ApplicationUserManager>(ApplicationUserManager.Create);
    
        // Enable the application to use a cookie to store information for the signed in user
        // and to use a cookie to temporarily store information about a user logging in with a third party login provider
        // Configure the sign in cookie
        app.UseCookieAuthentication(new CookieAuthenticationOptions
        {
            AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
            LoginPath = new PathString("/Account/Login"),
            Provider = new CookieAuthenticationProvider
            {
                OnValidateIdentity = SecurityStampValidator.OnValidateIdentity<ApplicationUserManager, ApplicationUser>(
                    validateInterval: TimeSpan.FromMinutes(30),
                    regenerateIdentity: (manager, user) => user.GenerateUserIdentityAsync(manager))
            }
        });
    
        app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);
    
        // Uncomment the following lines to enable logging in with third party login providers
        //app.UseMicrosoftAccountAuthentication(
        //    clientId: "",
        //    clientSecret: "");
    
        //app.UseTwitterAuthentication(
        //   consumerKey: "",
        //   consumerSecret: "");
    
        //app.UseFacebookAuthentication(
        //   appId: "",
        //   appSecret: "");
    
        app.UseGoogleAuthentication(
             clientId: "000-000.apps.googleusercontent.com",
             clientSecret: "00000000000");
    }
    

Security Note: Never store sensitive data in your source code. The
account and credentials are added to the code above to keep the sample
simple. See Best practices for deploying passwords and other sensitive
data to ASP.NET and Azure App
Service
.

  1. Press CTRL+F5 to build and run the application. Click the Log
    in 
    link.

    网赌平台哪个信誉好 26

  2. Under Use another service to log in, click Google.

    网赌平台哪个信誉好 27

    Note: If you miss any of the steps above you will get a HTTP 401
    error. Recheck your steps above. If you miss a required setting (for
    example product name), add the missing item and save, it can
    take a few minutes for authentication to work.

  3. You will be redirected to the google site where you will enter your
    credentials. 

    网赌平台哪个信誉好 28

  4. After you enter your credentials, you will be prompted to give
    permissions to the web application you just created:

网赌平台哪个信誉好 29

  1. Click Accept. You will now be redirected back to
    the Register page of the MvcAuth application where you can
    register your Google account. You have the option of changing the
    local email registration name used for your Gmail account, but you
    generally want to keep the default email alias (that is, the one you
    used for authentication). Click Register.

    网赌平台哪个信誉好 30

Step 3:

Right click on References and click on Manage NuGet Packages. Type
Bootstrap on search bar then click on Install button.
网赌平台哪个信誉好 31

Creating the app in Facebook and connecting the app to the project

For Facebook OAuth2 authentication, you need to copy to your project
some settings from an application that you create in Facebook.

  1. In your browser, navigate
    to https://developers.facebook.com/apps and log in by entering
    your Facebook credentials.

  2. If you aren’t already registered as a Facebook developer,
    click Register as a Developer and follow the directions to
    register.

  3. On the Apps tab, click Create New App.

    网赌平台哪个信誉好 32

  4. Enter an App Name and Category, then click Create App.

    This must be unique across Facebook. The App Namespace is the
    part of the URL that your App will use to access the Facebook
    application for authentication (for example,
    https://apps.facebook.com/{App Namespace}). If you don’t specify
    an App Namespace, theApp ID will be used for the URL.
    The App ID is a long system-generated number that you will see
    in the next step.

    网赌平台哪个信誉好 33

  5. Submit the standard security check.

网赌平台哪个信誉好 34

  1. Select Settings for the left menu
    bar.网赌平台哪个信誉好 35

  2. On the Basic settings section of the page select Add
    Platform
     to specify that you are adding a website application.

    网赌平台哪个信誉好 36

  3. Select Website from the platform choices.

    网赌平台哪个信誉好 37

  4. Make a note of your App ID and your App Secret so that you
    can add both into your MVC application later in this tutorial. Also,
    Add your Site URL (https://localhost:44300/) to test your MVC
    application. Also, add a Contact Email. Then, select Save
    Changes

     

    网赌平台哪个信誉好 38

    Note that you will only be able to authenticate using the email
    alias you have registered. Other users and test accounts will not be
    able to register. You can grant other Facebook accounts access to
    the application on the Facebook Developer Roles tab.

  5. In Visual Studio, open App_Start\Startup.Auth.cs.

  6. Copy and paste the AppId and App Secret  into
    the UseFacebookAuthenticationmethod. The AppId and App
    Secret 
    values shown below are samples and will not work.

    public void ConfigureAuth(IAppBuilder app)
    {
        // Configure the db context and user manager to use a single instance per request
        app.CreatePerOwinContext(ApplicationDbContext.Create);
        app.CreatePerOwinContext<ApplicationUserManager>(ApplicationUserManager.Create);
    
        // Enable the application to use a cookie to store information for the signed in user
        // and to use a cookie to temporarily store information about a user logging in with a third party login provider
        // Configure the sign in cookie
        app.UseCookieAuthentication(new CookieAuthenticationOptions
        {
            AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
            LoginPath = new PathString("/Account/Login"),
            Provider = new CookieAuthenticationProvider
            {
                OnValidateIdentity = SecurityStampValidator.OnValidateIdentity<ApplicationUserManager, ApplicationUser>(
                    validateInterval: TimeSpan.FromMinutes(30),
                    regenerateIdentity: (manager, user) => user.GenerateUserIdentityAsync(manager))
            }
        });
    
        app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);
    
        // Uncomment the following lines to enable logging in with third party login providers
        //app.UseMicrosoftAccountAuthentication(
        //    clientId: "",
        //    clientSecret: "");
    
        //app.UseTwitterAuthentication(
        //   consumerKey: "",
        //   consumerSecret: "");
    
        app.UseFacebookAuthentication(
           appId: "000000000000000",
           appSecret: "000000000000000");
    
        app.UseGoogleAuthentication(
             clientId: "000000000000000.apps.googleusercontent.com",
             clientSecret: "000000000000000");
    }
    
  7. Click Save Changes.

  8. Press CTRL+F5 to run the application.

 

Select Log in to display the Login page.
Click Facebook under Use another service to log in.

Enter your Facebook credentials.

网赌平台哪个信誉好 39

You will be prompted to grant permission for the application to access
your public profile and friend list.

网赌平台哪个信誉好 40

You are now logged in. You can now register this account with the
application.

网赌平台哪个信誉好 41

When you register, an entry is added to the Users table of the
membership database.

Step 4:

add below line of code into BundleConfig.cs file under App_Start folder
to add Knockoutjs and Bootstrap for every page

bundles.Add(new ScriptBundle("~/bundles/knockout").Include(                                      "~/Scripts/knockout-{version}.js"));  bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css"));  

Also in _Layout,cshtml file under Views/Shared folder add below line to
register knockout files as :

@Scripts.Render("~/bundles/knockout")  

Examine the Membership Data

In the View menu, click Server Explorer.

网赌平台哪个信誉好 42

Expand DefaultConnection (MvcAuth), expand Tables, right
click AspNetUsers and click Show Table Data.

网赌平台哪个信誉好 43

网赌平台哪个信誉好 44

Step 5:

Add a new folder name as Contact inside Views, and then add Index.cshtml
as new View page. Then add a new Controller name it ContactController.cs
inside Controller folder, and add a new Contact.js file under Scripts
folder. Refer to below image.
网赌平台哪个信誉好 45

Adding Profile Data to the User Class

In this section you’ll add birth date and home town to the user data
during registration, as shown in the following image.

网赌平台哪个信誉好 46

Open the Models\IdentityModels.cs file and add birth date and home
town properties:

public class ApplicationUser : IdentityUser
{
    public string HomeTown { get; set; }
    public System.DateTime? BirthDate { get; set; }
    public async Task<ClaimsIdentity> GenerateUserIdentityAsync(UserManager<ApplicationUser> manager)
    {
        // Note the authenticationType must match the one defined in CookieAuthenticationOptions.AuthenticationType
        var userIdentity = await manager.CreateIdentityAsync(this, DefaultAuthenticationTypes.ApplicationCookie);
        // Add custom user claims here
        return userIdentity;
    }
}

Open the Models\AccountViewModels.cs file and the set birth date and
home town properties in ExternalLoginConfirmationViewModel.

public class ExternalLoginConfirmationViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }

    public string HomeTown { get; set; }
    public System.DateTime? BirthDate { get; set; }
}

Open the Controllers\AccountController.cs file and add code for birth
date and home town in the ExternalLoginConfirmationaction method as
shown:

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> ExternalLoginConfirmation(ExternalLoginConfirmationViewModel model, string returnUrl)
{
    if (User.Identity.IsAuthenticated)
    {
        return RedirectToAction("Manage");
    }

    if (ModelState.IsValid)
    {
        // Get the information about the user from the external login provider
        var info = await AuthenticationManager.GetExternalLoginInfoAsync();
        if (info == null)
        {
            return View("ExternalLoginFailure");
        }
        var user = new ApplicationUser() 
        {
            UserName = model.Email, Email = model.Email,
            BirthDate = model.BirthDate,
            HomeTown  = model.HomeTown

        };
        IdentityResult result = await UserManager.CreateAsync(user);
        if (result.Succeeded)
        {
            result = await UserManager.AddLoginAsync(user.Id, info.Login);
            if (result.Succeeded)
            {
                await SignInAsync(user, isPersistent: false);

                // For more information on how to enable account confirmation and password reset please visit http://go.microsoft.com/fwlink/?LinkID=320771
                // Send an email with this link
                // string code = await UserManager.GenerateEmailConfirmationTokenAsync(user.Id);
                // var callbackUrl = Url.Action("ConfirmEmail", "Account", new { userId = user.Id, code = code }, protocol: Request.Url.Scheme);
                // SendEmail(user.Email, callbackUrl, "Confirm your account", "Please confirm your account by clicking this link");

                return RedirectToLocal(returnUrl);
            }
        }
        AddErrors(result);
    }

    ViewBag.ReturnUrl = returnUrl;
    return View(model);
}

Add birth date and home town to
the Views\Account\ExternalLoginConfirmation.cshtml file:

@model MvcAuth.Models.ExternalLoginConfirmationViewModel
@{
    ViewBag.Title = "Register";
}
<h2>@ViewBag.Title.</h2>
<h3>Associate your @ViewBag.LoginProvider account.</h3>

@using (Html.BeginForm("ExternalLoginConfirmation", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()

    <h4>Association Form</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <p class="text-info">
        You've successfully authenticated with <strong>@ViewBag.LoginProvider</strong>.
            Please enter a user name for this site below and click the Register button to finish
            logging in.
    </p>
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.HomeTown, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.HomeTown, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.HomeTown)
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.BirthDate, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.BirthDate, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.BirthDate)
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Delete the membership database so you can again register your Facebook
account with your application and verify you can add the new birth date
and home town profile information.

From Solution Explorer, click the Show All Files icon, then
right click Add_Data\aspnet-MvcAuth-<dateStamp>.mdf and
click Delete.

网赌平台哪个信誉好 47

From the Tools menu, click NuGet Package Manger, then
click Package Manager Console (PMC). Enter the following commands in
the PMC.

  1. Enable-Migrations
  2. Add-Migration Init
  3. Update-Database

Run the application and use FaceBook and Google to log in and register
some users. 

Step 6:

Finally modify the default map route in Route.config to point to Contact
controller as:

routes.MapRoute(                  name: "Default",                  url: "{controller}/{action}/{id}",                  defaults: new { controller = "Contact", action = "Index", id = UrlParameter.Optional }              );  

And also modify the _Layout.cshtml file inside View/Shared as per the
BootStrap Syntax. Below is the modified code:

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="utf-8" />      <title>@ViewBag.Title - Contact manager</title>      <link   rel="shortcut icon" type="image/x-icon" />      <meta name="viewport" content="width=device-width" />      @Scripts.Render("~/bundles/jquery")      @Scripts.Render("~/bundles/knockout")      @Styles.Render("~/Content/css")      @Scripts.Render("~/bundles/modernizr")      @RenderSection("scripts", required: false)  </head>  <body>        <div >          <div >              <ul >                                </ul>              <h3 >Contact Manager</h3>          </div>          <div id="body" >              @RenderSection("featured", required: false)              <section>                  @RenderBody()              </section>          </div>          <hr />          <div id="footer">              <div >                  <p >&copy; @DateTime.Now.Year - Design and devloped by <a  >Anand Pandey</a>.</p>              </div>          </div>      </div>    </body>  </html>  

Examine the Membership Data

In the View menu, click Server Explorer.

网赌平台哪个信誉好 48

Right click AspNetUsers and click Show Table Data.

网赌平台哪个信誉好 49

The HomeTownand BirthDatefields are shown below.

网赌平台哪个信誉好 50

Step 7:

Now we are done with initial setup to run the application. The output is
as below:
网赌平台哪个信誉好 51

We will use this page to display the requirement for Screen 1 i.e.
Contact List – View all contacts

Logging off your App and Logging in With Another Account

If you log on to your app with Facebook, , and then log out and try to
log in again with a different Facebook account (using the same browser),
you will be immediately logged in to the previous Facebook account you
used.  In order to use another account, you need to navigate to Facebook
and log out at Facebook. The same rule applies to any other 3rd party
authentication provider. Alternatively, you can log in with another
account by using a different browser.

Step 8:

First we will create a dummy profile data as array in Contact.js (later
we will fetch it from database), and then we will use this data to
populate Grid.

var DummyProfile = [      {          "ProfileId": 1,          "FirstName": "Anand",          "LastName": "Pandey",          "Email": "anand@anandpandey.com"      },      {          "ProfileId": 2,          "FirstName": "John",          "LastName": "Cena",          "Email": "john@cena.com"      }  ]  

Next, we will create ProfilesViewModel, a viewmodel class which hold
Profiles, an array holding an initial collection of DummyProfile data.
Note that it’s a ko.observableArray , and it is the observable
equivalent of a regular array, which means it can automatically trigger
UI updates whenever items are added or removed.

And finally we need to activate Knockout using ko.applyBindings().

var ProfilesViewModel = function () {      var self = this;      var refresh = function () {          self.Profiles(DummyProfile);      };         // Public data properties      self.Profiles = ko.observableArray([]);      refresh();  };  ko.applyBindings(new ProfilesViewModel());  

Next Steps

See Introducing the Yahoo and LinkedIn OAuth security providers for
OWIN
 by
Jerrie Pelser for Yahoo and LinkedIn instructions. See Jerrie’s Pretty
social login buttons for ASP.NET MVC 5 to get enable social login
buttons.

Follow my tutorial Create an ASP.NET MVC app with auth and SQL DB and
deploy to Azure App
Service
,
which continues this tutorial and shows the following:

  1. How to deploy your app to Azure.
  2. How to secure you app with roles.
  3. How to secure your app with
    the RequireHttps.aspx) and Authorize.aspx) filters.
  4. How to use the membership API to add users and roles.

Please leave feedback on how you liked this tutorial and what we could
improve. You can also request new topics at Show Me How With
Code
.
You can even ask for and vote on new features to be added to ASP.NET.
For example, you can vote for a tool to create and manage users and
roles.

For an good explanation of how ASP.NET External Authentication Services
work, see Robert McMurray’s External Authentication
Services
.
Robert’s article also goes into detail in enabling Microsoft and Twitter
authentication. Tom Dykstra’s excellent EF/MVC
tutorial
 shows
how to work with the Entity Framework.

 

This article was originally created on April 3, 2014

 

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图