Exercise (Video): Secure Store

Loading...

來自 The Hong Kong University of Science and Technology 的課程

Multiplatform Mobile App Development with React Native

25 個評分

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

25 個評分

課程 3（共 4 門，Specialization Full-Stack Web Development with React）

This course focuses on developing truly cross-platform, native iOS and Android apps using React Native (Ver 0.55) and the Expo SDK (Ver. 27.0.0). React Native uses modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with React Native UI and layout support and access the native mobile platform's capabilities from Javascript using the Expo SDK. You should have already completed the Bootstrap 4 and the React courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your React and Javascript skills, (c) Use various features of React Native and the Expo SDK to build truly cross-platform mobile applications, and (d) Use Redux to design the architecture for a React-Redux application

從本節課中

Accessing Native Capabilities of Devices: The Expo SDK

In this module you will explore the Expo SDK that enables you to access the native capabilities of the mobile devices. You will use a few SDK APIs in order to understand the general concepts and the patterns for using these APIs within your React Native application

Secure Store7:21

Exercise (Video): Secure Store26:06

與講師見面

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

As we have learnt in the previous lecture,

secure store from Expo SDK provides

a secure way of storing key value pairs within our application.

In this exercise, we're going explore the use of secure store in order to

store the login information for the user within our application.

So we're going to create a form for the user to log into our site,

and store the username and password for the user in the secure store.

So that subsequently, the user doesn't need to enter this information.

To get started on this exercise,

let's go to our project and in the components folder,

we'll add in a new component named logincomponent.js file.

In the login component,

we're going to make use of the secure store.

Now, to configure the login component,

let me go into one of the other components and then grab a few things from there,

so that it will get started more quickly.

So, I will get hold of a few things from

react-native and then come into paste that in here.

So we have component react and component from react-native.

Then we will import

the view and the button

and stylesheet from react-native,

and also import from react-native elements.

We will get hold of the card,

icon, input, and checkbox.

So as you realize,

we're going to be creating a form here.

So I need the form related elements there.

Let me also import secure store from Expo.

So if you are importing anything from the Expo SDK,

that's how you will import secure store from Expo SDK.

Let me create the login component

and export the login component here.

So, as you realize,

I tend to do things in a certain order so that I don't forget to do these things.

Let me put in the constructor.

We should set up

some templates for solve this code so that it's more easy to insert them in one shot.

Will also set up a username password now because we are creating a form here.

So I am saving

the state in my component.

So this is a controlled component that we are implementing and then

in the componentDidMount method,

the lifecycle method, you're going to be implementing the access to the secure store.

We'll say SecureStore.getItemAsync and then we'll say userinfo.

So this is how you get the item from the secure store.

So we'll say getItemAsync userinfo and this returns the promise.

So in the promise,

we'll get hold of the result.

So I'll just call that as user data because that's exactly what we're getting here.

So we'll say then user data,

then say let userinfo

JSON.parse(userdata) because this will

be returned in the form of JSON string because when you store in the secure storage,

it's a key value pair,

the value has to be in the form of a string or a number or something like that,

you can't store- any JavaScript object that

you store has to be converted into JSON string before you store in the secure store.

So, the user data I have to convert it into

a JSON string before I store it in the store and when I retrieve,

I will get back the JSON string,

so I will have to parse the JSON string and convert it

into a JavaScript object like this here.

Then at this point I'll say if userinfo,

so which means that if this is not null,

then that means that I have the user's info.

It is quite possible that when you start your application,

there is nothing in the secure store because we haven't stored anything.

So, there's no way to restore the information there.

So, when you get the userinfo,

we'll say this setState,

we will set up the username as userinfo.username.

So we will load this into the state of our application and then similarly,

we'll set up the username

and password and then also,

we'll set the remember to true.

Now, the reason I'm setting the remember to true is because previously,

the user had saved the username and password to the secure store.

So that's why I'm setting remember to true,

so that I will remember to save any changes if

the user makes to this also back to the store.

So, that's why I'm setting up the remember to true here.

So this way my components steak is set up.

Now, I'm going to be putting this into my DrawerNavigator.

So let me set

up the navigation options with the title for this as login.

That's something that you would expect to have there.

Now, let's start rendering the view for this application.

So, let's implement the render and inside the render we'll construct the view here.

So, in the render we'll say

return and this should return the corresponding view there.

Before we create the form,

let me set up some styles here.

We'll set up the styles as stylesheet.create and inside there,

we will create the styles for use here.

This should be outside my class there.

Sometimes I overlook these things there.

So stylesheet.create, I will set up a container here,

the container is using

justifyContent center and margin of 20 and in addition,

I will set up the formInput with

margin of 40, formCheckbox.

With margin of 40,

background color of null,

so that the checkbox integrates into the rest of

my application and then a formButton with a margin of 60.

Now, these numbers I figured out by trial and error,

adjusting until the form looks decent on the screen.

That's the standard way that you will figure out some of these things anyway.

So, now that we have set up the styles,

let's fill in the form.

So, in the form,

they will create a view with

the styles container to the view.

Obviously, the view would be with a styles container,

and inside there I'm going to set up an input.

For this input, let me give

the placeholder as username,

then leftIcon for this.

So, as you realize the input can be given an icon.

That type is font-awesome,

and the name is user-o.

So, this creates a user symbol there and then onChangeText.

So, when you get the username,

we're going to do this setState username,

so that way, we will set up the username.

So, anytime the state of this input changes,

it will be reflected into the user name and then the value is this state username.

So, to apply a style to this,

we'll say containers types.

So, that's the way for an input box,

you will supply the container style here.

So, containerStyle formInput.

So, that's the first input that you have created.

We'll also have one for the password,

so the second one is password,

and the font-awesome icon for this one will be key and onChangeText.

