The Weavy File Browser

The Weavy File Browser is a solution for handling communication with the cloud file providers currently supported. These are:

• Google Drive - https://www.google.com/drive/
• OneDrive - https://onedrive.live.com/
• Dropbox - https://www.dropbox.com/
• Box - https://www.box.com/

Since the providers above require app registration and unique API keys for every website there are implemented on, that kind of implementation would not be best suited for Weavy. Weavy is a single-tenant solution with one (in most cases) website per customer. So, instead, we utilize the Weavy File Browser which is a separate web app hosted at https://filebrowser.weavycloud.com. On its own, the Weavy File Browser wouldn't be very useful, but when integrated into a Weavy web app, the two communicate to create, view, and link files from the providers.

In the Files App available in Weavy, you have the possibility to link files from the providers presented above. You can also create new Google Docs from within Weavy which actually are created on your Google Drive. The Weavy File Browser is referenced in an iframe element in the Files app. The iframe is hidden from the end-user. All the communication between Weavy and Weavy File Browser is handled through window.postMessage(). When a user clicks on a provider link in Weavy, a message is sent to the hidden Weavy File Browser iframe which triggers the appropriate file picker dialog.

When using the Weavy File Browser hosted at https://filebrowser.weavycloud.com we have already created all the API keys and client secrets needed for each of the providers. It's up and running and ready to use! No need for you to do anything. But if you want to customize and use your own version of the File Browser, you have to create and provide your own private keys and secrets.

In many cases, using the provided Weavy File Browser might be what you are looking for. The Consent Screens shown to the user will tell them that Weavy is the app creator and wants to access their files. But in some cases you may wish to change this and show your own app/company name or maybe you already are signing in your users with e.g. Google Authentication and want to avoid a multiple sign in experience.

If you want to know more about customizing and host your own Weavy File Browser, continue to read below.

The Weavy File Browser solution is open sourced and available at:

https://github.com/Weavy/weavy-file-browser

It's a very simple web app containing only one page and some script files for each of the available providers. Follow the steps below to host the Weavy File Browser on a custom location.

1. Clone the GitHub repo

Clone the repo. Access locally for development or publish to a custom url. See Readme of project for more information.

2. Modify the providers

Each of the providers requires you to setup an app in their environment and use the provided api keys and client secrets in the scripts.

2.1 Box

Go to Box Developers and sign in (or create a new account).

• Click on My Apps in the upper right corner and create a new app.
• Select Custom App type and click next.
• For Authentication method, select "Standard OAuth 2.0 (User Authenticaton)
• Give the app a name and click "Create app"
• On the App Configuration page, set the OAuth 2.0 Redirect URI and CORS Domains to the url where you are going to host Weavy File Browser
• Copy the Client ID and paste it to \wwwroot\js\weavy-box.js in the Weavy File Browser solution to replace the existing clientId setting.

2.2 OneDrive

To get started you need to register your application and receive an app ID from the Azure Portal.

• Log in to the Azure Portal.
• Select "Azure Active Directory" and then "App registrations".
• Create a new App registration
• Give the app a name.
• For Supported Account Types, select the one that fits your needs best.
• Specify the Redirect Uri. This is where you will host the Weavy File Browser
• Click Register
• On the app detail page, select "Authentication" in the left hand side menu. On Implicit Grant, make sure both Access tokens and ID tokens are selected. Save.
• From the Overview page, copy the Application (client) ID and paste it to \wwwroot\js\weavy-onedrive.js in the Weavy File Browser solution to replace the existing clientId setting.

2.3 Google Drive

To get started you need to go to the Google Developer Console.

• Select an existing or create a new project
• Click on Library. Enable the Google Drive API and Google Picker API
• Click on Credentials.
• Create new credentials -> API key. Give the key a name and make sure the Application restrictions are set to None or HTTP (web sites)
• Create new credentials -> OAuth Client ID. The Application type should be Web applications. Give it a name and set both Authorized Javascript origins and Authorized redirect URIs to the url where you are hosting the Weavy File Browser. Save.
• Go to OAuth Consent Screen and setup the consent screen with name and logo etc.
• Add the scopes ../auth/drive, ../auth/drive.readonly and ../auth/drive.file. Since these scopes are sensitive, you have to get the consent screen Verified by Google.
• From the Credentials page, copy the created API key and OAuth 2.0 client ID and paste it to \wwwroot\js\weavy-google.js in the Weavy File Browser solution to replace the existing clientId and developerKey setting.

2.4 Dropbox

To get started, goto the Dropbox App Console.

• Click on Create app
• Select the Dropbox API type
• Click on Full Dropbox access
• Give it a name and click Create app
• Add a Chooser/Save domain which is the url where you host your Weavy File Browser
• Copy the App key and paste it to \Pages\_Layout.cshtml in the Weavy File Browser solution to replace the data-app-key on the dropbox script tag.

3. Configure Weavy

Now when every provider is created and updated, it's time to tell Weavy to use the new Weavy File Browser.

The setting should be added to the appSettings section in web.config. Add the following:

Weavy will now use your customized File Browser!