From 683adceec423e0374feb032d4120992efca1e73e Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Tue, 10 Sep 2019 19:20:24 +0000 Subject: [PATCH] [CORL-603] Documentation Updates (#2553) * fix: replaced png with svg * feat: updated docs * feat: added netlify config * fix: fixed netlify config --- docs/_config.yml | 12 +- docs/source/version-5-api.md | 203 ++++++++++++++++++ docs/source/version-5-installation.md | 6 +- docs/source/version-5-integrating.md | 111 +--------- docs/source/version-5-sso.md | 127 +++++++++++ docs/themes/coral/layout/partial/sidebar.swig | 2 +- docs/themes/coral/source/css/_variables.scss | 2 +- .../coral/source/images/coralproject.png | Bin 33200 -> 0 bytes .../source/images/coralproject_color.svg | 1 + netlify.toml | 3 + 10 files changed, 350 insertions(+), 117 deletions(-) create mode 100644 docs/source/version-5-api.md create mode 100644 docs/source/version-5-sso.md delete mode 100644 docs/themes/coral/source/images/coralproject.png create mode 100644 docs/themes/coral/source/images/coralproject_color.svg create mode 100644 netlify.toml diff --git a/docs/_config.yml b/docs/_config.yml index 04378724e..174ca2005 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -86,10 +86,18 @@ sidebar: url: / - title: Configuration url: /v5/configuration/ - - title: Integration - url: /v5/integrating/ - title: Developing url: /v5/developing/ + - title: Integration + children: + - title: CMS Integration + url: /v5/integrating/cms/ + - title: Single Sign On + url: /v5/integrating/sso/ + - title: API + children: + - title: GraphQL Overview + url: /v5/api/overview/ - title: Version 4 children: - title: Installation diff --git a/docs/source/version-5-api.md b/docs/source/version-5-api.md new file mode 100644 index 000000000..987dd1b55 --- /dev/null +++ b/docs/source/version-5-api.md @@ -0,0 +1,203 @@ +--- +title: GraphQL API Overview +permalink: /v5/api/overview/ +--- + +Our API is generally served via GraphQL at `/api/graphql` on your Coral installation. If you're running Coral locally, this would be https://localhost:8080/api/graphql. + +You can enable the GraphiQL interface at https://localhost:3000/graphiql (Note the port number here is not 8080, this is because this route is directly served by the server, and not the webpack development server) when running in development to access a GraphQL playground to use with documentation provided in the sidebar on what edges are available to you. You can do this by setting `ENABLE_GRAPHIQL=true`. **(🚨 Note 🚨) we do not recommend using this in production environments as it disables many safety features used by the application**. + +## Making your first request + +To learn a bit about how to interact with Coral, we'll query for comments on a +page of Coral. + +The GraphQL endpoint we have can be used with any HTTP client available, but our +examples below will use the common `curl` tool: + +```sh +curl --request POST \ + --url "http://localhost:8080/api/graphql" \ + --header "content-type: application/json" \ + --data '{"query":"query GetComments($url: String!) {story(url: $url) { id metadata { title } url comments { nodes { id body author { id username } } } } }","variables":{"url":"http://localhost:8080/"},"operationName":"GetComments"}' +``` + +When you unpack that, it's really quite simple. We're executing a `POST` request +to the `/api/graphql` route of the local Talk server with the GraphQL +request we want to make. It's composed of the `query`, `variables`, and +`operationName`. + +```graphql +query GetComments($url: String!) { + story(url: $url) { + metadata { + title + } + url + comments { + nodes { + body + author { + username + } + } + } + } +} +``` + +We are grabbing the asset with the specified `$url`, and grabbing it's title and the comments under it. + +We can then also specify our variables to the query being executed (in this +case, the url for the page where we have comments on our local install of Coral): + +```json +{ + "url": "http://localhost:8080/" +} +``` + +It's also sometimes common to have multiple queries within a query, which is +where the `operationName` comes into play, where we simply specify the named +query that we want to execute (in this case, `GetComments`). + +To get a deeper understanding of GraphQL queries, read up on +[GraphQL Queries and Mutations](http://graphql.org/learn/queries/). + +## Understanding the response + +Once you completed the above GraphQL query with `curl`, you'll get a response +sort of like this: + +```json +{ + "data": { + "story": { + "metadata": { + "title": "Coral 5.0 – Embed Stream" + }, + "url": "http://localhost:8080/", + "comments": { + "nodes": [ + { + "body": "First comment!", + "author": { + "username": "wyatt.johnson" + } + } + ] + } + } + } +} +``` + +All of the parameters you requested should be available under the `data` +property. Any errors that you get would appear in a `errors` array at the top +level, like this: + +```json +{ + "errors": [ + { + "message": "The specified story URL does not exist in the permitted domains list.", + "locations": [ + { + "line": 2, + "column": 3 + } + ], + "path": ["story"], + "extensions": { + "code": "STORY_URL_NOT_PERMITTED", + "id": "e255e860-d3ab-11e9-acdf-b9e9700f06fa", + "type": "INVALID_REQUEST_ERROR", + "message": "The specified story URL does not exist in the permitted domains list." + } + } + ], + "data": { + "story": null + } +} +``` + +You should know that any property that is marked with a `!` is considered +required, and non-nullable, which means you can always guarantee on it being +there in your request if there were no errors. + +## Authorizing a request + +Some queries you may notice seem to return an error of +`USER_NOT_ENTITLED`. It's likely the case that you are making a request to a +route that requires authorization. You can perform authorization a few ways in +Talk. + +Essentially, you need to get access to a JWT token that you can use to authorize +your requests. + +```sh +curl --request POST \ + --url http://localhost:3000/api/auth/local \ + --header 'content-type: application/json' \ + --data '{ "email": "${EMAIL}", "password": "${PASSWORD}"}' +``` + +Which returns a response similar to: + +```json +{ + "token": "${TOKEN}" +} +``` + +Where `${EMAIL}` is the email address of an admin user, and `${PASSWORD}` is the password for that admin user. This will generate a short term token (valid for 90 days). To generate a long lived access token (or Personal Access Token), you have to exchange the token generated above to create a new long lived token: + +```sh +curl --request POST \ + --url "http://localhost:3000/api/graphql" \ + --header 'authorization: Bearer ${TOKEN}' \ + --header 'content-type: application/json' \ + --data '{"query":"mutation CreateAccessToken { createToken(input: { clientMutationId: \"\", name: \"My PAT\" }) { signedToken }}","operationName":"CreateAccessToken"}' +``` + +Which returns a response similar to: + +```json +{ + "data": { + "createToken": { + "signedToken": "${TOKEN}" + } + } +} +``` + +Where `${TOKEN}` in the request being from the previous set of login steps and returning a new `signedToken` as `${TOKEN}` which can be used instead of the previous `${TOKEN}` value in the below examples. + +Once you have your access token, you can substitute it as `${TOKEN}` in your +`curl` request as follows: + +### Bearer Token + +```sh +curl --request POST \ + --url "http://localhost:8080/api/graphql" \ + --header "content-type: application/json" \ + --header "Authorization: Bearer ${TOKEN}" \ + --data '{"query":"query GetComments($url: String!) {story(url: $url) { id metadata { title } url comments { nodes { id body author { id username } } } } }","variables":{"url":"http://localhost:8080/"},"operationName":"GetComments"}' +``` + +### Cookie + +```sh +curl --request POST \ + --url "http://localhost:8080/api/graphql" \ + --header "content-type: application/json" \ + --cookie "authorization=${TOKEN}" + --data '{"query":"query GetComments($url: String!) {story(url: $url) { id metadata { title } url comments { nodes { id body author { id username } } } } }","variables":{"url":"http://localhost:8080/"},"operationName":"GetComments"}' +``` + +## Persisted Queries + +You might see an error like `RAW_QUERY_NOT_AUTHORIZED`. This means that you attempted to use either no token, or a token from a user without admin privileges. In Coral, we whitelist the GraphQL mutations and queries that are performed by the applications for security reasons meaning that only admin users can make arbitrary queries against the GraphQL API. diff --git a/docs/source/version-5-installation.md b/docs/source/version-5-installation.md index 1a600c188..516160f1c 100644 --- a/docs/source/version-5-installation.md +++ b/docs/source/version-5-installation.md @@ -26,9 +26,7 @@ Preview Coral easily by running Coral via a Heroku App: You can install Coral using Docker or via Source. We recommend Docker, as it provides the easiest deployment solution going forward, as all the dependencies are baked and shipped with the provided -[coralproject/talk:next](https://hub.docker.com/r/coralproject/talk) image. -When v5 releases to master, you'll be able to select it using -`coralproject/talk:5`. +[coralproject/talk:5](https://hub.docker.com/r/coralproject/talk) image. ### Docker @@ -48,7 +46,7 @@ cat > docker-compose.yml < ``` -> **NOTE:** Replace the value of `{{ CORAL_DOMAIN_NAME }}` with the location of your running instance of Coral. - -## Single Sign On - -In order to allow seamless connection to an existing authentication system, -Coral utilizes the industry standard [JWT Token](https://jwt.io/) to connect. To -learn more about how to create a JWT token, see [this introduction](https://jwt.io/introduction/). - -1. Visit: `https://{{ CORAL_DOMAIN_NAME }}/admin/configure/auth` -2. Scroll to the `Login with Single Sign On` section -3. Enable the Single Sign On Authentication Integration -4. Enable `Allow Registration` -5. Copy the string in the `Key` box -6. Click Save - -> **NOTE:** Replace the value of `{{ CORAL_DOMAIN_NAME }}` with the location of your running instance of Coral. - -You will then have to generate a JWT with the following claims: - -- `jti` (_optional_) - A unique ID for this particular JWT token. We recommend - using a [UUID](https://en.wikipedia.org/wiki/Universally_unique_identifier) - for this value. Without this parameter, the logout functionality inside the - embed stream will not work and you will need to call logout on the embed - itself. -- `exp` (_optional_) - When the given SSO token should expire. This is - specified as a unix time stamp in seconds. Once the token has expired, a new - token should be generated and passed into Coral. Without this parameter, the - logout functionality inside the embed stream will not work and you will need - to call logout on the embed itself. -- `iat` (_optional_) - When the given SSO token was issued. This is required to - utilize the automatic user detail update system. If this time is newer than - the time we received the last update, the contents of the token will be used - to update the user. -- `user.id` (**required**) - the ID of the user from your authentication system. - This is required to connect the user in your system to allow a seamless - connection to Coral. -- `user.email` (**required**) - the email address of the user from your - authentication system. This is required to facilitate notification email's - about status changes on a user account such as bans or suspensions. -- `user.username` (**required**) - the username that should be used when being - presented inside Coral to moderators and other users. -- `user.badges` (_optional_) - array of strings to be displayed as badges beside - username inside Coral, visible to other users and moderators. For example, to indicate - a user's subscription status. -- `user.role` (_optional_) - one of "COMMENTER", "STAFF", "MODERATOR", "ADMIN". Will create/update - Coral user with this role. - -An example of the claims for this token would be: - -```json -{ - "jti": "151c19fc-ad15-4f80-a49c-09f137789fbb", - "exp": 1572172094, - "iat": 1562172094, - "user": { - "id": "628bdc61-6616-4add-bfec-dd79156715d4", - "email": "bob@example.com", - "username": "bob" - } -} -``` - -With the claims provided, you can sign them with the `Key` obtained from the -Coral administration panel in the previous steps with a `HS256` algorithm. This -token can be provided in the above mentioned embed code by adding it to the -`createStreamEmbed` function: - -```js -Coral.createStreamEmbed({ - // Don't forget to include the parameters from the - // "Embed On Your Site" section. - accessToken: "{{ SSO_TOKEN }}" -}); -``` - -Or by calling the `login/logout` method on the embed object: - -```js -var embed = Coral.createStreamEmbed({ - // Don't forget to include the parameters from the - // "Embed On Your Site" section. -}); - -// Login the current embed with the generated SSO token. -embed.login("{{ SSO_TOKEN }}"); - -// Logout the user. -embed.logout(); -``` - -### SSO Login Prompts - -In order to handle login prompts (e.g. a user clicks on the sign in button) you can listen to the `loginPrompt` event. - -```js -var embed = Coral.createStreamEmbed({ - // Don't forget to include the parameters from the - // "Embed On Your Site" section. - events: function(events) { - events.on("loginPrompt", function() { - // Redirect user to a login page. - location.href = "http://example.com/login"; - }); - } -}); -``` +> **NOTE:** Replace the value of `{% raw %}{{ CORAL_DOMAIN_NAME }}{% endraw %}` with the location of your running instance of Coral. diff --git a/docs/source/version-5-sso.md b/docs/source/version-5-sso.md new file mode 100644 index 000000000..772800d4b --- /dev/null +++ b/docs/source/version-5-sso.md @@ -0,0 +1,127 @@ +--- +title: Single Sign On +permalink: /v5/integrating/sso/ +--- + +In order to allow seamless connection to an existing authentication system, +Coral utilizes the industry standard [JWT Token](https://jwt.io/) to connect. To +learn more about how to create a JWT token, see [this introduction](https://jwt.io/introduction/). + +1. Visit: `https://{{ CORAL_DOMAIN_NAME }}/admin/configure/auth` +2. Scroll to the `Login with Single Sign On` section +3. Enable the Single Sign On Authentication Integration +4. Enable `Allow Registration` +5. Copy the string in the `Key` box +6. Click Save + +> **NOTE:** Replace the value of `{{ CORAL_DOMAIN_NAME }}` with the location of your running instance of Coral. + +You will then have to generate a JWT with the following claims: + +- `jti` (_optional_) - A unique ID for this particular JWT token. We recommend + using a [UUID](https://en.wikipedia.org/wiki/Universally_unique_identifier) + for this value. Without this parameter, the logout functionality inside the + embed stream will not work and you will need to call logout on the embed + itself. +- `exp` (_optional_) - When the given SSO token should expire. This is + specified as a unix time stamp in seconds. Once the token has expired, a new + token should be generated and passed into Coral. Without this parameter, the + logout functionality inside the embed stream will not work and you will need + to call logout on the embed itself. +- `iat` (_optional_) - When the given SSO token was issued. This is required to + utilize the automatic user detail update system. If this time is newer than + the time we received the last update, the contents of the token will be used + to update the user. +- `user.id` (**required**) - the ID of the user from your authentication system. + This is required to connect the user in your system to allow a seamless + connection to Coral. +- `user.email` (**required**) - the email address of the user from your + authentication system. This is required to facilitate notification email's + about status changes on a user account such as bans or suspensions. +- `user.username` (**required**) - the username that should be used when being + presented inside Coral to moderators and other users. +- `user.badges` (_optional_) - array of strings to be displayed as badges beside + username inside Coral, visible to other users and moderators. For example, to indicate + a user's subscription status. +- `user.role` (_optional_) - one of "COMMENTER", "STAFF", "MODERATOR", "ADMIN". Will create/update + Coral user with this role. + +An example of the claims for this token would be: + +```json +{ + "jti": "151c19fc-ad15-4f80-a49c-09f137789fbb", + "exp": 1572172094, + "iat": 1562172094, + "user": { + "id": "628bdc61-6616-4add-bfec-dd79156715d4", + "email": "bob@example.com", + "username": "bob" + } +} +``` + +With the claims provided, you can sign them with the `Key` obtained from the +Coral administration panel in the previous steps with a `HS256` algorithm. This +token can be provided in the above mentioned embed code by adding it to the +`createStreamEmbed` function: + +```js +Coral.createStreamEmbed({ + // Don't forget to include the parameters from the + // "Embed On Your Site" section. + accessToken: "{{ SSO_TOKEN }}" +}); +``` + +Or by calling the `login/logout` method on the embed object: + +```js +var embed = Coral.createStreamEmbed({ + // Don't forget to include the parameters from the + // "Embed On Your Site" section. +}); + +// Login the current embed with the generated SSO token. +embed.login("{{ SSO_TOKEN }}"); + +// Logout the user. +embed.logout(); +``` + +## External Integrations + +You can integrate directly with the Coral GraphQL API in order to facilitate +account updates for your users when using Coral SSO. The relevant mutations are +as follows: + +- `updateUserUsername` lets you update a given user with a new username using + an admin token. +- `updateUserEmail` lets you update a given user with a new email address + using an admin token. +- `deleteUser` lets you delete a given account using an admin token. + Note that even with an admin token, you may not delete yourself via + this method, and instead must use the `requestAccountDeletion` + mutation instead. This differs from the `requestAccountDeletion` as + it does the operation immediately instead of scheduling it as + `requestAccountDeletion` does. +- `requestUserCommentsDownload` lets you retrieve a given account's comments download. This mutation will provide you with a `archiveURL` that can be used to download a ZIP file containing the user's comment export. + +If you're unsure on how to call GraphQL API's, refer to the section here on [Making your first GraphQL request](/talk/v5/api/overview/#making-your-first-request). + +## Login Prompts + +In order to handle login prompts (e.g. a user clicks on the sign in button) you can listen to the `loginPrompt` event. + +```js +var embed = Coral.createStreamEmbed({ + // Don't forget to include the parameters from the + // "Embed On Your Site" section. + events: function(events) { + events.on("loginPrompt", function() { + // Redirect user to a login page. + location.href = "http://example.com/login"; + }); + } +}); +``` diff --git a/docs/themes/coral/layout/partial/sidebar.swig b/docs/themes/coral/layout/partial/sidebar.swig index 3f85bd4f3..1da7112f2 100644 --- a/docs/themes/coral/layout/partial/sidebar.swig +++ b/docs/themes/coral/layout/partial/sidebar.swig @@ -1,7 +1,7 @@