قالب وردپرس درنا توس
Home / IOS Development / Reag data layer – Part 3: Login

Reag data layer – Part 3: Login



This post is the third part of an 8-part series that delves deep into how to build a robust, real-world frontend app data layer. See the previous sections here:

From this post, we connect our React / Redux app to a backend web service. This post will only focus on approval, because there is a large enough topic in itself. The following posts will handle using the authenticated access to read and write data from the web service.

We will not build backend as part of this book; We use an existing backend we have set up, sandboxapi.bignerdranch.com. Go there now and create a free account. This will allow you to create records without pushing on the toes of others.

sandboxapi uses a modified form of the OAuth2 Password Grant stream for authentication, and follows JSON: the API specification for data transfer. The principles of this book are not specific to any of these approaches; They should work with very little change for any type of password-based authentication and web service, and more generally for other types of backends.

If you want, you can download the app at the end of the post. [1

9659006] Logon noise saving

When configuring authentication for your back page, an important decision is how to store your access token so that it is available when the user uploads the page. The answer is not quite clear.

One option is to save the token using the browser's local storage API. This makes it easy to access your JavaScript code, but it also makes the token vulnerable to cross-site scripting (XSS) attacks, where a malicious user can execute their own JavaScript code on your domain and retrieve other users' tokens.

Another option is to save the access token in a browser case with HttpOnly sets, so it is not available from JavaScript. This prevents XSS attacks, but can make your app vulnerable to attack requests (CSRF) because the cookie is automatically sent to any request to the API. The CSRF can be reduced by a combination of checking Origin and Referring headlines and using a newer flag SameSite = strict flag, so cookies are generally considered the safer option. To learn more, check out the article "Where to Save the Token" by Auth0.

Because cookie-based approach has some benefits, we have set up sandboxapi to return your access token in a cookie. We see below how you can work with it.

Setting up Axios

To send our web requests we use the Axios library, an HTTP client that is simple and neatly configurable. Add it to the project:

Then there is a common pattern for configuring the Axios instance in a api module. Create src / store / api.js and add the following:

  import    axios    from    & # 39; axios & # 39; ; 

const api [19659021] = [AXIOS1965901819659024] [] [skaper19659018] ({
baseURL ] https: //sandboxapi.bignerdranch.com&


Source link