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.
handleClientLoad()).