Google 및 DropBox와 같은 클라우드 서비스 공급자는 데스크톱, 모바일 및 브라우저 응용 프로그램을 통한 간편한 액세스를 제공합니다. 클라우드 서비스 공급자는 클라우드 저장소를 사용자 정의 응용 프로그램에 통합하는 API도 제공합니다. ComponentOne Web API를 사용하면 사용자는 단일 API로 다양한 클라우드 저장소 서비스에 연결할 수 있습니다.

C1 Web API에서 지원하는 주요 클라우드 저장소 공급자는 다음과 같습니다.

• AWS

• Google Drive

• OneDrive

• DropBox

• Azure

여기서 ASP.NET Web API Explorer 데모를 살펴볼 수 있습니다.

FileManager는 주요 클라우드 저장소 서비스에 연결하고 상호 작용할 수 있는 편리한 방법을 제공합니다. FileManager는 C1 Web API 클라우드 서비스를 사용하여 다양한 클라우드 저장소 공급자에 연결합니다.

사용자 인터페이스는 다음과 같은 기본 파일 작업을 수행합니다.

• 웹 응용 프로그램의 클라우드 저장소에 파일 목록 표시

• 파일 업로드/다운로드

• 파일/폴더 이름 바꾸기

ComponentOne MVC 및 MVC Core 에디션의 2020 v1 릴리스에서 해당 기능 모두를 FileManager 컨트롤과 함께 사용할 수 있습니다.

다음은 FileManager를 C1 Web API와 통합하고 DropBox에 액세스하기 위한 단계입니다.

인증

회사마다 서비스에 연결할 때 인증 토큰 또는 자격 증명을 생성하는 고유한 메서드가 있습니다.

1. DropBox용 인증 토큰 생성

   • 이 링크로 이동하여 App 콘솔 클릭

• 사용자 이름 및 암호 입력

• 개발자 콘솔에 로그인

• 응용 프로그램 만들기 클릭

• 옵션 선택

• 응용 프로그램 이름을 지정합니다(기억하기 쉬운 이름 선택).

• OAuth2(응용 프로그램을 인증하는 인증 토큰) 아래에 표시되도록 액세스 토큰 생성

• DropBox에서 응용 프로그램이 액세스할 수 있는 폴더 만들기

기본 DropBox 저장소로 이동합니다. 응용 프로그램을 만드는 동안 응용 프로그램 폴더 옵션이 선택되었으면 응용 프로그램과 같은 이름의 Apps 폴더가 이 폴더 안에 나타납니다. 응용 프로그램이 액세스할 수 있는 유일한 폴더입니다. 그 폴더 안에 “Root Folder”라는 또 다른 폴더를 추가합니다. 이것은 파일 관리자에서 액세스하는 루트 폴더입니다.

Dropbox에 연결

• 웹 API 응용 프로그램 만들기

• Visual Studio 열기

• 파일 > 새 프로젝트로 이동

• C1 Web API 프로젝트 템플릿 선택

  • 템플릿을 로드할 동안 대기

DropBox API를 사용하여 DropBox에 연결

• Visual Studio에서 도구 > NuGet 패키지 관리자 > 솔루션용 NuGet 패키지 관리로 이동

• 패키지 관리자에서 DropBox.API 패키지 검색

• 프로젝트에서 패키지 설치(아직 설치되지 않은 경우)

Startup.cs 파일을 엽니다. 다음 코드를 추가하고 Web API 클라우드 서비스를 초기화합니다.

string token = "<auth token>";
​
string appName = "<dropbox application name>"; 
​
app.UseStorageProviders().AddDropBoxStorage("DropBox", token, appName);

프로젝트를 실행하고 다음 URL로 이동합니다.

http://localhost:<port>/api/storage/List/DropBox/<app name>/<root folder>

파일을 포함하는 JSON 문자열이 표시되면 클라우드 서비스가 작동하는 것입니다.

위 자습서에서는 DropBox에만 연결하는 방법을 보여주었습니다. 다른 클라우드 서비스와 연결하기 위한 Web API를 만드는 방법에 대한 자세한 영문 블로그는 여기에 있습니다.

FileManager 컨트롤 추가

Visual Studio에서 C1 MVC Core 응용 프로그램 템플릿을 사용하여 새 MVCCore 만들기

템플릿이 로드되었으면 부트스트랩을 응용 프로그램에 추가합니다. FileManager는 부트스트랩을 이용하여 UI를 만듭니다.

Views/Shared/_Layout.cshtml로 이동하여 Bootstrap 3 CDN 링크를 추가합니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

Views/Home/Index.cshtml로 이동하여 FileManager 컨트롤을 추가합니다.

<c1-file-manager host-url="<web api url>" cloud-type="DropBox" root-folder="<root folder>"></c1-file-manager>

응용 프로그램을 테스트하려면 F5를 눌러 실행합니다.

FileManager 작업

파일 업로드

1. 폴더를 선택하고 도구 모음에서 업로드 버튼 클릭

2. 파일 선택 대화 상자에서 업로드할 파일 선택

파일 다운로드

도구 모음에서 다운로드 버튼 사용

파일 삭제

관리자에서 파일을 선택합니다.

삭제 버튼을 클릭합니다.

FileManager는 새 폴더 만들기, 파일 이동, 검색 등의 작업도 수행합니다.

FileManager 결론

새 FileManager 컨트롤은 간단하면서도 강력합니다. 웹 응용 프로그램에 쉽게 통합할 수 있습니다.

1. 여기서 온라인 데모 보기

2. 여기서 샘플 다운로드

오프라인 샘플에서 인증 토큰 및 응용 프로그램 샘플을 수정하시기 바랍니다.