在Angular JS中使用身份验证令牌获取Github API

时间:2016-07-19 21:13:32

标签: angularjs github oauth

我已经厌倦了寻找我一直在处理的这个具体问题, 我是获取Gihub API的新手。 我编写了一个Angular应用程序,基本上可以获得Github repos,commit,forks等。 一切都很好,直到我需要测试不是公共回购。 我有一个身份验证令牌可以访问。 我的理解,

  • 我需要更新标题

  • 获得回调或其他内容。

代码非常简单...... app.js css html

angular.module('angularWidget', [])
.controller('githubController', function($scope,$http) {

    $scope.reposLoaded = false;

    $scope.userLoaded = false;
    
    $scope.userName = "angular"; //can be any name, just for testing
    
    
    $http.get("https://api.github.com/users/"+$scope.userName)
        .success(function(data) {
            $scope.userData = data;
        
            loadRepos();

        
        })
        .error(function(data) {
            $scope.userData = "No data";
        });
    

    var loadRepos = function () {
        $http.get($scope.userData.repos_url)
            .success(function(data){
                $scope.repoData = data;
                
            
            })
            .error(function(data){
                $scope.repoData = data;
            });
    };
    
    $scope.predicate = '-updated_at';
  
  });
a:hover {
    cursor: pointer;
    text-decoration: none;
}
    
.angGH .lang {
    font-size: 14px;
}
.angGH .count {
    color: #5bb;
    font-weight: bold;
}
    .angGH .ghData {
        
    }
.angGH .ghData i {
    font-style: normal;
}
.angGH .dl-horizontal dt {
     line-height: normal;   
}
<!doctype html>
<html ng-app="angularWidget">
 <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css" rel="stylesheet"/>
</head>

<body ng-controller="githubController">
<div class="container angGH">
      <div class="text-center">
        <h1>GitHub Repo using AngularJS</h1>
        <h2>
        <span class="mega-octicon octicon-repo">{{userData.name}}</span>

        <a href="{{userData.html_url}}" class="btn btn-default" target="_blank">
            {{userData.login}}
        </a>
        </h2>
        <span ng-hide="repoData"/>Loading...</span>
   </div> 
    <div class="panel-body">
    
<div class="list-group">
    <div ng-repeat="repo in repoData  | orderBy:predicate:reverse" class="list-group-item ">
        <div class="row">
            <div class="col-md-8">
                <h4>
                   <p>
                       <a href="{{repo.html_url}}" target="_blank" title="Link to repo" >{{repo.name}}</a>
                   </p>                  
                    <p>{{repo.description}}</p>
                    <p class="lang"><strong>Language: </strong>{{repo.language}}</p>
                    <p class="size"><strong>Size: </strong>{{repo.size}}</p>
                </h4>

                <p>
                    <a ng-if="repo.homepage" href="{{repo.homepage}}" class="" target="_blank">
                        <i class="fa fa-link"></i> WebPage
                    </a>
                    <a ng-if="!repo.homepage" href="{{repo.html_url}}" class="" target="_blank">
                        <i class="fa fa-link"></i> WebPage
                    </a>
                </p>

            </div>
            <div class="col-md-4">
               <dl class="ghData dl-horizontal">
                      <dt ng-if="repo.forks" class="octicon octicon-repo-forked"><i>Forks:</i></dt>
                      <dt ng-if="!repo.forks" class="octicon octicon-repo"></dt>
                       <dd>
                           <a href="{{userData.html_url}}/{{repo.name}}/network/members" title="Network Members" target="_blank">
                                                  
                            <i class="count">{{repo.forks_count}}</i>                            
                        
                        </a>
                       </dd>
                </dl>
                <dl class="ghData dl-horizontal">
                      <dt ng-if="repo.watchers" class="octicon octicon-eye"><i>Watchers:</i></dt>
                      <dt ng-if="!repo.watchers" class="octicon octicon-repo"></dt>
                       <dd>
                           <a href="{{userData.html_url}}/{{repo.name}}/watchers" title="Watchers" target="_blank">
                                                  
                            <i class="count">{{repo.watchers_count}}</i>                            
                        
                        </a>
                       </dd>
                </dl>
                <dl class="ghData dl-horizontal">
                      <dt ng-if="repo.stargazers_count" class="octicon octicon-star"><i>Stargazers:</i></dt>
                      <dt ng-if="!repo.stargazers_count" class="octicon octicon-repo"></dt>
                       <dd>
                           <a href="{{userData.html_url}}/{{repo.name}}/stargazers" title="Stargazers" target="_blank">
                                                  
                            <i class="count">{{repo.stargazers_count}}</i>                            
                        
                        </a>
                       </dd>
                        
                </dl>
                <dl class="dl-horizontal">
                  <dt>Last Updated:</dt>
                  <dd>{{repo.updated_at | date : short : timezone}}</dd>
                  <dt>Created:</dt>
                  <dd>{{repo.created_at| date : short : timezone}}</dd>
                </dl>
            </div>
        </div>
    </div>
</div>

</div>
</div>
</body>
</html>

我的问题是:

如何添加身份验证令牌:QWERTYUIOPASDFG? - &GT;只是一个样本

我应该在代码中添加它,以便获取repo信息的任何API调用都会返回数据?

我想这是某种程度上我需要申请我的电话,但是如何?...

我需要在客户端使用Angular / JavaScript / jQuery

完成它

0 个答案:

没有答案