Getting Signed Request in Angular 5 Web app integrated with Salesforce Canvas

Question

I am trying to integrate our existing Angular 5 web application into Salesforce canvas. I created Salesforce connected app with OAUTH setting, provided canvas app URL as one of route of existing angular 5 web application.

When I preview the canvas application in "app previewer", it does route to our application (as I am priting simple text on page), but I am not able to read Salesforce context or even get "signed_request".

This is how I tried to get access to "signed_request", but i get error as "ERROR TypeError: Cannot read property 'client' of undefined". I did import "sfdc" from canvas-js-sdk.

import * as sfdc from '@salesforce/canvas-js-sdk';

 sfdc.canvas.client.refreshSignedRequest(function(data) {
      if (data.status === 200) {

        var signedRequest =  data.payload.response;
        console.log(signedRequest);
        var part = signedRequest.split('.')[1];
        var obj = JSON.parse(sfdc.canvas.decode(part));
        console.log(obj);
      }
    });

Can someone tell what am I missing here? or Is there another way, I can get hold of "signed_request"?

Thanks in advance.

Salesforce, Canvas, Integration, Web app, Angular 5, sfdc, force.com

Alorien · Answer 1 · 2020-09-01T09:14:11.677

I believe that you just did uncorrectly import JavaScript SDK. Please read this article: https://medium.com/@clintpitzak/how-to-use-external-javascript-libraries-in-angular-8-247baacbdccf i hope, it will be helpfull.

Firstly, you need do declare canvas-app.js in angular.json like as script js.

],
            "scripts": [
              "./node_modules/@salesforce/canvas-js-sdk/js/canvas-all.js"
]

Also you can provide these scripts in index.html file for example.

<script type="text/javascript" src="scripts.js"></script>

Furher in you component you should declare a variable with global name of this library object

declare var Sfdc: any;

And after it all you could using Sfdc variable in your components.

Example:

ngOnInit(): void {

    Sfdc.canvas.oauth.loggedin();

That's all!

However, when you used a ‘OAuth Webflow (GET)’ Access Method in your connected app -- you can't get a signed rquest. It's different approuch.

At least you could read about this behaviour in description of the refreshSignedRequest method in JavaScriptSDK:

@description Refresh the signed request. Obtain a new signed request on demand. Note the authentication mechanism of the canvas app must be set to SignedRequest and not OAuth.

So, you must use a other approuach, please read this article.

And this.

I hope. it will be helpfull.

Getting Signed Request in Angular 5 Web app integrated with Salesforce Canvas

1 Answers1