WIE MAN: Melden Sie sich bei Twitter mit Node.js und Express.js an

In meinen vorherigen Beiträgen habe ich einige Themen zum NodeJS-Webanwendungsframework ExpressJS erläutert. Bitte lesen Sie die Themen: REST mit ExpressJS, Arbeiten mit MongooseJS und CRUD-Operationen mit MongoDB und NodeJS.

Dieser Beitrag verwendet verschiedene Kombinationen von Frameworks und zeigt Ihnen, wie Sie sich mit den Frameworks Node.js und Express.js bei Twitter anmelden. Der Zugriff auf Websites sozialer Netzwerke wie Twitter und Facebook über Framework-APIs wird zu einer der wichtigen Programmieraktivitäten zur Implementierung der Benutzeraktionen auf den Websites. Ich habe das Template-Framework ausprobiert LenkerJS Dies ähnelt in diesem Beispiel einem anderen beliebten Template-Framework, Moustache.

In diesem Beitrag zeige ich Ihnen einige interessante Dinge:

  • Integrieren Lenkervorlagen in Express.js
  • Implementieren der Anmeldung mit Twitter
  • Abrufen der letzten 10 Tweets des Benutzers nach der Anmeldung bei Twitter
  • Ich verwende für dieses Tutorial die folgenden neuen Node-Pakete:

  • express-lenker: Knotenpaket zur Integration der Lenker-Vorlagen-Engine in Express.js
  • Anfrage: Dieses Paket vereinfacht das Erstellen einer HTTP-Anfrage von der Anwendung. Node wird mit einem Standardpaket zum Senden von HTTP-Anfragen geliefert, aber ich verwende dieses, da es Unterstützung für das Signieren von OAuth-Anfragen bietet. Diese OAuth-Anfragesignierung ist bei der Authentifizierung bei Twitter erforderlich, wie wir weiter unten sehen werden.
  • querystring: Dieses Paket hilft beim Parsen der Abfragezeichenfolgen in JSON-Objekte und beim Erstellen einer Abfragezeichenfolge aus den JSON-Objekten.
  • Wenn Sie daran interessiert sind, das Node.j-Framework kennenzulernen, sollten Sie als weitere Referenz den Kauf der folgenden Bücher in Betracht ziehen:

    SteeringJS- und ExpressJS-Integration

    SteeringJS ist ein Templating-Framework die zum Generieren dynamischer Ansichten verwendet wird.

    Der folgende Code richtet die Lenker mit ExpressJS ein:

    //File Name: handlebars_demo.js
    var express = require('express');
    
    //NPM Module to integrate Handlerbars UI template engine with Express
    var exphbs  = require('express-handlebars');
    
    var app = express();
    
    //Declaring Express to use Handlerbars template engine with main.handlebars as
    //the default layout
    app.engine('handlebars', exphbs({defaultLayout: 'main'}));
    app.set('view engine', 'handlebars');
    
    app.get('/', function (req, res) {
      //Use hello.handlebars template with the JSON data passed as another argument
      res.render("hello", {name : "Sanaulla"});
    });
    
    app.listen(3000, function(){
      console.log('Server up: http://localhost:3000');
    });
    

    Wir müssen eine erstellen LenkerJS Vorlage, die unten gezeigt wird:

    //hello.handlebars
    <h1>Hello Mr. {{name}} from Handlebars </h1>
    

    Wir erstellen auch eine Layoutdatei nach Namen main.handlebars Wie nachfolgend dargestellt:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Example App</title>
    </head>
    <body>
        {{{body}}}
    </body>
    </html>
    

    Das obige Layout umschließt alle Vorlagenausgaben, was bedeutet, dass in diesem Fall die Ausgabe von hello.handlebars die ersetzt {{{body}}}

    Die Anordnung der Dateien ist unten dargestellt

    node_samples
     |--handlebars_demo.js
     |--views
       |--hello.handlebars
       |--layouts
         |--main.handlebars
    

    Lassen Sie uns nun das obige Javascript mit dem folgenden Befehl ausführen:

    node handlebars_demo.js
    

    Öffnen Sie nun die folgende URL in Ihrem Browser: http://localhost:3000/.

    Im Browser wird „Hallo Herr Sanaulla von Lenkern“ angezeigt.

    Damit haben wir die Einführung versucht LenkerJS Lassen Sie uns weitermachen und sehen wie wir uns mit Twitter integrieren können.

    Implementieren der Anmeldung mit Twitter mithilfe von ExpressJS

    Die Dokumentation Hier Bietet die verschiedenen Schritte zur Authentifizierung bei Twitter. Obwohl die Dokumentation klar genug ist, ist es schwierig, anhand der offiziellen Dokumentation eine funktionierende Lösung zu erstellen.

    Die Authentifizierung bei Twitter umfasst drei Schritte:

  • Schritt 1: Erhalten eines Anforderungstokens
  • Schritt 2: Authentifizieren des Benutzers durch Weiterleitung zu Twitter
  • Schritt 3: Konvertieren des Anforderungstokens in ein Zugriffstoken
  • Für den Rest des Tutorials ist der folgende Code üblich:

    //File Name: social_signin.js
    var express = require('express');
    
    //NPM Module to integrate Handlerbars UI template engine with Express
    var exphbs  = require('express-handlebars');
    
    //NPM Module to make HTTP Requests
    var request = require("request");
    
    //NPM Module To parse the Query String and to build a Query String
    var qs = require("querystring");
    
    var app = express();
    
    //Declaring Express to use Handlerbars template engine with main.handlebars as
    //the default layout
    app.engine('handlebars', exphbs({defaultLayout: 'main'}));
    app.set('view engine', 'handlebars');
    

    Bevor Sie beginnen, müssen Sie eine erstellen Anwendung auf Twitter. Nach dem Erstellen der App haben Sie Zugriff auf den Consumer Key und das Consumer Secret, die für die Authentifizierung bei Twitter erforderlich sind.

    Schritt 1: Abrufen des Anforderungstokens

    In diesem Tutorial erhalte ich das Anforderungstoken beim Laden der Seite und verwende dieses Anforderungstoken, um die URL für die Anmeldung mit Twitter zu erstellen.

    Der folgende Code ruft Twitter auf, um ein Anforderungstoken zu erhalten.

    //URL To obtain Request Token from Twitter
    var requestTokenUrl = "https://api.twitter.com/oauth/request_token";
    
    //To be obtained from the app created on Twitter
    var CONSUMER_KEY = "kuDm1KBKBJH3PpusFxcAA";
    var CONSUMER_SECRET = "5wOFqJe4R0Kf6SV9tXuqrzkpD7t7d8cvwZhPC7TW8";
    
    //Oauth Object to be used to obtain Request token from Twitter
    var oauth = {
      callback : "http://localhost:3000/signin-with-twitter",
      consumer_key  : CONSUMER_KEY,
      consumer_secret : CONSUMER_SECRET
    }
    var oauthToken = "";
    var oauthTokenSecret = "";
    app.get('/', function (req, res) {
      //Step-1 Obtaining a request token
      request.post({url : requestTokenUrl, oauth : oauth}, function (e, r, body){
    
        //Parsing the Query String containing the oauth_token and oauth_secret.
        var reqData = qs.parse(body);
        oauthToken = reqData.oauth_token;
        oauthTokenSecret = reqData.oauth_token_secret;
    
        //Step-2 Redirecting the user by creating a link
        //and allowing the user to click the link
        var uri = 'https://api.twitter.com/oauth/authenticate'
        + '?' + qs.stringify({oauth_token: oauthToken})
        res.render('home', {url : uri});
      });
    
    });
    app.listen(3000, function(){
      console.log('Server up: http://localhost:3000');
    });
    

    Der Code für die Vorlage home.handlebars ist unten angegeben:

    <h1>SignIn With Twitter Sample</h1>
    
    <a href="{{url}}">Signin with Twitter</a>
    

    Eine weitere Vorlagendatei, main.handlebars, ist dieselbe wie oben bei der Einführung in „Lenker“.

    Die Verzeichnisstruktur ist wie folgt:

    |--social_signin.js
      |--views
        |--home.handlebars
        |--layouts
          |--main.handlebars
    

    Lassen Sie uns den obigen Code ausführen, indem wir ihn ausführen node social_signin.js. Dadurch wird der Server auf Port 3000 gestartet.

    Navigieren Sie zu http://localhost:3000/. Sie sollten die folgende Ausgabe sehen:

    Im obigen Screenshot leitet der Link „Mit Twitter anmelden“ den Benutzer zu Twitter weiter, um den Benutzer zu authentifizieren und die App zu autorisieren, Anfragen im Namen des Benutzers zu stellen. Das in diesem Schritt erhaltene Anforderungstoken wird zusammen mit diesem Link übergeben.

    Schritt 2: Authentifizieren des Benutzers durch Weiterleitung zu Twitter

    In diesem Schritt muss im Code nicht viel getan werden. Der im obigen Schritt generierte Link leitet den Benutzer zur Authentifizierung und Autorisierung zu Twitter weiter.

    Und der Rückruf, den wir zuvor gesendet haben, wird bei erfolgreicher Authentifizierung auf Twitter aufgerufen.

    Die folgenden Daten werden an unseren Rückruf gesendet: oauth_token und oauth_verifier.

    Schritt 3: Konvertieren des Anforderungstokens in ein Zugriffstoken

    Im Rückruf verwenden wir oauth_token und oauth_verifier, um das Zugriffstoken zu erhalten, indem wir einen mit Oauth signierten POST-Aufruf an die URL senden: https://api.twitter.com/oauth/access_token

    In der POST-Antwort erhalten wir nach der Überprüfung der Token und der Authentifizierung des Benutzers das oauth_token_secret, die Benutzer-ID und den Bildschirmnamen des authentifizierten Benutzers.

    Der folgende Code behandelt Schritt 3:

    //Callback to handle post authentication.
    app.get("/signin-with-twitter", function(req, res){
      var authReqData = req.query;
      oauth.token = authReqData.oauth_token;
      oauth.token_secret = oauthTokenSecret;
      oauth.verifier = authReqData.oauth_verifier;
    
      var accessTokenUrl = "https://api.twitter.com/oauth/access_token";
      //Step-3 Converting the request token to an access token
      request.post({url : accessTokenUrl , oauth : oauth}, function(e, r, body){
        var authenticatedData = qs.parse(body);
        console.log(authenticatedData);
      });
    });
    

    Damit haben wir uns erfolgreich bei Twitter authentifiziert. Sehen wir uns nun an, wie die letzten 10 Tweets des Benutzers abgerufen werden.

    Abrufen der letzten 10 Tweets des Benutzers nach der Anmeldung bei Twitter

    Wir verwenden oauth_token und oauth_token_secret zusammen mit Consumer_key und Consumer_secret, während wir die Twitter-API aufrufen. Der folgende Code ruft die Twitter-API mit den richtigen Authentifizierungsdaten auf.

    
    //Make a request to get User's 10 latest tweets
    var apiUrl = "https://api.twitter.com/1.1/statuses/user_timeline.json" + "?"
      + qs.stringify({screen_name: authenticatedData.screen_name, count: 10});
    
    var authenticationData = {
      consumer_key : CONSUMER_KEY,
      consumer_secret : CONSUMER_SECRET,
      token: authenticatedData.oauth_token,
      token_secret : authenticatedData.oauth_token_secret
    };
    
    request.get({url : apiUrl, oauth: authenticationData, json:true}, function(e, r, body){
    
      var tweets = [];
      for(i in body){
        var tweetObj = body[i];
        tweets.push({text: tweetObj.text});
      }
    
      var viewData = {
        username: authenticatedData.screen_name,
        tweets: tweets
      };
    
      res.render("my", viewData);
    
    });
    

    Zusammenfassung

    Die Verzeichnisstruktur für dieses Beispiel ist:

    |--social_signin.js
    |--views
      |--home.handlebars
      |--my.handlebars
      |--layouts
        |--main.handlebars
    

    Der vollständige Code für dieses Beispiel lautet:

    //FileName: social_signin.js
    var express = require('express');
    
    //NPM Module to integrate Handlerbars UI template engine with Express
    var exphbs  = require('express-handlebars');
    
    //NPM Module to make HTTP Requests
    var request = require("request");
    
    //NPM Module To parse the Query String and to build a Query String
    var qs = require("querystring");
    
    var app = express();
    
    //Declaring Express to use Handlerbars template engine with main.handlebars as
    //the default layout
    app.engine('handlebars', exphbs({defaultLayout: 'main'}));
    app.set('view engine', 'handlebars');
    
    //URL To obtain Request Token from Twitter
    var requestTokenUrl = "https://api.twitter.com/oauth/request_token";
    
    //To be obtained from the app created on Twitter
    var CONSUMER_KEY = "kuDm1KBKBJH3PpusFxcAA";
    var CONSUMER_SECRET = "5wOFqJe4R0Kf6SV9tXuqrzkpD7t7d8cvwZhPC7TW8";
    
    //Oauth Object to be used to obtain Request token from Twitter
    var oauth = {
      callback : "http://localhost:3000/signin-with-twitter",
      consumer_key  : CONSUMER_KEY,
      consumer_secret : CONSUMER_SECRET
    }
    var oauthToken = "";
    var oauthTokenSecret = "";
    app.get('/', function (req, res) {
      //Step-1 Obtaining a request token
      request.post({url : requestTokenUrl, oauth : oauth}, function (e, r, body){
    
        //Parsing the Query String containing the oauth_token and oauth_secret.
        var reqData = qs.parse(body);
        oauthToken = reqData.oauth_token;
        oauthTokenSecret = reqData.oauth_token_secret;
    
        //Step-2 Redirecting the user by creating a link
        //and allowing the user to click the link
        var uri = 'https://api.twitter.com/oauth/authenticate'
        + '?' + qs.stringify({oauth_token: oauthToken})
        res.render('home', {url : uri});
      });
    
    });
    
    //Callback to handle post authentication.
    app.get("/signin-with-twitter", function(req, res){
      var authReqData = req.query;
      oauth.token = authReqData.oauth_token;
      oauth.token_secret = oauthTokenSecret;
      oauth.verifier = authReqData.oauth_verifier;
    
      var accessTokenUrl = "https://api.twitter.com/oauth/access_token";
      //Step-3 Converting the request token to an access token
      request.post({url : accessTokenUrl , oauth : oauth}, function(e, r, body){
        var authenticatedData = qs.parse(body);
        console.log(authenticatedData);
    
        //Make a request to get User's 10 latest tweets
        var apiUrl = "https://api.twitter.com/1.1/statuses/user_timeline.json" + "?"
          + qs.stringify({screen_name: authenticatedData.screen_name, count: 10});
    
        var authenticationData = {
          consumer_key : CONSUMER_KEY,
          consumer_secret : CONSUMER_SECRET,
          token: authenticatedData.oauth_token,
          token_secret : authenticatedData.oauth_token_secret
        };
    
        request.get({url : apiUrl, oauth: authenticationData, json:true}, function(e, r, body){
    
          var tweets = [];
          for(i in body){
            var tweetObj = body[i];
            tweets.push({text: tweetObj.text});
          }
    
          var viewData = {
            username: authenticatedData.screen_name,
            tweets: tweets
          };
    
          res.render("my", viewData);
    
        });
    
      });
    });
    
    app.listen(3000, function(){
      console.log('Server up: http://localhost:3000');
    });
    
    <!-- FileName: main.handlebars-->
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Example App</title>
    </head>
    <body>
        {{{body}}}
    </body>
    </html>
    

    <!-- FileName: home.handlebars-->
    <h1>SignIn With Twitter Sample</h1>
    
    <a href="{{url}}">Signin with Twitter</a>
    

    <!-- FileName: my.handlebars-->
    <h1>Welcome {{username}} </h1>
    <h3>Your tweets</h3>
    <ul>
      {{#tweets}}
      <li>{{text}}</li>
      {{/tweets}}
    </ul>
    

    Wenn Sie daran interessiert sind, das Node.j-Framework kennenzulernen, sollten Sie als weitere Referenz den Kauf der folgenden Bücher in Betracht ziehen:

    Kommentar verfassen

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    Nach oben scrollen