×
Namespaces

Variants
Actions

Window Phone 应用程序中的Facebook 认证

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon Web.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
翻译:
WS - OtomiiLu
最后由 hamishwillee 在 27 Jun 2013 编辑

本文演示在不使用第三方库的情况下如何实现Facebook OAuth2.0 身份验证和获取Facebook数据。

Contents

说明

Facebook OAuth2.0 身份验证允许第三方应用系统使用Facebook API访问用户数据。本文我们将创建一个应用程序,它将传递Facebook OAuth2.0认证来访问用户文件信息。

实施

创建一个空的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包含一个 ButtonTextBlock和一个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

Note.pngNote: 在应用程序中有一个额外的权限,你可以按照使用管理权限

得到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中。

相关的文章

源代码

实例中完整的源代码在这里: File:FacebookLoginWp7.zip


本文翻译自:Facebook authentication in Windows Phone application

This page was last modified on 27 June 2013, at 14:25.
168 page views in the last 30 days.
×