0

I need some help getting the Google API javascript library (taken from https://apis.google.com/js/api.js) running inside Lightning Web Components so I can do an OAuth authentication with Google (specifically for Google Calendar).

It's my understanding that I can't reference an external 3rd party library so I have downloaded the google api JS into a static resource, taken from here: https://apis.google.com/js/api.js

This library is referenced in this sample code from Google: https://developers.google.com/calendar/quickstart/js#python-3.x

Here's my LWC component that uses platformResourceLoader to load the static resource and call handleClientLoad()

import { LightningElement } from 'lwc';

import gapiLibrary from '@salesforce/resourceUrl/gapi';
import { loadScript } from 'lightning/platformResourceLoader';

export default class oauth extends LightningElement {

        renderedCallBackCalled = false;

        renderedCallback() {

            if (this.renderedCallBackCalled) {
                return;
            }

            try {
                this.renderedCallBackCalled = true;
        
                loadScript(this, gapiLibrary)
                    .then(() => {
                        this.handleClientLoad();
                    })
                    .catch(error => {
                        console.log('oauth.renderedCallback: error: ' + error);
                    });

            } catch (error) {
                console.log('oauth.renderedCallback: error: ' + error);
            }
        }

      // On load, called to load the auth2 library and API client library.
      handleClientLoad() {
        try {
            // Initializes the API client library and sets up sign-in state listeners
            gapi.load('client:auth2', function() {

                // Console Error: Access to XMLHttpRequest at 'https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.FQMyBOWbNKQ.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=wQ/rs=AGLTcCN26pA1ff1pmP_btrYNbcyVNWJGOQ/cb=gapi.loaded_0' from origin 'https://10724769canadainc-dev-ed.lightning.force.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

                });
        } catch (error) {
            console.log('oauth.handleClientLoad: error: ' + error);
        }
      }

}

I've added a CSP policy to https://apis.google.com but I'm getting a CORS error in the console:

Access to XMLHttpRequest at 'https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.FQMyBOWbNKQ.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=wQ/rs=AGLTcCN26pA1ff1pmP_btrYNbcyVNWJGOQ/cb=gapi.loaded_0' from origin 'https://10724769canadainc-dev-ed.lightning.force.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2
  • Your LWC code looks like it's on the right track, but if you look at the documentation, you need to initialize the API first (see handleClientLoad()). – nbrown Mar 8 at 13:58
  • Thanks @nbrown for the tip - that was helpful. I implemented that function, and added a CSP policy, but when the callback function runs, the console reports a CORS error: Access to XMLHttpRequest at 'apis.google.com/_/scs/apps-static/_/js/…' from origin '10724769canadainc-dev-ed.lightning.force.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Any thoughts on how to work around this? – Justin Clarke Mar 9 at 0:11
0

This might seem dumb but when you're creating your "CSP Trusted Site Definition", try removing the "https://" so that it's just "apis.google.com". For some reason, this works for me when invoking resources from LWC, but using "https://" doesn't.

1
  • Thanks for your tip - unfortunately that didn't seem to make a difference – Justin Clarke Apr 2 at 22:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.