Come consentire agli utenti di accedere a flask-rest-api protetti in Angularjs utilizzando l'autenticazione HTTP?

Question

Ragazzi Se la mia domanda non è chiara si prega di commentare qui sotto.

l'autenticazione HTTP di base per API REST in boccetta + angularjs

voglio solo accedere al pallone-resto-api in angularjs, non so come inviare le informazioni di accesso (nome utente e password) a flask-rest-api. In questa app c'è una tabella dopo il login con successo e caricherà i dati. Qui siamo non utilizzando alcun database ma nome utente e password sono codificati nel codice del server di riposo. e username = "admin" e password = "1234". Quando può modificare, aggiornare, aggiungere nuovi dati. Ho preso questo da this blog, qui stanno usando a eliminazione diretta, sto cercando di in Angularjs

forma Accesso

<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> 

codice HTML che chiama Accesso Modello

<div class="navbar"> 
     <div class="navbar-inner"> 
     <a class="btn" data-toggle="modal" data-target="#login">Login</a> 
     </div> 
</div> 

Codice 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) 

Answer 1

Il modo in cui si effettua l'autenticazione di base dal lato client è fornendo Authorization: Basic <encoded username:password> intestazione di richiesta HTTP.

codificato username: password viene fatta in modo specifico descritto di seguito:

1. nome utente e password sono combinati in una stringa "username: password"
2. La stringa risultante viene quindi codificato usando l'RFC2045- MIME Base64 variante, se non limitato a 76 char/linea [9]

Quindi modificare il resto chiede di inserire sopra intestazione nel Ang codice ularjs o trova una libreria per farlo.

come @Boris accennato nei commenti sopra, vedi questo link http://jasonwatmore.com/post/2014/05/26/AngularJS-Basic-HTTP-Authentication-Example.aspx ha bel servizio angolare scritto di fare proprio quello che vuoi

Answer 2

Si potrebbe provare il più semplice, modo meno sicuro di fare questo, che è quello di passare le informazioni di accesso in questo modo:

username:password@yoursite.com 

Se si tenta con qualsiasi sito Web tenta di accedere utilizzando tutto ciò che hai fornito. Potrebbe funzionare nel tuo ambiente.

• Relevant
• Also relevant
• article flask + angular authentication

Come accennato nell'articolo precedente, si dovrebbe davvero impostare un servizio Auth, che richiede il login sul front-end. Sembra che tu non stia utilizzando il routing o il router angolare. Con il routing è possibile reindirizzare le persone alla rotta di accesso, prima di consentire loro di accedere a qualsiasi altra rotta. This question ha la risposta che ho usato per impostare questo comportamento. Ed ecco the example che mostra determinati percorsi sono accessibili solo una volta autenticato.