×
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 11:25.
127 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×