Building a Slack app with Phoenix

Presented at Elixir Australia December 2021 Meetup
https://www.meetup.com/elixir-sydney/events/gztkjsyccqbtb/

Recording video available at https://www.youtube.com/watch?v=O_61JddRvq0

Transcript

1. Building a Slack app with Phoenix by Qing Wu
2. Background • Video Room
3. Background • Video meet
4. Background • Onboarding project
5. Slack API • Powerful
6. Slack API • Powerful
7. Slack API • Powerful
8. Slack API • Powerful
9. Slack API • Powerful
10. Slack API • Not beginner friendly
11. Slack API • Bolt
12. Create Slack App
13. Create Slack App • https://api.slack.com/apps
14. Create Slack App • https://api.slack.com/apps
15. Slash Command
16. Slash Command • /abcd
17. Example /giphy hello
18. Example /zoom
19. Create a Slash Command
20. Create a Slash Command
21. Sample request from Slack %{ "api_app_id" => "A02DMAGNJ21", "channel_id" => "C02FFNUTGBS", "channel_name" => "priv-test-video", "command" => "/meet", "is_enterprise_install" => "false", "response_url" => "https://hooks.slack.com/commands/T033NA***/2763195051441/9Euw22LTMOHkjqK8cfgE4wVI", "team_domain" => "telnyx", "team_id" => "T033NA***", "text" => "", "token" => "RSVU4xGkEEwBYIZrM9GJGTcN", "trigger_id" => "2752826282196.3124344411.690a4adfbdb8bf7f4a86dba3529445c0", "user_id" => "U02DKE08LUA", "user_name" => "qingwu" }
22. Sample request from Slack %{ "api_app_id" => "A02DMAGNJ21", "channel_id" => "C02FFNUTGBS", "channel_name" => "priv-test-video", "command" => "/meet", "is_enterprise_install" => "false", "response_url" => "https://hooks.slack.com/commands/T033NA***/2763195051441/9Euw22LTMOHkjqK8cfgE4wVI", "team_domain" => "telnyx", "team_id" => "T033NA***", "text" => "", "token" => "RSVU4xGkEEwBYIZrM9GJGTcN", "trigger_id" => "2752826282196.3124344411.690a4adfbdb8bf7f4a86dba3529445c0", "user_id" => "U02DKE08LUA", "user_name" => "qingwu" }
23. Goal /meet
24. Goal /meet
25. Message
26. Message • Block kit
27. Message • Block kit • Blocks
28. Message • Block kit • Blocks • Block elements • Composition objects
29. Message with Block kit
30. How do we do this?
31. Calls API
32. Handle Slack Requests
33. Handle Slack Requests
34. Handle Slack Requests
35. Handle Slack Requests
36. /meet
37. Handle participants join/leave
38. Handle participants join/leave Iteration 1: periodical task
39. Handle participants join/leave Iteration 1: periodical task • get participants in room from Video API
40. Handle participants join/leave Iteration 1: periodical task • get participants in room from Video API • get participants in Slack call
41. Handle participants join/leave Iteration 1: periodical task • get participants in room from Video API • get participants in Slack call • compare and update Slack call
42. Handle participants join/leave Iteration 2: improved periodical task
43. Handle participants join/leave Iteration 2: improved periodical task • get participants in room from Video API
44. Handle participants join/leave Iteration 2: improved periodical task • get participants in room from Video API • keep track of participants in GenServer
45. Handle participants join/leave Iteration 2: improved periodical task • get participants in room from Video API • keep track of participants in GenServer • compare and update both GenServer and Slack call
46. Handle participants join/leave Iteration 2: improved periodical task • get participants in room from Video API • keep track of participants in GenServer • compare and update both GenServer and Slack call
47. Handle participants join/leave Iteration 3: Webhooks
48. Handle participants join/leave Iteration 3: Webhooks • handle participant.joined event
49. Handle participants join/leave Iteration 3: Webhooks • handle participant.joined event • handle participant.left event
50. Finish calls
51. Finish calls What • delete room in Video API
52. Finish calls What • delete room in Video API • end call in Slack
53. Finish calls What • delete room in Video API • end call in Slack • remove room/call in GenServer state
54. Finish calls When
55. Finish calls When • no one in the call (after someone joined)
56. Finish calls When • no one in the call (after someone joined) • Idle for 24 hours
57. Slash command flow
58. Slash command flow
59. Verify Request Signature
60. Verify Request Signature • signing secret
61. Verify Request Signature • signing secret • X-Slack-Signature
62. Verify Request Signature • signing secret • X-Slack-Signature • X-Slack-Request-Timestamp
63. Verify Request Signature • signing secret • X-Slack-Signature • X-Slack-Request-Timestamp • raw request body
64. Get Request body with Phoenix
65. Get Request body with Phoenix defmodule CacheBodyReader do def read_body(conn, opts) do {:ok, body, conn} = Plug.Conn.read_body(conn, opts) conn = put_in(conn.assigns[:raw_body], body) {:ok, body, conn} end end
66. Get Request body with Phoenix # endpoint.ex plug Plug.Parsers, parsers: [:urlencoded, :json], pass: ["text/*"], body_reader: {CacheBodyReader, :read_body, []}, json_decoder: Phoenix.json_library()
67. Compute Signature basestring = "v0:#{timestamp}:#{raw_body}" hash = :hmac |> :crypto.mac(:sha256, signing_secret, basestring) |> Base.encode16(case: :lower) signature = "v1=" <> hash
68. Compute Signature basestring = "v0:#{timestamp}:#{raw_body}" hash = :hmac |> :crypto.mac(:sha256, signing_secret, basestring) |> Base.encode16(case: :lower) signature = "v1=" <> hash
69. Compute Signature basestring = "v0:#{timestamp}:#{raw_body}" hash = :hmac |> :crypto.mac(:sha256, signing_secret, basestring) |> Base.encode16(case: :lower) signature = "v0=" <> hash
70. Compare Signatures Plug.Crypto.secure_compare(signature, slack_signature)
71. Summary • Fun
72. Summary • Fun • Unknowns
73. Summary • Fun • Unknowns
74. References • Slack Slash Commands • Slack Block kit • Slack Calls API • Telnyx Video API documentation