使用 angularjs 的 github 基本身份验证

Question

我正在尝试从 Angular 应用程序登录到 github。我是 Angular 的新手。

我正在为 github 钩子使用 github.js https://github.com/michael/github 插件。

我的 javascript 在下面。我设置了模块并创建了一个身份验证控制器。这是由 html 中的表单触发的。

var app = angular.module('app', []);   
app.controller('AuthCtrl', function($scope) {
  $scope.username = '';
  $scope.password = '';
  $scope.auth = function() {
    console.log($scope.username);
    console.log($scope.password);
    $scope.github = new Github({
      username: $scope.username,
      password: $scope.password,
      auth: "basic"
    });
  }
});

我有 console.log 调用以确保它正在触发并且确实如此。但是 $scope.github 行似乎没有运行。我正在检查控制台和网络日志（chrome 开发人员工具），我希望看到 https://api.github.com/{someotherstring} 请求，但没有任何反应。我知道 github 代码可以像我在非角度应用程序中运行它一样工作。所以我的问题是我错过了什么？

任何帮助将不胜感激。希望我已经为某人提供了足够的信息。

提前致谢

鲍勃

html:

<div class="container">
    <div class="row">
        <form name="myForm" ng-controller="AuthCtrl" class="form-horizontal css-form">
            <div class="control-group">
                <div class="controls">
                    <input type="text" name="username" ng-model="username" placeholder="enter username" required/><span class="error" ng-show="myForm.username.required">Required!</span>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <input type="password" name="pwd" ng-model="password" placeholder="enter password" required/><span class="error" ng-show="myForm.pwd.required">Required!</span>
                </div>
            </div>

            <button ng-click="auth()">Login</button>
        </form>        
    </div>
</div>

代码依赖于以下库：

<link rel="stylesheet" href="assets/stylesheets/screen.css">
<link rel="stylesheet" href="assets/stylesheets/bootstrap.min.css">
<script src="assets/js/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/base64.js"></script>
<script src="assets/js/underscore-min.js"></script>
<script src="assets/js/github.js"></script>
<script src="assets/js/app.js"></script>

Answer 1

看起来它确实有效。

我加了

app.controller('AuthCtrl', function($scope) {

$scope.username = '';
$scope.password = '';
$scope.success = false;
$scope.auth = function() {
  console.log($scope.username);
  console.log($scope.password);
  $scope.github = new Github({
    username: $scope.username,
    password: $scope.password,
    auth: "basic"
  });

  $scope.user = $scope.github.getUser();
  $scope.user.repos(function(err, repos) {
    $scope.err = err;
    $scope.repos = repos;
    if($scope.err != null)
    {
      console.log($scope.err);
    }else
    {
      console.log($scope.repos);
      $scope.success = true;
    }
  });

}

});

它在登录时检索了 repos。感谢您的建议。

Answer 2

angular-github-activity 可以作为启动和运行身份验证的示例。

来自the docs：

GithubActivityService.events({
  user:'gigablox',
  params:{

    //Github API supports CORS as well. (http://developer.github.com/v3/#cross-origin-resource-sharing)
    callback:'JSON_CALLBACK', 

    /*
    Github API rate limits to (60 requests per hour) for anonymous requests. (http://developer.github.com/v3/#cross-origin-resource-sharing)

    If you need more (5000 requests per hour) you can generate a "scope-less" (access_token) for your app and is safe for client side code:

    1. First register a new app by following:
        --> https://github.com/settings/applications
        --> "Developer Applications"
        --> "Register new application"
    2. Register a "scope-less" (access_token) via cURL call using that <client_id> and <client_secret> you just made.
        # curl -X PUT -H "application/json" -d
          '{"client_secret":"<client_secret>","scopes":[],"note":"no scope public access"}'
          https://api.github.com/authorizations/clients/<client_id>
          -u <username>
    3. Your response shoud look something like this and generate a scope-less (token):
        {
          "id": 1234567,
          "url": "https://api.github.com/authorizations/1234567",
          "app": {
            "name": "Angular Github Activity",
            "url": "http://gigablox.github.io/angular-github-activity/",
            "client_id": "123456712345671234567"
          },
          "token": "76841d7b319dc8bb2c731365d38b74b25ab00126", //<-- This is what you want
          "note": "no scope public access",
          "note_url": null,
          "created_at": "2013-10-06T21:06:18Z",
          "updated_at": "2013-10-06T21:06:18Z",
          "scopes": []
        }
    */

    access_token:'76841d7b319dc8bb2c731365d38b74b25ab00126' //<-- Put that bad boy right here.
  }
}).get().$promise.then(function(events){
  $scope.events = events.data;
});