--- id: 589a69f5f9fc0f352b528e70 title: Implementation of Social Authentication challengeType: 2 videoUrl: '' localeTitle: Implementación de la autenticación social. --- ## Description
Como recordatorio, este proyecto se está construyendo sobre el siguiente proyecto de inicio en Glitch , o clonado desde GitHub . La ruta básica que seguirá este tipo de autenticación en su aplicación es:
  1. El usuario hace clic en un botón o enlace que lo envía a nuestra ruta para autenticarse mediante una estrategia específica (por ejemplo, Github)
  2. Su ruta llama a passport.authenticate('github') que los redirige a Github.
  3. La página en la que aterriza el usuario, en Github, les permite iniciar sesión si aún no lo están. Luego les pide que aprueben el acceso a su perfil desde nuestra aplicación.
  4. El usuario es devuelto a nuestra aplicación en una url de devolución de llamada específica con su perfil, si se aprueban.
  5. Ahora están autenticados y su aplicación debería verificar si se trata de un perfil de retorno, o guardarla en su base de datos si no lo está.
Las estrategias con OAuth requieren que tenga al menos un ID de cliente y un secreto de cliente, que es una forma de verificar de quién proviene la solicitud de autenticación y si es válida. Estos se obtienen del sitio con el que está intentando implementar la autenticación, como Github, y son exclusivos de su aplicación. NO DEBEN SER COMPARTIDOS y nunca deben cargarse en un repositorio público o escribirse directamente en su código. Una práctica común es colocarlos en su archivo .env y hacer referencia a ellos como: process.env.GITHUB_CLIENT_ID . Para este desafío vamos a utilizar la estrategia Github. La obtención de su ID de cliente y Secreto de Github se realiza en la configuración del perfil de su cuenta en 'Configuración del desarrollador' y luego en ' Aplicaciones OAuth '. Haga clic en 'Registrar una nueva aplicación', nombre su aplicación, pegue la url en su página de inicio de Glitch ( no la url del código del proyecto ) y, por último, para la url de devolución de llamada, pegue la misma url que la página de inicio pero con '/ auth / github / callback 'añadido. Aquí es donde los usuarios serán redirigidos para que nosotros los manejemos después de la autenticación en Github. Guarde la información devuelta como 'GITHUB_CLIENT_ID' y 'GITHUB_CLIENT_SECRET' en su archivo .env. En su proyecto remezclado, cree 2 rutas aceptando solicitudes GET: / auth / github y / auth / github / callback. El primero solo debe llamar al pasaporte para autenticar 'github' y el segundo debe llamar al pasaporte para autenticar 'github' con una redirección de falla a '/' y luego, si eso es exitoso, redirigir a '/ profile' (similar a nuestro último proyecto). Un ejemplo de cómo debería verse '/ auth / github / callback' es similar a cómo manejamos un inicio de sesión normal en nuestro último proyecto:
 app.ruta ('/ login')
  .post (passport.authenticate ('local', {failureRedirect: '/'}), (req, res) => {
    res.redirect ('/ profile');
  }); 
Envía tu página cuando creas que lo has hecho bien. Si te encuentras con errores, puedes revisar el proyecto hasta este punto aquí .
## Instructions
## Tests
```yml tests: - text: Ruta / auth / github correcta testString: 'getUserInput => $.get(getUserInput("url")+ "/_api/server.js") .then(data => { assert.match(data, /("|")\/auth\/github("|")[^]*get.*passport.authenticate.*github/gi, "Route auth/github should only call passport.authenticate with github"); }, xhr => { throw new Error(xhr.statusText); })' - text: Ruta / auth / github / callback correcto testString: 'getUserInput => $.get(getUserInput("url")+ "/_api/server.js") .then(data => { assert.match(data, /("|")\/auth\/github\/callback("|")[^]*get.*passport.authenticate.*github.*failureRedirect:( |)("|")\/("|")/gi, "Route auth/github/callback should accept a get request and call passport.authenticate for github with a failure redirect to home"); }, xhr => { throw new Error(xhr.statusText); })' ```
## Challenge Seed
## Solution
```js // solution required ```