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 su aplicación. Digamos que todo el código de tu aplicación está dentro de una carpeta llamada src, sólo tenemos que copiar vyou-react allí, por lo que nuestro árbol de archivos debería tener este aspecto:

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

También proporcionamos tipificaciones de Typescript, por lo que su IDE o 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-react'

import './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="en"
      baseUrl={BACKEND_BASEURL}
      oauth={{
        clientId: 'MY-VYOU-CLIENT-ID',
        redirectUri: `${FRONTEND_BASEURL}/vyou_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 la localización de la UI. Su valor puede seres o en. Si no se especifica, el SDK tomará la configuración regional del navegador del usuario.
  • Con baseUrl le estamos diciendo al SDK dónde está nuestro backend VYou
  • oauth configura el servicio VYou OAuth. redirectUri es la URL pública a la que el servicio OAuth va a redirigir después de una autorización exitosa para evitar problemas relacionados con CORS. Por ejemplo, si estás usando Create React App o vanilla Webpack con el plugin de copia, puedes simplemente añadir un archivo vacío dentro de la carpeta public. Puede ser sólo un archivo vacío, no hay necesidad de tener 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