Dart login/logout example

Authentication is a vast topic and you didn't specify much what you want to achieve, but let me guide you to build a Facebook authentication for you Dart application, because I think it's the simplest one to begin with. Why? Because we don't need to talk about every possible database you might be using, or how you setup your database structure, models, etc. and how you deal with security (generating tokens, etc.).

With this knowledge you can then implement other service authentications (Google+, Twitter) and eventually your own if you so wish.

So, first, register an application on Facebook apps page by pressing Create New App. You should get this page:

(Be sure to fill both App domain and site URL)

Then specify some configuration file somewhere (e.g. config.dart) that you will import everywhere you need:

var config = {  'authentication': {    'facebook': {      'appId': '...',      'appSecret': '...',      'url': 'http://test.com/login/facebook'    }  },};

Then you need to create a link somewhere. If you are using Web UI, your Dart script could first import the config and create a login URL:

import 'config.dart';main() {  var fbConfig = config['authentication']['facebook'];  var appId = fbConfig['appId'];  var url = fbConfig['url'];  var loginLinkUrl = 'https://www.facebook.com/dialog/oauth/?client_id=$appId&redirect_uri=$url&state=TEST_TOKEN&scope=email';}

Now on your HTML you specify the link:

<a href="{{ loginLinkUrl }}">Login with Facebook</a>

At this point, perhaps read the Facebook developer guides: https://developers.facebook.com/docs/reference/dialogs/oauth/

Facebook login dialog will throw the user to the URL we specified in config (/login/facebook), then our application needs respond to it. I let you handle the routing how ever you want, but essentially the server when it receives a /login/facebook request, it first encodes some properties:

var code = uri.encodeUriComponent(request.queryParameters['code']);var appId = uri.encodeUriComponent(config['authentication']['facebook']['appId']);var appSecret = uri.encodeUriComponent(config['authentication']['facebook']['appSecret']);var url = uri.encodeUriComponent(config['authentication']['facebook']['url']);

You need to import 'dart:uri' as uri first.

After this, a bit of code that does API requests to Facebook:

http.read('https://graph.facebook.com/oauth/access_token?client_id=$appId&redirect_uri=$url&client_secret=$appSecret&code=$code').then((contents) {  // "contents" looks like: access_token=USER_ACCESS_TOKEN&expires=NUMBER_OF_SECONDS_UNTIL_TOKEN_EXPIRES  var parameters = QueryString.parse('?$contents');  var accessToken = parameters['access_token'];  // Try to gather user info.  http.read('https://graph.facebook.com/me?access_token=$accessToken').then((contents) {    var user = JSON.parse(contents);    print(user); // Logged in as this user.  });});

I'm using the HTTP package here and the QueryString package.

After the API requests, you have the user information at hand. Now you can do things like store the authenticated user in a session. You can use e.g. HttpRequest.session for this purpose. To logout, just remove the data from the session.

This is roughly the procedure you need to do to get up Facebook authentication to work. You can expect similar workflows for many other websites. You might also need/use the OAuth2 package.

So to summarize:

• Create Facebook developer profile and an app with the proper URLs.
• Write down the app id's and such in some config.
• Create the proper login link.
• Write server side code to where the Facebook login throws the users.
• Write some API calls in the server to retrieve the authenticated user.

Have fun!