Are you looking for a option to embed dashboards with out utilizing OIDC authentication? Look no additional; we current another authentication methodology by way of JWT. We beforehand shared neighborhood articles that will help you perceive the embedding state of affairs use case. The target is to embed analytical dashboards and supply them inside your platform. To attain this, you historically want to make use of your OpenID Join (OIDC) or a customized Identification Supplier (IdP) resolution to handle Gooddata Cloud authentication. This enables customers to log in utilizing their present credentials from numerous IdPs, reminiscent of Okta or Auth0. Discover these articles for extra insights:

This follow-up article is your complete information to attaining a profitable embedded dashboard state of affairs utilizing JWT (together with making a JWK and JWT) authentication as an alternative of OIDC.

Why Select JWT?

JWT is the go-to possibility in case you lack an OpenID Join (OIDC) infrastructure or want to keep away from third-party options. This is why:

Self-Contained & Stateless: JWTs are self-contained, which means all crucial info is throughout the token itself. They’re additionally stateless, which simplifies authentication.

Flexibility: JWTs supply flexibility in dealing with authentication with out the complexities of a customized OIDC software or reliance on exterior OIDC suppliers.

Reliability: Whether or not you are growing APIs, implementing Single Signal-On (SSO), or dealing with distributed authentication, JWTs are dependable and adaptable.

Customization: JWTs permit you to set token expiration instances, select totally different signing algorithms, and get rid of the necessity for complicated token trade steps.

Why Not Select JWT?

Whereas JWTs supply benefits, they’ve limitations:

Statelessness: Whereas statelessness may be a bonus, it can be a disadvantage. As soon as a JWT is issued, you can’t change its content material. If you might want to revoke or modify entry for a person, you will should depend on the token’s expiration time or use a token revocation listing. Alternatively, create one other one.

Key Administration: The safety of JWTs depends closely on key administration. Safeguarding the JWTs and personal key used to signal tokens is essential, as a compromised key may result in unauthorized entry.

3 Steps To Embed a Dashboard in a Customized Software

Step 1: Create a person in GoodData group metadata

PUT /api/v1/entities/customers:

{
   "knowledge":{
      "id":"john.doe",
      "sort":"person",
      "attributes":{
         "authenticationId":"instance",
         "electronic mail":"john.doe@instance.com",
         "firstname":"John",
         "lastname":"Doe"
      },
      "relationships":{
         "userGroups":{
            "knowledge":[
               {
                  "id":"adminGroup",
                  "type":"userGroup"
               }
            ]
         }
      }
   }
}

Observe: authenticationId is optionally available.

To make use of a JWT token in GoodData, you should have an present person ID throughout the GoodData group. It is because the sub-claim (topic) is required. Moreover, it’s a necessity to arrange permissions and person scopes prematurely. You are able to do this both throughout the person creation course of, the place you may straight assign the person to particular teams, or at a later stage by configuring particular person person permissions.

Step 2: Create a JWK and JWT by way of Python Script

Generate an RSA Key Pair:

private_key = rsa.generate_private_key(
    public_exponent=65537,
    key_size=dimension,
)

Create a JSON Internet Key (JWK) from the general public key:

jwk_dict = make_jwk_from_public_key(public_key_data, child=child)

The code converts the general public key (public_key_data) right into a JWK format utilizing our customized make_jwk_from_public_key perform. The JWK is then saved within the jwk_dict variable.

Necessary: Child (key identifier) and Alg (signing algorithm) within the JWK should match the corresponding values used within the JWT for correct performance.

The output (JWK):

{
    "e": "AQAB",
    "child": "doe_python",
    "kty": "RSA",
    "n": "uKbYnV1DQ0PfJPbvkmol9khnr7TX7TZCZKKbQjAwWzNEi5oq2V7xz5XIQ_9Fm-yTDFhAduBN9YBYdcdfFdR1FKYnKrXfssGVOR1q6hSseQ7AVPRFV12Ln7xao0gJSIVrABTOtBkh2crO0TNeTcU8eueqX_Th6bXbrfov75j…8XfqmHYDtYFkT4CYxfM8rvzCkZ8eC5S5zDZ9kOf1eYO97YufwBTWEthBL4rQ",
    "alg": "RS256"
}

Set JWK in your GoodData group (PUT api/v1/entities/jwks/your_jwk_id):

{
   "knowledge":{
      "id":"doe_python_id",
      "sort":"jwk",
      "attributes":{
         "content material":{
            "kty":"RSA",
            "alg":"RS256",
            "use":"sig",
            "n":"uKbYnV1DQ0PfJPbvkmol9khnr7TX7TZCZKKbQjAwWzNEi5oq2V7xz5XIQ_9Fm-yTDFhAduBN9YBYdcdfFdR1FKYnKrXfssGVOR1q6hSseQ7AVPRFV12Ln7xao0gJSIVrABTOtBkh2crO0TNeTcU8eueqX_Th6bXbrfov75j…8XfqmHYDtYFkT4CYxfM8rvzCkZ8eC5S5zDZ9kOf1eYO97YufwBTWEthBL4rQ",
            "e":"AQAB",
            "child":"doe_python"
         }
      }
   }
}

