Login with other services to ASP.NET websites with TMS Cloud Pack for.net

Transcription

1 Login with other services to ASP.NET websites with TMS Cloud Pack for.net Introduction Allowing users to identify using a login of a known big online service brings the advantage for the user to not have to remember yet another set of credentials for your website. Using OAuth, this can now be easily achieved in a secure way. This means that the user can be uniquely identified for your website but the username & password of the user is perfectly secure and safe and won t be known to your website. With TMS Cloud Pack for.net, this becomes very easy as it hides all complexities of OAuth for you. In this article, this will be demonstrated by putting together an example to login with Facebook, LinkedIn or Google. Adding Facebook, LinkedIn or Google authentication step by step As a first step, you ll need to register for an application key & secret for the services you d want to use to perform authentication against. This is needed so the cloud service can uniquely identify your application. The TMS Cloud Pack for.net developer guide has the information and links where you can register your application with these cloud services. For this example, you will need to register for a key & secret for the Facebook, LinkedIn and Google cloud service and define a callback URL for the service as well. To get started with TMS Cloud Pack for.net, add a reference to the TMS.Cloud and TMS.Cloud.Web assemblies to your ASP.NET project. Then you can add two components to your webpage: CloudCacheProvider WebFormsOAuthPanel

2 Next step is to add a RadioButtonList to your page and add following items: Facebook, LinkedIn, Google. Add a Button and change its caption to Login.

3 Add following using directives: using TMS.Cloud.Facebook; using TMS.Cloud.LinkedIn; using TMS.Cloud.GoogleContacts; Implement following properties in your WebForm class: private Facebook Facebook { get; set; } private LinkedIn LinkedIn { get; set; } private GoogleContacts GoogleContacts { get; set; } Write following code in to your Page_Load event: Facebook = CloudCacheProvider1.Factory<Facebook>("Facebook"); LinkedIn = CloudCacheProvider1.Factory<LinkedIn>("LinkedIn"); GoogleContacts = CloudCacheProvider1.Factory<GoogleContacts>("GoogleContacts"); The next step involves configuring the cloud service components with your application key & secret. This can be done in several ways. One way is to set the key & secret pairs in a file OAuth.CFG or an XML file and have the component load it from this file or another way is to set it directly in your code, via the component s Authenticator.OAuthApplication property. Examples: - Load from OAuth.CFG:

4 Facebook.Authenticator.LoadSettings(); - Load from an XML file: Facebook.Authenticator.XmlFileName = myfile.xml - Set key & secret programmatically: Facebook.Authenticator.OAuthApplication.Key = xxxxxxxxxxxxx ; Facebook.Authenticator.OAuthApplication.Secret = yyyyyyyyyyyyyyy ; Facebook.Authenticator.CallbackURL = mycallbackurl ; - Use XPath to load from an XML file with multiple settings: Facebook.Authenticator.XPath = oauth//facebook ; A sample XML file is below: <?xml version="1.0"?> <oauth> <linkedin> <key></key> <secret>xxxxxxxxxxxxxx</secret> <callback>yyyyyyyyyyyyyyyyyy</callback> </linkedin> <facebook> <key>xxxxxxxxxxxxxx</key> <secret>yyyyyyyyyyyyyyyyyy</secret> <callback>xxxxxxxxxxxxxx</callback> </facebook> <googlecontacts> <key>xxxxxxxxxxxxxx</key> <secret>yyyyyyyyyyyyyyyyyy</secret> <callback>xxxxxxxxxxxxxx</callback> </googlecontacts> </oauth> Stateful & stateless web applications For using the stateful web application mode, you need to enable ViewState for the page. With the stateful option (easiest way), it is important to note that the property CloudCacheProvider.Expiry determines how long the component will cache your data during the login process. The default is 300, meaning the cache will hold your data in 300 seconds (5 minutes). Change this value if you need a different time.

5 For a stateless design, the data needs to be passed back & forth via request parameters and as such, it is important to create a redirect page for each cloud service access component. I.e. you need to create a Login redirect Page for example, facebook.aspx, and just drop the two key components, CloudCacheProvider, OAuthWebFormsPanel on this form and then create an instance of your cloud service access component and connect the OAuthWebFormsPanel to the component with code below: FaceBook.Authenticator.OAuthPanel = OAuthWebFormsPanel1; Further, set FaceBook.Authenticator.WebRedirectURL to this page. Determine how the cloud service authentication page will be displayed The OAuthWebFormsPanel.OpenMode property configures how the authentication page provided by the cloud service is displayed and it can be set to: NewWindow, Popup or Redirect. Note that NewWindow or popup might have problems with some devices such as tablets or might be blocked by popup blockers though. Note also that for a stateless design, OAuthWebFormsPanel.OpenMode needs to be set to Redirect and property OAuthWebFormsPanel.StatelessRedirection must be set to true. The next step is now to attach OAuthWebFormsPanel to the used cloud service component to let it authenticate for the selected service. Component.Authenticator.OAuthPanel = OAuthWebFormsPanel1; When you use multiple cloud service components in one page, like in this example with Facebook, LinkedIn, Google, you can do it using a simple switch in your Page_Load event: switch (RadioButtonList1.SelectedIndex) { case 0: Facebook.Authenticator.OAuthPanel = OAuthWebFormsPanel1; case 1: LinkedIn.Authenticator.OAuthPanel = OAuthWebFormsPanel1; case 2: GoogleContacts.Authenticator.OAuthPanel = OAuthWebFormsPanel1; } In your login button you can write code below:

6 protected void Button1_Click(object sender, EventArgs e){ switch (RadioButtonList1.SelectedIndex) { case 0: Facebook.Open(); case 1: LinkedIn.Open(); case 2: GoogleContacts.Open(); } } By calling the Open() method, the component will do what is necessary to perform the authentication against the selected service. Getting the authenticated credentials Each cloud service access component in TMS Cloud Pack for.net has an AfterOpen event. This event is triggered after a successful authentication & authorization against a cloud service. Set your AfterOpen event handling code to each cloud service access component, for example Facebook: Facebook.AfterOpen = AfterOpenEvent; In the AfterOpen event you can add your own code that calls authenticated & authorized cloud service access component methods, for example to get identification information about the logged in user. In case of just using the cloud service for login purposes, simply use component.userprofile property as most of components have this property and then use the user profile Id with cloud service name to have a unique Id for each login for your website. In the case of Facebook, you could store in your website login database Facebook.UserProfile.Id and service Facebook and this user would be uniquely identified. If it is the first time the user logs in, you can add this entry in your website database and then add website related data to this account and retrieve that data when the user logs in again. You could also use Facebook.UserProfile.FirstName / Facebook.UserProfile.Name to display the friendly name to welcome the user to your page.

7 Conclusion TMS Cloud Pack for.net takes all difficulties of the OAuth authentication & authorization process away. With one set of components, you can add access to the world s most popular cloud services in a simple and consistent way. More information, trial version, demos and documentation about TMS Cloud Pack for.net can be found at: