Facebook has become one of the most used methods to get users to sign-in to your application, in today’s post we’ll set up the Facebook native plugin through Ionic Native.

That way we can use the Facebook app to sign-in our users, instead of having them log in through a browser.

To make things easier, we’re going to break down the process into three different parts:

  • Step #1: We’ll log into our Facebook developer account, create a new app and get the credentials.
  • Step #2: We’ll go into our Firebase console and enable Facebook Sign-In with the credentials from the first step.
  • Step #3: We’ll write the code to authorize the user through Facebook and then authenticate that user into our Firebase app.

By the way, at the end of this post, I’m going to link a Starter Template that already has Google & Facebook authentication ready to go, all you’d need to do is add your credentials and run npm install.

With that in mind, let’s start!

Step #1: Facebook Developer Console

The first thing we need to do is to create a new application in Facebook’s developer dashboard, and this app is the one that Facebook will use to ask our users for their permission when we try to log them into our Ionic application.

For that you’ll need to go to https://developers.facebook.com/apps and create a new app.

facebook create app

Once you click on the button, you’ll get a short form pop up, add the name you want for your app and the contact email that will be public to users.

facebook create app form

Once we finish creating our app, it will take you to the app’s dashboard, where you can see the app’s ID, take note of that ID, we’ll need it when it’s time to install the Facebook plugin.

Facebook console app id

Install the Cordova Plugin

Now that you created your app on Facebook, we need to install the Cordova plugin in our Ionic app so we can have our app calling the Facebook Sign-In widget.

For that, open your terminal and type (All in the same line):

$ ionic plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"

You’ll need to replace the values or APP_ID and APP_NAME for your real credentials. You can find both of those inside your Facebook Developers Dashboard.

It’s a bit of a pain to work with Cordova plugins, luckily the great Ionic Team created Ionic Native, which is a wrapper for the Cordova plugins so we can use them in a more “Angular/Ionic” way.

So the next thing we need to do is install the facebook package from Ionic Native, open your terminal again and type:

$ npm install --save @ionic-native/facebook

After we finish installing it, we need to tell our app to use it, that means, we need to import it in our app.module.ts file

import { SplashScreen } from '@ionic-native/splash-screen';import { StatusBar } from '@ionic-native/status-bar'import { Facebook } from '@ionic-native/facebook'@NgModule({  ...,  providers: [ SplashScreen, StatusBar, Facebook ]})export class AppModule {}

Add your Platforms to Facebook

Once everything is set up in our development environment, we need to let Facebook know which platforms we’ll be using (if it’s just web, iOS, or Android).

In our case, we want to add two platforms, iOS and Android.

To add the platforms, go ahead and inside your Facebook dashboard click on settings, then, right below the app’s information you’ll see a button that says Add Platform, click it.

facebook add platform button

Once you click the button, you’ll see several options for the platforms you’re creating, let’s start with iOS, you’ll see a form asking you for some information, right now we just need the Bundle ID.

Facebook console add ios app

If you don’t know where to get the Bundle ID, it’s the same as the package name when you create an Ionic app, it’s inside your config.xml file:

<widget id="co.ionic.facebook435" version="0.0.1" xmlns="https://www.w3.org/ns/widgets" xmlns:cdv="https://cordova.apache.org/ns/1.0">

Please, I beg you, change co.ionic.facebook435 (or what you got there) for something that’s more “on brand” with your app or your business.

NOTE: Not kidding, go to Google Play and do a search for “ionicframework” you’ll see a couple of hundred apps that didn’t change the default package name ????

Once you add the Bundle ID, just follow the process to create the app and then do the same for Android, the difference is that instead of Bundle ID, Android calls it “Google Play Package Name.”

facebook platform android

Step #2: Enable Facebook Sign-In in Firebase.

Now that everything is set up on Facebook’s side, we need to go into our Firebase console and enable Facebook authentication for our app.

To enable Facebook, you’ll need to go to your Firebase Console and locate the app you’re using.

Once you’re inside the app’s dashboard, you’re going to go into Authentication > Sign-In Method > Facebook and are going to click the Enable toggle.

firebase auth enable facebook

Once you do, it’s going to ask you for some information, specifically your Facebook app ID and secret key, you’ll find both of those inside your Facebook console, under your app’s settings.

Step #3: Authenticate Users.

It is entirely up to you in which step of your app’s process you want to authenticate your users, so I’m going to give you the code so you can just copy it into whichever Page you’re using.

The first thing we need to do is to get the authorization from Facebook, to do that, we need to import Facebook plugin from Ionic Native and ask our user to log in.

import { Facebook } from '@ionic-native/facebook'constructor(public facebook: Facebook){}facebookLogin(): Promise<any> {  return this.facebook.login(['email']);}

That function right there takes care of opening the Facebook native widget and ask our user to authorize our application to use their data for login purposes.

Now we need to handle the response. The function response will provide us with a Facebook access token we can then pass to Firebase.

import firebase from 'firebase';import { Facebook } from '@ionic-native/facebook'constructor(public facebook: Facebook){}facebookLogin(): Promise<any> {  return this.facebook.login(['email'])    .then( response => {      const facebookCredential = firebase.auth.FacebookAuthProvider        .credential(response.authResponse.accessToken);      firebase.auth().signInWithCredential(facebookCredential)        .then( success => {           console.log("Firebase success: " + JSON.stringify(success));         });    }).catch((error) => { console.log(error) });}

Let’s break down the code above.

const facebookCredential = firebase.auth.FacebookAuthProvider  .credential(response.authResponse.accessToken);

First, we’re using the line above to create a credential object we can pass to Firebase, then we need to pass that credential object to Firebase:

facebookLogin(): Promise<any> {  return this.facebook.login(['email'])    .then( response => {      const facebookCredential = firebase.auth.FacebookAuthProvider        .credential(response.authResponse.accessToken);      firebase.auth().signInWithCredential(facebookCredential)        .then( success => {           console.log("Firebase success: " + JSON.stringify(success));         });    }).catch((error) => { console.log(error) });}

This bit of code firebase.auth().signInWithCredential(facebookCredential) makes sure your user creates a new account in your Firebase app and then authenticates the user into the Ionic app, storing some authentication information (like tokens, email, provider info, etc.) in local storage.

Next Steps

By now you have a fully working sign-in process with Facebook using Firebase, I know it’s a lot of configuration, but it’s because we want our users to have an amazing experience using our apps.

Now I want you to download a Starter Template I built it has both Facebook and Google Sign-In working out of the box, all you need to do is add your credentials from Facebook and Google ???? (If the link doesn’t show the price as $0 just use the discount code IonicBlog to manually set it as $0)


GET THE TEMPLATE

Read more

EasyArticles Community Preview

​After months of toiling and multitasking along with EasySocial 2.1, the team managed to put together our very first version of EasyArticles. Since the initial introduction of EasyArticles, we have been receiving positive feedback and inquiries, which were very encouraging for the team and we greatly appreciate it.

The idea behind EasyArticles is to simplify your day to day operations when dealing with articles on Joomla. Hit the brakes to read more about the highlights & functionalities of EasyArticles, the next generation article management for Joomla.


Read more

YOOtheme Pro adds a huge style library

This month we are mixing things up a bit. Instead of a new theme release we are thrilled to present to you another milestone in the development of YOOtheme Pro: The Style library! It offers a huge range of color variations for existing Pro styles and helps you to easily change the appearance of your whole website. The library has access to all Pro styles that have been released so far and new color variations will be added with every theme release. Take also a look at our YOOtheme Pro 1.8 to learn more about all the new features.


You can search and filter all of these to give you the best fit for your page. With each theme you are able to choose between six lovingly created styles. This means that you have the power of 45+ color variations. Let's say you already have a vague idea of what your web project should look like but need some guidance. The easy-to-use library helps you pick the right look. Just navigate to the Style section in the website builder and click on the select field. The Style library opens and you can filter the available styles by background color, primary color or type.

Fuse Styles

Fuse Default
Fuse Dark Brown
Fuse Dark Yellow
Fuse White Bordeaux
Fuse Light Green
Fuse White Red

Horizon Styles

Horizon Default
Horizon Black Orange
Horizon Dark Turquoise
Horizon White Blue
Horizon White Dove
Horizon White Green

Max Styles

Max Default
Max Black Black
Max White Purple
Max White Red
Max White Salmon
Max White Turquoise

Joline Styles

Joline Default
Joline Black Pink
Joline Light Green
Joline Light Pink
Joline White Green
Joline White Salmon

Fjord Styles

Fjord Default
Fjord Black Orange
Fjord Blue White
Fjord Dark Green
Fjord Light Blue
Fjord White Green

Sonic Styles

Sonic Default
Sonic Dark Turquoise
Sonic White Blue
Sonic White Pink
Sonic White Purple
Sonic White Turquoise

Copper Hill Styles

Copper Hill Default
Copper Hill Black Beige
Copper Hill Light Beige
Copper Hill Light Black
Copper Hill White Turquoise
Copper Hill White Red

Vibe Styles

Vibe Default
Vibe Blue Blue
Vibe Dark Red
Vibe Dark Turquoise
Vibe Dark Yellow
Vibe Dark Green

Juno Styles

Juno Default
Juno Black Blue
Juno White Blue
Juno White Dove
Juno White Green
Juno White Red

The Style library is part of the latest YOOtheme Pro release. We also reworked all element settings and added a new link picker. Learn more about it in our YOOtheme Pro 1.8 blog post. Have fun exploring the new styles and let us know what you think in the comments below.

Read more

YOOtheme Pro 1.8 released

A couple of days ago we released what is one of the major updates to YOOtheme Pro since it was first introduced last year: The Style library! With its huge range of color variations it is a powerful feature for customizing your web projects. But of course that is not all you can expect this month. The YOOtheme Pro 1.8 release also holds another big improvement. We reworked the whole element settings user interface inside the Page Builder and enhanced many features.


Style Library

The new Style library of YOOtheme Pro allows you to quickly change the appearance of your entire website. It has access to all Pro styles that have been released so far. Just navigate to the Style section of the Pro administration and hit the Style select field. Thanks to the intuitive interface you can browse around and easily find exactly what you need. Filter the available styles by background, primary color, type and theme to find the best fit for your website. You can switch styles at any time, the content itself will be preserved and only the look changes. If necessary, you can customize colors, fonts, margins and all other style related properties of your website in the Style section afterwards. New color variations will be added with every theme release. Also take a look at our 45 New Styles blog post where you can get a quick overview of all new styles.

YOOtheme Pro 1.8 Style Library

Reworked element options

This update brings the usability of YOOtheme Pro to the next level! We reworked the whole element settings UI inside the Page Builder. The new administration interface will give you a better overview when editing the settings of any element.

Tabs

We updated all tabs and their related settings for Page Builder elements. From now on, every element has the same three tabs: Content, Settings and Advanced. The first tab provides all content related options like title, meta or text. Under the Settings tab most of the element’s settings are listed. The Advanced tab allows you to add a name, ID or class to the element and to enter your own CSS.

YOOtheme Pro 1.8 Element Tabs

Group options

The Settings tabs benefits the most from the new UI layout. It is organized in group options labeled by headlines and subdivided into two columns with a label on the left and an option field on the right hand site. This helps to keep a good overview of the complex settings structure.

YOOtheme Pro 1.8 Element Group Options

Disabled options

Settings will no longer disappear when they are not available. Instead, they are only disabled, so that you always see what’s possible for this element.

YOOtheme Pro 1.8 Element Disabled Options

Link picker

The link picker is a minor feature that will be a major timesaver for you. YOOtheme Pro now offers a native link picker, like you might be familiar with from WordPress and Joomla, to ensure a smoother workflow.

YOOtheme Pro 1.8 Link Picker

Wrapping up

These were the three main additions in YOOtheme Pro 1.8. A lot more has happened, for example the modal displaying the Layout and Style libraries will in future remember your last browsed folder upon opening. Furthermore, we included range pickers in the Map element. This makes it a lot easier to determine the right value for settings like lightness, saturation or gamma.

As always, we are happy to hear your ideas on this release. So, tell us what you think in the comments below.

jQuery(function($) { var gifs = $('img.gif'), scrolled=false; $(document).on('scroll', function() { scrolled = true; }); setInterval(function check() { if (!scrolled) return; gifs.each(function() { if (isInview(this)) { if (!this.playing) play(this); } else { stop(this); } }); scrolled = false; }, 25); function play(element) { element.playing = element.src = element.src; } function stop(element) { element.playing = false; } function isInview(element, options) { var $element = $(element), $win = $(window); if (!$element.is(':visible')) { return false; } options = $.extend({topoffset:0, leftoffset:0}, options); var wl = $win.scrollLeft(), wt = $win.scrollTop(), offset = $element.offset(), left = offset.left, top = offset.top; return (top + $element.height() >= wt && top - options.topoffset <= wt + $win.height() && left + $element.width() >= wl && left - options.leftoffset <= wl + $win.width()); } });</script>

Read more

YOOtheme Pro 1.7 released

This YOOtheme Pro release is a really huge one — like two in one! The much anticipated Builder Module for Joomla and the Builder Widget for WordPress have arrived! But that‘s not all! Another giant feature is the new Parallax effect! From now on you can animate nearly every element in your layout, like text, images, section backgrounds as well as grids and galleries. More innovations of the latest YOOtheme Pro version are the Newsletter and the Popover element. And there is still more. Time to get excited!


The Builder module and widget

YOOtheme Pro now comes with an additional Joomla module and a WordPress widget which gives you the full power of the layout builder. By publishing this module/widget on the top or bottom positions, you can create sophisticated layouts with unlimited sections above and below the main content.

The Builder Module and Widget

Collapsing layouts

In YOOtheme Pro 1.7, the Module element (Joomla) or Widget element (WordPress) lets the layout column collapse, if the selected module is not published on a specific page or if the user does not have the permission to see it. This prevents empty areas on your page when a module is not visible on the current page and makes builder layouts really flexible when combined with Joomla modules and WordPress widgets.Collapsing layouts

Position and Area elements

There is also a new Position element (Joomla) and a new Area element (WordPress) which allows you to place a complete Joomla module position (or a WordPress widget area respectively) inside your builder layout. If no module is published on a position, the layout column will collapse. This is very powerful — you can now create the module position layout of the theme yourself.

Positition and Area Elements

All these new additions solve a number of issues. For example, you can have multiple sections with complex layouts above and below the main content, the sidebar position can now show up within a builder page, you can have different footers on different pages, multi-lingual footers are now possible and much more.

The deeper integration of Joomla modules and WordPress widgets is a start to make YOOtheme Pro well suited for complex websites, like news portals and more. This is just the beginning and we are really excited about what's next to come. We also reworked the module documentation with info graphics and video tutorials to get you started.

Parallax for elements

The popular Parallax feature is part of the latest UIkit release and can be seen in action in our June theme Juno. There are no limits to your creativity in combination with this effect. You can animate your content by entering the user-friendly interface with range pickers. Give your website a subtle 3D effect and highlight certain elements. Just play around and let headlines, text and images fly with the Parallax effect.

Parallax for elements

Background image parallax for sections

The new YOOtheme Pro release also includes the Parallax feature for background images of sections in the page builder. It makes it possible to animate the background horizontally or vertically and even works when the background image is set to auto, cover or contain.

Background Image Parallax for sections

Parallax mode for grid and gallery element

Additionally, the Parallax effect is available for the Grid and Gallery elements. This is an eye-catcher for every website and creates a smooth effect while scrolling.

Parallax mode for grid and gallery element

Newsletter element

Newsletters make it easy to keep your customers up to date on new products, projects or sales discounts. Our Newsletter element allows you to collect news subscribers for your Mailchimp or Campaign Monitor account. You have the choice between three layouts and can show or hide the name fields.

Newsletter element

Popover element

Use popovers on visual elements such as the product presentations in our June theme. You can position the marker wherever you want and the dropdown with detailed information will appear by hovering or clicking on the marker. You can place it to the top, bottom, left and right.

Popover element

Width and height options for the logo

Thanks to the new advanced logo options you are able to set height and width for logos in YOOtheme Pro. The image will be resized and cropped automatically. Additional images for high resolution displays will be generated and set via the srcset attribute.

More additions

These are the main features of YOOtheme Pro 1.7, but there is even more. For example, you can now render the headline element as a div, which is useful to remove semantic meaning, and you can also add a link to the headline. Furthermore, there is a new link style called text available across all elements in the builder. And last but not least: From now on the Media Picker will remember your last browsed folder upon opening to improve your workflow.

We are really excited about YOOtheme Pro 1.7 and hope you are too! Stay tuned and give us your feedback in the comments below.

jQuery(function($) { var gifs = $('img.gif'), scrolled=false; $(document).on('scroll', function() { scrolled = true; }); setInterval(function check() { if (!scrolled) return; gifs.each(function() { if (isInview(this)) { if (!this.playing) play(this); } else { stop(this); } }); scrolled = false; }, 25); function play(element) { element.playing = element.src = element.src; } function stop(element) { element.playing = false; } function isInview(element, options) { var $element = $(element), $win = $(window); if (!$element.is(':visible')) { return false; } options = $.extend({topoffset:0, leftoffset:0}, options); var wl = $win.scrollLeft(), wt = $win.scrollTop(), offset = $element.offset(), left = offset.left, top = offset.top; return (top + $element.height() >= wt && top - options.topoffset <= wt + $win.height() && left + $element.width() >= wl && left - options.leftoffset <= wl + $win.width()); } });</script>

Read more

© 2019 Extly, CB - All rights reserved.