|
| 1 | +# Implement Visitor Authentication using Node and Azure AD |
| 2 | + |
| 3 | +In this guide, we will show you how to set up Visitor Authentication using Node and Azure AD (**now known as Microsoft Entra ID**). |
| 4 | + |
| 5 | +## Prerequisites |
| 6 | + |
| 7 | +`node` and `npm` are installed on your computer. Familiarity with the terminal (or command line). You can learn how to install Node [here](https://nodejs.org/en/download). NPM is bundled with Node. |
| 8 | + |
| 9 | +## Setting up Entra |
| 10 | + |
| 11 | +First, sign in to Entra platform. In the left sidebar, navigate to Identity > Applications > App registrations.\ |
| 12 | + |
| 13 | + |
| 14 | +<figure><img src="../../.gitbook/assets/Screen Shot 2023-11-02 at 3.58.44 PM.png" alt=""><figcaption></figcaption></figure> |
| 15 | + |
| 16 | +And click on New registration button in the screen that opens up. Name it appropriately. |
| 17 | + |
| 18 | +Under **Supported account types,** select **Accounts in this organizational directory only.** |
| 19 | + |
| 20 | +Under Redirect URI, select the type as Web and enter `http://localhost:3000/auth/redirect` as the value. |
| 21 | + |
| 22 | +Click Register. |
| 23 | + |
| 24 | +You should see a screen like the following |
| 25 | + |
| 26 | +<figure><img src="../../.gitbook/assets/Screen Shot 2023-11-02 at 4.18.19 PM.png" alt=""><figcaption></figcaption></figure> |
| 27 | + |
| 28 | +Click on "Quickstart" under "Overview". Select Web Application on the screen that opens up. And select "Node.js web" as the platform. |
| 29 | + |
| 30 | +You should see the following screen: |
| 31 | + |
| 32 | +<figure><img src="../../.gitbook/assets/Screen Shot 2023-11-02 at 4.22.46 PM.png" alt=""><figcaption></figcaption></figure> |
| 33 | + |
| 34 | +Click on "Make this change for me" and then click "Make updates" in the side panel that shows up. |
| 35 | + |
| 36 | +Click "Download the code sample". This will download a zip file, extract it and open the folder in your favorite code editor (say, VS Code). |
| 37 | + |
| 38 | +## Setting up the Backend |
| 39 | + |
| 40 | +Go back to the Overview page |
| 41 | + |
| 42 | +<figure><img src="../../.gitbook/assets/Screen Shot 2023-11-02 at 4.18.19 PM.png" alt=""><figcaption></figcaption></figure> |
| 43 | + |
| 44 | +Click on "Add a certificate or secret". You should see the following screen |
| 45 | + |
| 46 | +<figure><img src="../../.gitbook/assets/Screen Shot 2023-11-02 at 5.25.41 PM.png" alt=""><figcaption></figcaption></figure> |
| 47 | + |
| 48 | +Click on "New client secret". Enter a suitable description in the side panel that shows up and click add. Copy the value of the secret just created.\ |
| 49 | +\ |
| 50 | +Open up the `.env` file in the `App` sub-folder in your code editor. For the `CLIENT_SECRET` value, paste the value you just copied. |
| 51 | + |
| 52 | +The `CLOUD_INSTANCE`, `TENANT_ID`, and `CLIENT_ID` values should already be filled in with your app's values. Make sure they're correct by comparing them to the details shown on the Overview page.  |
| 53 | + |
| 54 | +For `EXPRESS_SESSION_SECRET`, generate a new secret by opening the terminal app on your computer and running `openssl rand -hex 32`. Paste the value generated into `EXPRESS_SESSION_SECRET`. |
| 55 | + |
| 56 | +Save the file. |
| 57 | + |
| 58 | +Navigate to the `App` subfolder in your **terminal** and run `npm install jsonwebtoken` . Now run `npm install`. |
| 59 | + |
| 60 | +## Setting up Visitor Authentication |
| 61 | + |
| 62 | +Now, we need to use GitBook. Go to the space you want to publish behind visitor authentication. Open the Share modal and click "Share to an audience", and enable the "Publish with Visitor Authentication" toggle.  |
| 63 | + |
| 64 | +Make note of the Private key and the Space URL. We will need them. |
| 65 | + |
| 66 | +<figure><img src="../../.gitbook/assets/va-modal.png" alt=""><figcaption></figcaption></figure> |
| 67 | + |
| 68 | +Enter `http://localhost:3000/auth/signin` as the Fallback URL. **Note that this is different from the one shown in the image above.** |
| 69 | + |
| 70 | +Go back to your code editor and open up the `index.js` file located in the `routes` folder under the `App` folder. Add  |
| 71 | + |
| 72 | +```javascript |
| 73 | +const jwt = require('jsonwebtoken'); |
| 74 | +``` |
| 75 | + |
| 76 | +to the top of the file. Replace the existing `router.get` definition  |
| 77 | + |
| 78 | +```javascript |
| 79 | +router.get('/', function (req, res, next) { |
| 80 | +// the existing body of the function is here |
| 81 | +}); |
| 82 | +``` |
| 83 | + |
| 84 | + with the following |
| 85 | + |
| 86 | +```javascript |
| 87 | +router.get('/', function (req, res, next) { |
| 88 | + if (req.session.isAuthenticated) { |
| 89 | + const token = jwt.sign({}, "GITBOOK SIGNING KEY", { expiresIn: '1h' }); |
| 90 | + const redirectURL = `https://example.gitbook.io/example/?jwt_token=${token}`; |
| 91 | + res.redirect(redirectURL); |
| 92 | + } |
| 93 | + else { |
| 94 | + res.redirect('/auth/signin') |
| 95 | + } |
| 96 | +}); |
| 97 | +``` |
| 98 | + |
| 99 | +Replace `GITBOOK SIGNING KEY` with the Private Key value you copied from the GitBook Visitor Authentication Share modal. |
| 100 | + |
| 101 | +In your code editor, in the following line |
| 102 | + |
| 103 | +```javascript |
| 104 | +const redirectURL = `https://example-url.gitbook.io/example/?jwt_token=${token}` |
| 105 | +``` |
| 106 | + |
| 107 | +Replace everything before `?` with the Space URL you copied from the GitBook Visitor Authentication Share modal. Make sure there's only one `/` right before the `?`. |
| 108 | + |
| 109 | +Your `router.get` definition should look something like the following: |
| 110 | + |
| 111 | +```javascript |
| 112 | +router.get('/', function (req, res, next) { |
| 113 | + if (req.session.isAuthenticated) { |
| 114 | + const token = jwt.sign({}, "91vb33d9-69f8-1pce-84bl-72b10234bbh0", { expiresIn: '1h' }); |
| 115 | + const redirectURL = `https://vib-test.gitbook.io/azure/?jwt_token=${token}`; |
| 116 | + res.redirect(redirectURL); |
| 117 | + } |
| 118 | + else { |
| 119 | + res.redirect('/auth/signin') |
| 120 | + } |
| 121 | +}); |
| 122 | +``` |
| 123 | + |
| 124 | +{% hint style="info" %} |
| 125 | +Note that your signing key and redirect URL will be different from the one shown above. |
| 126 | +{% endhint %} |
| 127 | + |
| 128 | +Save the `index.js` file. |
| 129 | + |
| 130 | +Make sure you're in the `App` subfolder in your terminal and run `npm start` . |
| 131 | + |
| 132 | +If you see `node ./bin/www` in the output, the Visitor Authentication set up is complete! |
| 133 | + |
| 134 | +In an incognito window, go to the GitBook space you just put behind Visitor Authentication. You will be prompted to sign in with Microsoft. If everything is set up correctly, you will be able to log in successfully and see the contents of the space. |
0 commit comments