finish link to github account

2017-12-26 13:47:17 +08:00 · 2017-12-26 13:47:17 +08:00 · 72c6c540d4
commit 72c6c540d4
parent f97a86df23
7 changed files with 228 additions and 12 deletions
--- a/js/app.js
+++ b/js/app.js
@ -10,8 +10,9 @@
      return value && JSON.parse(value);
  }

-  var app = angular.module('listenone', ['angularSoundManager', 'ui-notification', 'loWebManager', 'cfp.hotkeys', 'lastfmClient'])
-    .config( [
+  var app = angular.module('listenone', ['angularSoundManager', 'ui-notification', 'loWebManager', 'cfp.hotkeys', 'lastfmClient', 'githubClient'])
+    
+  app.config( [
    '$compileProvider',
    function( $compileProvider )
    {   
@ -43,6 +44,7 @@
    });
  });

+
  app.run(['angularPlayer', 'Notification', 'loWeb', function(angularPlayer, Notification, loWeb) {
    angularPlayer.setBootstrapTrack(
      loWeb.bootstrapTrack(
@ -85,10 +87,10 @@
  app.controller('NavigationController', ['$scope', '$http',
    '$httpParamSerializerJQLike', '$timeout',
    'angularPlayer', 'Notification', '$rootScope', 'loWeb',
-    'hotkeys', 'lastfm',
+    'hotkeys', 'lastfm', 'github',
    function($scope, $http, $httpParamSerializerJQLike,
      $timeout, angularPlayer, Notification, $rootScope,
-      loWeb, hotkeys, lastfm) {
+      loWeb, hotkeys, lastfm, github) {

    $rootScope.page_title = "Listen 1";
    $scope.window_url_stack = [];
@ -106,6 +108,7 @@
    $scope.isDoubanLogin = false;

    $scope.lastfm = lastfm;
+    $scope.github = github;
    
    $scope.$on('isdoubanlogin:update', function(event, data) {
      $scope.isDoubanLogin = data;
@ -237,14 +240,18 @@
        $scope.dialog_title = '打开歌单';
        $scope.dialog_type = 5;
      }
-	  if (dialog_type == 6) {
+	    if (dialog_type == 6) {
        $scope.dialog_title = '歌单导入合并';
-		var url = '/show_myplaylist';
+		    var url = '/show_myplaylist';
        loWeb.get(url).success(function(data) {
            $scope.myplaylist = data.result;
        });
        $scope.dialog_type = 6;
      }
+      if (dialog_type == 7) {
+        $scope.dialog_title = '连接到Github.com';
+        $scope.dialog_type = 7;
+      }
    };

    $scope.chooseDialogOption = function(option_id) {
@ -643,6 +650,12 @@
          });
      });

+      $scope.$on('github:status', function(event, data) {
+          $scope.$apply(function() {
+              $scope.githubStatus = data;
+          });
+      });
+
      $scope.$on('angularPlayer:ready', function(event, data) {
        $log.debug('cleared, ok now add to playlist');
        if (angularPlayer.getRepeatStatus() == false) {
--- a/js/background.js
+++ b/js/background.js
@ -58,4 +58,17 @@ function hack_referer_header(details) {

 chrome.webRequest.onBeforeSendHeaders.addListener(hack_referer_header, {
    urls: ["*://music.163.com/*", "*://*.xiami.com/*", "*://*.qq.com/*"]
-}, ['requestHeaders', 'blocking']);
+}, ['requestHeaders', 'blocking']);
+
+
+/**
+ * Get tokens.
+ */
+
+chrome.runtime.onMessage.addListener(
+    function(request, sender, sendResponse) {
+        var code = request.query.split('=')[1];
+        Github.handleCallback(code);
+        sendResponse();
+    }
+);
--- a/js/github.js
+++ b/js/github.js
@ -0,0 +1,27 @@
+var ngGithub = angular.module('githubClient', []);
+
+ngGithub.factory('github', ['$rootScope', 
+function($rootScope) {
+    return {
+        openAuthUrl: function(){
+            console.log('openAuthUrl');
+            window.open(Github.getOAuthUrl(), '_blank');
+        },
+        getStatusText: function(){
+            console.log('getStatusText');
+            return Github.getStatusText();
+        },
+        getStatus: function(){
+            return Github.getStatus();
+        },
+        updateStatus: function(){
+            console.log('github update status');
+            Github.updateStatus(function(newStatus){
+                $rootScope.$broadcast('github:status', newStatus);
+            });
+        },
+        logout: function(){
+            Github.logout();
+        }
+    };
+}]);
--- a/js/github_api.js
+++ b/js/github_api.js
@ -0,0 +1,127 @@
+(function() {
+  var OAUTH_URL = 'https://github.com/login/oauth';
+  var API_URL = 'https://api.github.com';
+
+  var client_id = 'e099a4803bb1e2e773a3';
+  var client_secret = '81fbfc45c65af8c0fbf2b4dae6f23f22e656cfb8';
+
+  Storage.prototype.setObject = function(key, value) {
+      this.setItem(key, JSON.stringify(value));
+  }
+
+  Storage.prototype.getObject = function(key) {
+      var value = this.getItem(key);
+      return value && JSON.parse(value);
+  }
+
+  var Github = {
+    status: 0,
+    username: '',
+    getOAuthUrl: function(){
+      this.status = 1;
+      return OAUTH_URL + '/authorize?client_id=' + client_id  + '&scope=gist';
+    },
+
+    updateStatus: function(callback){
+      var access_token = localStorage.getObject('githubOauthAccessKey');
+      if (access_token == null) {
+        this.status = 0;
+        return;
+      }
+      var self = this;
+      this.api('/user', function(data){
+        console.log(data.login);
+        if (data.login == undefined) {
+          console.log('before setting:', self.status);
+          self.status = 1;
+          console.log('after setting:', self.status);
+        }
+        else {
+          console.log('before setting:', self.status);
+          self.status = 2;
+          self.username = data.login;
+          console.log('after setting:', self.status);
+        }
+        if(callback != null) {
+          callback(self.status);
+        }
+      });
+    },
+
+    getStatus: function(){
+      return this.status;
+    },
+
+    getStatusText: function(){
+      console.log(this.status);
+      if(this.status == 0) {
+        return '未连接';
+      }
+      if(this.status == 1) {
+        return '连接中';
+      }
+      if(this.status == 2) {
+        return '已连接: ' + this.username;
+      }
+      return '???'
+    },
+
+    setStatus: function(newStatus){
+      this.status = newStatus;
+    },
+
+
+    handleCallback: function(code, cb){
+      var url = OAUTH_URL + '/access_token';
+      var data = {
+        client_id: client_id,
+        client_secret: client_secret,
+        code: code
+      };
+      $.ajax({
+        url: url,
+        headers: {
+          Accept: 'application/json'
+        },
+        dataType: "json",
+        data: data,
+        success: function(response) {
+          console.log(response);
+          var ak = response.access_token;
+          localStorage.setObject('githubOauthAccessKey', ak);
+          if(cb != undefined) {
+            cb(ak);
+          }
+        }
+      });
+    },
+
+    api: function(apiPath, cb){
+      var access_token = localStorage.getObject('githubOauthAccessKey') || '';
+      var url = API_URL + apiPath + '?access_token=' + access_token;
+      $.get(url, function(response){
+        cb(response);
+      })
+    },
+
+    logout: function() {
+      localStorage.removeItem('githubOauthAccessKey');
+      this.status = 0;
+    },
+
+    isLoggedIn: function() {
+      return localStorage.getObject('githubOauthAccessKey') != null;
+    },
+
+    deparam: function(params) {
+      var obj = {};
+      $.each(params.split('&'), function() {
+        var item = this.split('=');
+        obj[item[0]] = item[1];
+      });
+      return obj;
+    }
+  };
+
+  window.Github = Github;
+})();
--- a/js/oauth_callback.js
+++ b/js/oauth_callback.js
@ -0,0 +1,9 @@
+
+/**
+ * Get and send oauth tokens from query string.
+ */
+
+chrome.runtime.sendMessage({type: 'code', query: window.location.search.substr(1)}, function(response) {
+    // window.open('', '_self', '');
+    // window.close();
+});
--- a/listen1.html
+++ b/listen1.html
@ -27,6 +27,8 @@
    <script type="text/javascript" src="js/vendor/bigint.js"></script>
    <script type="text/javascript" src="js/vendor/timer.js"></script>

+    <script type="text/javascript" src="js/github_api.js"></script>
+    <script type="text/javascript" src="js/github.js"></script>
    <script type="text/javascript" src="js/lastfm.js"></script>

    <script type="text/javascript" src="js/lowebutil.js"></script>
@ -123,13 +125,22 @@
          <button class="btn btn-default" ng-click="closeDialog()">取消</button>
        </div>
 		
-		<ul ng-show="dialog_type==6" class="dialog-merge-playlist">
+		    <ul ng-show="dialog_type==6" class="dialog-merge-playlist">
          <li ng-repeat="playlist in myplaylist track by $index" ng-class-odd="'odd'" ng-class-even="'even'" ng-click="mergePlaylist(playlist.info.id)">
            <img ng-src="{{ playlist.info.cover_img_url }}" />
            <h2> {{ playlist.info.title }} </h2>
          </li>
        </ul>

+        <div ng-show="dialog_type==7" class="dialog-connect-github">
+          <p>正在打开Github.com页面...</p>
+          <p>请在打开的页面点击"Authencate", 允许Listen 1访问你的账户。</p>
+          <div class="buttons">
+            <button class="btn btn-primary confirm-button" ng-click="github.updateStatus();closeDialog();">已经完成授权</button>
+            <button class="btn btn-warning warning-button" ng-click="github.openAuthUrl();">遇到问题，再次打开授权页</button>
+          </div>
+        </div>
+
      </div>
    </div>

@ -260,7 +271,7 @@


    <!-- content page: 设置 -->
-    <div class="site-wrapper" ng-show="current_tag==4" ng-init="lastfm.updateStatus()">
+    <div class="site-wrapper" ng-show="current_tag==4" ng-init="lastfm.updateStatus(); github.updateStatus();">
      <div class="site-wrapper-innerd" resize>
        <div class="cover-container">
         <!--  <div class="settings-title"><span>第三方登录<span></div>
@ -282,6 +293,17 @@
              <input id="my-file-selector" type="file" style="display:none;" ng-model="myuploadfiles"  custom-on-change="importMySettings">上传备份文件
            </label>
          </div>
+
+          <div class="settings-title"><span>连接到 Github.com<span></div>
+          <div class="settings-content">
+            <div>
+              <p> 状态：{{ github.getStatusText() }} </p>
+              <button class="btn btn-primary confirm-button" ng-show="github.getStatus() == 0" ng-click="github.openAuthUrl(); showDialog(7);">连接到 Github.com</button>
+              <button class="btn btn-warning confirm-button" ng-show="github.getStatus() == 1" ng-click="showDialog(7);">重新连接</button>
+              <button class="btn btn-primary confirm-button" ng-show="github.getStatus() == 2" ng-click="github.logout();">取消连接</button>
+            </div>
+          </div>
+
          <div class="settings-title"><span>快捷键<span></div>
          <div class="settings-content">
            <div>
@ -297,6 +319,7 @@
              <button class="btn btn-primary confirm-button" ng-show="lastfm.isAuthRequested()" ng-click="lastfm.cancelAuth();">取消连接</button>
            </div>
          </div>
+
          <div class="settings-title"><span>关于<span></div>
          <div class="settings-content">
            <p> Listen 1 主页: <a href="http://listen1.github.io/listen1/" target="_blank"> http://listen1.github.io/listen1/ </a> </p>
--- a/manifest.json
+++ b/manifest.json
@ -1,7 +1,7 @@
 {
    "background": {
        "presistent": true,
-        "scripts": ["js/background.js" ]
+        "scripts": ["js/vendor/jquery-1.12.2.js", "js/github_api.js", "js/background.js"]
    },
    "browser_action": {
        "default_icon": "images/logo.png",
@ -15,7 +15,11 @@
    },
    "manifest_version": 2,
    "name": "Listen 1",
-    "permissions": [ "notifications", "unlimitedStorage", "downloads", "storage", "contextMenus", "tabs", "*://music.163.com/*", "*://*.xiami.com/*", "*://*.qq.com/*", "webRequest", "webRequestBlocking"],
+    "permissions": [ "notifications", "unlimitedStorage", "downloads", "storage", "contextMenus", "tabs", "*://music.163.com/*", "*://*.xiami.com/*", "*://*.qq.com/*", "*://api.github.com/*", "*://github.com/*", "webRequest", "webRequestBlocking"],
    "version": "1.3.0",
-    "web_accessible_resources": [ "images/*" ]
+    "web_accessible_resources": [ "images/*" ],
+    "content_scripts": [{
+        "matches": ["https://listen1.github.io/listen1/*"],
+        "js": ["js/oauth_callback.js"]
+    }]
 }