AngularJS with check flags

Question

I am building a web application using AngularJS and a REST API with a framework.

The application consists of two parts:

• The part in which users do not have to log in: they can register, log in, check functions ...

• The part in which users must log in.

To keep things simple, I thought about separating the two parts in two angular applications and let Flask direct you to the right application according to whether you are logged in or not.

I was wondering if this is a good approach? I think with this I can simplify authentication.

Answer 1

I'm not sure if two separate applications are a good idea.

It seems that you will have enough duplication if you do so because I do not think the two applications will be mutually exclusive. At least I suppose that public parameters will also be available when the user logs in, right? This means that a good fragment of the public application, client and server should be part of a secure application. It is hard to maintain.

Also consider the user experience. The user will have to download the whole new application during login and logout, at least for the first time, until he gets into the browser cache. Depending on the size of your application, which may take several seconds to wait.

The standard approach is to have one Angular application and one Flask application. An Angular application starts and shows all available options, and depending on what the user is doing Angular, sends Ajax requests to Flask.

If the user is trying to do something that requires a login, then Flask will respond with a 401 code error. Angular can then display the login dialog to get the login credentials, and then send the Ajax request again, now with the credentials , possibly as basic HTTP authentication through secure HTTP. From now on, Angular can attach login credentials to all requests so that the user can now use all parameters.

If you do not want to send login information with each request, you can have the get_auth_token in your flash application, which takes the credentials and sends the token back to Angular. Angular can then attach the token to all subsequent requests.

The logout option in Angular then simply resets the credentials and / or token in order to become unauthorized again.

I explain some of these ideas in more detail in this answer . Although the context in this question was Node.js, the principles also apply to Flask.

You can also read my textbooks on this topic. I use Flask on the server and Knockout.js on the client, but the concepts should translate directly if you use Angular instead of Knockout. Here are three of them:

• Designing a RESTful API with Python and Flask
• Writing a REST Javascript Client
• Designing a RESTful API using Flask-RESTful

Answer 2

Hey, using Flask and Angular together is a really nice full stack. And if you are smart in your code, you will not get any match, as the other answers suggested. In fact, you will get an extremely fast stack with a modern interface / backend. Check this code: https://github.com/mattupstate/overholt

The Overholt app is a great example of Flask's elegant combination, which serves as a backend for entering the interface. Flask handles the API, the web asset pipeline, and user authentication. The backbone or Angularjs handles the webapp interface, which is the product that your site provides after user authentication.

Answer 3

Disclaimer: I used Flask, Angular a lot (always using Flask at the back end).

This is an option, but I think that you will duplicate a lot of code (if the functions are the same between your applications, for example, viewing the "demo" page). It is best to run it at the Angular level in a single application.

I remember reading an interesting couple of ideas on the Google Group , so maybe this could help you.

Of course, if you are comfortable doing this in Flask and want to release your product as soon as possible, it might be best to use code exchange between controllers. However, there are flaws in this situation; The checkbox should direct the user to the correct application, but an unregistered user who wants to access the part where they should be logged in will cause the application / page to reload (as they should now use the second application), which I feel hit the target for single page web applications Angular.

Answer 4

(disclosure: I am one of the developers of UserApp)

If you do not want to roll back your own user management, you can try the third-party UserApp service along with the AngularJS module .

Follow the getting started guide or choose a Codecademy course . Here are some examples of how this works:

• Error handling login form:

   <form ua-login ua-error="error-msg"> <input name="login" placeholder="Username"><br> <input name="password" placeholder="Password" type="password"><br> <button type="submit">Log in</button> <p id="error-msg"></p> </form> 

• Error registration form:

   <form ua-signup ua-error="error-msg"> <input name="first_name" placeholder="Your name"><br> <input name="login" ua-is-email placeholder="Email"><br> <input name="password" placeholder="Password" type="password"><br> <button type="submit">Create account</button> <p id="error-msg"></p> </form> 

  ua-is-email means the username is the same as the email name.

• How to specify routes that should be publicly accessible, and which route is a form of login:

   $routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true}); $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true}); 

  The .otherwise() route should be installed where you want your users to be redirected after logging in. Example:

  $routeProvider.otherwise({redirectTo: '/home'});

• Sign Out:

  <a href="#" ua-logout>Log Out</a>

• Access to user properties:

  User information is accessed using the user service, for example: user.current.email

  Or in the template: <span>{{ user.email }}</span>

• Hide items that should only be displayed at login:

  <div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>

• Show item based on permissions:

  <div ua-has-permission="admin">You are an admin</div>

And to authenticate your internal services, just use user.token() to get the session token and send it using an AJAX request. In the background, use the UserApp API to check if the token is valid. We are also working on a Python library.

If you need any help just let me know :)

Answer 5

I don't have a good answer if separating it from two AngularJS applications is a good idea. But I believe that you do not need to split them into two, since they are very easy to save as a single AngularJS application and simplify it to avoid duplication. I wrote a tutorial series on building web applications using Flask and AngularJS. You can check it out - http://tutsbucket.com/tutorials/building-a-blog-using-flask-and-angularjs-part-1/