Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

(Difference between revisions)

Authenticating to Social Services using Infragistics

From Wiki
Jump to: navigation, search
rgunawans (Talk | contribs)
(Rgunawans - - Introduction)
rgunawans (Talk | contribs)
(Rgunawans -)
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Draft]]
+
[[Category:Windows Phone 8]][[Category:Tools for Windows Phone]][[Category:Windows Phone 7.x]]
{{Abstract|This article explains how to use  [http://www.infragistics.com/products/windows-phone/features/access-control/ Infragistics Access Control], this control makes easier to get authenticate to Twitter, Facebook, LiveID and Google services}} '
+
{{Abstract|This article explains how to use  [http://www.infragistics.com/products/windows-phone/features/access-control/ Infragistics Access Control]to authenticate to Twitter, Facebook, LiveID and Google services.}} '
  
 
{{ArticleMetaData <!-- v1.3 -->
 
{{ArticleMetaData <!-- v1.3 -->
Line 24: Line 24:
 
== Introduction ==
 
== Introduction ==
  
As a developer, sometimes we need to share our work to social media or if we want to develop an application that need Soc Med services, we have to create authentication to that services by our self.
+
In order to integrate your application with social media, or share your work via social media, you need to authenticate to social media services. Writing the code to do this from scratch can be quite laborious.  You can use Infragistics Access Control to do this much more easily.
First of all, before we use Twitter/Facebook/Live ID or Google, make sure that we have application key.
+
  
The table below authentication providers and URL to register an application
+
=== Obtaining an auth token ===
 +
Regardless of what tools you use to authenticate, you'll need to obtain an application key for the service you're using before you begin.  Each auth token is specific to one application. 
 +
 
 +
The table below lists the URLs where you can obtain a token for the major social media services to register an application.
  
 
{| class="wikitable"
 
{| class="wikitable"
Line 43: Line 45:
 
|}
 
|}
  
I will show how to use the Infragistics Access Control.
+
== Using Infragistics Access Control ==
  
First, create new Project, choose Windows Phone App, enter the name of project
+
Now I will explain how to use the Infragistics Access Control.
[[File:New Project.jpg]]
+
Find "XamAccessControl" in the toolbox and drag to MainPage.xaml
+
[[File:AccessControl.jpg]]
+
  
Setting the control like my code to use Twitter Authentication
+
=== Setting up your project ===
<ig:XamAccessControl x:Name="accessCtrl" HorizontalAlignment="Left" Height="100" Margin="37,227,0,0" VerticalAlignment="Top" Width="100" >
+
First, create a new Project, choose '''Windows Phone App''', and enter the name of project
                <ig:XamAccessControl.AuthenticationService>
+
[[File:new project.jpg|none|thumb|200px|Create new project]]
                    <ig:AuthenticationService
+
                        Provider="Twitter"
+
                        ClientId="xxxxxx"
+
                        RedirectUri="http://www.dvlup.com"
+
                        ClientSecret="xxxxx"                        />
+
                   
+
                </ig:XamAccessControl.AuthenticationService>
+
            </ig:XamAccessControl>
+
  
 +
Find '''XamAccessControl''' in the toolbox and drag to MainPage.xaml
 +
[[File:Accesscontrol.jpg|none|thumb|200px|AccessControl]]
 +
 +
=== Setting the control ===
 +
Set the control as shown below.  This example authenticates to Twitter.
 +
<code xml>
 +
<ig:XamAccessControl x:Name="accessCtrl" HorizontalAlignment="Left" Height="100" Margin="37,227,0,0" VerticalAlignment="Top" Width="100">
 +
  <ig:XamAccessControl.AuthenticationService>
 +
      <ig:AuthenticationService
 +
        Provider="Twitter"
 +
        ClientId="xxxxxx"
 +
        RedirectUri="http://www.dvlup.com"
 +
        ClientSecret="xxxxx"/>
 +
  </ig:XamAccessControl.AuthenticationService>
 +
</ig:XamAccessControl>
 +
</code>
  
Please note, the "Provider" property can be change to
+
If you're authenticating to a different service, set the "Provider" property to the appropriate value:
 
# Twitter
 
# Twitter
 
# Facebook
 
# Facebook
Line 69: Line 76:
 
# Google
 
# Google
  
and drag a button to activate authentication process and put below code:
+
=== Coding the button ===
 +
Once you've set up the control, drag a button to activate the authentication process and insert the following code:
  
<code>
+
<code csharp>
 
private void Button_Click(object sender, RoutedEventArgs e)
 
private void Button_Click(object sender, RoutedEventArgs e)
 
{
 
{
Line 78: Line 86:
 
</code>
 
</code>
  
 +
=== Handling authentication events ===
 
Next step is "Authentication Event Handling", you can use below code after "InitializeComponent()"
 
Next step is "Authentication Event Handling", you can use below code after "InitializeComponent()"
  
<code>
+
<code csharp>
 
public MainPage()
 
public MainPage()
 
{
 
{
    InitializeComponent();
+
  InitializeComponent();
  
    accessTwitter.AuthenticationCompleted += new EventHandler<Infragistics.Controls.Authentication.AuthenticationCompletedEventArgs>(accessTwitter_AuthenticationCompleted);
+
  accessTwitter.AuthenticationCompleted +=  
    accessTwitter.AuthenticationDenied += new EventHandler<Infragistics.Controls.Authentication.AuthenticationDeniedEventArgs>(accessTwitter_AuthenticationDenied);
+
      new EventHandler<Infragistics.Controls.Authentication.AuthenticationCompletedEventArgs>  
    accessTwitter.AuthenticationException += new EventHandler<Infragistics.Controls.Authentication.AuthenticationExceptionEventArgs>(accessTwitter_AuthenticationException);
+
      (accessTwitter_AuthenticationCompleted);
           
+
 
 +
  accessTwitter.AuthenticationDenied +=  
 +
      new EventHandler<Infragistics.Controls.Authentication.AuthenticationDeniedEventArgs>
 +
      (accessTwitter_AuthenticationDenied);
 +
 
 +
  accessTwitter.AuthenticationException +=  
 +
      new EventHandler<Infragistics.Controls.Authentication.AuthenticationExceptionEventArgs>
 +
      (accessTwitter_AuthenticationException);
 
}
 
}
  
 
void accessTwitter_AuthenticationException(object sender, Infragistics.Controls.Authentication.AuthenticationExceptionEventArgs e)
 
void accessTwitter_AuthenticationException(object sender, Infragistics.Controls.Authentication.AuthenticationExceptionEventArgs e)
 
{
 
{
    Debug.WriteLine("AUTHENTICATION_EXCEPTION:" + e.Exception.Message);
+
  Debug.WriteLine("AUTHENTICATION_EXCEPTION:" + e.Exception.Message);
 
}
 
}
  
 
void accessTwitter_AuthenticationDenied(object sender, Infragistics.Controls.Authentication.AuthenticationDeniedEventArgs e)
 
void accessTwitter_AuthenticationDenied(object sender, Infragistics.Controls.Authentication.AuthenticationDeniedEventArgs e)
 
{
 
{
    Debug.WriteLine("AUTHENTICATION_DENIED:" + e.AuthenticationDeniedResult.Error);
+
  Debug.WriteLine("AUTHENTICATION_DENIED:" + e.AuthenticationDeniedResult.Error);
 
}
 
}
  
 
void accessTwitter_AuthenticationCompleted(object sender, Infragistics.Controls.Authentication.AuthenticationCompletedEventArgs e)
 
void accessTwitter_AuthenticationCompleted(object sender, Infragistics.Controls.Authentication.AuthenticationCompletedEventArgs e)
 
{               
 
{               
    Debug.WriteLine("AUTHENTICATION_COMPLETED:" + e.AuthenticationResult.AuthenticationToken);
+
  Debug.WriteLine("AUTHENTICATION_COMPLETED:" + e.AuthenticationResult.AuthenticationToken);
 
}
 
}
  
 
</code>
 
</code>
  
Done.. that's it, it's easy to get authentication token from Providers, less than 5 minutes coding..
+
That's all you have to do!
  
== Summary ==
+
Note: Some content for this wiki was taken from [http://help.infragistics.com/Help/Doc/WindowsPhone/2012.2/CLR4.0/html/xamAccessControl_Using_xamAccessControl.html the Infragistics Access Control docs]
  
In order to use below Authentication APIs
 
# Facebook
 
# Twitter
 
# Live ID
 
# Google
 
  
you can use Infragistics Access Control, it more easy than you create by yourself.
+
== Authenticating to social services  ==
Below is comparison steps between Infragistics Access Control and code that I've use already
+
Below is comparison steps between Infragistics Access Control and code that I've use already (you can read from [[Authenticating_to_social_services]])
  
 
{| class="wikitable"
 
{| class="wikitable"
Line 131: Line 142:
 
| Drag a button  || Put the code for browser access OnNavigate
 
| Drag a button  || Put the code for browser access OnNavigate
 
|-
 
|-
|  Activate the control "accessTwitter.IsOpen = true;" || Put the code <code>
+
|  Activate the control "accessTwitter.IsOpen = true;" || Put the code <code csharp>
 
private void GetTwitterToken()
 
private void GetTwitterToken()
 
         {
 
         {
Line 275: Line 286:
 
| Get the Authentication Token || Drag button to MainPage.xaml
 
| Get the Authentication Token || Drag button to MainPage.xaml
 
|-
 
|-
| Done || Put event on the button di navigate to TwitterAuthPage.xaml
+
| Done || Put event for the button to navigate to TwitterAuthPage.xaml
 
|-
 
|-
|-|| Done|}
+
| || Done
''Add categories below using category selector. ''
+
|}

Latest revision as of 18:18, 5 February 2014

This article explains how to use Infragistics Access Controlto authenticate to Twitter, Facebook, LiveID and Google services. '

WP Metro Icon Tools.png
WP Metro Icon WP8.png
Article Metadata
Tested with
SDK: Windows Phone 8.0 SDK
Devices(s): Tested on Lumia 720
Compatibility
Platform(s):
Windows Phone 8
Article
Created: (25 Jan 2014)
Last edited: rgunawans (05 Feb 2014)

Contents

[edit] Introduction

In order to integrate your application with social media, or share your work via social media, you need to authenticate to social media services. Writing the code to do this from scratch can be quite laborious. You can use Infragistics Access Control to do this much more easily.

[edit] Obtaining an auth token

Regardless of what tools you use to authenticate, you'll need to obtain an application key for the service you're using before you begin. Each auth token is specific to one application.

The table below lists the URLs where you can obtain a token for the major social media services to register an application.

Provider Name URL
Facebook https://developers.facebook.com/apps
Twitter https://dev.twitter.com/apps/new
Live ID https://manage.dev.live.com/AddApplication.aspx
Google https://code.google.com/apis/console/?pli=1

[edit] Using Infragistics Access Control

Now I will explain how to use the Infragistics Access Control.

[edit] Setting up your project

First, create a new Project, choose Windows Phone App, and enter the name of project

Create new project

Find XamAccessControl in the toolbox and drag to MainPage.xaml

AccessControl

[edit] Setting the control

Set the control as shown below. This example authenticates to Twitter.

<ig:XamAccessControl x:Name="accessCtrl" HorizontalAlignment="Left" Height="100" Margin="37,227,0,0" VerticalAlignment="Top" Width="100">
<ig:XamAccessControl.AuthenticationService>
<ig:AuthenticationService
Provider="Twitter"
ClientId="xxxxxx"
RedirectUri="http://www.dvlup.com"
ClientSecret="xxxxx"/>
</ig:XamAccessControl.AuthenticationService>
</ig:XamAccessControl>

If you're authenticating to a different service, set the "Provider" property to the appropriate value:

  1. Twitter
  2. Facebook
  3. Live Id
  4. Google

[edit] Coding the button

Once you've set up the control, drag a button to activate the authentication process and insert the following code:

private void Button_Click(object sender, RoutedEventArgs e)
{
accessTwitter.IsOpen = true;
}

[edit] Handling authentication events

Next step is "Authentication Event Handling", you can use below code after "InitializeComponent()"

public MainPage()
{
InitializeComponent();
 
accessTwitter.AuthenticationCompleted +=
new EventHandler<Infragistics.Controls.Authentication.AuthenticationCompletedEventArgs>
(accessTwitter_AuthenticationCompleted);
 
accessTwitter.AuthenticationDenied +=
new EventHandler<Infragistics.Controls.Authentication.AuthenticationDeniedEventArgs>
(accessTwitter_AuthenticationDenied);
 
accessTwitter.AuthenticationException +=
new EventHandler<Infragistics.Controls.Authentication.AuthenticationExceptionEventArgs>
(accessTwitter_AuthenticationException);
}
 
void accessTwitter_AuthenticationException(object sender, Infragistics.Controls.Authentication.AuthenticationExceptionEventArgs e)
{
Debug.WriteLine("AUTHENTICATION_EXCEPTION:" + e.Exception.Message);
}
 
void accessTwitter_AuthenticationDenied(object sender, Infragistics.Controls.Authentication.AuthenticationDeniedEventArgs e)
{
Debug.WriteLine("AUTHENTICATION_DENIED:" + e.AuthenticationDeniedResult.Error);
}
 
void accessTwitter_AuthenticationCompleted(object sender, Infragistics.Controls.Authentication.AuthenticationCompletedEventArgs e)
{
Debug.WriteLine("AUTHENTICATION_COMPLETED:" + e.AuthenticationResult.AuthenticationToken);
}

That's all you have to do!

Note: Some content for this wiki was taken from the Infragistics Access Control docs


[edit] Authenticating to social services

Below is comparison steps between Infragistics Access Control and code that I've use already (you can read from Authenticating_to_social_services)

Infragistics Access Control Manual Code
Drag Access Control Create new Page, name it TwitterAuthPage.xaml
Set the provider and App ID and App Secret Drag the browser to TwitterAuthPage.xaml
Drag a button Put the code for browser access OnNavigate
Activate the control "accessTwitter.IsOpen = true;" Put the code
private void GetTwitterToken()
{
var credentials = new OAuthCredentials
{
Type = OAuthType.RequestToken,
SignatureMethod = OAuthSignatureMethod.HmacSha1,
ParameterHandling = OAuthParameterHandling.HttpAuthorizationHeader,
ConsumerKey = TwitterSettings.ConsumerKey,
ConsumerSecret = TwitterSettings.ConsumerKeySecret,
Version = TwitterSettings.OAuthVersion,
CallbackUrl = TwitterSettings.CallbackUri
};
var client = new RestClient
{
Authority = "https://api.twitter.com/oauth",
Credentials = credentials,
HasElevatedPermissions = true,
SilverlightAcceptEncodingHeader = "gizp",
DecompressionMethods = DecompressionMethods.GZip,
};
 
var request = new RestRequest
{
Path = "/request_token"
};
client.BeginRequest(request, new RestCallback(TwitterRequestTokenCompleted));
}
private void TwitterRequestTokenCompleted(RestRequest request, RestResponse response, object userstate)
{
_oAuthToken = GetQueryParameter(response.Content, "oauth_token");
_oAuthTokenSecret = GetQueryParameter(response.Content, "oauth_token_secret");
 
var authorizeUrl = TwitterSettings.AuthorizeUri + "?oauth_token=" + _oAuthToken;
if (String.IsNullOrEmpty(_oAuthToken) || String.IsNullOrEmpty(_oAuthTokenSecret))
{
Dispatcher.BeginInvoke(() => MessageBox.Show("error calling twitter"));
return;
}
Dispatcher.BeginInvoke(() => BrowserControl.Navigate(new Uri(authorizeUrl)));
}
private static string GetQueryParameter(string input, string parameterName)
{
foreach (string item in input.Split('&'))
{
var parts = item.Split('=');
if (parts[0] == parameterName)
{
return parts[1];
}
}
return String.Empty;
}
private void BrowserControl_Navigated(object sender, NavigationEventArgs e)
{
ProgressBar.IsIndeterminate = false;
ProgressBar.Visibility = Visibility.Collapsed;
}
private void BrowserControl_Navigating(object sender, NavigatingEventArgs e)
{
ProgressBar.IsIndeterminate = true;
ProgressBar.Visibility = Visibility.Visible;
if (e.Uri.AbsoluteUri.CompareTo("https://api.twitter.com/oauth/authorize") == 0)
{
ProgressBar.IsIndeterminate = true;
ProgressBar.Visibility = Visibility.Visible;
}
if (!e.Uri.AbsoluteUri.Contains(TwitterSettings.CallbackUri))
return;
e.Cancel = true;
var arguments = e.Uri.AbsoluteUri.Split('?');
if (arguments.Length < 1)
return;
GetAccessToken(arguments[1]);
}
private void GetAccessToken(string uri)
{
var requestToken = GetQueryParameter(uri, "oauth_token");
if (requestToken != _oAuthToken)
{
MessageBox.Show("Twitter auth tokens don't match");
}
var requestVerifier = GetQueryParameter(uri, "oauth_verifier");
var credentials = new OAuthCredentials
{
Type = OAuthType.AccessToken,
SignatureMethod = OAuthSignatureMethod.HmacSha1,
ParameterHandling = OAuthParameterHandling.HttpAuthorizationHeader,
ConsumerKey = TwitterSettings.ConsumerKey,
ConsumerSecret = TwitterSettings.ConsumerKeySecret,
Token = _oAuthToken,
TokenSecret = _oAuthTokenSecret,
Verifier = requestVerifier
};
var client = new RestClient
{
Authority = "https://api.twitter.com/oauth",
Credentials = credentials,
HasElevatedPermissions = true
};
var request = new RestRequest
{
Path = "/access_token"
};
client.BeginRequest(request, new RestCallback(RequestAccessTokenCompleted));
}
private void RequestAccessTokenCompleted(RestRequest request, RestResponse response, object userstate)
{
var twitteruser = new TwitterAccess
{
AccessToken = GetQueryParameter(response.Content, "oauth_token"),
AccessTokenSecret = GetQueryParameter(response.Content, "oauth_token_secret"),
UserId = GetQueryParameter(response.Content, "user_id"),
ScreenName = GetQueryParameter(response.Content, "screen_name")
};
if (String.IsNullOrEmpty(twitteruser.AccessToken) || String.IsNullOrEmpty(twitteruser.AccessTokenSecret))
{
Dispatcher.BeginInvoke(() => MessageBox.Show(response.Content));
return;
}
Helper.SaveSetting(Constants.TwitterAccess, twitteruser);
IsolatedStorageSettings mysetting = IsolatedStorageSettings.ApplicationSettings;
mysetting.Remove("twitter_token");
mysetting.Remove("twitter_tokensecret");
 
mysetting.Add("twitter_token", twitteruser.AccessToken);
mysetting.Add("twitter_tokensecret", twitteruser.AccessTokenSecret);
 
mysetting.Save();
// App.keluar = false;
sukses = 1;
Dispatcher.BeginInvoke(() =>
{
if (NavigationService.CanGoBack)
{
NavigationService.GoBack();
}
});
}
Configure Event Handling set the event to navigate TwitterAuthPage.xaml
Get the Authentication Token Drag button to MainPage.xaml
Done Put event for the button to navigate to TwitterAuthPage.xaml
Done
This page was last modified on 5 February 2014, at 18:18.
89 page views in the last 30 days.
×