나중에 검색할 수 있도록 원격 스토리지에 데이터 저장

내가 이 글을 쓴 모든 이유는 내가 할 수 있는 곳으로 가려고 했기 때문이다.

사용자 데이터 저장

사용자 데이터 검색

내 애플리케이션을 실행할 때마다 데이터를 저장/검색할 수 있습니다.

비기능적 수요

이 세 가지 요구 사항은 우리를 매우 중요한 비기능적인 요구 사항으로 이끌었습니다.

Data security: Insure that only the owner of the data can access and manage ( CRUD operations ) the data.

들어봤어non-functional requirements?그것들은 시스템에서 간접적으로 시스템에 영향을 주는 부분이다.
기능 수요는 시스템이 응용 프로그램에서 사용자가 필요로 하는 서비스를 어떻게 제공하는지와 직결됩니다.다음과 같습니다.

데이터 저장

검색 데이터

보고서 보기

데이터 삭제

비기능성은 전체 시스템이 예상한 작업에 필요한 것(접근성, 가용성, 안전성, 적응성 등)을 확보하는 것이다.
그것들은 당신의 전체 구조의 일부분으로 응용 프로그램의 기능에 기반을 다졌다.

설익은 시스템

그것들은 무형의 물건이므로 반드시 시스템에 융합되어야 한다.만약 그것들을 포함하지 않는다면 시스템은 정말 완전하지 못할 것이다.이것은 단지 설익었을 뿐이다.

비기능성 고장의 예

1. 사용할 수 없는 사이트

예를 들어, 만약 당신이 만든 사이트가 50퍼센트의 사용 가능한 시간만 있다면, 아무도 당신의 사이트에 의존할 수 없으며, 그것은 사용되지 않을 것이다.가용성 비기능성 요구.

2. 데이터 공개

우리의 예에서 만약에 우리가 시스템이 하나 있다면 개발자는 사용자의 데이터를 원격으로 저장할 수 있지만 누구나 데이터를 읽을 수 있다. 그러면 이 시스템은 설익은 것이다.만약 누구나 사용자의 데이터에 접근할 수 있다면, 그 어떠한 사용자도 이 시스템을 사용하지 않을 것이다.안전성은 비기능적인 요구이다.

설계 및 원형 설계 과정: 비기능성 무시

그러나 완벽한 시스템을 만드는 데 파묻히지 않는 상황에서 해결 방안을 찾기 위해서는 비기능적인 문제를 부차적인 위치에 두어야 한다.우리는 보통 우리의 생각이 실행 가능한지 먼저 보아야 한다.이것이 바로 우리가 이곳에서 한 일이다.

웹 API의 첫 번째 교체

스토리지 웹 API의 첫 번째 교체가 간단한 기능을 유지하기 위해 다음과 같은 방법을 제공합니다.

원격 스토리지 데이터

원격 데이터 검색

사용자 데이터 암호화

첫 번째 수정에 대해 우리는 사용자 데이터 보호에 집중하지 않을 것이다.우리는 명문 형식으로 사용자 데이터를 저장할 것이다.

AES256 암호화

그러나 다음 시리즈에서는 JavaScript를 통해 AES256을 사용하여 데이터를 암호화하는 방법을 보여 드리겠습니다.일단 데이터가 클라이언트에서 암호화되면, 우리는 데이터를 웹 API에 발표할 것입니다.

짧은 문장 (이미 늦었다)

글의 분량을 줄이기 위해서 웹 API를 어떻게 만드는지 설명하는 것이 아니라 어떻게 만드는지 설명해 드리겠습니다.주의: 어떻게 만들어졌는지 더 알고 싶으면 본문에 메시지를 남겨 주십시오. 제가 답장을 드리겠습니다.

웹 API 사용 방법

다음은 웹api를 사용하는 간단한 정도입니다.

그것은 어디에서 개최합니까?

https://newlibre.com/LibreStore
이것은 제 사이트입니다. 이것은 HTTPS를 지원하기 때문에 당신이 발표한 모든 내용은 보호됩니다.이제 기본 템플릿이지만 데이터를 저장할 수 있는 웹 API가 뒤에 있습니다.
웹 사이트가 HTTPS로 보호되기 때문에 귀하의 MainToken.URL에서 키가 전달될 때 유출되지 않습니다.

두 개의 노드가 응용 프로그램 데이터를 저장하는 데 도움을 줍니다

이때 두 개의 주요 단점만 사용할 수 있습니다.

데이터 저장

데이터를 저장하려면 다음을 수행합니다.

최소 10바이트 & <=128바이트 (문자열) 키를 만듭니다.(이를 잃어버리지 않는 곳에 저장하면 데이터가 회수되지 않기 때문이다.)

다음 URL을 사용하여 데이터를 보냅니다(현재 HTTP Get 명령을 받도록 설정되어 있습니다).https://newlibre.com/LibreStore/Data/savedata?key=<your-key-here>&data=<your-data-here>;가장 간단한 방법은 JavaScript를 사용하여 API를 가져오는 것입니다 (fetch-web API | MDN [^] 사용).

브라우저 개발 콘솔에서 시도

다음은 브라우저의 개발자 컨트롤러를 사용하여 데이터를 보내는 방법입니다.

브라우저의 개발 컨트롤러를 엽니다(대부분의 웹 브라우저에서 F12).

키와 데이터를 포함하도록 다음 코드를 붙여넣고 수정합니다.

fetch("https://newlibre.com/LibreStore/Data/SaveData?key=FirstOneForTest&data=First post to data for test.")
  .then(response => response.json())
  .then(data => console.log(data));

나는 이미 Key를 사용하여 발표를 진행했는데 이것은 MainToken 기록이 이미 만들어졌다는 것을 의미한다.
이전에 사용한 Key 발표를 사용하면 데이터가 이 Key 에 귀속된다는 것을 의미합니다.단, 만약에 새로운(유일한)Key 발표 데이터를 사용한다면 새로운MainToken 기록을 만들고 귀하의 데이터는 이 기록Key에 귀속됩니다.데이터를 검색하려면 원본Key을 다시 사용해야 합니다.

SaveData를 호출하면 어떻게 됩니까?

위의fetch와 키를 사용하여 데이터를 보낼 때 다음과 같은 상황이 발생합니다.

MainToken 표에 새로운 유일한 항목(행)을 만들 것이다.

데이터는 Bucket 테이블의 데이터 필드에 삽입되고 MainToken과 연결됩니다.키를 만들 때 생성된 ID입니다.

이때 메모리 통 데이터.

뭘 돌려드릴까요?

완료되면 API가 반환됩니다.
JSON에는

성공: (옳거나 그름)

bucketId:bucket표에 방금 삽입한 줄의 id
그것은 다음과 같이 보인다.

대상에 저장하면 이 두 속성 success 과 bucketId 이 있는 대상을 가지고 이 값을 다시 사용할 수 있습니다.

데이터 가져오기

이제 데이터를 검색하려면 다음 URL로 보내십시오: https://newlibre.com/LibreStore/Data/GetData?key=<your-key>&bucketId=<your-bucket-id>또한 Fetch API를 사용하여 데이터를 가져올 수도 있습니다.
를 사용하여 데이터를 저장할 때 에 반환됩니다bucketId.

fetch("https://newlibre.com/LibreStore/Data/GetData?key=FirstOneForTest&bucketid=2")
  .then(response => response.json())
  .then(data => console.log(data));

브라우저 콘솔의 모양은 다음과 같습니다.

LibreStore를 사용하는 데는 두 가지 주요 규칙이 있습니다.

당신의 MainToken을 영원히 내버려두지 마세요.나는 이미 위의 예로 이 조항을 깨뜨렸다.이것은 현재 누구나 나의 키로 데이터를 검색해 볼 수 있다는 것을 의미한다.물론, 내가 실제 데이터를 저장할 때, 나는 긴 랜덤 키를 만들어서 데이터를 저장할 것이다.

암호화되지 않은 데이터는 절대 저장하지 마십시오. 저도 이 규칙을 깨뜨려서 어떻게 작동하는지 보여 드리지만 앞으로 AES256을 사용하여 모든 데이터를 암호화할 것입니다.만약 당신이 당신의 데이터를 정확하게 암호화한다면, 당신은 정말로 규칙 #1을 걱정할 필요가 없습니다. 왜냐하면 공격자가 당신의 데이터를 복호화할 수 없기 때문입니다.

지금 Libre Store를 사용할 수 있습니까?

그래, 너는 데이터를 발표하고 검색할 수 있지만, 나는 아직 너에게 데이터를 쉽게 암호화하는 방법을 보여주지 않았기 때문에, 지금 너는 정말로 중요한 내용을 발표해서는 안 된다.

AES256을 통한 데이터 암호화

저는 웹 API와 본문을 여러분께 소개하고 싶을 뿐입니다. 본문의 편폭을 단축하기 위해 자바스크립트를 통해 AES256 암호화 알고리즘을 사용하여 데이터를 암호화하는 방법을 소개하겠습니다.

잠행 피크: AES256 암호화

그러나 저는 연구를 마쳤고 자바스크립트를 통해 AES256을 사용하여 데이터를 암호화하고 복호화하는 방법을 이해했기 때문에 제 Codepen에서 실행되는 코드를 볼 수 있습니다.io, 원하시면 해보세요. https://codepen.io/raddevus/pen/VwMXawY

그것을 시도하려면:

비밀번호 입력

입력 데이터

클릭[encrypt] 버튼
Base64 인코딩 바이트 문자열이 나타납니다.Base64 데이터의 암호화 바이트로 변환됩니다.그것은 명문 바이트가 아니다.Base64로 변환되는 암호 바이트입니다.

복호화 버튼을 클릭하면 데이터는 다음과 같습니다.

Base64 디코딩

비밀번호 사용

복호화

명문은 원본 텍스트와 일치하도록 끝까지 div에 추가됩니다.
암호를 복호화하기 전에 암호를 변경하면 바이트를 복호화할 수 없습니다. 아무것도 보이지 않을 것입니다.

다음에 만나요.

다음에 LibreStore 웹 API를 사용하여 ImageCat 응용 프로그램을 업데이트하여 응용 프로그램이 실행될 때 데이터를 검색할 수 있도록 합니다.
나는 우리가 직면할 몇 가지 도전을 생각할 수 있지만, 이러한 도전은 더 많은 학습을 가져올 뿐이다.👍🏽