Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DX-1679] Update the Tyk Site with Reference #5362

Draft
wants to merge 15 commits into
base: master
Choose a base branch
from

Conversation

DavidRollins
Copy link
Collaborator

@DavidRollins DavidRollins commented Sep 6, 2024

For internal users - Please add a Jira DX PR ticket to the subject!



Preview Link

  1. https://deploy-preview-5362--tyk-docs.netlify.app/docs/nightly/create-account/
  2. https://deploy-preview-5362--tyk-docs.netlify.app/docs/nightly/quickstart-configure-first-api/
  3. https://deploy-preview-5362--tyk-docs.netlify.app/docs/nightly/using-tyk-dashboard/
  4. https://deploy-preview-5362--tyk-docs.netlify.app/docs/nightly/basic-config-and-security/security/authentication-authorization/

Description

  1. We added pages for Getting Started and authentication & authorization
  2. Please explain the change to the reviewer. Pay special attention to changes that are hard to spot, for example:
    1. Structure changes in the menu.yaml. For now, using Yaara's draft structure while I figure out how to manipulate the page generation to allow Home page to showcase side panel.
    2. New Getting Started Pages- "Create Account", "Configure your first API", and "Using Tyk Dashboard"
      1. "Create Account" shows how to create your Tyk account and will serve as one of the first landing pages.
      2. "Configure your first API" is an amalgamation of other pages that help users setup their first API In Tyk Cloud.
      3. "Using Tyk Dashboard" is a draft page that will later serve as a way to navigate the Tyk Dashboard - a full reference to how to use all the buttons on Tyk Dashboard. WIP!
  3. "Authentication and Authorization" page - we have combined information from the product stack -> basic config -> security and put it into this page. I have reformatted this page to read the way we want -> action-oriented headings and progressive disclosure, going from high-level concepts to use cases to advanced use cases.
  4. @letzya @hagartyk (help needed to find any other reviewers)

Screenshots (if appropriate)

     Screenshots seem like they will clutter but can add if needed (let me know)

Checklist

  • I have added a preview link to the PR description.
  • I have reviewed the suggestions made by our AI (PR Agent) and updated them accordingly (spelling errors, rephrasing, etc.)
  • I have reviewed the guidelines for contributing to this repository.
  • I have read the technical guidelines for contributing to this repository.
  • Make sure you have started your change off our latest master.
  • I labeled the PR

Copy link

netlify bot commented Sep 6, 2024

PS. Pls add /docs/nightly to the end of url

Name Link
🔨 Latest commit 2ff7cd7
🔍 Latest deploy log https://app.netlify.com/sites/tyk-docs/deploys/66fac93ed28852000849fb22
😎 Deploy Preview https://deploy-preview-5362--tyk-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@@ -244,7 +244,7 @@ password: foo
### channel

The channel to publish messages to.
This field supports [interpolation functions]({{< ref "/product-stack/tyk-streaming/configuration/common-configuration/interpolation.mdinterpolation#bloblang-queries" >}}).
This field supports [interpolation functions]({{< ref "product-stack/tyk-streaming/configuration/common-configuration/interpolation.md#interpolation#bloblang-queries" >}}).
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Created a separate PR for it #5388. Thanks!!!

@@ -57,7 +57,7 @@ In this example the endpoint caching middleware has been configured to cache all
For ultimate control over what Tyk caches, you should use the advanced configuration options for the per-endpoint cache. You can separately configure, for each HTTP method for an endpoint:
- an individual cache refresh (timeout)
- a list of HTTP response codes that should be cached
- a pattern match to cache only requests containing specific data in the [request body]({{< ref " basic-config-and-security/reduce-latency/caching/advanced-cache#selective-caching-by-body-value" >}})
- a pattern match to cache only requests containing specific data in the [request body]({{< ref "basic-config-and-security/reduce-latency/caching/advanced-cache#selective-caching-by-body-value" >}})
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Created a separate PR for it #5388. Thanks!!!


For programmatic control, configure OAuth 2.0 directly within your API's JSON definition:

