Skip to content

Commit 25ed679

Browse files
adamzinderadamzinder
authored
adds webhooks and styling (#7)
1 parent ead653a commit 25ed679

File tree

10 files changed

+212
-85
lines changed

10 files changed

+212
-85
lines changed

‎ruby-directory-sync-example/README.md

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,35 @@ ruby app.rb
2929

3030
Head to `http://localhost:4567`!
3131

32-
For more information, see the [WorkOS Ruby SDK documentation](https://docs.workos.com/sdk/ruby).
32+
## Testing Webhooks
33+
34+
### 1. Click on the "Test Webhooks" button to navigate to the webhooks view.
35+
36+
37+
### 2. Start an `ngrok` session
38+
39+
[Ngrok](https://ngrok.com/) is a simple application that allows you to map a local endpoint to a public endpoint.
40+
41+
The application will run on http://localhost:8000. Ngrok will create a tunnel to the application so we can receive webhooks from WorkOS.
42+
43+
```sh
44+
./ngrok http 8000
45+
```
46+
47+
### 3. Set Up a WorkOS Endpoint
48+
49+
Log into the [WorkOS Dashboard](https://dashboard.workos.com/webhooks) and add a Webhook endpoint with the public ngrok URL with `/webhooks` appended.
50+
51+
The local application is listening for webhook requests at http://localhost:8000/webhooks
52+
53+
### 4. Set Up Webhooks Secret
54+
55+
In order for the SDK to validate that WorkOS webhooks, locate the Webhook secret from the dashboard.
56+
57+
Then populate the following environment variable in your `.env` file at the root of the project.
58+
59+
```sh
60+
WORKOS_WEBHOOK_SECRET=your_webhook_secret
61+
```
62+
63+
For more information, see the [WorkOS Ruby SDK documentation](https://docs.workos.com/sdk/ruby).

‎ruby-directory-sync-example/app.rb

Lines changed: 47 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1+
12
# frozen_string_literal: true
23

34
require 'dotenv/load'
45
require 'sinatra'
56
require 'workos'
67
require 'json'
8+
require 'sinatra-websocket'
9+
10+
set :server, 'thin'
11+
set :sockets, []
712

813
# Pull API key from ENV variable
914
WorkOS.key = ENV['WORKOS_API_KEY']
@@ -12,7 +17,7 @@
1217
@directories_list = WorkOS::DirectorySync.list_directories
1318
@directories = @directories_list.data
1419

15-
erb :index
20+
erb :index, :layout => false
1621
end
1722

1823
get '/directories/:id' do
@@ -21,21 +26,59 @@
2126
@users_list = WorkOS::DirectorySync.list_users(directory: params[:id])
2227
@users = @users_list.data
2328

24-
erb :directory
29+
erb :directory, :layout => false
2530
end
2631

2732
get '/users/:id' do
2833
@user = WorkOS::DirectorySync.get_user(params[:id])
2934
@user_groups_list = WorkOS::DirectorySync.list_groups(user: params[:id])
3035
@user_groups = @user_groups_list.data
3136

32-
erb :user
37+
erb :user, :layout => false
3338
end
3439

3540
get '/groups/:id' do
3641
@group = WorkOS::DirectorySync.get_group(params[:id])
3742
@group_users_list = WorkOS::DirectorySync.list_users(group: params[:id])
3843
@group_users = @group_users_list.data
3944

40-
erb :group
45+
erb :group, :layout => false
46+
end
47+
48+
49+
get '/webhooks' do
50+
if !request.websocket?
51+
erb :webhooks
52+
else
53+
request.websocket do |ws|
54+
ws.onopen do
55+
warn("websocket opened")
56+
settings.sockets << ws
57+
end
58+
ws.onmessage do |msg|
59+
warn("websocket onmessage")
60+
EM.next_tick { settings.sockets.each{|s| s.send(msg) } }
61+
end
62+
ws.onclose do
63+
warn("websocket closed")
64+
settings.sockets.delete(ws)
65+
end
66+
end
67+
end
68+
end
69+
70+
post '/webhooks' do
71+
payload = JSON.parse(request.body.read).to_json
72+
sig_header = request.env['HTTP_WORKOS_SIGNATURE']
73+
verified_webhook = WorkOS::Webhooks.construct_event(
74+
payload: payload.to_s,
75+
sig_header: sig_header,
76+
secret: ENV['WORKOS_WEBHOOK_SECRET']
77+
)
78+
if verified_webhook
79+
EM.next_tick { settings.sockets.each{|s| s.send(payload.to_s ) } }
80+
redirect "/webhooks"
81+
else
82+
render :json => {:status => 400, :error => "Webhook failed"} and return
83+
end
4184
end

‎ruby-directory-sync-example/public/workos_logo_new.png renamed to ‎ruby-directory-sync-example/public/images/workos_logo_new.png

File renamed without changes.

‎ruby-directory-sync-example/public/styles.css renamed to ‎ruby-directory-sync-example/public/styles/styles.css

Lines changed: 24 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,26 @@ body {
2222
bottom: 10px;
2323
}
2424

25+
.text_input {
26+
border: 1px solid #555555;
27+
border-radius: 10px;
28+
margin: 20px 0px 7px 0px;
29+
padding: 5px;
30+
height: 35px;
31+
width: 30vw;
32+
text-align: center;
33+
}
34+
35+
.text_input_2 {
36+
border: 1px solid #555555;
37+
border-radius: 10px;
38+
margin: 0px 0px 20px 0px;
39+
padding: 5px;
40+
height: 35px;
41+
width: 30vw;
42+
text-align: center;
43+
}
44+
2545
.flex {
2646
display: flex;
2747
justify-content: center;
@@ -34,22 +54,6 @@ body {
3454
align-items: center;
3555
}
3656

37-
.flex_right {
38-
justify-content: flex-end;
39-
}
40-
41-
.flex_space_between {
42-
justify-content: space-between;
43-
}
44-
45-
.hidden {
46-
display: none;
47-
}
48-
49-
.margin_top {
50-
margin-top: 15px;
51-
}
52-
5357
.container_success {
5458
display: flex;
5559
flex-direction: column;
@@ -89,12 +93,6 @@ body {
8993
transition-duration: 0.4s;
9094
cursor: pointer;
9195
}
92-
93-
.button_outline {
94-
background-color: #ffffff;
95-
color: #6363f1;
96-
border-color: #6363f1;
97-
}
9896

9997
.button:hover {
10098
background-color: #555555;
@@ -106,19 +104,6 @@ body {
106104
width: 95%;
107105
}
108106

109-
.half_width {
110-
width: 50%;
111-
}
112-
113-
.directory_button {
114-
width: 40%;
115-
margin-top: 20px;
116-
}
117-
118-
.directory_container {
119-
width: 48vw;
120-
}
121-
122107
h2, h1 {
123108
text-align: center;
124109
color: #555555;
@@ -177,9 +162,7 @@ div.text_box {
177162
background-color: #dad8d8;
178163
border-radius: 5px;
179164
border: 2px solid #6363f1;
180-
width: 40vw;
181-
max-height: 200px;
182-
overflow: scroll;
165+
width: 45vw;
183166
padding: 10px;
184167
word-wrap: break-word;
185168
}
@@ -207,11 +190,7 @@ div.text_box {
207190
border: 2px solid #555555;
208191
}
209192

210-
.webhooks_container {
211-
width: 45vw;
212-
background-color: #dad8d8;
213-
padding: 25px;
214-
max-height: 700px;
215-
overflow-y: scroll;
216-
193+
.button_outline {
194+
background-color: white;
195+
color: #6363f1;
217196
}

‎ruby-directory-sync-example/views/directory.erb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<head>
3-
<link rel="stylesheet" type="text/css" href="<%= url("/styles.css")%>">
3+
<link rel="stylesheet" type="text/css" href="<%= url("/styles/styles.css")%>">
44
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
55
</head>
66
<body class="container_success">
@@ -9,7 +9,7 @@
99
<p>Directory Users and Groups</p>
1010
</div>
1111
<div>
12-
<img src="<%= url("/workos_logo_new.png")%>" alt="workos logo">
12+
<img src="<%= url("/images/workos_logo_new.png")%>" alt="workos logo">
1313
</div>
1414
</div>
1515
<div class='flex'>

‎ruby-directory-sync-example/views/group.erb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<head>
3-
<link rel="stylesheet" type="text/css" href="<%= url("/styles.css")%>">
3+
<link rel="stylesheet" type="text/css" href="<%= url("/styles/styles.css")%>">
44
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
55
</head>
66
<body class="container_success">
@@ -9,7 +9,7 @@
99
<p>User Profile</p>
1010
</div>
1111
<div>
12-
<img src="<%= url("/workos_logo_new.png")%>" alt="workos logo">
12+
<img src="<%= url("/images/workos_logo_new.png")%>" alt="workos logo">
1313
</div>
1414
</div>
1515
<div class='flex'>

‎ruby-directory-sync-example/views/index.erb

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
1-
<% if @directories.any? %>
1+
<head>
2+
<link rel="stylesheet" href= <%= url("/stylesheets/styles.css")%>>
23

3-
<html>
4-
<head>
5-
<link rel="stylesheet" type="text/css" href="<%= url("/styles.css")%>">
6-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
7-
</head>
8-
<body class="container_login">
9-
<div class='flex_column'>
10-
<div class="flex heading_div">
11-
<img src="<%= url("/workos_logo_new.png")%>" alt="workos logo">
12-
<div class="heading_text_div">
13-
<h1>WorkOS</h1>
14-
</div>
15-
</div>
16-
17-
<h2>Ruby Directory Sync Example App</h2>
18-
19-
<hr style="width:100%">
20-
21-
<% @directories.each do |directory| %>
22-
<a class="button login_button" href="/directories/<%= directory.id %>">
23-
<%= directory.name %>
24-
</a>
25-
<% end %>
26-
27-
</div>
28-
</body>
29-
</html>
30-
<% end %>
4+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
5+
</head>
6+
<body class="container_login">
7+
<div class='flex_column'>
8+
<div class="flex heading_div">
9+
<img src="<%= url("images/workos_logo_new.png")%>" alt="workos logo">
10+
<div class="heading_text_div">
11+
<h1>WorkOS</h1>
12+
</div>
13+
</div>
14+
<h2>Ruby Directory Sync Example App</h2>
15+
<form method="POST" action="/webhooks">
16+
<div class='flex_column'>
17+
<hr style="width:100%">
18+
19+
<a href="/webhooks" class="button login_button button_outline">Test Webhooks</a>
20+
<% if @directories.any? %>
21+
<br>
22+
<h3>Directories</h3>
23+
<% @directories.each do |directory|%>
24+
<a href="/directories/<%=directory.id%>" class="button login_button"><%= directory.name %></a>
25+
<hr style="width:100%">
26+
<% end %>
27+
<% end %>
28+
</div>
29+
</form>
30+
</div>
31+
</body>

‎ruby-directory-sync-example/views/layout.erb

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang='en'>
3+
<head>
4+
<link rel="stylesheet" href= <%= url("/stylesheets/styles.css")%>>
5+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
6+
</head>
7+
8+
<body>
9+
10+
11+
<div class="logged_in_nav">
12+
<div class="flex">
13+
<p>Webhook Details</p>
14+
</div>
15+
<div>
16+
<img src="<%= url("images/workos_logo_new.png")%>" alt="workos logo">
17+
</div>
18+
</div>
19+
<div class='flex'>
20+
<div class="logged_in_div_left">
21+
<div>
22+
<h1>Your app,</h1>
23+
<h2>Enterprise Ready</h2>
24+
</div>
25+
<div>
26+
<a href="https://workos.com/" target="_blank"><button class='button'>WorkOS</button></a>
27+
<a href="https://workos.com/docs" target="_blank"><button class='button'>Documentation</button></a>
28+
<a href="https://workos.com/docs/reference" target="_blank"><button class='button'>API Reference</button></a>
29+
<a href="https://workos.com/blog" target="_blank"><button class='button'>Blog</button></a>
30+
31+
32+
</div>
33+
</div>
34+
<div class="logged_in_div_right">
35+
<%= yield %>
36+
</div>
37+
</div>
38+
</body>
39+
</html>

‎ruby-directory-sync-example/views/user.erb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<head>
3-
<link rel="stylesheet" type="text/css" href="<%= url("/styles.css")%>">
3+
<link rel="stylesheet" type="text/css" href="<%= url("/styles/styles.css")%>">
44
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
55
</head>
66
<body class="container_success">
@@ -9,7 +9,7 @@
99
<p>User Profile</p>
1010
</div>
1111
<div>
12-
<img src="<%= url("/workos_logo_new.png")%>" alt="workos logo">
12+
<img src="<%= url("/images/workos_logo_new.png")%>" alt="workos logo">
1313
</div>
1414
</div>
1515
<div class='flex'>

0 commit comments

Comments
 (0)