Integrate wiki.js with Azure Storage Account and Azure Active Directory

In my last article, I have shown you how to deploy wiki.js to host documents in Azure PostgreSQL.

Now, let say we have a requirement o integrate wiki.js with our Azure Storage Accounts to upload / download documents from or to wiki. How can we do that?

Also, I want to allow Azure Active Directory users to login to wiki.js page with their own Azure AD credentials. How can we do that?

Let’s go step-by-step for above 2 challenges:

Challenge-1: Integrate wiki.js with Azure Storage Account

Step-1: Create Azure Blob storage in Azure.

As you can see here, I first created Azure Storage account having named “wikiblob01”.

Step-2: Once Azure blob Storage Account is created, take a note of its name and access keys.

Step-3: Go to wiki.js as administrator login and configure Azure Blob Storage by entering storage account name and access keys.

Step-4: Click on Apply at upper right corner making sure that “Active” is checked for Azure Blob Storage.

This is it!!!

Now, if you go to Azure Blob Storage, you will see wiki folder created inside Azure Blob Storage account containers we created.

Challenge-2: Integrate wiki.js with Azure Active Directory

The overall process is divided in 3 parts:

1. Copy the Redirect URL
2. Create Azure AD Application
3. Enable Azure AD strategy with wiki.js

Phase-1: Copy the Redirect URL

1. In the Administration Area of your wiki, click on Authentication in the left navigation.
2. Add a new Azure Active Directory auth strategy.

3. Copy the Redirect URI value found under the configuration reference section. Keep this page opened. We’ll come back to it later.

Phase-2: Create Azure AD Application

1. From the Azure Portal, open the Azure Active Directory resource.
2. Click on App registrations in the left navigation and then click New registration at the top.

3. Enter a Name (e.g. Wiki.js) and enter the Redirect URI you copied earlier.

4. Click Register.

5. Copy the Application (client) ID, you’ll need it later.

6. Click on Endpoints at the top and copy the endpoint value for OpenID Connect metadata document (e.g. https://login.microsoftonline.com/YOUR_TENANT_ID/v2.0/.well-known/openid-configuration), you'll need it later.

7. (Optional) Click on Branding in the left navigation and enter the necessary info to make it easier for your users.

8. Click on Authentication in the left navigation and enter the Logout URL (https://YOUR-WIKI.DOMAIN.COM) and make sure the ID tokens checkbox under Implicit grant is checked, then click Save at the top.

9. Click on API permissions in the left navigation and ensure the Microsoft Graph > User.Read permission is listed.

10. (Optional) In the API permissions section, you can Grant admin consent on behalf of all users in the directory. This will prevent the consent screen from being shown to the user the first time they login, which is often preferable in an internal organization environment.

Phase-3: Enable Azure AD strategy with wiki.js

1. Go back to the Wiki.js administration page from phase-1.
2. Enter the Identity Metadata Endpoint and Client ID values copied earlier.

3. Enable the Self-registration option (unless you plan on authorizing users manually).

4. Select the group new users should be assigned to when they login for the first time.

5. Make sure the checkbox next to Azure Active Directory in the list of strategies is checked. The text should now say that the strategy is active.

6. Click Apply on the upper right of the page to save and apply the configuration.

7. In order to let end users only see Azure Active Directory screen, enable respective settings as shown below:

Now, as you can see only Azure Active Directory option is visible.

End user will apply their Azure AD credentials and login.

That is it!!!!

I hope you might enjoyed this projects!!!