# Facebook Single Sign-on App
In this page, you will learn how to use Facebook's Single Sign-On (SSO) with Monaca Cloud IDE using Angular 1 and [Onsen UI](https://onsen.io/). The authentication is done by [cordova-plugin-facebook4](https://github.com/jeduan/cordova-plugin-facebook4). This plugin will use the native Facebook app to perform Single Sign On for the user; otherwise, the sign on will degrade gracefully using the standard dialog based authentication.
{% hint style="info" %}
* To check third party cordova plugins, you need to create a custom build debugger ( [Android version](https://en.docs.monaca.io/products_guide/debugger/installation/debugger_android#build-and-install-custom-monaca-debugger) or [iOS version](https://en.docs.monaca.io/products_guide/debugger/installation/debugger_ios#how-to-build-custom-monaca-debugger)
* The following settings are required in config.xml.
``\
``\
``
{% endhint %}
## Demo
[Import Facebook Single Sign-on App to your Monaca Account](https://monaca.mobi/directimport?pid=591abc668034513c335e2ecf)
**Tested Environment**
* Android 11.0
* iOS 14.3
## Prerequisite
`APP_ID` and `APP_NAME` are required by the `cordova-plugin-facebook4` plugin. These two values can be found in the Facebook for Developer console after registering your app. To do so, please proceed as follows:
1. Go to [Facebook for Developers](https://developers.facebook.com/) and log in with your Facebook account.
2. Go to `My Apps → Add a New App`.
3\. Input the necessary information of your app and click `Create App ID`.
4\. From the Dashboard, go to *Settings* and you will be able to find the `APP_ID` (App ID) and `APP_NAME` (Display Name).
5\. Now it’s time to add the platform(s) of the devices which will run your app by clicking `+ Add Platform` button.
6\. If your app will run on Android, select `Android`.
7\. Fill in the necessary information as shown below and click `Save Changes` :
* `Google Play Package Name`: is the Android’s Package Name you configured in Monaca Cloud IDE for Android App Settings.
* `Key Hashes`: is the SHA-1 fingerprint of the KeyStore you configured in Monaca Cloud IDE for Android KeyStore Settings. Please refer to [How to get SHA-1 fingerprint of a keystore created in Monaca Cloud IDE](https://en.docs.monaca.io/faq/application#how-to-get-sha-1-fingerprint-of-a-keystore-created-in-monaca-cloud-ide).
* Enable `Single Sign On` option.
8\. If your app will run on iOS as well, Click `+ Add Platform` and select `iOS`.
9\. Fill in the necessary information as shown below and `Save Changes` :
* `Bundle ID`: is the iOS’s App ID you configured in Monaca Cloud IDE for iOS App Settings.
* Enable `Single Sign On` option.
## Importing the Project to Monaca Cloud IDE
[Import Facebook Single Sign-on App to your Monaca Account](https://monaca.mobi/directimport?pid=591abc668034513c335e2ecf)
## Configuring the Plugin
The authentication is done by [cordova-plugin-facebook4](https://github.com/jeduan/cordova-plugin-facebook4). This plugin will use the native Facebook app to perform Single Sign-on for the user; otherwise, the sign on will degrade gracefully using the standard dialog based authentication.
Before starting to use the plugin, you are required to input the `APP_ID` and `APP_NAME` values within the plugin’s configuration as follows:
1. From Monaca Cloud IDE menu, go to `Configure → Cordova Plugin Settings`.
2. Under the E*nabled Plugins* section, hover over `cordova-plugin-facebook4` and click `Configure` button.
3\. Input the `APP_ID` and `APP_NAME` values you got in the [Prerequisite](#prerequisite) section. See the screenshot below as an example:
4\. Click `OK` to complete the configuration.
## Application Explanation
### File Components
| File | Description |
| --------------- | ------------------------------------------------------- |
| `index.html` | The startup Page |
| `home.html` | Login Page |
| `profile.html` | User profile Page |
| `css/style.css` | A stylesheet file for the application |
| `js/app.js` | A JavaScript file for implementation of the application |
### HTML Explanation
#### index.html
```markup
```
This file is the startup page of the application. As you can see within the `` tag, there is only one [ons-navigator](https://onsen.io/v2/docs/angular1/ons-navigator.html) component. It provides page stack management and navigation. The attribute page is used to identify the first page in the stack.
#### home.html
```markup
Facebook Demo
Welcome to Facebook Authentication Demo with Monaca using Onsen UI and AngularJS!
Connect to Facebook
```
This page is a login page. If there is existing login information found in the device, it will be automatically redirected to `profile.html` page.
#### profile.html
```markup
Facebook Profile
{{user.name}}
(@{{user.id}})
{{user.email}}
```
This page is a user's Facebook profile page.
### Stylesheet Explanation
This file consists of the CSS style for the navigation bar and Facebook profile image.
```css
div.page {
padding: 5%;
text-align: center;
}
p.center {
text-align: center;
}
img.profile {
width: 40%;
border: solid 1px #1da1f2;
border-radius: 5px;
}
.navigation-bar {
background-color: #4267b2;
}
.button {
background-color: #4267b2;
}
```
### JavaScript Explanation
```javascript
ons.bootstrap()
.service('StorageService', function() {
var setLoginUser = function(user_info) {
window.localStorage.login_user = JSON.stringify(user_info);
};
var getLoginUser = function(){
return JSON.parse(window.localStorage.login_user || '{}');
};
return {
getLoginUser: getLoginUser,
setLoginUser: setLoginUser
};
})
.controller('HomeCtrl', function($scope, StorageService, $http, $q) {
var CheckLoginStatus = function(){
window.facebookConnectPlugin.getLoginStatus(
function(data){
if(data.authResponse){
console.log('Login info is found!');
myNavigator.pushPage('profile.html');
}else{
console.log('No login info is found!');
}
},
function(e){
LoginError(e);
}
);
}
ons.ready(function() {
CheckLoginStatus();
});
var GetProfileInfo = function (authResponse) {
var info = $q.defer();
facebookConnectPlugin.api('/me?fields=email,name&access_token=' + authResponse.accessToken, null,
function (response) {
info.resolve(response);
},
function (response) {
info.reject(response);
}
);
return info.promise;
};
var LoginSuccess = function(response){
var authResponse = response.authResponse;
GetProfileInfo(authResponse).then(function(user) {
StorageService.setLoginUser({
name: user.name,
id: user.id,
email: user.email,
profile_url: "http://graph.facebook.com/" + authResponse.userID + "/picture?type=large"
});
myNavigator.pushPage('profile.html');
}, function(error){
console.log('Error retrieving user profile' + JSON.stringify(error));
});
};
var LoginError = function(error){
console.log('Login Error: ' + JSON.stringify(error));
// When "User cancelled dialog" error appears
if (error.errorCode === "4201"){
CheckLoginStatus();
}
};
$scope.Login = function(){
facebookConnectPlugin.login(['email', 'public_profile'], LoginSuccess, LoginError);
}
})
.controller('ProfileCtrl', function($scope, StorageService, $http, $q) {
$scope.user = StorageService.getLoginUser();
var LogoutFromFacebook = function(){
facebookConnectPlugin.logout(
function() {
console.log('Successful logout!');
myNavigator.pushPage("home.html");
},
function(error) {
console.log('Error logging out: ' + JSON.stringify(error));
}
);
}
$scope.Logout = function(){
ons.notification.confirm({
message: "Are you sure you want to log out?",
title: 'Facebook Demo',
buttonLabels: ["Yes", "No"],
callback: function(idx) {
switch (idx) {
case 0:
LogoutFromFacebook();
case 1:
break;
break;
}
}
});
}
});
```
Inside this file, there is a service, called `StorageService`, to store the login information of the user using the device's Local Storage. There are also two controllers such as `HomeCtrl` and `ProfileCtrl` which are the controllers for `home.html` and `profile.html` pages, respectively.
`HomeCtrl` controller consists of several functions used within the `home.html` page. Once, the page is loaded, the `CheckLoginStatus()` function is triggered to check if there is any existing login information. If the login information is found, the `myNavigator.pushPage()` function is called to navigate to `profile.html` page showing the user's Facebook profile as found in the login information. When the user clicks on `Connect to Facebook` button, the `Login()` function is triggered. In this function, the `facebookConnectPlugin.login()` function is called to show the native Facebook authentication dialog. If the login is successful, the login information will be stored in the device's local storage via `StorageService.setLoginUser()` function and then the `myNavigator.pushPage()` function is called to navigate to `profile.html` page.
{% hint style="info" %}
If you have logged in with a Facebook app on your device, the information of that account will be automatically grabbed and used in this app. If you want to login with a different account, please go to your Facebook app and change the account there.
{% endhint %}
However, if you do not have a Facebook app on your device or you have not logged in the existing Facebook app on your device, the authentication screen will appear:
In the `ProfileCtrl` controller, there are 2 functions: `Logout()` and `LogoutFromFacebook()`. The `Logout()` function is called when the user clicks on the Logout icon on the top-right corner of the Profile page. Inside the `Logout()` function, a confirmation dialog is shown. If the user selects `Yes`, both `LogoutFromFacebook()` function `StorageService` service are called to log the user out and remove the login information from the device's local storage, respectively.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://en.docs.monaca.io/sampleapp/samples/facebook_sso.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.