2013-03-19 5 views

Antwort

14

Authentifizierung ist ein großes Thema und Sie haben nicht viel spezifiziert, was Sie erreichen möchten, aber lassen Sie mich Sie eine Facebook-Authentifizierung für Sie Dart-Anwendung erstellen, weil ich denke, es ist die einfachste zu beginnen. Warum? Weil wir nicht über jede mögliche Datenbank sprechen müssen, die Sie vielleicht verwenden, oder wie Sie Ihre Datenbankstruktur, Modelle usw. einrichten und wie Sie mit der Sicherheit umgehen (Token generieren usw.).

Mit diesem Wissen können Sie dann andere Service-Authentifizierungen (Google+, Twitter) und eventuell Ihre eigenen implementieren, wenn Sie dies wünschen.

Registrieren Sie zuerst eine Anwendung unter Facebook apps page, indem Sie auf klicken. Neue App erstellen. Sie sollten diese Seite erhalten:

enter image description here

(Seien Sie sicher, dass beide App-Domain und Website-URL füllen)

dann irgendwo eine Konfigurationsdatei angeben (zB config.dart), die Sie überall importieren benötigen Sie:

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

Dann müssen Sie irgendwo einen Link erstellen. Wenn Sie Web-Benutzeroberfläche verwenden, könnte Ihr Dart Skript zunächst die Config importieren und eine Login-URL erstellen:

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'; 
} 

Jetzt auf Ihrem HTML Sie auf den Link angeben:

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

An dieser Stelle vielleicht lesen Die Facebook-Entwicklerhandbücher: https://developers.facebook.com/docs/reference/dialogs/oauth/

Facebook Login-Dialog wird den Benutzer auf die URL werfen wir in Config (/login/facebook) angegeben, dann muss unsere Anwendung darauf reagieren. Ich lasse Sie behandeln die Routing, wie immer Sie wollen, aber im Wesentlichen der Server, wenn er eine /login/facebook Anforderung empfängt, kodiert zunächst einige Eigenschaften:

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']); 

Sie müssen import 'dart:uri' as uri zuerst.

Danach wird ein Stück Code, die API-Anfragen an Facebook tut:

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. 
    }); 
}); 

Ich bin mit dem HTTP Paket hier und das QueryString Paket.

Nach den API-Anforderungen haben Sie die Benutzerinformationen zur Hand. Jetzt können Sie beispielsweise den authentifizierten Benutzer in einer Sitzung speichern. Sie können z.B. HttpRequest.session für diesen Zweck. Um sich abzumelden, entfernen Sie einfach die Daten aus der Sitzung.

Dies ist ungefähr die Prozedur, die Sie tun müssen, um die Facebook-Authentifizierung zu aktivieren. Sie können ähnliche Workflows für viele andere Websites erwarten. Möglicherweise benötigen Sie auch das OAuth2-Paket.

Um es zusammenzufassen:

  • Facebook Entwickler Profil erstellen und eine App mit den richtigen URLs.
  • Schreiben Sie die App-IDs und solche in einigen Konfig.
  • Erstellen Sie den richtigen Login-Link.
  • Geben Sie den Server-Seitencode an die Stelle ein, an der der Facebook-Login die Benutzer auslöst.
  • Schreiben Sie einige API-Aufrufe auf dem Server, um den authentifizierten Benutzer abzurufen.

Viel Spaß!

+5

Kai, könnten Sie eine Probe machen und auf github mit einer readme.md veröffentlichen? Dies wäre ein großartiges Beispiel, um es zu verdrängen. –

2

Ich schrieb eine 3 part Tutorial about the login/authorization with Dart mit Rikulo Sicherheitsfunktion.

Die Anmeldung mit der Sicherheitsklasse ist unkompliziert. Wie auch immer, das Standard-Beispiel benötigt einige Änderungen, um Ihre spezifischen Anforderungen zu erfüllen, insbesondere die Routing/Redirect-nach-Aktionen.

Außerdem enthält das Tutorial eine Dummy-Benutzeranmeldung, die natürlich keine Option für die Produktion ist. Daher müssen Sie die Standardfunktion für die Anmeldung von Rikulo @Override von Ihrem eigenen Authenticator

class _Authenticator extends Authenticator { 
    @override 
    Future login(HttpConnect connect, String username, String password) {...}; 
} 

Dann mit Ihrem Server voraus und sprechen gehen zu schaffen und das Rück entweder ein Benutzerobjekt auf der erfolgreichen Anmeldung oder Fehler bei einem Fehler!

Hoffe das hilft dir!

+0

Das letzte Commit in Rikulo Github wurde am 23. Februar 2014 gemacht. Ist das Projekt tot? – expert