Facebook Oauth Example For Ionic Framework

This example will demonstrate how to use ngCordova to authenticate with Facebook and retrieve an access token for use with the Facebook REST API.

Requirements

Configuration

Download this example project from GitHub and run the following commands:

$ ionic platform add android
$ cordova plugin add org.apache.cordova.inappbrowser
$ cordova plugin add cordova-plugin-whitelist

The above commands will add the Android build platform and install the required Apache InAppBrowser plugin.

This example application requires you to have your own Facebook application registered with Facebook.com. Doing so will give you a unique client id that can be included into your project. When registering your application with Facebook, make sure to set the callback uri to http://localhost/callback, otherwise ngCordova will not function.

With the client id in hand, open www/js/app.js and find the following line:

$cordovaOauth.facebook("CLIENT_ID_HERE", ["email", "read_stream", "user_website", "user_location", "user_relationships"])

You will want to replace CLIENT_ID_HERE with the official key.

Usage

With this example project configured on your computer, run the following from the Terminal or command prompt:

$ ionic build android

Install the application binary to your device or simulator.

The application is currently composed of three parts and makes use of two of the official Facebook RESTful APIs.

  1. Oauth sign in
  2. Basic profile (GET /me)
  3. Basic stream (GET /me/feed)

You will be required to sign into the application using your own Facebook username and password. Once logged in, you can view very basic information found in your profile or navigate to your stream. The stream will show posts with a comment and like count.

Version History

0.0.1

  • Add: oauth sign in
  • Add: view profile
  • Add: view feed of recent entries

Have a question or found a bug (compliments work too)?

Tweet me on Twitter - @nraboy

Resources

Ionic Framework - http://www.ionicframework.com

AngularJS - http://www.angularjs.org

Apache Cordova - http://cordova.apache.org

ngCordova - http://www.ngcordova.com

Nic Raboy's Code Blog - https://blog.nraboy.com



Facebook Oauth Example For Ionic Framework

这个例子将演示如何使用ngCordova来进行身份验证和检索 与Facebook REST API一起使用的访问令牌。

要求

配置

从GitHub下载此示例项目,并运行以下命令:

$ ionic platform add android
$ cordova plugin add org.apache.cordova.inappbrowser
$ cordova plugin add cordova-plugin-whitelist

上述命令将添加Android构建平台并安装所需的Apache InAppBrowser插件。

此示例应用程序要求您将您自己的Facebook应用程序注册到Facebook.com。这样做 将为您提供可以包含在您的项目中的唯一客户端ID。当用Facebook注册你的应用程序时, 请确保将回调uri设置为 http:// localhost / callback ,否则ngCordova将无法运行。

使用客户端ID,打开 www / js / app.js ,找到以下行:

$cordovaOauth.facebook("CLIENT_ID_HERE", ["email", "read_stream", "user_website", "user_location", "user_relationships"])

您将要用官方密钥替换 CLIENT_ID_HERE

用法

在您的计算机上配置此示例项目,请从终端或命令提示符运行以下命令:

$ ionic build android

将应用程序二进制文件安装到您的设备或模拟器。

该应用程序目前由三部分组成,并使用两个官方Facebook RESTful API。

  1. Oauth sign in
  2. Basic profile (GET /me)
  3. Basic stream (GET /me/feed)

您将需要使用您自己的Facebook用户名和密码登录该应用程序。登录后,可以 查看您的个人资料中找到的基本信息,或查看您的信息流。流将显示带有注释的帖子 像计数。

版本历史

0.0.1

  • 添加:oauth登录
  • 添加:查看个人资料
  • 添加:查看最近条目的提要

有问题或发现错误(赞美工作)?

在Twitter上发短信 - @nraboy

资源

离子框架 - http://www.ionicframework.com

AngularJS - http://www.angularjs.org

Apache Cordova - http://cordova.apache.org

ngCordova - http://www.ngcordova.com

Nic Raboy的代码博客 - https://blog.nraboy.com




相关问题推荐