伙计如果我的问题不明确，请在下面发表评论。
flask + angularjs中的REST API的基本HTTP身份验证
我只想登录angularjs中的flask-rest-api，我不知道如何将登录信息（用户名和密码）发送到flask-rest-api。在此app成功登录后有一个表，它将加载数据。我们不使用任何基于数据的，但用户名和密码
登录表单
<div id="login" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="loginLabel" aria-hidden="true">
<div class="modal-header">
<h3 id="loginLabel">Sign In</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputUsername">Username</label>
<div class="controls">
<input ng-model="username" type="text" id="inputUsername" placeholder="Username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input ng-model="password" type="password" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button ng-click="submitData(username, password)" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Sign In</button>
</div>
</div>
HTML代码调用登录模型
<div class="navbar">
<div class="navbar-inner">
<a class="btn" data-toggle="modal" data-target="#login">Login</a>
</div>
</div>
AngulurJS代码
<script>
var app = angular.module('myApp', []);
app.controller('tasksCtrl', function($scope, $http) {
$scope.submitData=function(username, password){
var config={
params:{
username:username, password:password
}
};
};
//$http.get("data.json")
$http.get("/todo/api/v1.0/tasks")
.success(function(response) {
console.log(response.tasks)
$scope.tasks = response.tasks;
});
$scope.editTask = function(task) {
$scope.selectedTask = task;
};
$scope.removeRow = function(task) {
$scope.tasks.splice(task, 1);
};
$scope.addNewTask = function() {
//$scope.tasks.push({title :$scope.task1,description: $scope.description1});
$scope.tasks.push({title: $scope.task1, description: $scope.description1});
$scope.task1 = '';
$scope.description1 = '';
// $scope.tasks.push('dhsh');
};
});
</script>
REST-API-SERVER
import six
from flask import Flask, jsonify, abort, request, make_response, url_for, render_template
from flask.ext.httpauth import HTTPBasicAuth
app = Flask(__name__, static_url_path="")
auth = HTTPBasicAuth()
@auth.get_password
def get_password(username):
if username == 'admin':
return '1234'
return None
@auth.error_handler
def unauthorized():
return make_response(jsonify({'error': 'Unauthorized access'}), 403)
@app.errorhandler(400)
def bad_request(error):
return make_response(jsonify({'error': 'Bad request'}), 400)
@app.errorhandler(404)
def not_found(error):
return make_response(jsonify({'error': 'Not found'}), 404)
tasks = [
{
'id': 1,
'title': u'Buy groceries',
'description': u'Milk, Cheese, Pizza, Fruit, Tylenol',
'done': False
},
{
'id': 2,
'title': u'Learn Python',
'description': u'Need to find a good Python tutorial on the web',
'done': False
}
]
def make_public_task(task):
new_task = {}
for field in task:
if field == 'id':
new_task['uri'] = url_for('get_task', task_id=task['id'],
_external=True)
else:
new_task[field] = task[field]
return new_task
@app.route('/')
@auth.login_required
def index():
return render_template('index.html')
@app.route('/todo/api/v1.0/tasks', methods=['GET'])
@auth.login_required
def get_tasks():
return jsonify({'tasks': [make_public_task(task) for task in tasks]})
@app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['GET'])
@auth.login_required
def get_task(task_id):
task = [task for task in tasks if task['id'] == task_id]
if len(task) == 0:
abort(404)
return jsonify({'task': make_public_task(task[0])})
@app.route('/todo/api/v1.0/tasks', methods=['POST'])
@auth.login_required
def create_task():
if not request.json or 'title' not in request.json:
abort(400)
task = {
'id': tasks[-1]['id'] + 1,
'title': request.json['title'],
'description': request.json.get('description', ""),
'done': False
}
tasks.append(task)
return jsonify({'task': make_public_task(task)}), 201
@app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['PUT'])
@auth.login_required
def update_task(task_id):
task = [task for task in tasks if task['id'] == task_id]
if len(task) == 0:
abort(404)
if not request.json:
abort(400)
if 'title' in request.json and \
not isinstance(request.json['title'], six.string_types):
abort(400)
if 'description' in request.json and \
not isinstance(request.json['description'], six.string_types):
abort(400)
if 'done' in request.json and type(request.json['done']) is not bool:
abort(400)
task[0]['title'] = request.json.get('title', task[0]['title'])
task[0]['description'] = request.json.get('description',
task[0]['description'])
task[0]['done'] = request.json.get('done', task[0]['done'])
return jsonify({'task': make_public_task(task[0])})
@app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['DELETE'])
@auth.login_required
def delete_task(task_id):
task = [task for task in tasks if task['id'] == task_id]
if len(task) == 0:
abort(404)
tasks.remove(task[0])
return jsonify({'result': True})
if __name__ == '__main__':
app.run(debug=True)
答案 0 :(得分：1)
从客户端进行基本身份验证的方法是在HTTP请求中提供Authorization: Basic <encoded username:password>标头。
编码的用户名：密码以下面描述的特定方式完成：
- 用户名和密码组合成一个字符串＆＃34;用户名：密码＆＃34;
- 然后使用Base64的RFC2045-MIME变体对结果字符串进行编码，但不限于76 char / line [9]
因此，修改您的其余调用以在Angularjs代码中包含上述标题，或者找到一个库来执行此操作。
正如@Boris在上面的评论中提到的，请看这个链接http://jasonwatmore.com/post/2014/05/26/AngularJS-Basic-HTTP-Authentication-Example.aspx它写了很好的Angular服务来做你想做的事情
答案 1 :(得分：0)
您可以尝试最简单，最不安全的方式，即传递以下登录信息：
username:password@yoursite.com
如果您尝试使用任何网站尝试使用您提供的任何内容登录。它可能适用于您的环境。
如上文所述，您应该真正设置一个Auth服务，它要求您登录前端。看起来你没有使用路由或angular-ui-router。通过路由，您可以将人员重定向到登录路由，然后再允许他们访问任何其他路由。 This question有我用来设置此行为的答案。这里的the example显示某些路由只有在经过身份验证后才能访问。