UI: Navbar and Authn Session

Loading...

En provenance du cours de Johns Hopkins University

Capstone: Photo Tourist Web Application

18 notes

Johns Hopkins University

Capstone: Photo Tourist Web Application

18 notes

Cours 6 sur 6 dans Specialization Ruby on Rails Web Development

In this Capstone project for the Photo Tourist you will implement a Ruby on Rails web application that makes use of both a relational and NoSQL database for the backend and expose the data through services to the Internet using Web services and a responsive user interface operating in a browser from a desktop and mobile device. You will have a chance to revisit and apply what you have learned in our previous courses to build and deploy a fully functional web application to the cloud accessible to your co-workers, future employers, friends, and family. In developing the Photo Tourist web application, you will get to work with different data types and data access scenarios (e.g., fielded data display and update, image upload/download, text search, access controlled information) to provide your users the ability to show off their photos and information from trips they have taken and to seek out photos and information from trips taken by others. Using the application you develop, your users will be able to • Create an account • Upload and download photos to the site and make them accessible to others • Provide descriptions of trips and photos that others can read • Organize photos by location and trip, • Find photos based on location • Find photos based on text searches of descriptions • Locate the place where the photo was taken on a map

À partir de la leçon

Security and the Photo Tourist Domain Model

In this module, you will learn how to implement authenticated interfaces providing role-based authorization required to protect web resources. You will also practice these techniques while implementing the core resources for the Photo Tourist application. You will learn how to manage user accounts with the Devise Ruby gem and how to implement token-based authentication with the devise_token_auth Ruby gem and ng-token-auth AngularJS module. With this starting point -- the student is on a straightforward path to implementing external authentication (e.g., via Facebook, Twitter, Github) through OAuth2 (not part of the capstone). Additionally, how to implement end-to-end account registration from the UI, through the API, to Devise through the intermediate libraries and implement an authenticated session component in Angular and make that available through a Navbar based on a Bootstrap implementation. You will learn how to add role-based security to their resources with the aid of the Pundit Ruby gem to determine access not only on authentication -- but also on assigned roles for the anonymous and authenticated user. The content and code-along exercises provide opportunities to implement role-based access checks within the Web UI to help guide a user to making authorized choices appropriate for their assigned roles. And how to write optimized SQL queries to implement compound, custom resource payloads for efficient expression of related object information -- including mapping roles to resources accessed by specific users. ************* This is a very long module with very important material relative to security and the targeted application. It will likely be broken up into two (2) or more modules in the future. You should budget extra time for this and treat it as if it were two (2) modules for the amount of time spent. Yes -- that means the novice developer could spend upwards to forty-eight (48) hours going through the lectures, performing the optional code-alongs, and completing the mandatory assignment. *************. The mandatory assignment for this module will be posted shortly after the last lectures are posted and there is a Git commit available in Github for that lecture.

UI: ng-token-auth Setup and Authentication Requirements8:29

UI: Signup15:25

UI: Signup Error Handling and Form Feedback11:14

UI: Navbar and Authn Session13:55

UI: Successful Login13:13

UI: Logout and Persisted Session13:03

UI: Login Error Handling and Styling10:50

UI: Authenticated Access12:34

Rencontrer les enseignants

Jim Stafford
Adjunct Professor, Graduate Computer Science
Computer Science, Whiting School of Engineering

[MUSIC]

In this lecture, we will discuss heading a Navbar tour application

giving us the ability to view key information and access core navigations.

And that first key information in navigation is our authentication session,

where we will have access to logging in and logging out through the server.

We won't actually be able to login or logout during this lecture, but

we are going to put in place all the components, services, and communications

required to do so, and we'll fill in the details in the following lectures.

And we will revisit a service that we already have, the authentication service.

And start to populate it with capabilities of knowing who the current user is.

But of course until we're able to login or

logout, that user is not going to change it.

Right, to get started implementing our login session,

let's implement a very simple test.

So as we come in as an anonymous user, let's visit our route path,

be able to click on something called login, and

then be able to see a login-form, at that point in time.

In our assets pipeline tree, one of the first things we're going to need to do,

is create a new module and let's call this the layout module.

We're going to use this module to host very generic things that really could

apply across multiple types of applications and like with

every new JavaScript file that we add, we must update the JavaScript manifest.

And when we've updated the manifest, lets reload the browser to make sure it can

load in all the files we have specified.

With our layout module correctly in place, let's go ahead and

inject that into the root level module.

And then go back to the browser to make sure everything loads correctly.

Looks like we're good.

All right with our net layout module in place,

let's create a new component that'll display the login.

Basically a nav bar.

Let's start with an html file that comes from Bootstrap which is copy their

generic example.

And use this as a starting point.

Let's add a component, that will be responsible for displaying that html

All right, there are no bindings that will be passed in.

The key into the hash will be Navbar HTML.

We can go over to config and add the Navbar HTML element to the config.

All right, so back in the component, we have a controller and

let's just leave it at this basic level right now.

It's just going to kick out some debug.

Now what we need to do is display this nav bar component on the main page.

We want the nav bar to show up right at the top of the screen right here.

However, before we get that far,

I'm going to need to register it in the javascript manifest.

Let's check for typos.

Everything looks healthy.

So now we should be able to come down to the index html page within rails

and establish an element that is going to host our nav bar.

Let me go over the Navbar component and copy its name.

I'm going to have to edit it but that's okay.

Okay, so instead of the capital, lowercase sdnavbar.

At this point in time we should be able to refresh our main display.

And we get our nav bar.

Cool, no errors.

And we see our controller coming up that's able to print out the scope.

Alright, let us do a light amount of clean up.

We have these areas on the side.

Which are padding.

And let's just go ahead and zero those out.

All right. To zero them out let's go over into style

sheets.

We already have a layout CSS.

Great.

We can just define a full size in there that says padding right and

left are set to zero.

And apply that styling class to the DIV.

And now our nav bar takes up the full screen.

Great. All right,

we're still not ready to go back to the test just yet because it's looking for

this, not to say drop down, but it's looking for it to say login.

And then when we do click down it's supposed to be a login form and

not this list of elements.

Okay in order to implement the login why don't we start from the middle out.

And let's build our way out both to the HTML and to the service level.

All right what we're going to want to do is get a login label and

get it from the controller because it's going to change whether we're logged in or

logged out.

And the way that we're going to know that we're logged in or

logged out is through the injection of the authentication service, Authn.

Now we could stub this and say, return "Login" and we could move on.

That would actually work for a little bit, obviously.

But what we're going to do is we're going to forecast that the service

create two methods for us to be able to ask.

Are user authenticated?

And what is their name?

And if their not authenticated then we are return that login.

But if they are authenticated, then we'll return the user names.

So let's take these two methods over to the authentication service And

implement them.

Now what the service is going to have is when the user is authenticated,

there's going to be a user object set.

And let's verify that it's not only set, but it has a uid value inside of it.

That's what we're going to expect when the user's authenticated.

And then for username, we'll go into that hash make sure it's set.

If it is set we'll go ahead and grab the name or we'll return a no.

And then while we're at it, let's just have a function to return just the user,

entire hash for the user.

Let's initialize the user and expose our three methods on the service.

And now what should happen is when we come back to our component it's going to say

they're not authenticated and you'll return login as what you will display.

However, we've got to update our HTML to make that happen.

So lets see if we can unclutter this bit.

And what we really want to do as you saw earlier, we want to attack this drop down.

And let's create a span of our own and we're probably going to start looking for

this thing so let's go ahead and style it with an ID so it's easy to find and

let's go get our value from the controller, okay?

So we refresh, our display now says log in, awesome.

But where is our log in.

Let's see what we can do.

So in order to implement log in, let's go back to authentication and

add another component.

And let's refer to this as the authentication session component.

Okay, this component is not going to have any binding passed.

I haven't put the HTML in place.

But when I do, let's find it by this key.

And since I already have an idea what I'm going to call the HTML file.

Let me go ahead and add it ahead of the file.

So it's going to be registered under the search in HTML, and

that's going to be the name of that file.

At this point in time I can create my HTML file for my login form.

So I could start by adding a login form, but

I'd like this to be the overall session.

Let me only display the form if we don't have a current user.

The current user is null.

Otherwise if we do have a current user, let's go ahead and

display the log-out form.

Makes sense.

Now these forms are going to need some kind of submit button, so

let me add a submit button Login form.

And let's add a submit button to the logout form.

Okay, about ready to save this.

Several improvements to be made, but it's a start.

So we've got our HTML.

We have our HTML registered, we have a component.

I don't think we have our component declared.

At this point, we ought to be able to refresh and

there should be no error about our Javascript.

However, we still need to display the component, so

let's go back to the nav bar and let's replace all these boiler plate list items,

which is star component, our authentication session component.

Which is going to show up under the login label.

Now when we go back to our page, hit refresh and login.

We see what should have been a form.

And I bet you what I did is I made a few couple of typos.

All sessions should have been authn_session.

Should have been an n here.

Okay and then over on the JavaScript, that's right.

Okay, module, okay.

Let's give it a shot.

Okay, we've seen this before, where this is not asking for

the asset pipeline mangled name, it's just asking for the literal name.

And when that occurred last time there was a typo and

I thought I corrected all the typos.

All right, I have never encountered this error before but

this is what it ended up being.

After I fixed all the typos there was this drilling space.

Once I get rid of that, voila.

So look out for

trailing spaces getting in the way of your b expansions at the end of the line.

Okay, so now I have a log in.

Can't really log in but I've got a log in display,

and that's probably enough to make this test happy, okay,

when an anonymous user comes in we are displaying a log in form,

now we need to make sure it's a correct Login form so they can log in.

Our minimalistic authentication test should login form passes but you notice

that when we run a regression testing that we have broken the manage_foos_spec.

And although we're about to delete it pretty soon,

it's actually going to teach us a lesson.

So what the error is reporting is that now that we have a list in our nav bar,

there are some expressions that we did that we didn't account for

the fact that there could be other lists on the page.

So notice we have a css that just apparently is looking for a global li.

And we have some XPath that's doing some things as well.

And I think it's the XPath part that's probably the most interesting.

Let's take a look.

If we look here, we didn't scope this below anything.

We just said list elements.

Obviously that's not good.

And I believe we had an xpath that we could scope that under.

Line 65, and let's look a little further up the spec.

71, 72, okay.

Now this is the one that I wanted to show you.

Notice how we set scope within the list xpath, and then we said slash, slash.

What we need to do is make this relative.

Dot, slash, slash.

Let's see if this occurs elsewhere.

Now this time let's hope it's good.

So yeah, I mean, it's somewhat reasonable that we ran into this problem because

these tests that we're updating were done when we were naive.

And we had this very small application, and

we put very little bit of work into how things were going.

Now that they're starting to be part of a bigger application,

we need to tighten them up a little bit.

So now our test passed, okay.

So at this point, all of our regression tests are passing, and

we're ready to move forward.

In summary, we added a layout module that's going to host all generic

kinds of constructs for our UI.

They might be tailored to our particular application, but

conceptually they're pretty generic.

The first component in our layout module is our navbar, and

that will allow us to navigate to core resources in our application.

It'll also allow us to view whether we're authenticated or not, and

gain access to the authenticated mechanisms.

We enhanced our authentication module with a new component,

the authentication session component.

That is laying the foundation for being able to log in and

log out through the authentication service.

We added a slight amount of beef to the authentication service to be able to

report who the current user is but

until we complete this log in thread, that identity's not going to change.

So we get some more work to do.

And as always when we finish an area of testing we probably ought to go back and

do some regression testing.

And when we did this time, we found that we broke a test from module two.

And there were actually two lessons out of that even though I only list one here.

One was to better scope our CSS selectors.

So that we can point to exactly what we're looking for and

the other was within Xpath.

But even if you correctly scope things

a relative xpath under within clause needs to start with a period.

Slash, slash will really mean anywhere in the document.

Dot slash slash will mean under the within scope.

So what's next?

Successful Login.

Let's start filling in the pieces to our login scenario so

that we can complete it and authentication.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play