You're going to be updating the password and the container style as such.

So, this is how the username and password into the login field are setup,

then we will set up the next one, the checkbox.

For the checkbox, they will set the title as Remember Me.

So, this checkbox, if the user checks,

then you will save the username and password into the secure store, and then we'll say,

checked this state remember.

So, this is tied to this state remember that we have here.

Also the checkbox takes a center option,

which will center the checkbox,

and we'll use the onPress method on the checkbox.

So, that's the method that is given for the checkbox onPress.

So, what we need to do is to toggle the state.

So, we'll say, this setState

remember and not this state remember.

So, we're basically toggling the state.

So, if it is false it will become true,

if it is true it will become false.

So, that's the way we control the checkboxes,

checked and unchecked options.

So, the container style for this is styles formCheckbox.

So, that gives us the checkbox.

Then finally down below here,

I'm going to apply another view with that style,

styles formButton.

So, we'll give in to form button,

and then inside this view,

I'm going to create the button.

For this button, I will give onPress.

So, when the button is pressed,

people submit the form.

So, they will implement this handleLogin function in a minute.

This handleLogin function, and we'll let that handle the login.

Then the title for the button is Login,

and color for the button is 512DA8.

So, we have set up that form.

Now, that last step is to create the handleLogin function here.

So, coming back up here,

let me implement the handleLogin function.

What does the handleLogin function do?

We will simply console

log that state,

just to show the user what the state is.

Then we'll say, if this state remember.

So, only if the remember is true,

which means that the checkbox was checked,

then I will save the state to the secure storage.

So, we'll say, SecureStore, setItemAsync.

So, this is where we will set up the ItemAsync.

So, here we will use a key as userinfo,

this key should be exactly the same as the key that you used here. This key.

So, you should use exactly the same key for storing and retrieving the info.

So, let me put that into a separate line so that it's a bit

more easier for us to see how we are storing this information,

along with the user info.

The second parameter would be JSON stringify,

and then we will save the user name.

So, we're constructing a JavaScript object with a username and password,

and then we're saving the JavaScript object into the SecureStore.

So, that's the way we store information into the SecureStore,

and this will return a promise.

Now, for the then part,

I am not going to handle that,

but I want to handle if there is any error.

So, if there is an error,

we'll catch the error and then simply print

out, Could not save.

Save user info, and then we'll just print out the error value here.

So, that's how we will handle if you need to remember and

then you save it to the secure store and then handled.

Otherwise. What otherwise means is that,

the checkbox was unchecked which

means that you need to delete whatever you have in the secure store,

because you don't want to persist this information.

So, that's one way the user can delete their stored information from the secure store.

So, in this case we'll call SecureStore.deleteItemAsync and then userinfo,

because the user didn't want to save this information,

in the secure store,

the only thing that I will handle is the catch for this.

So, for the catch we'll say console log could not

delete user info and then log the error there, that's it.

So, my login component is now ready,

with everything that I need.

So, this should be setting up a form in

my login component and then show up the login component with the form information.

So, let me save the changes to the login component.

Let's now go and integrate this into our drawer components.

So, going back to the main component let me import first the login form.

We will input login from LoginComponent and then we'll go down here and

then set up the login component as a navigator here.

So, let me copy that and then paste that in here.

We'll say const.

This one is LoginNavigator and

the login, screen is

login and all this remains exactly the same as before, no different.

So, we'll leave it as such and then let's integrate the login into our application.

So, we will put the login at the top before the home.

Typically you will see the login button right at the top, so,

that's why I'm going to put that there and then change this

to login and the screen is as you

expect LoginNavigator and title is login.

DrawerLabel is login and the icon would be sign-in.

So, that will remain as such but since the login component is put on top of

the home component the default way that this MainNavigator,

DrawerNavigator works is that this would become

the first screen that will be shown on the screen.

But, we don't want the login screen to be shown first.

Instead, when your user opens the app,

you want to just show the home screen.

The login should be something that the user explicitly does.

So, that's why I will set up the initialRouteName here to point to the home component.

So that when the app opens the home component is the first one that will be rendered.

Now, the login should be an optional thing.

So, when a user logs in maybe you want to show

his or her favorites within the app and so on,

but right now since we don't have all that on our server site so we are

not going to be doing that here but we will do that in the Node.js course.

Let's save the changes to the main component and go and take a look at our application.

Going to our application,

let me now open the side draw.

You can see that in the side draw we now have the login option available to us.

Let's click on that and then we will go to

the login page and here you can see the login form here.

So, you can see the username,

password, and the remember me.

Let me type in a username and

password and then click on the "Remember Me" and then when I click on the "Login",

you will note that this information will be submitted to the system.

To show you that the login was actually delivered to my login system, so,

here I'm showing the console here and you can see at the bottom here,

the information, the username,

password has been put right down below here.

So, you can see that the login form is actually working as expected.

Going back to our application.

Now if I navigate out to a different component, so,

let me just go to the menu component

and then if I come back again to the login component,

you will see that my information is still there in the login component.

Well, that's the way you'd expect it to behave.

Now let me uncheck the "Remember Me" box,

and then click on the "Login".

Now, let me go off to another component.

When I come back up to the login component,

you will notice that the login information is gone.

Because as you realize when I uncheck the "Remember Me" box,

then when I click on the "Login",

the handle login will delete the information from the secure storage.

So, that's why nothing exists in the secure storage and so my form is empty.

So, this demonstrates to you that

the secure storage stores this information and we are

able to retrieve the information as seen here.

With this, we complete this exercise,

in this exercise we have seen the use of secure storage,

to store information as a key value pair

in our secure storage and then retrieve the information when required.

This is a good time for you to do a git-commit with the message, "Secure storage".

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2018 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取