Configurar Social Logins

Antes de habilitar Social Logins al configurar un método de autenticación, debes completar ciertos pasos para asegurarte de tener el Client ID y el Client Secret requeridos para cada servicio que necesites. Esto implica configurar una aplicación en la consola de desarrollador del Social Login correspondiente y obtener las credenciales OAuth. También necesitarás tener tu propia cuenta con cada uno de los proveedores de Social Login para acceder a sus consolas de desarrollador.

Habilitar Social Login de Zoho

Para habilitar la opción de inicio de sesión con Zoho en tu aplicación, necesitas obtener las credenciales OAuth de tu aplicación desde la consola de API de Zoho de la siguiente manera:

1. Navega a la Zoho API Console desde aquí y haz clic en ADD CLIENT.
   

2. Selecciona Server-based Applications y haz clic en CREATE NOW.
   

3. Proporciona el nombre de tu aplicación como nombre del cliente.
   

4. Proporciona la Homepage URL y los Authorized Redirect URIs requeridos.

   • Puedes obtener los Authorized Redirect URIs siguiendo los pasos detallados en este documento de ayuda.
   • Asegúrate de ingresar los URIs de redirección de tu aplicación en el siguiente formato:
     • https://accounts.zohoportal.com/accounts/extoauth/ZAID/clientcallback
     • https://{{appdomain}}/accounts/pfs/ZAID/clientidpcallback
       

5. Haz clic en CREATE. Se mostrarán los valores de Client ID y Client Secret requeridos.
   

6. Puedes copiar las credenciales de Client ID y Client Secret requeridas desde la consola de API y pegarlas en los campos correspondientes en la consola de Catalyst, y haz clic en Enable.
   

Tus usuarios finales ahora pueden registrarse en tu aplicación usando sus credenciales de Zoho.

Habilitar Social Login de Google

Para habilitar la opción de inicio de sesión con Google en tu aplicación, debes obtener las credenciales OAuth requeridas de tu aplicación desde Google de la siguiente manera:

1. Inicia sesión en la Google API Console y haz clic en Create Project.

2. Haz clic en New Project.
   

3. Ingresa la información requerida y haz clic en Create.
   

4. Después de crear el proyecto, navega a la página de Credentials. Se te pedirá que configures la pantalla de OAuth consent screen con los detalles de tu aplicación, si es un proyecto nuevo. Haz clic en Configure Consent Screen.
   

5. Elige un tipo de usuario para tu aplicación y haz clic en Create.
   

6. Proporciona la información requerida.
   

7. En la sección App domain, bajo la sección Application home page, proporciona la página de inicio de tu aplicación. Ingresa la demás información según sea necesario y haz clic en Save And Continue.
   

8. En la sección Scopes, haz clic en Edit si deseas agregar o gestionar scopes distintos a la sección predeterminada.
   

9. Selecciona los scopes que necesites de las opciones listadas. También puedes proporcionar manualmente los scopes aplicables en la sección Manually add scopes y haz clic en UPDATE. Haz clic en SAVE AND CONTINUE una vez que hayas configurado los scopes.
   

10. En la sección Summary, confirma tus configuraciones y haz clic en el botón Edit si necesitas editar alguna de las configuraciones.
    

11. Regresa a la página de Credentials y haz clic en Create Credentials. Selecciona OAuth client ID de la lista desplegable.
    

12. Selecciona Web application como el tipo de aplicación de la selección desplegable de Application type.
    

• Ingresa el nombre de tu aplicación.
  

• Haz clic en ADD URI bajo Authorised JavaScript origins y haz clic en ADD URI bajo Authorised redirect URIs e ingresa los URIs de redirección de tu aplicación en el siguiente formato:

  • https://accounts.zohoportal.com/accounts/extoauth/ZAID/clientcallback

  • https://{{appdomain}}/accounts/pfs/ZAID/clientidpcallback
    Este URI se puede copiar desde el pop-up del Social Login de Google, y los pasos para habilitar este URI se muestran en este documento de ayuda:
    
    

Haz clic en Create una vez que hayas agregado la información requerida.

• Ahora serás dirigido a un pop-up que muestra el Client ID y el Client Secret. Puedes copiar los valores y descargar el archivo JSON que los contiene.
  

13. Ahora, haz clic en el Social Login de Google presente en la consola de Catalyst e ingresa el Client ID y el Client Secret que copiaste de la consola de Google, y haz clic en Enable.
    Tus usuarios finales ahora pueden registrarse en tu aplicación usando sus credenciales de Google.

Habilitar Social Login de Facebook

Para habilitar la opción de inicio de sesión con Facebook en tu aplicación, necesitas obtener las credenciales OAuth requeridas de tu aplicación desde Facebook de la siguiente manera:

1. Abre la página de desarrolladores de Facebook: Meta Developer Console

2. Inicia sesión en Facebook y haz clic en la opción My Apps.
   

3. Haz clic en Create App.
   

4. Según tu requerimiento, puedes optar por conectar tu portafolio de negocios a la consola de Meta. Dado que esto no es necesario para configurar el Social Login, hacemos clic en la opción correspondiente y luego en Next.
   

5. Selecciona “Authenticate and request data from users with Facebook Login” y haz clic en Next.
   

6. Ingresa los detalles requeridos y haz clic en Next.
   

7. Revisa tus configuraciones y haz clic en Create App.
   

8. Ahora serás dirigido al Dashboard de la consola de desarrollador de Facebook. Selecciona la opción “Customize adding a Facebook Login button”.
   

Serás dirigido a la sección de Customization del Facebook Login.

9. Haz clic en la pestaña Settings en el panel izquierdo.
   

10. Desplázate hacia abajo hasta la sección Client OAuth Settings.
    

11. En la sección del campo de entrada Valid OAuth Redirect URIs, proporciona los URIs de redirección OAuth en el siguiente formato:

• https://accounts.zohoportal.com/accounts/extoauth/ZAID/clientcallback
• https://{{appdomain}}/accounts/pfs/ZAID/clientidpcallback

Este URI se puede copiar desde el pop-up del Social Login de Facebook, y los pasos para habilitar este URI se muestran en este documento de ayuda:

Haz clic en Save Changes.

12. Serás dirigido de vuelta al Dashboard. Ahora selecciona la opción “Basic” presente en la sección App Settings de la consola, y copia y guarda los detalles de Client ID y Client Secret generados por Facebook. Haz clic en Save Changes una vez que hayas terminado de revisar los detalles.
    

13. Ahora puedes habilitar el Facebook Social Login en la consola. Haz clic en la opción Facebook y pega el valor de App ID en el campo Client ID y el valor de App Secret en el campo Client Secret, y haz clic en Enable.
    

Tus usuarios finales ahora podrán registrarse en tu aplicación usando sus credenciales de Facebook.

Habilitar Social Login de LinkedIn

Para habilitar la opción de inicio de sesión con LinkedIn en tu aplicación, necesitas obtener las credenciales OAuth requeridas de tu aplicación desde LinkedIn de la siguiente manera:

1. Inicia sesión en la página de desarrolladores de LinkedIn: http://developer.linkedin.com
2. Haz clic en el botón Create App en el centro de la página.
   

3. Ingresa la información requerida, como el nombre de la aplicación, la URL de la política de privacidad y el logo de la aplicación.
   

4. Acepta los términos y condiciones y haz clic en Create app.
   

5. Ahora verifica tu aplicación haciendo clic en el botón Verify que aparece junto a la página de LinkedIn de tu aplicación.
   

• Haz clic en Generate URL para generar la URL de verificación.
  

• Completa el proceso de verificación y haz clic en I’m done.
  

6. En la sección Settings, agrega la URL de tu aplicación al campo de entrada Domain de la sección Widgets si es necesario.
   

7. Navega a la pestaña Products, selecciona “Sign in with LinkedIn Using OpenID Connect” y haz clic en Request Access.
   Lee y acepta los términos y condiciones, haz clic en el botón Request Access para permitir registros con LinkedIn usando OpenID connect.
   

8. Haz clic en la pestaña Auth y copia el Client ID y el Client Secret presentes en la sección Authentication keys. En la sección de scopes OAuth 2.0 podrás ver que se han agregado tres scopes:

• openid
• profile
• email
  

9. Ahora haz clic en la pestaña Auth y copia el Client ID y el Client Secret presentes en la sección Authentication keys. En la sección Auth 2.0 settings, agrega las Authorized Redirection URLs de tu aplicación en el siguiente formato:

   • https://accounts.zohoportal.com/accounts/extoauth/ZAID/clientcallback
   • https://{{appdomain}}/accounts/pfs/ZAID/clientidpcallback
     Este URI se puede copiar desde el pop-up del Social Login de LinkedIn, y los pasos para habilitar este URI se muestran en este documento de ayuda:
     
     

10. Haz clic en la opción LinkedIn Social Login presente en la consola y agrega el Client ID y el Client Secret obtenidos. Luego, haz clic en Enable.
    

Tus usuarios finales ahora pueden registrarse en tu aplicación usando sus credenciales de LinkedIn.

Habilitar Social Login de Microsoft 365

Para habilitar la opción de inicio de sesión con Microsoft 365 en tu aplicación, necesitarás obtener las credenciales OAuth requeridas de tu aplicación con Microsoft Azure de la siguiente manera:

1. Abre Microsoft Azure e inicia sesión en la consola.
   

2. Navega a la sección de menú de la consola y haz clic en App Registrations.
   

3. Haz clic en New Registration.
   

4. Ingresa el nombre de la aplicación y elige el permiso requerido. En la sección Redirect URI, elige Web e ingresa el URI en el siguiente formato:
   https://{{appdomain}}/accounts/pfs/ZAID/clientidpcallback
   Este URI se puede copiar desde el pop-up del Social Login de Microsoft 365, y los pasos para habilitar este URI se muestran en este documento de ayuda:
   
   

5. Ahora serás dirigido a la sección Overview. Aquí puedes copiar el Application ID (Client ID).

6. Haz clic en la sección Redirect URIs.

• En la sección Redirect URI, haz clic en Add URI y agrega el segundo URI en el siguiente formato:https://accounts.zohoportal.com/accounts/extoauth/ZAID/clientcallback
  

7. Ahora, navega a la sección Certificates & secrets desde la barra de menú y haz clic en la sección Client secrets.
   

8. Haz clic en New Client Secret para generar el Client Secret.
   

9. Ingresa los detalles requeridos y haz clic en Add.
   

10. Copia la clave presente en la sección (Value).
    

11. Haz clic en la opción Microsoft 365 Social Login presente en la consola y agrega el Client ID y el Client Secret obtenidos y haz clic en Enable.