react-apim-tablestorage sample added
This commit is contained in:
Ejaz Hussain
parent
0b56890d36
commit
ec1e54bf31
|
|
@ -0,0 +1,379 @@
|
|||
require("@rushstack/eslint-config/patch/modern-module-resolution");
|
||||
module.exports = {
|
||||
extends: ["@microsoft/eslint-config-spfx/lib/profiles/react"],
|
||||
parserOptions: { tsconfigRootDir: __dirname },
|
||||
overrides: [
|
||||
{
|
||||
files: ["*.ts", "*.tsx"],
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
project: "./tsconfig.json",
|
||||
ecmaVersion: 2018,
|
||||
sourceType: "module",
|
||||
},
|
||||
rules: {
|
||||
semi: 2, //Added by O3C
|
||||
"react/jsx-no-target-blank": 0, //O3C
|
||||
// Prevent usage of the JavaScript null value, while allowing code to access existing APIs that may require null. https://www.npmjs.com/package/@rushstack/eslint-plugin
|
||||
"@rushstack/no-new-null": 1,
|
||||
// Require Jest module mocking APIs to be called before any other statements in their code block. https://www.npmjs.com/package/@rushstack/eslint-plugin
|
||||
"@rushstack/hoist-jest-mock": 1,
|
||||
// Require regular expressions to be constructed from string constants rather than dynamically building strings at runtime. https://www.npmjs.com/package/@rushstack/eslint-plugin-security
|
||||
"@rushstack/security/no-unsafe-regexp": 1,
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
"@typescript-eslint/adjacent-overload-signatures": 1,
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
//
|
||||
// CONFIGURATION: By default, these are banned: String, Boolean, Number, Object, Symbol
|
||||
"@typescript-eslint/ban-types": [
|
||||
1,
|
||||
{
|
||||
extendDefaults: false,
|
||||
types: {
|
||||
String: {
|
||||
message: "Use 'string' instead",
|
||||
fixWith: "string",
|
||||
},
|
||||
Boolean: {
|
||||
message: "Use 'boolean' instead",
|
||||
fixWith: "boolean",
|
||||
},
|
||||
Number: {
|
||||
message: "Use 'number' instead",
|
||||
fixWith: "number",
|
||||
},
|
||||
Object: {
|
||||
message:
|
||||
"Use 'object' instead, or else define a proper TypeScript type:",
|
||||
},
|
||||
Symbol: {
|
||||
message: "Use 'symbol' instead",
|
||||
fixWith: "symbol",
|
||||
},
|
||||
Function: {
|
||||
message:
|
||||
"The 'Function' type accepts any function-like value.\nIt provides no type safety when calling the function, which can be a common source of bugs.\nIt also accepts things like class declarations, which will throw at runtime as they will not be called with 'new'.\nIf you are expecting the function to accept certain arguments, you should explicitly define the function shape.",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
// RATIONALE: Code is more readable when the type of every variable is immediately obvious.
|
||||
// Even if the compiler may be able to infer a type, this inference will be unavailable
|
||||
// to a person who is reviewing a GitHub diff. This rule makes writing code harder,
|
||||
// but writing code is a much less important activity than reading it.
|
||||
//
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
"@typescript-eslint/explicit-function-return-type": [
|
||||
0, //O3C
|
||||
{
|
||||
allowExpressions: true,
|
||||
allowTypedFunctionExpressions: true,
|
||||
allowHigherOrderFunctions: false,
|
||||
},
|
||||
],
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
// Rationale to disable: although this is a recommended rule, it is up to dev to select coding style.
|
||||
// Set to 1 (warning) or 2 (error) to enable.
|
||||
"@typescript-eslint/explicit-member-accessibility": 0,
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
"@typescript-eslint/no-array-constructor": 1,
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
//
|
||||
// RATIONALE: The "any" keyword disables static type checking, the main benefit of using TypeScript.
|
||||
// This rule should be suppressed only in very special cases such as JSON.stringify()
|
||||
// where the type really can be anything. Even if the type is flexible, another type
|
||||
// may be more appropriate such as "unknown", "{}", or "Record<k,V>".
|
||||
"@typescript-eslint/no-explicit-any": 0, //O3C
|
||||
// RATIONALE: The #1 rule of promises is that every promise chain must be terminated by a catch()
|
||||
// handler. Thus wherever a Promise arises, the code must either append a catch handler,
|
||||
// or else return the object to a caller (who assumes this responsibility). Unterminated
|
||||
// promise chains are a serious issue. Besides causing errors to be silently ignored,
|
||||
// they can also cause a NodeJS process to terminate unexpectedly.
|
||||
"@typescript-eslint/no-floating-promises": 0, // O3C
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
"@typescript-eslint/no-for-in-array": 2,
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
"@typescript-eslint/no-misused-new": 2,
|
||||
// RATIONALE: The "namespace" keyword is not recommended for organizing code because JavaScript lacks
|
||||
// a "using" statement to traverse namespaces. Nested namespaces prevent certain bundler
|
||||
// optimizations. If you are declaring loose functions/variables, it's better to make them
|
||||
// static members of a class, since classes support property getters and their private
|
||||
// members are accessible by unit tests. Also, the exercise of choosing a meaningful
|
||||
// class name tends to produce more discoverable APIs: for example, search+replacing
|
||||
// the function "reverse()" is likely to return many false matches, whereas if we always
|
||||
// write "Text.reverse()" is more unique. For large scale organization, it's recommended
|
||||
// to decompose your code into separate NPM packages, which ensures that component
|
||||
// dependencies are tracked more conscientiously.
|
||||
//
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
"@typescript-eslint/no-namespace": [
|
||||
1,
|
||||
{
|
||||
allowDeclarations: false,
|
||||
allowDefinitionFiles: false,
|
||||
},
|
||||
],
|
||||
// RATIONALE: Parameter properties provide a shorthand such as "constructor(public title: string)"
|
||||
// that avoids the effort of declaring "title" as a field. This TypeScript feature makes
|
||||
// code easier to write, but arguably sacrifices readability: In the notes for
|
||||
// "@typescript-eslint/member-ordering" we pointed out that fields are central to
|
||||
// a class's design, so we wouldn't want to bury them in a constructor signature
|
||||
// just to save some typing.
|
||||
//
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
// Set to 1 (warning) or 2 (error) to enable the rule
|
||||
"@typescript-eslint/no-parameter-properties": 0,
|
||||
// RATIONALE: When left in shipping code, unused variables often indicate a mistake. Dead code
|
||||
// may impact performance.
|
||||
//
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
1,
|
||||
{
|
||||
vars: "all",
|
||||
// Unused function arguments often indicate a mistake in JavaScript code. However in TypeScript code,
|
||||
// the compiler catches most of those mistakes, and unused arguments are fairly common for type signatures
|
||||
// that are overriding a base class method or implementing an interface.
|
||||
args: "none",
|
||||
},
|
||||
],
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
"@typescript-eslint/no-use-before-define": [
|
||||
2,
|
||||
{
|
||||
functions: false,
|
||||
classes: true,
|
||||
variables: true,
|
||||
enums: true,
|
||||
typedefs: true,
|
||||
},
|
||||
],
|
||||
// Disallows require statements except in import statements.
|
||||
// In other words, the use of forms such as var foo = require("foo") are banned. Instead use ES6 style imports or import foo = require("foo") imports.
|
||||
"@typescript-eslint/no-var-requires": "error",
|
||||
// RATIONALE: The "module" keyword is deprecated except when describing legacy libraries.
|
||||
//
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
"@typescript-eslint/prefer-namespace-keyword": 1,
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
// Rationale to disable: it's up to developer to decide if he wants to add type annotations
|
||||
// Set to 1 (warning) or 2 (error) to enable the rule
|
||||
"@typescript-eslint/no-inferrable-types": 0,
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
// Rationale to disable: declaration of empty interfaces may be helpful for generic types scenarios
|
||||
"@typescript-eslint/no-empty-interface": 0,
|
||||
// RATIONALE: This rule warns if setters are defined without getters, which is probably a mistake.
|
||||
"accessor-pairs": 1,
|
||||
// RATIONALE: In TypeScript, if you write x["y"] instead of x.y, it disables type checking.
|
||||
"dot-notation": [
|
||||
1,
|
||||
{
|
||||
allowPattern: "^_",
|
||||
},
|
||||
],
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
eqeqeq: 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"for-direction": 1,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
"guard-for-in": 2,
|
||||
// RATIONALE: If you have more than 2,000 lines in a single source file, it's probably time
|
||||
// to split up your code.
|
||||
"max-lines": ["warn", { max: 2000 }],
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-async-promise-executor": 0, //O3C
|
||||
// RATIONALE: Deprecated language feature.
|
||||
"no-caller": 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-compare-neg-zero": 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-cond-assign": 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-constant-condition": 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-control-regex": 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-debugger": 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-delete-var": 2,
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-duplicate-case": 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-empty": 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-empty-character-class": 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-empty-pattern": 1,
|
||||
// RATIONALE: Eval is a security concern and a performance concern.
|
||||
"no-eval": 1,
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-ex-assign": 2,
|
||||
// RATIONALE: System types are global and should not be tampered with in a scalable code base.
|
||||
// If two different libraries (or two versions of the same library) both try to modify
|
||||
// a type, only one of them can win. Polyfills are acceptable because they implement
|
||||
// a standardized interoperable contract, but polyfills are generally coded in plain
|
||||
// JavaScript.
|
||||
"no-extend-native": 1,
|
||||
// Disallow unnecessary labels
|
||||
"no-extra-label": 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-fallthrough": 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-func-assign": 1,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
"no-implied-eval": 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-invalid-regexp": 2,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
"no-label-var": 2,
|
||||
// RATIONALE: Eliminates redundant code.
|
||||
"no-lone-blocks": 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-misleading-character-class": 2,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
"no-multi-str": 2,
|
||||
// RATIONALE: It's generally a bad practice to call "new Thing()" without assigning the result to
|
||||
// a variable. Either it's part of an awkward expression like "(new Thing()).doSomething()",
|
||||
// or else implies that the constructor is doing nontrivial computations, which is often
|
||||
// a poor class design.
|
||||
"no-new": 1,
|
||||
// RATIONALE: Obsolete language feature that is deprecated.
|
||||
"no-new-func": 2,
|
||||
// RATIONALE: Obsolete language feature that is deprecated.
|
||||
"no-new-object": 2,
|
||||
// RATIONALE: Obsolete notation.
|
||||
"no-new-wrappers": 1,
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-octal": 2,
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
"no-octal-escape": 2,
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-regex-spaces": 2,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
"no-return-assign": 2,
|
||||
// RATIONALE: Security risk.
|
||||
"no-script-url": 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-self-assign": 2,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
"no-self-compare": 2,
|
||||
// RATIONALE: This avoids statements such as "while (a = next(), a && a.length);" that use
|
||||
// commas to create compound expressions. In general code is more readable if each
|
||||
// step is split onto a separate line. This also makes it easier to set breakpoints
|
||||
// in the debugger.
|
||||
"no-sequences": 1,
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-shadow-restricted-names": 2,
|
||||
// RATIONALE: Obsolete language feature that is deprecated.
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-sparse-arrays": 2,
|
||||
// RATIONALE: Although in theory JavaScript allows any possible data type to be thrown as an exception,
|
||||
// such flexibility adds pointless complexity, by requiring every catch block to test
|
||||
// the type of the object that it receives. Whereas if catch blocks can always assume
|
||||
// that their object implements the "Error" contract, then the code is simpler, and
|
||||
// we generally get useful additional information like a call stack.
|
||||
"no-throw-literal": 2,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
"no-unmodified-loop-condition": 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-unsafe-finally": 2,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
"no-unused-expressions": 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-unused-labels": 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-useless-catch": 1,
|
||||
// RATIONALE: Avoids a potential performance problem.
|
||||
"no-useless-concat": 1,
|
||||
// RATIONALE: The "var" keyword is deprecated because of its confusing "hoisting" behavior.
|
||||
// Always use "let" or "const" instead.
|
||||
//
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
"no-var": 2,
|
||||
// RATIONALE: Generally not needed in modern code.
|
||||
"no-void": 1,
|
||||
// RATIONALE: Obsolete language feature that is deprecated.
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"no-with": 2,
|
||||
// RATIONALE: Makes logic easier to understand, since constants always have a known value
|
||||
// @typescript-eslint\eslint-plugin\dist\configs\eslint-recommended.js
|
||||
"prefer-const": 1,
|
||||
// RATIONALE: Catches a common coding mistake where "resolve" and "reject" are confused.
|
||||
"promise/param-names": 2,
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"require-atomic-updates": 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"require-yield": 1,
|
||||
// "Use strict" is redundant when using the TypeScript compiler.
|
||||
strict: [2, "never"],
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
"use-isnan": 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
// Set to 1 (warning) or 2 (error) to enable.
|
||||
// Rationale to disable: !!{}
|
||||
"no-extra-boolean-cast": 0,
|
||||
// ====================================================================
|
||||
// @microsoft/eslint-plugin-spfx
|
||||
// ====================================================================
|
||||
"@microsoft/spfx/import-requires-chunk-name": 1,
|
||||
"@microsoft/spfx/no-require-ensure": 2,
|
||||
"@microsoft/spfx/pair-react-dom-render-unmount": 0, //O3C
|
||||
},
|
||||
},
|
||||
{
|
||||
// For unit tests, we can be a little bit less strict. The settings below revise the
|
||||
// defaults specified in the extended configurations, as well as above.
|
||||
files: [
|
||||
// Test files
|
||||
"*.test.ts",
|
||||
"*.test.tsx",
|
||||
"*.spec.ts",
|
||||
"*.spec.tsx",
|
||||
|
||||
// Facebook convention
|
||||
"**/__mocks__/*.ts",
|
||||
"**/__mocks__/*.tsx",
|
||||
"**/__tests__/*.ts",
|
||||
"**/__tests__/*.tsx",
|
||||
|
||||
// Microsoft convention
|
||||
"**/test/*.ts",
|
||||
"**/test/*.tsx",
|
||||
],
|
||||
rules: {
|
||||
"no-new": 0,
|
||||
"class-name": 0,
|
||||
"export-name": 0,
|
||||
forin: 0,
|
||||
"label-position": 0,
|
||||
"member-access": 2,
|
||||
"no-arg": 0,
|
||||
"no-console": 0,
|
||||
"no-construct": 0,
|
||||
"no-duplicate-variable": 2,
|
||||
"no-eval": 0,
|
||||
"no-function-expression": 2,
|
||||
"no-internal-module": 2,
|
||||
"no-shadowed-variable": 2,
|
||||
"no-switch-case-fall-through": 2,
|
||||
"no-unnecessary-semicolons": 2,
|
||||
"no-unused-expression": 2,
|
||||
"no-with-statement": 2,
|
||||
semicolon: 2,
|
||||
"trailing-comma": 0,
|
||||
typedef: 0,
|
||||
"typedef-whitespace": 0,
|
||||
"use-named-parameter": 2,
|
||||
"variable-name": 0,
|
||||
whitespace: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
|
||||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
release
|
||||
solution
|
||||
temp
|
||||
*.sppkg
|
||||
.heft
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
|
||||
# Visual Studio files
|
||||
.ntvs_analysis.dat
|
||||
.vs
|
||||
bin
|
||||
obj
|
||||
|
||||
# Resx Generated Code
|
||||
*.resx.ts
|
||||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
||||
*.scss.d.ts
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
!dist
|
||||
config
|
||||
|
||||
gulpfile.js
|
||||
|
||||
release
|
||||
src
|
||||
temp
|
||||
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
|
||||
*.log
|
||||
|
||||
.yo-rc.json
|
||||
.vscode
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"plusBeta": false,
|
||||
"isCreatingSolution": true,
|
||||
"nodeVersion": "16.18.1",
|
||||
"sdksVersions": {
|
||||
"@microsoft/microsoft-graph-client": "3.0.2",
|
||||
"@microsoft/teams-js": "2.9.1"
|
||||
},
|
||||
"version": "1.17.4",
|
||||
"libraryName": "o-3-c-azure-apim",
|
||||
"libraryId": "57102b15-17aa-4b28-86f6-eceffda7bcec",
|
||||
"environment": "spo",
|
||||
"packageManager": "npm",
|
||||
"solutionName": "o3c-azure-apim",
|
||||
"solutionShortDescription": "o3c-azure-apim description",
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
# Accessing Azure table storage data using Azure API Management
|
||||
|
||||
## Summary
|
||||
|
||||
This SharePoint Framework (SPFx) web part allows you to access securely Azure stroage table data directly from a SharePoint Framework (SPFx) web part using Azure API Management (APIM). This scenario is useful when you want to provide a seamless user experience for your application without exposing your backend services or credentials. This is a great way to simplify and secure your web app’s communication with the cloud.
|
||||
|
||||
## Solution Architecture
|
||||
|
||||
The basic flow is as follows:
|
||||
|
||||
- The SharePoint Framework (SPFx) webpart authenticates with Azure Active Directory (AAD) and obtains an access token.
|
||||
- The SharePoint Framework (SPFx) makes a request to APIM with the access token in the header.
|
||||
- APIM validates the access token using AAD token validation and CORS policies.
|
||||
- APIM accesses the Azure resource via Azure managed identities and returns the response to the SharePoint Framework (SPFx) webpart.
|
||||
|
||||
|
||||
|
||||
## Demo
|
||||
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
| :warning: Important |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node. |
|
||||
| Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg> "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
- [SharePoint Framework](https://aka.ms/spfx)
|
||||
- [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
|
||||
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/m365devprogram)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
To implement this scenario, you will need to configure the following components:
|
||||
|
||||
- An Azure Storage account to store some data in the Azure table.
|
||||
- An APIM instance to expose and secure access to the Azure Storage account using Managed Identity.
|
||||
- An AAD app registration for the SharePoint Framework (SPFx) web part to authenticate with AAD and obtain an access token.
|
||||
- A SharePoint Framework (SPFx) web part that calls the APIM endpoint with the access token.
|
||||
|
||||
Let's go through each step in detail.
|
||||
|
||||
### 1. Create an Azure API Management resource
|
||||
|
||||
Create an Azure API Management resource [Click here for more detail](https://learn.microsoft.com/en-us/azure/api-management/get-started-create-service-instance)
|
||||
|
||||
### 2. Create a Azure storge account
|
||||
|
||||
Create a Azure storge account [Click here for more detail](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?tabs=azure-portal).
|
||||
|
||||
### 3. Configure Azure Managed Identities.
|
||||
|
||||
The next step is to configure Azure Managed Identities. This will allow our API to access our Azure resources without storing any credentials or secrets in our code. To do this, follow these steps:
|
||||
|
||||
- Go to the Azure portal and click on your API Management instance.
|
||||
- Click on Identity under Settings and enable System assigned identity. This will create a system-assigned managed identity for your API Management instance.
|
||||
- Copy the Object ID of the identity. You will need it later.
|
||||
- Go to your Azure Storage account and click on Access Control (IAM) under Settings.
|
||||
- Click on Add role assignment and select Storage Table Data Reader as the role. For the assigned access option, select User assigned managed identity and search for the Object ID of your API Management instance's identity. Select it and click on Save. This will grant your API Management instance's identity access to read Azure storage table data in your storage account.
|
||||
|
||||
### 4. Register an application in Azure AD to represent the API
|
||||
|
||||
The next step is to create an Azure AD app. This will allow us to authenticate our users with Azure AD and get an access token that we can use to call our Azure API management endpoint. To do this, follow these steps:
|
||||
|
||||
1. In the Azure portal, search for and select App registrations.
|
||||
2. Select New Registration.
|
||||
3. When the Register an application page appears, enter your application's registration information:
|
||||
• In the Name section, enter a meaningful application name that will be displayed to users of the app, such as the backend-app.
|
||||
• In the Supported Account Types section, select an option that suits your scenario.
|
||||
4. Leave the Redirect URI section empty. Later, you'll add a redirect URI generated in the OAuth 2.0 configuration in API Management.
|
||||
5. Select Register to create the application.
|
||||
6. On the app Overview page, find the Application (client) ID value and record it for later.
|
||||
7. Under the Manage section of the side menu, select Expose an API and set the Application ID URI as below. Record this value for later.
|
||||
`api://[Client ID]/[Tenant Name].sharepoint.com`
|
||||
8. Select the Add a Scope button to display the Add a Scope page:
|
||||
a. Enter a Scope name for a scope that's supported by the API (for example, **user_impersonation**).
|
||||
b. In Who can consent? Make a selection for your scenario, such as Admins and users. Select Admins only for higher privileged scenarios.
|
||||
c. Enter the Admin consent display name and Admin consent description.
|
||||
d. Make sure the Enabled scope state is selected.
|
||||
9. Select the Add Scope button to create the scope.
|
||||
10. Repeat the previous two steps to add all scopes supported by your API.
|
||||
11. Once the scopes are created, make a note of them for use in a subsequent step.
|
||||
|
||||
### 5. Create an Azure Table Storage API
|
||||
|
||||
The next step is to create an API for our Azure Storage account in our API Management instance. To do this, follow these steps:
|
||||
|
||||
1. Navigate to your API Management service in the Azure portal and select APIs from the menu.
|
||||
2. From the left menu, select + Add API.
|
||||
3. Select HTTP from the list.
|
||||
|
||||
|
||||
|
||||
4. Enter the backend Web service URL (In our case, Azure storage table URI, `https://[storageaccountname].table.core.windows.net/`) and other settings for the API. The settings are explained in the [Import and publish your first API](https://learn.microsoft.com/en-us/azure/api-management/import-and-publish#import-and-publish-a-backend-api) tutorial.
|
||||
5. Select Create.
|
||||
|
||||
At this point, you have no operations in API Management that map to the operations in your backend API. If you call an operation that is exposed through the back end but not through the API Management, you get a 404.
|
||||
|
||||
### 6. Add an operation
|
||||
|
||||
This section shows how to add a "/" operation to map it to the Azure Storage Table endpoint `https://[storageaccountname].table.core.windows.net/`" operation.
|
||||
|
||||
1. Select the API you created in the previous step.
|
||||
2. Select + Add Operation.
|
||||
3. In the URL, select GET and enter `/` in the resource.
|
||||
4. Enter "Get Entities" for the Display name.
|
||||
5. Select Save.
|
||||
|
||||
|
||||
|
||||
### 7. Inbound processing
|
||||
|
||||
Next, you will need to configure some inbound policies for the APIM operation to validate the access token from AAD and access the Azure Storage account via managed identities.
|
||||
|
||||
I have configured the following policies during the inbound processing of API requests.
|
||||
|
||||
1. Checking CORS to make a sure request can only be valid from your SharePoint tenant
|
||||
2. Validating the Azure AD token
|
||||
3. Read query parameters or headers if any
|
||||
4. Setting up backend API URL
|
||||
5. Managed identity integration with Azure resource
|
||||
|
||||
```xml
|
||||
|
||||
<!--
|
||||
IMPORTANT:
|
||||
- Policy elements can appear only within the <inbound>, <outbound>, <backend> section elements.
|
||||
- To apply a policy to the incoming request (before it is forwarded to the backend service), place a corresponding policy element within the <inbound> section element.
|
||||
- To apply a policy to the outgoing response (before it is sent back to the caller), place a corresponding policy element within the <outbound> section element.
|
||||
- To add a policy, place the cursor at the desired insertion point and select a policy from the sidebar.
|
||||
- To remove a policy, delete the corresponding policy statement from the policy document.
|
||||
- Position the <base> element within a section element to inherit all policies from the corresponding section element in the enclosing scope.
|
||||
- Remove the <base> element to prevent inheriting policies from the corresponding section element in the enclosing scope.
|
||||
- Policies are applied in the order of their appearance, from the top down.
|
||||
- Comments within policy elements are not supported and may disappear. Place your comments between policy elements or at a higher level scope.
|
||||
-->
|
||||
<policies>
|
||||
<inbound>
|
||||
<cors allow-credentials="true">
|
||||
<allowed-origins>
|
||||
<origin>https://[TenantName].sharepoint.com/</origin>
|
||||
</allowed-origins>
|
||||
<allowed-methods>
|
||||
<method>GET</method>
|
||||
</allowed-methods>
|
||||
<allowed-headers>
|
||||
<header>*</header>
|
||||
</allowed-headers>
|
||||
<expose-headers>
|
||||
<header>*</header>
|
||||
</expose-headers>
|
||||
</cors>
|
||||
<validate-azure-ad-token tenant-id="[TenantId]" failed-validation-error-message="Access token validation failed">
|
||||
<client-application-ids>
|
||||
<application-id>[Client Id of SharePoint Online Client Extensibility Web Application Principal]</application-id>
|
||||
<application-id>[Client Id of the Azure Ad App]</application-id>
|
||||
</client-application-ids>
|
||||
<audiences>
|
||||
<audience>api://[Client Id of the Azure Ad App ]/[Tenant Name].sharepoint.com</audience>
|
||||
</audiences>
|
||||
</validate-azure-ad-token>
|
||||
<set-variable name="Table" value="tblBooks" />
|
||||
<set-variable name="RowKey" value="@(context.Request.Headers.GetValueOrDefault("RowKey"))" />
|
||||
<set-variable name="UTCNowR" value="@(DateTime.UtcNow.ToString("R"))" />
|
||||
<set-header name="Ocp-Apim-Subscription-Key" exists-action="delete" />
|
||||
<set-header name="Sec-Fetch-Site" exists-action="delete" />
|
||||
<set-header name="Sec-Fetch-Mode" exists-action="delete" />
|
||||
<set-header name="Sec-Fetch-Dest" exists-action="delete" />
|
||||
<set-header name="Accept" exists-action="override">
|
||||
<value>application/json;odata=nometadata</value>
|
||||
</set-header>
|
||||
<set-header name="Referer" exists-action="delete" />
|
||||
<set-header name="X-Forwarded-For" exists-action="delete" />
|
||||
<set-header name="x-ms-version" exists-action="override">
|
||||
<value>@{string version = "2017-11-09"; return version;}</value>
|
||||
</set-header>
|
||||
<set-backend-service base-url="@{
|
||||
string table = context.Variables.GetValueOrDefault<string>("Table");
|
||||
string rowKey = context.Variables.GetValueOrDefault<string>("RowKey");
|
||||
return String.Format("https://[AzureStorageName].table.core.windows.net/{0}()", table);
|
||||
}" />
|
||||
<authentication-managed-identity resource="https://storage.azure.com/" />
|
||||
</inbound>
|
||||
<backend>
|
||||
<base />
|
||||
</backend>
|
||||
<outbound>
|
||||
<base />
|
||||
</outbound>
|
||||
<on-error>
|
||||
<base />
|
||||
</on-error>
|
||||
</policies>
|
||||
```
|
||||
|
||||
## Contributors
|
||||
|
||||
- [Ejaz Hussain](https://github.com/ejazhussain)
|
||||
|
||||
## Version history
|
||||
|
||||
| Version | Date | Comments |
|
||||
| ------- | ------------------ | --------------- |
|
||||
| 1.0.0 | September 11, 2023 | Initial release |
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
1. Clone this repository
|
||||
2. From your command line, change your current directory to the directory containing this sample (`react-apim-tablestroage`, located under `samples`)
|
||||
3. In the command line run:
|
||||
|
||||
```cmd
|
||||
`npm install`
|
||||
`gulp bundle`
|
||||
`gulp package-solution`
|
||||
```
|
||||
|
||||
4. Deploy the package to your app catalog
|
||||
5. Approve the following API permission request from the SharePoint admin
|
||||
|
||||
```JSON
|
||||
{
|
||||
"resource": "o3c-apim-sp", //name of the Azure AD app
|
||||
"scope": "user_impersonation"
|
||||
}
|
||||
```
|
||||
|
||||
7. In the command-line run:
|
||||
|
||||
```cmd
|
||||
gulp serve --nobrowser
|
||||
```
|
||||
|
||||
8. Open the hosted workbench on a SharePoint site - i.e. https://_tenant_.sharepoint.com/site/_sitename_/_layouts/workbench.aspx
|
||||
|
||||
- Add the [O3C] Azure Connect web part to the page.
|
||||
- In the web part properties, configure the following properties
|
||||
1. Add Subscription Key (e.g. `2a80a80cf8f7878485588ba887ad85`)
|
||||
2. Add AAD App Scope URL (e.g. `api://88784ee-44eee-4b8e-ad72-9918e7777/tenantname.sharepoint.com`)
|
||||
3. Azure Table Storage Endpoint (e.g. https://myapim.azure-api.net/tablestorage)-
|
||||
- Close the web part properties pane and save and reload the page
|
||||
|
||||
## Features
|
||||
|
||||
This SharePoint Framework (SPFx) web part allows you to access securely Azure stroage table data directly from a SharePoint Framework (SPFx) web part using Azure API Management (APIM). This scenario is useful when you want to provide a seamless user experience for your application without exposing your backend services or credentials
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"azure-apim-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/azureApim/AzureApimWebPart.js",
|
||||
"manifest": "./src/webparts/azureApim/AzureApimWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"AzureApimWebPartStrings": "lib/webparts/azureApim/loc/{locale}.js",
|
||||
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./release/assets/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "o3c-azureconnect",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "O3C - Azure Connect",
|
||||
"id": "57102b15-17aa-4b28-86f6-eceffda7bcec",
|
||||
"version": "1.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false,
|
||||
"developer": {
|
||||
"name": "",
|
||||
"websiteUrl": "",
|
||||
"privacyUrl": "",
|
||||
"termsOfUseUrl": "",
|
||||
"mpnId": "Undefined-1.17.4"
|
||||
},
|
||||
"metadata": {
|
||||
"shortDescription": {
|
||||
"default": "O3C - Azure Connect description"
|
||||
},
|
||||
"longDescription": {
|
||||
"default": "O3C - Azure Connect description"
|
||||
},
|
||||
"screenshotPaths": [],
|
||||
"videoUrl": "",
|
||||
"categories": []
|
||||
},
|
||||
"features": [
|
||||
{
|
||||
"title": "O3C - Azure Connect Feature",
|
||||
"description": "The feature that activates elements of the O3C - Azure Connect solution.",
|
||||
"id": "6b21c147-a385-4793-bf80-3ceb691deae4",
|
||||
"version": "1.0.0.0"
|
||||
}
|
||||
],
|
||||
"webApiPermissionRequests": [
|
||||
{
|
||||
"resource": "o3c-apim-chatpoc-sp",
|
||||
"scope": "user_impersonation"
|
||||
}
|
||||
]
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/o3c-azureconnect.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
'use strict';
|
||||
|
||||
const build = require('@microsoft/sp-build-web');
|
||||
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||
|
||||
var getTasks = build.rig.getTasks;
|
||||
build.rig.getTasks = function () {
|
||||
var result = getTasks.call(build.rig);
|
||||
|
||||
result.set('serve', result.get('serve-deprecated'));
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
/* fast-serve */
|
||||
const { addFastServe } = require("spfx-fast-serve-helpers");
|
||||
addFastServe(build);
|
||||
/* end of fast-serve */
|
||||
|
||||
build.initialize(require('gulp'));
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,52 @@
|
|||
{
|
||||
"name": "o3c-azureconnect",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=16.13.0 <17.0.0"
|
||||
},
|
||||
"main": "lib/index.js",
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "gulp test",
|
||||
"serve": "gulp bundle --custom-serve --max_old_space_size=4096 && fast-serve"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.11.1",
|
||||
"@fluentui/react": "^7.199.1",
|
||||
"@mantine/core": "^6.0.19",
|
||||
"@mantine/hooks": "^6.0.19",
|
||||
"@microsoft/sp-component-base": "1.17.4",
|
||||
"@microsoft/sp-core-library": "1.17.4",
|
||||
"@microsoft/sp-lodash-subset": "1.17.4",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.17.4",
|
||||
"@microsoft/sp-property-pane": "1.17.4",
|
||||
"@microsoft/sp-webpart-base": "1.17.4",
|
||||
"@pnp/spfx-controls-react": "3.15.0",
|
||||
"axios": "^1.5.0",
|
||||
"office-ui-fabric-react": "^7.199.1",
|
||||
"react": "17.0.1",
|
||||
"react-dom": "17.0.1",
|
||||
"react-icons": "^4.10.1",
|
||||
"tslib": "2.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/eslint-config-spfx": "1.17.4",
|
||||
"@microsoft/eslint-plugin-spfx": "1.17.4",
|
||||
"@microsoft/rush-stack-compiler-4.5": "0.5.0",
|
||||
"@microsoft/sp-build-web": "1.17.4",
|
||||
"@microsoft/sp-module-interfaces": "1.17.4",
|
||||
"@rushstack/eslint-config": "2.5.1",
|
||||
"@types/node": "^20.5.9",
|
||||
"@types/react": "17.0.45",
|
||||
"@types/react-dom": "17.0.17",
|
||||
"@types/webpack-env": "~1.15.2",
|
||||
"ajv": "^6.12.5",
|
||||
"eslint": "8.7.0",
|
||||
"eslint-plugin-react-hooks": "4.3.0",
|
||||
"gulp": "4.0.2",
|
||||
"spfx-fast-serve-helpers": "~1.17.0",
|
||||
"typescript": "4.5.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export const AAD_SCOPE_URL = "";
|
||||
export const AZURE_TABLE_ENDPOINT = "";
|
||||
|
|
@ -0,0 +1 @@
|
|||
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "9f7e9faf-010f-4487-94af-a406f057814e",
|
||||
"alias": "AzureApimWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
"requiresCustomScript": false,
|
||||
"supportedHosts": [
|
||||
"SharePointWebPart",
|
||||
"TeamsPersonalApp",
|
||||
"TeamsTab",
|
||||
"SharePointFullPage"
|
||||
],
|
||||
"supportsThemeVariants": true,
|
||||
"preconfiguredEntries": [
|
||||
{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
|
||||
"group": {
|
||||
"default": "Advanced"
|
||||
},
|
||||
"title": {
|
||||
"default": "[O3C] Azure Connect"
|
||||
},
|
||||
"description": {
|
||||
"default": "[O3C] Azure Connect description"
|
||||
},
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"description": "Azure Connect"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
import * as React from "react";
|
||||
import * as ReactDom from "react-dom";
|
||||
import { Version } from "@microsoft/sp-core-library";
|
||||
import {
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField,
|
||||
} from "@microsoft/sp-property-pane";
|
||||
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
|
||||
import { IReadonlyTheme } from "@microsoft/sp-component-base";
|
||||
|
||||
import * as strings from "AzureApimWebPartStrings";
|
||||
import { IAzureConnectProps } from "./components/IAzureConnectProps";
|
||||
import { AzureConnect } from "./components/AzureConnect";
|
||||
|
||||
export interface IAzureApimWebPartProps {
|
||||
subscriptionKey: string;
|
||||
scopeUrl: string;
|
||||
tableEndpoint: string;
|
||||
}
|
||||
|
||||
export default class AzureApimWebPart extends BaseClientSideWebPart<IAzureApimWebPartProps> {
|
||||
private _isDarkTheme: boolean = false;
|
||||
private _environmentMessage: string = "";
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IAzureConnectProps> = React.createElement(
|
||||
AzureConnect,
|
||||
{
|
||||
subscriptionKey: this.properties.subscriptionKey,
|
||||
scopeUrl: this.properties.scopeUrl,
|
||||
tableEndpoint: this.properties.tableEndpoint,
|
||||
isDarkTheme: this._isDarkTheme,
|
||||
environmentMessage: this._environmentMessage,
|
||||
hasTeamsContext: !!this.context.sdks.microsoftTeams,
|
||||
userDisplayName: this.context.pageContext.user.displayName,
|
||||
context: this.context,
|
||||
}
|
||||
);
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected onInit(): Promise<void> {
|
||||
return this._getEnvironmentMessage().then((message) => {
|
||||
this._environmentMessage = message;
|
||||
});
|
||||
}
|
||||
|
||||
private _getEnvironmentMessage(): Promise<string> {
|
||||
if (!!this.context.sdks.microsoftTeams) {
|
||||
// running in Teams, office.com or Outlook
|
||||
return this.context.sdks.microsoftTeams.teamsJs.app
|
||||
.getContext()
|
||||
.then((context) => {
|
||||
let environmentMessage: string = "";
|
||||
switch (context.app.host.name) {
|
||||
case "Office": // running in Office
|
||||
environmentMessage = this.context.isServedFromLocalhost
|
||||
? strings.AppLocalEnvironmentOffice
|
||||
: strings.AppOfficeEnvironment;
|
||||
break;
|
||||
case "Outlook": // running in Outlook
|
||||
environmentMessage = this.context.isServedFromLocalhost
|
||||
? strings.AppLocalEnvironmentOutlook
|
||||
: strings.AppOutlookEnvironment;
|
||||
break;
|
||||
case "Teams": // running in Teams
|
||||
environmentMessage = this.context.isServedFromLocalhost
|
||||
? strings.AppLocalEnvironmentTeams
|
||||
: strings.AppTeamsTabEnvironment;
|
||||
break;
|
||||
default:
|
||||
throw new Error("Unknown host");
|
||||
}
|
||||
|
||||
return environmentMessage;
|
||||
});
|
||||
}
|
||||
|
||||
return Promise.resolve(
|
||||
this.context.isServedFromLocalhost
|
||||
? strings.AppLocalEnvironmentSharePoint
|
||||
: strings.AppSharePointEnvironment
|
||||
);
|
||||
}
|
||||
|
||||
protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
|
||||
if (!currentTheme) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._isDarkTheme = !!currentTheme.isInverted;
|
||||
const { semanticColors } = currentTheme;
|
||||
|
||||
if (semanticColors) {
|
||||
this.domElement.style.setProperty(
|
||||
"--bodyText",
|
||||
semanticColors.bodyText || null
|
||||
);
|
||||
this.domElement.style.setProperty("--link", semanticColors.link || null);
|
||||
this.domElement.style.setProperty(
|
||||
"--linkHovered",
|
||||
semanticColors.linkHovered || null
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse("1.0");
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription,
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneTextField("subscriptionKey", {
|
||||
label: strings.SubscriptionKeyFieldLabel,
|
||||
}),
|
||||
PropertyPaneTextField("scopeUrl", {
|
||||
label: "AAD App Scope URL",
|
||||
}),
|
||||
PropertyPaneTextField("tableEndpoint", {
|
||||
label: "Azure Table Storage Endpoint",
|
||||
}),
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,34 @@
|
|||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
.azureApim {
|
||||
overflow: hidden;
|
||||
padding: 1em;
|
||||
color: "[theme:bodyText, default: #323130]";
|
||||
color: var(--bodyText);
|
||||
&.teams {
|
||||
font-family: $ms-font-family-fallbacks;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcomeImage {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.links {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: "[theme:link, default:#03787c]";
|
||||
color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: "[theme:linkHovered, default: #014446]";
|
||||
color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
import * as React from "react";
|
||||
//import styles from "./AzureApim.module.scss";
|
||||
import { IAzureConnectProps } from "./IAzureConnectProps";
|
||||
import {
|
||||
Anchor,
|
||||
Button,
|
||||
Container,
|
||||
MantineProvider,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
Table,
|
||||
Title,
|
||||
createStyles,
|
||||
rem,
|
||||
} from "@mantine/core";
|
||||
import { SiMicrosoftazure } from "react-icons/si";
|
||||
import { AadTokenProvider } from "@microsoft/sp-http";
|
||||
import { Placeholder } from "@pnp/spfx-controls-react";
|
||||
import axios from "axios";
|
||||
import * as strings from "AzureApimWebPartStrings";
|
||||
|
||||
const useStyles = createStyles((theme) => ({
|
||||
header: {
|
||||
position: "sticky",
|
||||
top: -16,
|
||||
backgroundColor:
|
||||
theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
|
||||
transition: "box-shadow 150ms ease",
|
||||
|
||||
"&::after": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
borderBottom: `${rem(1)} solid ${
|
||||
theme.colorScheme === "dark"
|
||||
? theme.colors.dark[3]
|
||||
: theme.colors.gray[2]
|
||||
}`,
|
||||
},
|
||||
},
|
||||
|
||||
scrolled: {
|
||||
boxShadow: theme.shadows.sm,
|
||||
},
|
||||
}));
|
||||
|
||||
export const AzureConnect: React.FunctionComponent<IAzureConnectProps> = (
|
||||
props
|
||||
) => {
|
||||
const { classes, cx } = useStyles();
|
||||
const { context, subscriptionKey, scopeUrl, tableEndpoint } = props;
|
||||
const [results, setResults] = React.useState<any[]>([]);
|
||||
const [scrolled, setScrolled] = React.useState(false);
|
||||
|
||||
const getAccessToken = (): Promise<string> => {
|
||||
return context.aadTokenProviderFactory
|
||||
.getTokenProvider()
|
||||
.then((tokenProvider: AadTokenProvider): Promise<string> => {
|
||||
return tokenProvider.getToken(scopeUrl);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("getAccessToken", error);
|
||||
return "";
|
||||
});
|
||||
};
|
||||
|
||||
const getAzureTableData = async (token: string): Promise<any> => {
|
||||
try {
|
||||
const api = axios.create({
|
||||
baseURL: tableEndpoint,
|
||||
});
|
||||
|
||||
const config = {
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Ocp-Apim-Subscription-Key": subscriptionKey,
|
||||
},
|
||||
};
|
||||
const { data, status } = await api.get<any>(tableEndpoint, config);
|
||||
console.log(status);
|
||||
const [result] = [data.value] || [];
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const callAzureResource = async () => {
|
||||
try {
|
||||
const token = await getAccessToken();
|
||||
console.log(token);
|
||||
const result = await getAzureTableData(token);
|
||||
setResults(result);
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
const _onConfigure = () => {
|
||||
// Context of the web part
|
||||
context.propertyPane.open();
|
||||
};
|
||||
|
||||
const rows =
|
||||
results.length > 0 &&
|
||||
results.map((row) => {
|
||||
return (
|
||||
<tr key={row.Title}>
|
||||
<td>
|
||||
<Anchor component="button" fz="sm">
|
||||
{row.Title}
|
||||
</Anchor>
|
||||
</td>
|
||||
<td>{row.Author}</td>
|
||||
<td>{row.Country}</td>
|
||||
<td>{row.ImageLink}</td>
|
||||
<td>{row.Language}</td>
|
||||
{/* <td>{row.Link}</td> */}
|
||||
<td>{row.Pages}</td>
|
||||
<td>{row.Year}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
|
||||
if (!scopeUrl || !tableEndpoint || !subscriptionKey) {
|
||||
return (
|
||||
<Placeholder
|
||||
iconName="Edit"
|
||||
iconText={strings.PlaceholderIconText}
|
||||
description={strings.PlaceholderDescription}
|
||||
buttonLabel={strings.PlaceholderButtonLabel}
|
||||
onConfigure={_onConfigure}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<MantineProvider withGlobalStyles withNormalizeCSS>
|
||||
<Container>
|
||||
<Paper
|
||||
shadow="md"
|
||||
radius="md"
|
||||
p="md"
|
||||
style={{ maxHeight: "500px", overflowY: "auto" }}
|
||||
>
|
||||
<Title order={4}>
|
||||
{" "}
|
||||
Accessing Azure storage table data from SharePoint Online using
|
||||
Azure API Management
|
||||
</Title>
|
||||
<Button
|
||||
onClick={() => callAzureResource()}
|
||||
leftIcon={<SiMicrosoftazure />}
|
||||
variant="white"
|
||||
>
|
||||
View Azure Table Data
|
||||
</Button>
|
||||
<ScrollArea
|
||||
onScrollPositionChange={({ y }) => setScrolled(y !== 0)}
|
||||
/>
|
||||
<Table sx={{ minWidth: 800 }} verticalSpacing="xs" striped>
|
||||
<thead
|
||||
className={cx(classes.header, { [classes.scrolled]: scrolled })}
|
||||
>
|
||||
<tr>
|
||||
<th>Book title</th>
|
||||
<th>Author</th>
|
||||
<th>Country</th>
|
||||
<th>ImageLink</th>
|
||||
<th>Language</th>
|
||||
{/* <th>Link</th> */}
|
||||
<th>Pages</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</Table>
|
||||
</Paper>
|
||||
</Container>
|
||||
</MantineProvider>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { WebPartContext } from "@microsoft/sp-webpart-base";
|
||||
|
||||
export interface IAzureConnectProps {
|
||||
subscriptionKey: string;
|
||||
scopeUrl: string;
|
||||
tableEndpoint: string;
|
||||
isDarkTheme: boolean;
|
||||
environmentMessage: string;
|
||||
hasTeamsContext: boolean;
|
||||
userDisplayName: string;
|
||||
context: WebPartContext;
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
//import { ScrollArea } from "@mantine/core";
|
||||
import * as React from "react";
|
||||
|
||||
export interface IRenderTableProps {
|
||||
tableResults: any;
|
||||
}
|
||||
|
||||
export const RenderTable: React.FunctionComponent<IRenderTableProps> = (
|
||||
props
|
||||
) => {
|
||||
return (
|
||||
<p>
|
||||
As Mega Charizard X, its body and legs are more physically fit, though its
|
||||
arms remain thin. Its skin turns black with a sky-blue underside and
|
||||
soles. Two spikes with blue tips curve upward from the front and back of
|
||||
each shoulder, while the tips of its horns sharpen, turn blue, and curve
|
||||
slightly upward. Its brow and claws are larger, and its eyes are now red.
|
||||
It has two small, fin-like spikes under each horn and two more down its
|
||||
lower neck. The finger disappears from the wing membrane, and the lower
|
||||
edges are divided into large, rounded points. The third joint of each
|
||||
wing-arm is adorned with a claw-like spike. Mega Charizard X breathes blue
|
||||
flames out the sides of its mouth, and the flame on its tail now burns
|
||||
blue. It is said that its new power turns it black and creates more
|
||||
intense flames.
|
||||
</p>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
define([], function () {
|
||||
return {
|
||||
PropertyPaneDescription: "",
|
||||
BasicGroupName: "Azure API Management Settings",
|
||||
SubscriptionKeyFieldLabel: "Subscription Key",
|
||||
AppLocalEnvironmentSharePoint:
|
||||
"The app is running on your local environment as SharePoint web part",
|
||||
AppLocalEnvironmentTeams:
|
||||
"The app is running on your local environment as Microsoft Teams app",
|
||||
AppLocalEnvironmentOffice:
|
||||
"The app is running on your local environment in office.com",
|
||||
AppLocalEnvironmentOutlook:
|
||||
"The app is running on your local environment in Outlook",
|
||||
AppSharePointEnvironment: "The app is running on SharePoint page",
|
||||
AppTeamsTabEnvironment: "The app is running in Microsoft Teams",
|
||||
AppOfficeEnvironment: "The app is running in office.com",
|
||||
AppOutlookEnvironment: "The app is running in Outlook",
|
||||
PlaceholderIconText: "Configure your web part",
|
||||
PlaceholderDescription:
|
||||
"Please configure web part properties for APIM subscription key, Azure AD App scope URL and APIM endpoint",
|
||||
PlaceholderButtonLabel: "Configure",
|
||||
};
|
||||
});
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
declare interface IAzureApimWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
SubscriptionKeyFieldLabel: string;
|
||||
AppLocalEnvironmentSharePoint: string;
|
||||
AppLocalEnvironmentTeams: string;
|
||||
AppLocalEnvironmentOffice: string;
|
||||
AppLocalEnvironmentOutlook: string;
|
||||
AppSharePointEnvironment: string;
|
||||
AppTeamsTabEnvironment: string;
|
||||
AppOfficeEnvironment: string;
|
||||
AppOutlookEnvironment: string;
|
||||
PlaceholderIconText: string;
|
||||
PlaceholderDescription: string;
|
||||
PlaceholderButtonLabel: string;
|
||||
}
|
||||
|
||||
declare module "AzureApimWebPartStrings" {
|
||||
const strings: IAzureApimWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 542 B |
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true,
|
||||
"outDir": "lib",
|
||||
"inlineSources": false,
|
||||
"noImplicitAny": true,
|
||||
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./node_modules/@microsoft"
|
||||
],
|
||||
"types": [
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection",
|
||||
"es2015.promise"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue