2.1 Cómo empezar

Para instalar el SDK de vyou-react en tu aplicación ReactJs solo necesitamos los siguientes pasos:

En primer lugar, tenemos que copiar el paquete del SDK en las fuentes de tu aplicación. Digamos que todo el código de tu aplicación está dentro de una carpeta llamada src, así que vamos a crear una nueva carpeta llamada vyou y copiaremos vyou-react y vyou-core de nuestro SDK de distribución. El único requisito es que estas carpetas deben compartir la misma raíz. Por lo tanto, nuestro árbol de archivos debe tener este aspecto:

my-application/
	src/
		...
		App.tsx # or App.js
		vyou/
			vyou-core/
			vyou-react/

¡Dentro de cada carpeta también proporcionamos Tiposcript typings, por lo que su IDE / editor de código elegido (por ejemplo, Visual Studio Code de Microsoft) añadirá IntelliSense!

Siguiente. Tenemos que importar el CSS del SDK y, siguiendo el excelente patrón Contexto/Proveedor de ReactJs, envolveremos nuestra app dentro de VYouProvider.

import React from 'react'
import { VYouProvider } from './vyou/vyou-react'

import './vyou/vyou-react/style.css'

const BACKEND_BASEURL = '<https://MY-VYOU-BACKEND-URL>'
const FRONTEND_BASEURL = '<https://MY-APP-FRONTEND-URL>'

export const App = () => {
  return (
    <VYouProvider
      locale='es_ES'
      tenantUrl={BACKEND_BASEURL}
      oauth={{
        signUrl: BACKEND_BASEURL,
        clientId: 'MY-VYOU-CLIENT-ID',
        redirectUri: `${FRONTEND_BASEURL}/vyou_oauth_callback.html`
      }}
      facebook={{
        appId: 'MY-FACEBOOK-APP-ID'
      }}
      google={{
        clientId:'MY-GOOGLE-AUTH-CLIENT_ID'
      }}>
      <MyOtherProvider>
        <MyAppRoutes />
      </MyOtherProvider>
    </VYouProvider>
  )
}

Fíjate en lo siguiente:

  • podemos establecer el locale para todos los textos que mostremos en nuestra UI (ATM es_ES);
  • con tenantUrl le estamos diciendo al SDK dónde está nuestro backend VYou;
  • oauth configura el servicio VYou OAuth, donde redirectUri es una URI pública que debe estar bajo el mismo host donde se encuentra tu aplicación frontend para evitar problemas de CORS cuando el servicio OAuth redirige después de la autenticación (no hay necesidad de mostrar contenido);
  • facebook y google configuran ambos servicios, por si quieres que tu aplicación proporcione estos servicios.

Por último, la única dependencia de la biblioteca requerida por el SDK es una que probablemente ya esté utilizando:

yarn add axiosódigo>

Ya está. ¡Ahora estamos listos para usar el SDK de VYou ReactJs!

Ir arriba