Closed jgauntz closed 5 months ago
@jgauntz, I want to give you some background on how Custom Functions with SharedRuntime will be working. If you have properly enabled SharedRuntime for Custom Functions (I don't see the details of the manifest.xml) then Custom Function will be running in a Browser WebView. So, the authentication code would be the same as you do for Browser. Also, I am not able to understand the current problem. Can you please describe the problem you are facing in detail? Can you paste the CORS error you are getting currently?
@jeremy-msft @chiz-ms @madhavagrawal17 I have the same issue
Making an API call with Auth headers does not work with custom functions.
Can you give an example of a POST call with an authorization header that works?
I am having a terrible time getting my excel custom function to call an API with basic authentication in the header. I get a CORs error. To the best of my knowledge, I have configured my function to use the Javascript Shared Runtime as I am able to set and retrieve values from global memory (window.sharedState). Below is the code from my custom function - I have removed the key used for basic authentication. Any help is greatly appricated. I have also attached my manifest.xml file and my webpack.config.js file.
manifest.xml <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
webpack.config.js / eslint-disable no-undef /
const devCerts = require("office-addin-dev-certs"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const CustomFunctionsMetadataPlugin = require("custom-functions-metadata-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin");
const urlDev = "https://localhost:3000/"; const urlProd = "https://www.contoso.com/"; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION
/ global require, module, process, __dirname /
async function getHttpsOptions() { const httpsOptions = await devCerts.getHttpsServerOptions(); return { cacert: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert }; }
module.exports = async (env, options) => { const dev = options.mode === "development"; const buildType = dev ? "dev" : "prod"; const config = { devtool: "source-map", entry: { polyfill: ["core-js/stable", "regenerator-runtime/runtime"], functions: "./src/functions/functions.js", taskpane: "./src/taskpane/taskpane.js", commands: "./src/commands/commands.js", }, output: { devtoolModuleFilenameTemplate: "webpack:///[resource-path]?[loaders]", clean: true, }, resolve: { extensions: [".ts", ".tsx", ".html", ".js"], }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"], }, }, }, { test: /.html$/, exclude: /node_modules/, use: "html-loader", }, { test: /.(png|jpg|jpeg|gif|ico)$/, type: "asset/resource", generator: { filename: "assets/[name][ext][query]", }, }, ], }, plugins: [ new CustomFunctionsMetadataPlugin({ output: "functions.json", input: "./src/functions/functions.js", }),
};
return config; };
My custom function
let url = "https://servicechannel.atlassian.net/rest/api/2/project"; var options = { method: 'GET', headers: { 'Host': 'servicechannel.atlassian.net', 'Authorization': 'Basic'
}
};
return new Promise(function (resolve, reject) { fetch(url, options) .then(function (response){ window.sharedState = JSON.stringify(response.json()); } ) })