使用angularjs的github基本身份驗證

Question

我正在嘗試從一個有角度的應用程序登錄到github。 我是新來的有角度的。

我正在為github掛鈎使用github.js https://github.com/michael/github插件。

我的JavaScript在下面。 我設置模塊並創建一個auth控制器。 這是由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;
    }
  });

}

}）;

並在登錄時檢索了回購協議。感謝您的建議。

Answer 2

angular-github-activity可以作為啟動和運行身份驗證的示例。

從文檔 ：

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;
});