ASP.NET 4.5 and ASP.NET Core 1 Hosting BLOG

Tutorial and Articles about ASP.NET 4.0 and the latest ASP.NET 4.5 Hosting

ASP.NET MVC 4.0 Hosting with ASPHostPortal :: How To Save Email from External Login in ASP.NET MVC 4.0 with SimpleMembership

clock January 9, 2014 06:16 by author Ben

ASP.NET MVC 4 web application allows users to log in from an external provider, such as Facebook, Twitter, Microsoft or Google and then integrate into your web application. Some OAuth/OpenId providers like Facebook, Google allow to access email. This article explains how to save the email in your database.

Before implementing, first lets consider following points:
1. User name is different from Email.
2. Email might be different for different providers.
3. Email is optional(some external provider like twitter doesn’t allow to access email).

 

Getting Started:
1. Create a new ASP.NET MVC 4 --> Internet Application Project
2. Open App_Start --> AuthConfig.cs, uncomment the external services which you want to use and pass proper parameters. In this article, we will use Facebook,Twitter and Google providers.

OAuthWebSecurity.RegisterTwitterClient(
        consumerKey: "xxxx",
        consumerSecret: "xxxxxxxx");
    OAuthWebSecurity.RegisterFacebookClient(
        appId: "yyyy",
        appSecret: "yyyyyyyy");
    OAuthWebSecurity.RegisterGoogleClient();


3. In Account Model, add Email property in RegisterExternalLoginModel class:

public class RegisterExternalLoginModel
   {
       [Required]
       [Display(Name = "User name")]
       public string UserName { get; set; }
       public string ExternalLoginData { get; set; }
       public string Email { get; set; }
   }

4. To add Email field in OAuthMembership table, add following class:

[Table("webpages_OAuthMembership")]
   public class OAuthMembership
   {
       [Key, Column(Order = 0), StringLength(30)]
       public string Provider { get; set; }
       [Key, Column(Order = 1), StringLength(100)]
       public string ProviderUserId { get; set; }
       public int UserId { get; set; }
       [StringLength(100)]
       public string Email { get; set; }
   }


5. add OAuthMembership in Userscontext

public class UsersContext : DbContext
    {
        public UsersContext()
            : base("DefaultConnection")
        {
        }
        public DbSet<UserProfile> UserProfiles { get; set; }
        public DbSet<OAuthMembership> OAuthMemberships { get; set; }
    }

It will create the required structure in database when you run the application and open register page first time.

Controller Changes:
In AccountController, To set email from the external provider, replace the following lines in ExternalLoginCallback method :

// User is new, ask for their desired membership name
string loginData = OAuthWebSecurity.SerializeProviderUserId(result.Provider, result.ProviderUserId);
ViewBag.ProviderDisplayName = OAuthWebSecurity.GetOAuthClientData(result.Provider).DisplayName;ViewBag.ReturnUrl = returnUrl;
return View("ExternalLoginConfirmation", new RegisterExternalLoginModel { UserName = result.UserName, ExternalLoginData = loginData });


with the following lines:

// User is new, ask for their desired membership name
               string loginData = OAuthWebSecurity.SerializeProviderUserId(result.Provider, result.ProviderUserId);
               ViewBag.ProviderDisplayName = OAuthWebSecurity.GetOAuthClientData(result.Provider).DisplayName;
               ViewBag.ReturnUrl = returnUrl;
               var model = new RegisterExternalLoginModel { UserName = result.UserName, ExternalLoginData = loginData };
               switch (result.Provider) {
                   case "facebook":
                   case "google":
                       {
                           model.Email = result.UserName;
                           model.UserName = "";
                           break;
                       }
                   case "twitter":
                       {
                           model.Email = "";
                           model.UserName = result.UserName;
                           break;
                       }
                   default:
                       break;
               }
               return View("ExternalLoginConfirmation", model);

Facebook and Google provide email as user name, so email is assigned for these providers.

In ExternalLoginConfirmation view, add following Email in form:

@Html.HiddenFor(m => m.Email)

It will post Email also when form is submitted. In ExternalLoginConfirmation method, To save email for new user,replace the following lines:

// Insert name into the profile table
            db.UserProfiles.Add(new UserProfile { UserName = model.UserName });
            db.SaveChanges();
            OAuthWebSecurity.CreateOrUpdateAccount(provider, providerUserId, model.UserName);
            OAuthWebSecurity.Login(provider, providerUserId, createPersistentCookie: false);
            return RedirectToLocal(returnUrl);

with these lines:

// Insert name into the profile table
                       user = new UserProfile { UserName = model.UserName };
                       db.UserProfiles.Add(user);
                       db.SaveChanges();
                       OAuthWebSecurity.CreateOrUpdateAccount(provider, providerUserId, model.UserName);                                           
                       if (!String.IsNullOrEmpty(model.Email)) {
                           var oauthItem = db.OAuthMemberships.FirstOrDefault(x => x.Provider == provider && x.ProviderUserId == providerUserId && x.UserId == user.UserId);
                           if (oauthItem != null) {
                               oauthItem.Email = model.Email;
                               db.SaveChanges();
                           }
                       }
                       OAuthWebSecurity.Login(provider, providerUserId, createPersistentCookie: false);
                       return RedirectToLocal(returnUrl);