Create a JWT Header and Payload:

header = {
    "alg": "RS256",
    "typ": "JWT",
    "child": "doe_python"
}

payload = {
    "sub": "john.doe",
    "identify": "John",
    "jti": jti,
    "iat": datetime.utcnow(),
    "exp": datetime.utcnow() + expiration
}

On this instance, we outline the JWT header and payload. The header specifies the signing algorithm (“RS256”) and the sort (“JWT”). The payload comprises numerous claims, reminiscent of topic (“sub”) = “userId”, identify, JWT ID (“jti”), issued at (“iat”), and expiration (“exp”).

Necessary: Child (key identifier) and Alg (signing algorithm) within the JWK should match the corresponding values used within the JWT for correct performance.

JWT Signature:

jwt_token = jwt.encode(payload, private_key, algorithm="RS256", headers=header)

This generates the JWT and indicators it with the personal key. It combines the header and the payload, applies the “RS256” algorithm, and creates the signature utilizing the private_key. The JWT is then verified on GoodData’s aspect utilizing the general public key offered by JWK (see the step Create a JSON Internet Key)

On the finish easy printing the JWT:

print("JWT legitimate from:", datetime.utcnow())
print("JWT legitimate to:", datetime.utcnow() + expiration)
print("JWT Token:", jwt_token)

Step 3: Mix iframe and JWT

Take a look at if JWT is working:

curl --request GET 
  --header "Authorization:bearer eyJhbGciOiJSUzI1NiIsImtpZCI6ImhpbHNlX3B5dGhvbiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJsdWJvcy5oaWxzZSIsIm5hbWUiOiJMdWJvcyIsImp0aSI6ImthY2VyZG9uYWxkMjIiLCJpYXQiOjE2OTcxODU0MDksImV4cCI6MTcwMDc4NTQwOX0.bKfCd58MJTudQMVVbemaHhP5fMMHIcnZL9kAFvGFoOWpWRiekvCZlqehbCijK4SGtlH_nerTPTe9YLAaHNZ9SD-szD2HHOAXmmkfcq66J6O2jB1Zlb_ZOtiQ8kN9yKV4kYRDgmlkPR2UmkIah80sJKaa…KjYdW5Md0UMCnmXGPwVSzUpl8DiO6_Dr2xnvr4HuHX7hu9DS3Q" 
  --header 'Content material-Sort: software/vnd.gooddata.api+json' 
  https://jdoe.gooddata.com/api/v1/profile

Anticipated output (200 OK):

{
   "organizationId":”jdoe”,
   "organizationName":"jdoe",
   "identify":"John",
   "userId":"john.doe",
   "permissions":[
      "MANAGE",
      "SELF_CREATE_TOKEN"
   ],
  ………..
……………
     }
   }
}

JWT token is being despatched within the header right here. Put together the dashboard which you wish to embed into your localhost software. On this instance, we created a easy dashboard and copied the iframe from GoodData embed dashboard dialog.

For extra details about iframe, examine our public documentation.

Within the following script, we have straight included the JWT as a relentless throughout the code. Keep in mind that that is only a demonstration and is not appropriate for manufacturing use.