```json
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
```json
```yaml

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yaml gives you code highlighting while it doesn't show an error

letzya and others added 3 commits September 9, 2024 22:32
1. Removing unused fields from the front matter section.
2. Put back the orig date
3. Added tags
fixed aliases and description
@letzya
Copy link
Collaborator

letzya commented Sep 9, 2024

Is the AuthN&AuthZ still WIP? not sure about it.
A few thought off the top of my head:

  1. I think we should start with the bearer token before jumping to OAuth2.0
  2. The OAuth grants are at the same level, shouldn't we create some nesting
  3. This section seems like it's in the middle of things https://deploy-preview-5362--tyk-docs.netlify.app/docs/nightly/basic-config-and-security/security/authentication--authorization/#key-points-for-oauth-20-in-tyk
  4. Speaking of progressive disclosure and cognitive load, I feel that Use the Access Token should be in the beginning. We shouldn't teach the users every tiny detail about our auth types but not show them how to use it.
  5. (FYI not related to you but the OpenID connect feature is not good so we want to remove it from the docs)

Copy link
Contributor

@dcs3spp dcs3spp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for submitting PR. Not sure if PR ready for full review yet, but have done an initial review.

For the Authentication & Authorization section have added some thoughts suggestions. Not sure if could divide the content into subpages under an Authentication & Authorization menu folder in API Management section or maybe use a horizontal rule between sections on the single page?

For the Authentication & Authorisation page have reviewed structure with some suggestions and maybe could refactor high level structure as shown below to group into sections:



|- Secure Your APIs

|- Methods or Types as section heading?

|——-OAuth 2.0

|————Include Revoke OAuth Tokens here as sub item here

|——-Basic Authentication

|——-Bearer Tokens

|——-External OAuth Middleware

|——-HMAC Signatures

|——-JSON Web Tokens (JWT)

|——-OpenID Connect (OIDC)

|—-—Mutual TLS (mTLS)
|——-Open (keyless)
|- Custom Authentication Using Plugins
|——-Go Plugins
|——-Python CoProcess and JSVM Plugins
|- Combine Authentication Methods
|- Set Physical Tyk Key Expiry and Deletion


### Understanding the OAuth 2.0 Flow within Tyk

* **Client ID Registration:** Begin by registering a unique Client ID within Tyk for each resource owner.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this section moved to the beginning of Setup your OAuth 2.0 Authorization as an overview and could a diagram accompany explanation to illustrate the flow?


### Configure Notifications

To receive notifications about token changes (e.g., new tokens, refresh tokens) configure the `notifications` section in your API definition:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add an example of notifications section in API Definition


```json
{
"auth_code": "",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update example to show notification change has occurred

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand this comment

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fields in the JSON example are empty, they do not show that a change has occurred and the notification_type field is empty


## Set Up OAuth 2.0 Authorization

Tyk offers comprehensive support for OAuth 2.0, providing two main approaches to integrate this authorization framework:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe start this section with an overview given in section (Understanding the OAuth 2.0 Flow within Tyk) and then group options 1 and 2 under a parent header Integrating OAuth 2.0 With Tyk or something similar?


For programmatic control, configure OAuth 2.0 directly within your API's JSON definition:

```json
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe add a summary explaining what the example configuration shows

2. Go to the Advanced Options panel.
3. Find the Upstream Certificates section and attach the appropriate certificate.

{{< img src="/img/2.10/client_mtls_multiple_auth.png" alt="Static mTLS Configuration" >}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Current image displayed is related to Static mTLS, should it be the image included here?

3. Find the Upstream Certificates section and attach the appropriate certificate.

{{< img src="/img/2.10/client_mtls_multiple_auth.png" alt="Static mTLS Configuration" >}}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the equivalent action for how to achieve in Tyk Operator also be shown here?

https://tyk.io/docs/basic-config-and-security/security/mutual-tls/upstream-mtls/#via-tyk-operator

title: Using Tyk Dashboard
---

The Tyk Dashboard is your central hub for managing APIs, monitoring performance, and configuring security settings. This guide will walk you through the key features available on the Tyk Dashboard.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remember to add accompanying images

- /basic-config-and-security/security/authentication-&-authorization/
---

# Authentication and Authorization in Tyk
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe remove this section title since it duplicates the page title

@dcs3spp dcs3spp changed the title Update the Tyk Site with Reference [DX-1679] Update the Tyk Site with Reference Sep 10, 2024
---


Overview
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be a heading?


{{< img src="/img/2.10/keys_menu.png" alt="Keys Menu" >}}

2. **Click "CREATE"** to generate a new key.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image says "add key", not create

- Self-Managed
- Tyk Cloud
- API Gateway
title: Create Tyk Account
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Title seems a little blunt - perhaps it could be something like "How to Create a Tyk Account"

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


### Step 2: Choose "Start Your 48-hour Free Trial"

On the sign-up page, select the "Start your 48-hour free trial" option to begin your Tyk Cloud experience.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line says "48-hour" trial, but line 27 says "14-day" trial. Are these for different things? It's a bit confusing.


### Step 6: Access the Developer Portal

Once your account is set up, you can access the Tyk Developer Portal. This portal allows you to manage your APIs, view analytics, and customize your API consumer experience.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider changing "API consumer experience" to "the experience for your API consumers" for better readability.

- **Metadata**: Add metadata such as user IDs, which can be used by middleware components.

5. **Click "CREATE"**:
- Once the key is created, a **Key successfully generated** pop-up will be displayed showing your key. **Copy the key** to your clipboard and save it for future reference as it will not be shown again.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems to switch between imperative voice ("Create an API Key") and passive voice ("A pop-up will be displayed"). Could be made all imperative "After creating the key, a success pop-up appears showing your key."

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that all this information is combined onto one page, it's important that folks are sent to the correct part of the page from search results. I assume this would happen, but thought I'd flag it, just in case.


### Personalize the Portal

Go to "Portal Management" to customize the appearance and functionality of your developer portal. Manage API documentation and catalogues to enhance developer experience.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we're defaulting to EN-US now, right? So "catalogues" should be "catalogs"

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we'll need updated screenshots

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants