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:
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.
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.
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)
- 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.
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: