> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Cómo conectar aplicaciones hospedadas por el proveedor a SharePoint Online.
# Conectar aplicaciones hospedadas por el proveedor a SharePoint Online
export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
const [displayText, setDisplayText] = useState(children);
const [copyText, setCopyText] = useState(children);
const wrapperRef = React.useRef(null);
useEffect(() => {
let unsubscribe = null;
function init() {
if (!window.autorun || !window.rootStore) {
return;
}
unsubscribe = window.autorun(() => {
let processedChildrenForDisplay = children;
let processedChildrenForCopy = children;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
let displayValue = value;
if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
displayValue = value.substring(0, 3) + "*****ENMASCARADO*****";
}
processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
}
setDisplayText(processedChildrenForDisplay);
setCopyText(processedChildrenForCopy);
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
useEffect(() => {
if (!wrapperRef.current) return;
const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
let isOverriding = false;
const handleClick = e => {
const button = e.target.closest('[data-testid="copy-code-button"]');
if (!button || !wrapperRef.current.contains(button)) return;
isOverriding = true;
navigator.clipboard.writeText = text => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
return originalWriteText(copyText);
}
return originalWriteText(text);
};
setTimeout(() => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
}
}, 100);
};
const wrapper = wrapperRef.current;
wrapper.addEventListener('click', handleClick, true);
return () => {
wrapper.removeEventListener('click', handleClick, true);
if (navigator.clipboard.writeText !== originalWriteText) {
navigator.clipboard.writeText = originalWriteText;
}
};
}, [copyText]);
return
{displayText}
;
};
Auth0 puede simplificar enormemente el proceso de autenticación para las aplicaciones de SharePoint. Auth0 negociará un Token de acceso que luego podrá usar para invocar las API de SharePoint.
No necesitará bibliotecas especiales. Puede usar cualquiera de los SDK compatibles con Auth0.
## Paso 1. Registra tu aplicación en Auth0
Simplemente registra una nueva aplicación en Auth0 como lo harías normalmente: **Applications > NEW**. Elige cualquiera de los SDK disponibles para obtener instrucciones detalladas. Ten a mano el `client_id`, ya que lo necesitarás en el siguiente paso.
## Paso 2. Cree un paquete para su aplicación
Necesita obtener un **ID de cliente** y un **Secreto del cliente** para su aplicación. Hay muchas formas de registrar su aplicación, según el uso previsto.
[Registrar complementos de SharePoint (Microsoft Docs)](https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/register-sharepoint-add-ins) explica las distintas formas de registrar su aplicación en SharePoint. En este paso del tutorial, se utilizará la forma más sencilla: el autorregistro en un inquilino específico (el suyo).
### Abra SharePoint Online
La URL del Dashboard es `https://{your Office365 tenant}.sharepoint.com/_layouts/15/appregnew.aspx`
### Genere un ID de cliente y un Secreto del cliente:
### Complete la información del formulario:
Como Auth0 actúa de intermediario entre su aplicación y la infraestructura de Office 365, debe usar esta URL para la aplicación:
**Dominio de la aplicación**:
export const codeExample1 = `{yourDomain}`;
**URI de redirección**:
export const codeExample2 = `https://{yourDomain}/login/callback?SP_APP_TOKEN&connection=CONNECTION&client_id={yourClientId}&redirect_uri={https://yourApp/callback}`;
* `connection` es simplemente el nombre que usarás en las conexiones de Auth0 (como "sharepoint").
* `client_id` identifica tu aplicación en Auth0 (creada en el paso 1).
* `redirect_uri` es la ubicación de tu aplicación a la que se redirigirá finalmente a los usuarios una vez completado todo el proceso. Si no la especificas, siempre será la URL de devolución de llamada de la aplicación definida en Auth0 (podría ser localhost)
### Empaquete la aplicación y cárguela en SharePoint:
Complete la información del manifiesto de la aplicación en Visual Studio:
Tenga en cuenta que la `cadena de consulta` será exactamente la misma que la `URI de redirección` que completó antes. Luego, haga clic con el botón derecho en el proyecto y seleccione `Publish`:
Cree un **perfil de publicación** (deberá ingresar el mismo **ID de cliente** y **Secreto del cliente** obtenidos en el Dashboard de SharePoint).
Haga clic en **Package** y cargue el archivo resultante en SharePoint.
## Paso 3. Cree la Conexión en Auth0
El último paso de la integración es agregar una conexión de SharePoint en Auth0.
Necesitará:
* `Connection Name`. Es un nombre arbitrario. Debe coincidir con el que ingresó en el paso 2.
* `ID de cliente` & `Secreto del cliente`. También deben coincidir con lo que ingresó en el paso 2.
* `Test SharePoint Site Url`. Es la URL del sitio de SharePoint que se usa para probar la conexión (por ejemplo, al pulsar el botón 'Try' en el Dashboard). No se usa nunca en tiempo de ejecución, porque los usuarios siempre seguirán el enlace a su sitio desde SharePoint.
Los usuarios instalarán su aplicación desde Office Marketplace. Cuando hagan clic en el enlace, se les redirigirá a Auth0, que negociará el Token de acceso por usted y, finalmente, a su aplicación. Su aplicación recibirá un `User Profile` similar a este:
Se incluirán las siguientes propiedades: `cacheKey`, `refresh_token`, `host` y `site`. Esto le permitirá llamar a las API de SharePoint (como las listas).