Using Cookies to save Access Token

What Will I Learn?

• How to use steemconnect v2
• How to using Access Token between pages

Requirements

• Basic knowledge of Steem Connect V2
• Basic knowledge of Cookies
• Basic knowledge of Angular

Difficulty

• Intermediate

Tutorial Contents

The ecosystem on Steem is getting better and better. The Steem Connect is playing a very important role. It provides a secure, centralized authorization interface for decentralized platforms, making software development simple and efficient. This tutorial is used to introduce the Steem Connect V2-based application development process.

After we sign in using Steem Connect V2, we will get the Access Token. Then the Access Token become the key of posting, voting, etc. But if we don't save the Access Token, the login status become logout again when we go to another page. Just like the demo SC2 demo by skenan. It will act like this:

Using cookies to saving the Access Token is a good method. I also search the source code of busy.org, it also use this method. So there is the source code:

sc2.init({
  app: 'steemthink.com',
  callbackURL: 'https://rileyge.github.io/sc2test/callback.html',
  scope: ['vote', 'comment']
});
angular.module('app', ['ipCookie'])
  .config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);
  }])
  .controller('Main', function($scope, ipCookie) {
    $scope.loading = false;
    $scope.parentAuthor = 'skenan';
    $scope.parentPermlink = 'steem-connect-v2';    
    $scope.accessToken = ipCookie('st_access_token');
    $scope.loginURL = sc2.getLoginURL();

    if ($scope.accessToken) {
      sc2.setAccessToken($scope.accessToken);
      sc2.me(function (err, result) {
        console.log('/me', err, result);
        if (!err) {
          $scope.user = result.account;
          $scope.metadata = JSON.stringify(result.user_metadata, null, 2);
          $scope.$apply();
        }
      });
    }

    $scope.isAuth = function() {
      return !!$scope.user;
    };

    $scope.loadComments = function() {
      steem.api.getContentReplies($scope.parentAuthor, $scope.parentPermlink, function(err, result) {
        if (!err) {
          $scope.comments = result.slice(-5);
          $scope.$apply();
        }
      });
    };

    $scope.comment = function() {
      $scope.loading = true;
      var permlink = steem.formatter.commentPermlink($scope.parentAuthor, $scope.parentPermlink);
      sc2.comment($scope.parentAuthor, $scope.parentPermlink, $scope.user.name, permlink, '', $scope.message, '', function(err, result) {
        console.log(err, result);
        $scope.message = '';
        $scope.loading = false;
        $scope.$apply();
        $scope.loadComments();
      });
    };

    $scope.vote = function(author, permlink, weight) {
      sc2.vote($scope.user.name, author, permlink, weight, function (err, result) {
        if (!err) {
          alert('You successfully voted for @' + author + '/' + permlink);
          console.log('You successfully voted for @' + author + '/' + permlink, err, result);
          $scope.loadComments();
        } else {
          console.log(err);
        }
      });
    };

    $scope.updateUserMetadata = function(metadata) {
      sc2.updateUserMetadata(metadata, function (err, result) {
        if (!err) {
          alert('You successfully updated user_metadata');
          console.log('You successfully updated user_metadata', result);
          if (!err) {
            $scope.user = result.account;
            $scope.metadata = JSON.stringify(result.user_metadata, null, 2);
            $scope.$apply();
          }
        } else {
          console.log(err);
        }
      });
    };

    $scope.logout = function() {
      sc2.revokeToken(function (err, result) {
        console.log('You successfully logged out', err, result);
        delete $scope.user;
        delete $scope.accessToken;
        $scope.$apply();
      });
    };
  })
  .controller('SetCookies', ['$scope', '$location', 'ipCookie', function($scope, $location, ipCookie) {
    $scope.loading = false;    
    $scope.accessToken = $location.search().access_token;
    $scope.expiresIn = $location.search().expires_in;

    if ($scope.accessToken) {
      sc2.setAccessToken($scope.accessToken);
      //get the details of an account
      //set the cookie
      ipCookie('st_access_token', $scope.accessToken, 
            {expirationUnit: 'seconds', expires: $scope.expiresIn * 1});
      sc2.me(function (err, result) {
        console.log('/me', err, result);
        if (!err) {
          $scope.user = result.account;
          $scope.metadata = JSON.stringify(result.user_metadata, null, 2);
          $scope.$apply();
        }
      });
    }
    $scope.isAuth = function() {
      return !!$scope.user;
    };
  }]);

There are two controllers in the code upwards, the first controller "Main" is used in the "usually pages", the "SetCookies" controller is used in the "callback page".

Then the result like this:

You can find all the source code on here: sc2-cookie. I also established a website:Steem Connec V2 with Cookie. There are only three pages in the site:

• index.html

  This page is used for login, logout, voting and comment. This page is almost the same as SC2 demo by skenan. But in this page, we read the Access Token in from cookies.

• callback.html

  This is the call back page. In this page, the Access Token is saved is cookies.

• testpage.html

  This page is all the same with index page. I use this page to let you know every page can use the Access Token to posting, voting, etc.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---