Skip to content

Commit 687e2ca

Browse files
Vib Bhardwajgitbook-bot
Vib Bhardwaj
authored andcommitted
GITBOOK-117: Add a guide for VA using Node and Azure AD
1 parent 05bd881 commit 687e2ca

6 files changed

+135
-0
lines changed
Loading
Loading
Loading
Loading

docs/SUMMARY.md

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
* [Implement Visitor Authentication using Next.js and Clerk](getting-started/guides/implement-visitor-authentication-using-next.js-and-clerk.md)
1616
* [Implement Visitor Authentication using Node and Auth0](getting-started/guides/implement-visitor-authentication-using-node-and-auth0.md)
1717
* [Implement Visitor Authentication using Node and Okta](getting-started/guides/implement-visitor-authentication-using-node-and-okta.md)
18+
* [Implement Visitor Authentication using Node and Azure AD](getting-started/guides/implement-visitor-authentication-using-node-and-azure-ad.md)
1819
* [GitHub Examples](https://github.com/GitbookIO/integrations)
1920

2021
## GitBook API
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
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.&#x20;
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.&#x20;
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&#x20;
71+
72+
```javascript
73+
const jwt = require('jsonwebtoken');
74+
```
75+
76+
to the top of the file. Replace the existing `router.get` definition&#x20;
77+
78+
```javascript
79+
router.get('/', function (req, res, next) {
80+
// the existing body of the function is here
81+
});
82+
```
83+
84+
&#x20;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

Comments
 (0)