by: modules

Satellizer streamlines the authentication process within AngularJS applications, offering an easy-to-implement, token-based authentication system. It comes pre-configured for major providers like Google, Facebook, LinkedIn, and Twitter, alongside traditional email and password login methods. Beyond these, Satellizer is highly customizable, allowing the integration of any OAuth 1.0 or OAuth 2.0 provider through specific configuration settings.

Implementing AngularJS token authentication simplified with Satellizer can greatly enhance security and user authentication processes, which can seamlessly integrate with features like the Angular Treeview component.

Satellizer Setup: Easy Web App Authentication

Acquiring Satellizer for your web application is straightforward. Simply execute one of the provided command lines to install. Should you prefer, you can also manually download the latest version or link to the Satellizer CDN for even easier access.

Getting Started with Satellizer

Integrating Satellizer into your application is a straightforward process that can significantly enhance your application’s authentication mechanism. 

Initialize in Your App Module

Embed Satellizer into your main AngularJS module with minimal configuration.

javascript

Copy code

angular.module('MyApp', ['satellizer'])

  .config(function($authProvider) {

    // Configuration code here

  });

Set Up the Controller

Incorporate authentication functionality in your controllers.

angular.module('MyApp')

  .controller('LoginCtrl', function($scope, $auth) {

    // Controller code here

  });

Design Your Template

Create HTML buttons that link to different authentication providers.

<button ng-click="authenticate('facebook')">Sign in with Facebook</button>

<button ng-click="authenticate('google')">Sign in with Google</button>

<!-- Add more buttons for other providers as needed -->

:exclamation: Important: For those who need to implement server-side logic, please consult the 'examples' directory for guidance.

By following these steps, integrating diverse social and email sign-ins into your AngularJS application is efficient and customizable, enhancing user experience with various login options.

Satellizer’s Configuration: Default Settings Overview

A person coding on a laptop with a cup of coffee beside them

Presented here is a list of default settings for configuring the Satellizer.

Compatibility Across Browsers

:exclamation: Attention: Should there be any browser compatibility issues with Satellizer, please report them by opening an issue. This will assist in maintaining the most up-to-date record of the minimum browser requirements.

Understanding the Authentication Mechanism

Satellizer operates on a token-based authentication scheme, utilizing JSON Web Tokens (JWT) as an alternative to traditional cookies. The links provided offer a comprehensive breakdown of the authentication sequence for various methods:

  • OAuth 2.0 Authentication Flow;
  • OAuth 1.0 Authentication Procedure;
  • Email and Password Verification;
  • Account Registration Mechanism;
  • Session Termination Protocol.

:bulb: Additional Information: For an in-depth understanding of JSON Web Tokens (JWT), please refer to JWT.io.

Acquiring OAuth Credentials for Web Apps

To integrate OAuth-based authentication in your web applications, you will need to obtain OAuth keys from various providers. Here’s how you can get these for some of the major services:

Google OAuth Keys:

  • Head to the Google Cloud Console;
  • Click on the ‘CREATE PROJECT’ button;
  • Provide a Project Name and initiate the project creation;
  • Navigate to ‘APIs & Services > Credentials’ from the sidebar;
  • Press ‘CREATE CREDENTIALS’ and choose ‘OAuth client ID’;
  • Set the Application Type to ‘Web application’;
  • Add http://localhost:3000 to the Authorized JavaScript origins and redirect URIs.

:exclamation: Remember: Enable the necessary APIs like Contacts API and Google+ API from the ‘APIs & Services > Dashboard’.

Facebook OAuth Keys:

  • Visit the Facebook for Developers site;
  • Navigate to ‘My Apps’ and select ‘Create App’;
  • Input the Display Name and category, then proceed to create the app;
  • In ‘Settings’, add a new platform by selecting ‘Website’;
  • Set the Site URL to http://localhost:3000.

Twitter OAuth Keys:

  • Log in at the Twitter Developer portal;
  • From the dropdown menu, access ‘Projects & Apps’ and choose ‘Overview’;
  • Select ‘Create App’;
  • Fill in the application details and use http://127.0.0.1:3000 for the Callback URL;
  • In the ‘Settings’ tab, choose ‘Edit’ for App permissions and enable ‘Read and Write’;
  • Ensure ‘Enable Sign in with Twitter’ is checked;
  • Save your changes to update the application settings.

For each service, follow the respective instructions carefully, and ensure your application details are accurate to successfully generate the OAuth keys necessary for user authentication.

Satellizer API Methods Overview

Illustration of a person programming with HTML and CSS graphics

Satellizer provides a streamlined set of API methods to handle authentication within your AngularJS application. These methods include:

  • $auth.login(user): Sign in with an email and password, where user is an object containing the user’s credentials;
  • $auth.signup(user): Register a new account using an email and password, where user is an object containing the signup information;
  • $auth.authenticate(name, [userData]): Initiate the OAuth authentication process using a popup window. Here, name refers to a predefined or custom OAuth provider, and userData is an optional parameter for additional information;
  • $auth.logout(): Log out the current user by removing their token from local storage;
  • $auth.isAuthenticated(): Check if the user is currently authenticated by returning a boolean value.

In your controller, you can check authentication status as follows:

$scope.isAuthenticated = function() {

  return $auth.isAuthenticated();

};

In your HTML template, you can conditionally display login and logout options based on authentication status:

<ul class="nav navbar-nav pull-right" ng-if="!isAuthenticated()">

  <li><a href="/#/login">Login</a></li>

  <li><a href="/#/signup">Sign up</a></li>

</ul>

<ul class="nav navbar-nav pull-right" ng-if="isAuthenticated()">

  <li><a href="/#/logout">Logout</a></li>

</ul>
  • $auth.link(provider, [userData]): Link a user’s account with an OAuth provider, similar to $auth.authenticate(), without redirecting after successful login. provider is the OAuth provider to link, and userData is optional additional data to send to the server.

:bulb: Note: The server handles the logic for linking accounts.

  • $auth.unlink(provider): Disconnect an OAuth provider from the user’s account with a GET request to /auth/unlink/ endpoint.

Planned Implementations

  • C# (ASP.NET Core) support is pending;
  • Elixir (Phoenix framework) support is in the works;
  • Go (using the Beego framework) support to be added;
  • [Completed] Java (Dropwizard framework) support has been implemented;
  • [Completed] Node.js (with Express framework) support is available;
  • [Completed] PHP (using Laravel framework) is integrated;
  • [Completed] Python (Flask framework) support has been established;
  • Ruby (Sinatra and/or Rails frameworks) support is upcoming;
  • Scala (with the Play! framework) support to be developed.

Conclusion

Satellizer is a versatile, token-based authentication module that offers a robust and secure authentication solution for AngularJS applications. It supports various sign-in features, from popular social media platforms to traditional email and password methods, and can be extended to accommodate any OAuth 1.0 or OAuth 2.0 provider. Its installation and usage are simple, making it a convenient choice for developers looking to incorporate reliable authentication into their application. As technology continues to evolve, the team behind Satellizer is dedicated to expanding its range of server-side examples and maintain browser compatibility. Therefore, Satellizer stands as a valuable tool in the developer’s toolkit for building secure and efficient web applications.