github使用angularjs进行基本身份验证

时间:2013-08-27 03:18:53

标签: javascript angularjs github basic-authentication github-api

我正在尝试从角度应用程序登录到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>

2 个答案:

答案 0 :(得分:0)

看起来它确实在起作用。

我添加了

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

}

});

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

答案 1 :(得分:0)

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