This will save email in database for new user. Now if same user wants to add other external provider then in ExternalLoginCallback method, replace following line

OAuthWebSecurity.CreateOrUpdateAccount(result.Provider, result.ProviderUserId, User.Identity.Name);

with following lines:

OAuthWebSecurity.CreateOrUpdateAccount(result.Provider, result.ProviderUserId, User.Identity.Name);
               if (result.Provider == "facebook" || result.Provider == "google")
               {
                   using (UsersContext db = new UsersContext())
                   {
                       UserProfile user = db.UserProfiles.FirstOrDefault(u => u.UserName.ToLower() == User.Identity.Name);                     
                       if (user != null)
                       {                         
                               var oauthItem = db.OAuthMemberships.FirstOrDefault(x => x.Provider == result.Provider && x.ProviderUserId == result.ProviderUserId && x.UserId == user.UserId);
                               if (oauthItem != null)
                               {
                                   oauthItem.Email = result.UserName;
                                   db.SaveChanges();
                               }                         
                       }
                   }
               }

That's the tutorial How To Save Email from External Login in ASP.NET MVC 4.0 with SimpleMembership. If you're looking for best Windows ASP.NET hosting, ASP.NET MVC 4.0 hosting, cloud hosting, and SharePoint hosting, please feel free to visit http://ASPHostPortal.com. Come to the website to know more details.

 



ASP.NET MVC Hosting - ASPHostPortal.com :: Making Your Existing ASP.NET MVC Web Site Mobile Friendly

clock September 26, 2013 05:58 by author Ben

This article will show you the basic mobile features of ASP.NET MVC 4.0. We will make the following changes using CSS and ASP.NET to an existing web site to make it more user-friendly on mobile devices: 

  • Content will fit the small screen 
  • One-direction scrolling either horizontally or vertically but not both 
  • Clean and efficient design 
  • An option to visit the desktop site 


The following is a collage of the various desktop views for the Contact controller.

Responsive Design and Mobile Views

As we saw above, the application uses the default ASP.NET MVC Template. This template uses responsive design techniques using the viewport meta-tag to pick up appropriate CSS styles. The view-port is specified in _Layout.cshtml. It essentially sets the device-width reported by the browser as the width of the content frame.



Using the CSS Media queries in the Site.css, the browser switches UI based on the width of the device


As we can see above, the Media query defines a set of CSS style for width up to 850 pixels. Any width lesser than 850px is considered a mobile view in the default CSS.

With the Responsive Design in place, if we look at the site on a Mobile device, this is how it looks

Except for the Index page, the rest are usable but they look out of place or retro-fitted.

Adding First Class Mobile Support using jQuery Mobile

Now that we’ve seen the limitations for Responsive CSS, let’s explore dedicated Mobile Views and the special MVC ViewSwitcher.

- From Package Manager Console, install the jQuery.Mobile.Mvc package as follows

PM> install-package jQuery.Mobile.MVC

- This installs a host of things including jQuery Mobile UI Themes, a new Configuration file called BundleMobileConfig, a new Controller called ViewSwitcherController, an empty Context file called AddingMobileSupportToMVCContext, _Layout.Mobile.cshtml and _ViewSwitcher.cshtml.


The _ViewSwitcher.cshtml checks if the browser is Mobile browser or not and generates an appropriate link to switch views. ViewSwitcherController uses the value passed to it when user clicks on the View Switcher link and switches to the appropriate view. We’ll see what we mean by Appropriate View in the next section.

_Layout.Mobile.cshtml

As we saw, this partial view was added when we added the jQuery Mobile package. The .Mobile convention is baked into MVC and when the GetOverriddenBrowser().IsMobileDevice returns true, MVC goes and checks for .Mobile.cshtml files and starts rendering them as available. So if you only have the _Layout.Mobile.cshtml and no Index.Mobile.cshtml in your view folder, MVC will fall back on the standard Index.cshtml view while using the _Layout.Mobile.cshtml as the default layout.

This is a VERY powerful mechanism we’ve got here.

It’s worth noting .Mobile is not hardcoded, rather the default. We can have .WP7, .WP8, .Iphone, .Android or any such specially targeted views as we deem required.

With the ViewSwitcher and _Layout.Mobile.cshtml in place, now if we run the application, the Home page and Edit page look as follows. Note only the underlying _Layout page has changed to _Layout.Mobile. No new views have been introduced.

 



Cheap ASP.NET 4.5 Hosting

We’re a company that works differently to most. Value is what we output and help our customers achieve, not how much money we put in the bank. It’s not because we are altruistic. It’s based on an even simpler principle. "Do good things, and good things will come to you".

Success for us is something that is continually experienced, not something that is reached. For us it is all about the experience – more than the journey. Life is a continual experience. We see the Internet as being an incredible amplifier to the experience of life for all of us. It can help humanity come together to explode in knowledge exploration and discussion. It is continual enlightenment of new ideas, experiences, and passions


Author Link


 

Corporate Address (Location)

ASPHostPortal
170 W 56th Street, Suite 121
New York, NY 10019
United States

Tag cloud

Sign in