Window Phone 应用程序中的Facebook 认证
文章信息
本文演示在不使用第三方库的情况下如何实现Facebook OAuth2.0 身份验证和获取Facebook数据。
Contents |
说明
Facebook OAuth2.0 身份验证允许第三方应用系统使用Facebook API访问用户数据。本文我们将创建一个应用程序，它将传递Facebook OAuth2.0认证来访问用户文件信息。
Facebook Login Dialog
Facebook User Profile
实施
创建一个空的Window Phone项目
启动 Visual Studio-> 单击文件-> 新项目-> 选择 Windows Phone 应用程序 （Visual C# 模板）-> 添加名称和位置的项目-> 单击确定以创建项目。
创建Facebook应用程序获取API Key 和 App Secret
要创建Facebook应用程序让我们转到Facebook开发人员账户，然后单击创建新应用程序按钮。按照页面上的说明完成这个过程。一旦在Facebook 上创建了应用程序，你将在Facebook 上看到APP ID/API KEY和APP Secret.我们将使用这些密钥和密码来认证我们的应用程序，然后访问Facebook用户文件信息。
应用程序页上加控件
在应用程序中我们有两页MainPage.xaml and FacebokLoginPage.xaml. MainPage.xaml包含一个 Button，TextBlock和一个Image。
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Height="82" Margin="66,100,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" ImageFailed="image1_ImageFailed" HorizontalAlignment="Left" Width="76" />
<TextBlock Height="68" HorizontalAlignment="Left" Margin="153,100,0,0" Name="textBlock1" Text="" VerticalAlignment="Top" Width="290" FontSize="42" />
<Button Content="Login" Height="72" HorizontalAlignment="Left" Margin="66,421,0,0" Name="button1" VerticalAlignment="Top" Width="309" Click="button1_Click" />
</Grid>
在MainPage.xaml中的Button 控件被用来调用FacebokLoginPage.xaml，它用WebBrowser 来加载Facebook登陆页。
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:WebBrowser IsScriptEnabled="True" HorizontalAlignment="Left" Margin="9,20,0,0" x:Name="webBrowser1" VerticalAlignment="Top" Height="614" Width="441" Navigated="BrowserNavigated"/>
</Grid>
当Facebook登陆成功，FacebookLoginPage.xaml页关闭，应用程序控件返回到MainPage.xaml，显示用户名和文件图片。
启动Facebook登陆页
当用户单击MainPage.xaml上的登陆按钮，它导航到调用Facebook登陆URL和启动Facebook登陆对话框的FacebookLoginPage.xaml上。
https://www.facebook.com/dialog/oauth?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html
用户输入Facebook凭证后它将请求可以使用范围的权限 ，所以我们的URL看起来像下面。
https://www.facebook.com/dialog/oauth?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html&scope=email,user_location,friends_location,user_hometown,friends_hometown,publish_stream,offline_access,read_stream,user_status,user_photos,friends_photos,friends_status,user_checkins,friends_checkins,user_events,publish_checkins&display=wap
得到Code 和Access Token
登陆页就是一个HTML页，因此我们可以在 WebBrowser 控件上加载。
void FB_LoginPage_Loaded(object sender, RoutedEventArgs e)
{
var url = "https://www.facebook.com/dialog/oauth?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html&scope=email,user_location,friends_location,user_hometown,friends_hometown,publish_stream,offline_access,read_stream,user_status,user_photos,friends_photos,friends_status,user_checkins,friends_checkins,user_events,publish_checkins&display=wap";
webBrowser1.Navigate(new Uri(url));
}
一旦应用程序被认证，它将向我们发回响应代码。我们在BrowserNavigated() 中得到响应，然后解析代码并将代码添加到URL获取访问令牌。
private void BrowserNavigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
{
if (e.Uri.IsAbsoluteUri)
{
string code = e.Uri.Query.ToString();
string[] split = code.Split(new Char[] { '=' });
string codeString = split.GetValue(0).ToString();
string codeValue = split.GetValue(1).ToString();
if (codeValue.Length > 0)
{
var url = "https://graph.facebook.com/oauth/access_token?client_id=<Your Key>
&redirect_uri=https://www.facebook.com/connect/login_success.html&client_secret=<Your Secret>&code=" + codeValue;
//call access token
WebRequest request = WebRequest.Create(url); //FB access token Link
request.BeginGetResponse(new AsyncCallback(this.ResponseCallback_AccessToken), request);
}
}
else
return;
}
异步web请求获取访问令牌。
//call access token
WebRequest request = WebRequest.Create(url); //FB access token Link
request.BeginGetResponse(new AsyncCallback(this.ResponseCallback_AccessToken), request);
我们得到网络响应解析访问令牌。
private void ResponseCallback_AccessToken(IAsyncResult asynchronousResult)
{
try
{
var request = (HttpWebRequest)asynchronousResult.AsyncState;
using (var resp = (HttpWebResponse)request.EndGetResponse(asynchronousResult))
{
using (var streamResponse = resp.GetResponseStream())
{
using (var streamRead = new StreamReader(streamResponse))
{
string responseString = streamRead.ReadToEnd();
string[] splitAccessToken = responseString.Split(new Char[] { '=' });
string accessTokenString = splitAccessToken.GetValue(0).ToString();
string accessTokenValue = splitAccessToken.GetValue(1).ToString();
if (accessTokenString == "access_token")
{
AccessToken = accessTokenValue;
}
}
}
}
}
catch (WebException ex)
{
}
GetAccessToken();
}
GetAccessToken() 方法检查访问令牌的存在，并调用LoadUserProfile() 方法。
void GetAccessToken()
{
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
if (string.IsNullOrEmpty(AccessToken))
{
MessageBox.Show("AccessToken not valid");
}
else
{
MessageBox.Show("AccessToken= " + AccessToken);
LoadUserProfile();
}
});
}
加载Facebook用户配置文件
LoadUserProfile()方法用Facebook Graph API 以一个网页请求来获取用户名和文档图片。
void LoadUserProfile()
{
var urlProfile = "https://graph.facebook.com/me?fields=name,picture&access_token=" + AccessToken;
//call access token
WebRequest request = WebRequest.Create(urlProfile); //FB access token Link
request.BeginGetResponse(new AsyncCallback(this.ResponseCallbackProfile), request);
}
我们在ResponseCallbackProfile()捕获异步调用，然后解析名称和用户的配置文件图片，最后在显示在MainPage.xaml上。
private void ResponseCallbackProfile(IAsyncResult asynchronousResult)
{
try
{
var request = (HttpWebRequest)asynchronousResult.AsyncState;
using (var resp = (HttpWebResponse)request.EndGetResponse(asynchronousResult))
{
using (var streamResponse = resp.GetResponseStream())
{
var facebookSerializerData = new DataContractJsonSerializer(typeof(FacebookUserProfile));
var facebookProfileData = facebookSerializerData.ReadObject(streamResponse) as FacebookUserProfile;
this.Dispatcher.BeginInvoke(
(Action<FacebookUserProfile>)((facebookUserData) =>
{
thisApp.UserName = facebookUserData.Name;
thisApp.UserImage = facebookUserData.Picture;
NavigationService.GoBack();
}), facebookProfileData);
}
}
}
catch (WebException ex)
{
}
}
注：要运行你从项目的Facebook Developer账户得到的代码必须确保你已经用API Key 替换了 <Your Key>，同时用App Secret替换了<Your Secret>。
总结
此应用程序演示如何使用 Facebook API 来验证我们的应用程序而无需使用任何第三方库。Facebook身份验证的相同流程也实施在Qt/QML中。
- Facebook+ Facebook client with Nokia Maps - app showcase
- Display Facebook Friend position with Nokia Maps API for Qt
相关的文章
源代码
实例中完整的源代码在这里： File:FacebookLoginWp7.zip
(no comments yet)