<iframe src="https://jdoe.gooddata.com/dashboards/embedded/#/workspace/c98c4e4ef6054101ba92a2ebb8c404ee/dashboard/28bcd3b9-5595-4336-9cec-60a2aad4546f?showNavigation=true&setHeight=700&apiTokenAuthentication=true" peak="700px" width="100%" frameborder="0" id="embedded-app-frame"></iframe>
<script>
   console.log("Setup dad or mum body message listener");

   window.addEventListener(
       "message",
       perform (occasion) {
           console.log("Submit message acquired", occasion);

           const eventName = occasion.knowledge.gdc?.occasion.identify;

           
           const existingJwt = "eyJhbGciOiJSUzI1NiIsImtpZCI6ImhpbHNlX3B5dGhvbiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJsdWJvcy5oaWxzZSIsIm5hbWUiOiJMdWJvcyIsImp0aSI6ImthY2VyZG9uYWxkMjIiLCJpYXQiOjE2OTcxODU0MDksImV4cCI6MTcwMDc4NTQwOX0.bKfCd58MJTudQMVVbemaHhP5fMMHIcnZL9kAFvGFoOWpWRiekvCZlqehbCijK4SGtlH_nerTPTe9YLAaHNZ9SD-szD2HHOAXmmkfcq66J6O2jB1Zlb_ZOtiQ8kN9yKV4kYRDgmlkPR2UmkIah80sJKaa…KjYdW5Md0UMCnmXGPwVSzUpl8DiO6_Dr2xnvr4HuHX7hu9DS3Q"; 

           if (eventName === "listeningForApiToken" || eventName === "apiTokenIsAboutToExpire") {
               const postMessageStructure = {
                   gdc: {
                       product: "dashboard",
                       occasion: {
                           identify: "setApiToken",
                           knowledge: {
                               token: "eyJhbGciOiJSUzI1NiIsImtpZCI6ImhpbHNlX3B5dGhvbiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJsdWJvcy5oaWxzZSIsIm5hbWUiOiJMdWJvcyIsImp0aSI6ImthY2VyZG9uYWxkMjIiLCJpYXQiOjE2OTcxODU0MDksImV4cCI6MTcwMDc4NTQwOX0.bKfCd58MJTudQMVVbemaHhP5fMMHIcnZL9kAFvGFoOWpWRiekvCZlqehbCijK4SGtlH_nerTPTe9YLAaHNZ9SD-szD2HHOAXmmkfcq66J6O2jB1Zlb_ZOtiQ8kN9yKV4kYRDgmlkPR2UmkIah80sJKaa…KjYdW5Md0UMCnmXGPwVSzUpl8DiO6_Dr2xnvr4HuHX7hu9DS3Q"",
                               sort: "jwt",
                               secondsBeforeTokenExpirationToEmitReminder: 60,
                           }
                       }
                   }
               };

               console.log("Sending present JWT to embedded window");

               const origin = "*";
               const iframe = doc.getElementById("embedded-app-frame").contentWindow;
               iframe.postMessage(postMessageStructure, origin);
           }
       },
       false
   );
</script>

Please discover that apiTokenAuthentication=true have to be added into the iframe src url. This enables the usage of injected token for authentication**.** If you happen to entry the applying dashboard, you will end up with an authenticated person and a completely useful embedded dashboard. See the screenshot beneath for reference.

Further Assets and Helpful Hyperlinks

X.509 Certificates

We offer two scripts in your consideration. The primary, “example_without_X509,” doesn’t make the most of an X.509 certificates. Conversely, the second, “example_with_X509,” contains this extra safety function. It is price noting that the script utilizing the X.509 certificates supplies a extra strong safety resolution.

X.509 certificates play a necessary position in digital safety by facilitating safe communication and sustaining knowledge integrity throughout numerous functions. They’re instrumental in verifying the authenticity of the events concerned and guaranteeing the confidentiality and integrity of the information exchanged. The X.509 certificates contributes to a sturdy and safe authentication course of, notably when coping with potential safety threats.

The X.509 certificates provides a further layer of safety to the JWT-based authentication, reinforcing its reliability and trustworthiness.

JWT in JavaScript

The Create JWK and JWT in JavaScript article describes how one can create and deploy a JSON Internet Key (JWK) and generate a JSON Internet Token (JWT) purely in JavaScript. Chances are you’ll wish to use this methodology when embedding GoodData utilizing iframes or React SDK. Nevertheless the JWK era ought to at all times run on the backend (nodejs service) separated from the frontend. This can be a quite various take a look at or demonstration instance and suggestion, methods to create a JWT additionally in a special language. We don’t advocate utilizing such examples on manufacturing.

Debugging

We’re continuously bettering responses that will help you in case you face any points throughout the authentication course of for embedded dashboards. As an example, here is a glimpse into debugging instruments, illustrating a state of affairs the place an expired JWT token is served or when invalid claims are offered within the JWT. Please share your suggestions in case you want any assist. We’re right here to help.

Function Observe-up

We’re actively exploring the choice of supporting customized JWKS retrieval endpoints to cater to your automation wants. This contains making key rotation a seamless course of, thereby enhancing your general management and suppleness.

You’d have the flexibility to specify your customized HTTPS endpoint within the GoodData software settings. As soon as configured, the communication between the GoodData backend and your endpoint would make sure that keys are mechanically retrieved and up to date, aligning with the newest safety requirements.

Wrapping Up

JWT authentication simplifies the method of embedding GoodData dashboards into your platform. It affords flexibility, self-containment, and reliability with out the necessity for a customized OIDC infrastructure or reliance on third-party options.

On this article, we have outlined the required steps for working with JWT authentication within the GoodData group. We have coated making a person, organising a JWK, associating the person with JWT, and utilizing the JWT inside an embedded software. Be happy to discover the hooked up recordsdata and do not hesitate to achieve out when you’ve got any suggestions or questions.

You too can discover recordsdata within the open-source repository and check out it for your self in our free trial.