IBM Cloud Docs

Con IBM Cloud® App ID puede utilizar una interfaz de usuario predeterminada, denominada Widget de inicio de sesión, para permitir a los usuarios de la aplicación elegir el proveedor de identidad con el que desean iniciar sesión. Si utiliza Cloud Directory, el widget de inicio de sesión también proporciona interfaces de usuario adicionales para funciones como el registro, el olvido de contraseña, la autenticación multifactor, etc.

Uno de los mejores aspectos del Widget de inicio de sesión es que puede empezar a utilizar App ID antes de haber implementado cualquiera de sus propias IU de autenticación, lo que hace que la experiencia de incorporación del desarrollador sea mucho más fácil.

De forma predeterminada, el widget de inicio de sesión está habilitado para utilizar el Facebook, Google y el Directorio en la nube. Puede cambiar el comportamiento en cualquier momento seleccionando los proveedores de identidad que desea configurar como una opción. Cuando se configura más de un proveedor de identidad, el Widget de inicio de sesión presenta una pantalla donde el usuario puede realizar su propia selección de proveedor de identidad. Pero, si tiene un único proveedor habilitado, los usuarios no verán la pantalla de selección mencionada anteriormente. Se les lleva directamente al proveedor de identidad para iniciar el proceso de inicio de sesión.

Por ejemplo, si utiliza los productos predeterminados (Facebook, Google y Directorio en la nube), los usuarios ven la pantalla. Si habilitar únicamente Facebook, los usuarios se dirigen directamente a Facebook para autenticarse.

Si utiliza Directorio en la nube, App ID puede proporcionarle la funcionalidad ampliada de gestión de usuarios. La funcionalidad ampliada también se aplica a las prestaciones del widget de inicio de sesión. Los usuarios que están almacenados en Directorio en la nube pueden beneficiarse de funcionalidad, como por ejemplo, registrarse o el restablecer la contraseña directamente en el Widget de inicio de sesión. Consulte la tabla siguiente para ver qué pantallas puede visualizar para cada tipo de proveedor de identidad.

Las pantallas del widget de inicio de sesión que cada proveedor de identidad puede mostrar
Pantalla del widget de inicio de sesión	Proveedor de identidad social	Proveedor de identidad empresarial	Cloud Directory
Iniciar sesión
Registrarse
¿Ha olvidado su contraseña?
Cambiar contraseña
Detalles de cuenta

El Widget de inicio de sesión es dinámico. Puede personalizar el aspecto o la configuración del proveedor de identidad, y los cambios se aplican de forma inmediata. No es necesario que actualice el código de la aplicación ni que vuelva a desplegar la app.

¿Necesita más personalización de la que proporciona el Widget de inicio de sesión? Puede implementar su propia interfaz de usuario totalmente personalizada para el inicio de sesión de usuario, el registro, el restablecimiento de la contraseña y otros flujos para crear una experiencia que sea exclusiva de su app. Para empezar, consulte Gestión de marca en la app.

Para personalizar la pantalla:

Abra el panel de control del servicio App ID.
Seleccione la sección Personalización de inicio de sesión. Puede modificar el aspecto del Widget de inicio de sesión para alinearlo con la marca de su empresa.
Suba el logotipo de su empresa seleccionando un archivo PNG o JPG del sistema local. El tamaño de imagen recomendado es de 320 x 320 píxeles. El tamaño de archivo máximo es 100 Kb.
Seleccione un color de cabecera para el widget desde el selector de color, o especifique el código hexadecimal para otro color.
Inspeccione el panel de vista previa y pulse Guardar cambios cuando esté satisfecho con las personalizaciones. Aparecerá un mensaje de confirmación.
En el navegador, renueve la página de inicio de sesión para verificar los cambios.

Puede llamar a pantallas preconfiguradas con el SDK de cliente de Android.

Añada el mandato siguiente a su código.

LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launch(this, new AuthorizationListener() {
      @Override
      public void onAuthorizationFailure (AuthorizationException exception) {
      //Exception occurred
      }

      @Override
      public void onAuthorizationCanceled () {
      //Authentication canceled by the user
      }

      @Override
      public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, refreshToken: RefreshToken) {
      //User authenticated
      }
   });

Configure los ajustes de su Directorio en la nube en la consola. Permitir a los usuarios iniciar sesión en la app y Permitir a los usuarios gestionar su cuenta desde la app deben establecerse en Activado.

Añada el código siguiente a la app. Cuando un usuario se registra para la aplicación desde la pantalla personalizada, se inicia el flujo de registro. La llamada siguiente no solo registra al usuario, sino que también puede enviar un correo electrónico de verificación para completar el registro, en función de las configuraciones del directorio en la nube.

LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchSignUp(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         //Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         //Sign up canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         if (accessToken != null && identityToken != null) {
            //User authenticated
         } else {
            //email verification is required
         }
   }
});

Configure los ajustes de su Directorio en la nube en la consola. Permitir a los usuarios gestionar la cuenta desde la app se debe establecer en Activado.
En el separador Restablecer contraseña del panel de control del servicio, asegúrese de que Correo electrónico de contraseña olvidada se haya establecido en Activado.

Añada el código siguiente a la app. Cuando un usuario pulsa "contraseña olvidada" en la aplicación, el SDK llama a la API forgot_password para enviar un correo electrónico al usuario que le permita restablecerla.

LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchForgotPassword(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         //Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         // Forogt password canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         // Forgot password finished, in this case accessToken and identityToken will be null.
   }
});

Configure los ajustes de su Directorio en la nube en la consola. Permitir a los usuarios iniciar sesión en la app y Permitir a los usuarios gestionar su cuenta desde la app deben establecerse en Activado.
En el separador Contraseña cambiada del panel de control del servicio, establezca Correo electrónico de contraseña olvidada en

Llame al widget de inicio de sesión para iniciar el flujo de cambio de detalles.

LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchChangeDetails(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         // Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         // Changed details canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         // User authenticated, and fresh tokens received
   }
});

Configure los ajustes de su Directorio en la nube en la consola. Permitir a los usuarios iniciar sesión en la app y Permitir a los usuarios gestionar su cuenta desde la app deben establecerse en Activado.

Añada el código siguiente en la app para iniciar el flujo de cambio de contraseña.

LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchChangePassword(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         // Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         // Change password canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         // User authenticated, and fresh tokens received
   }
});

Puede llamar a pantallas preconfiguradas con el SDK de cliente de iOS Swift.

Añada el mandato siguiente a su código.

import IBMCloudAppID
class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken, identityToken: IdentityToken, refreshToken: RefreshToken?) {
         //User authenticated
   }

   public func onAuthorizationCanceled() {
         //Authentication canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
         //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launch(delegate: delegate())

Configure los ajustes de su Directorio en la nube en la consola. Permitir a los usuarios iniciar sesión en la app y Permitir a los usuarios gestionar su cuenta desde la app deben establecerse en Activado.

Añada el código siguiente en la aplicación. Cuando un usuario intenta registrarse para la aplicación, se llama al widget de inicio de sesión y muestra la página de registro personalizada.

class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
      if accessToken == nil && identityToken == nil {
      //email verification is required
      return
      }
   //User authenticated
   }

   public func onAuthorizationCanceled() {
      //Sign up canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
      //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchSignUp(delegate: delegate())

Configure los ajustes de su Directorio en la nube en la consola. Permitir a los usuarios gestionar la cuenta desde la app se debe establecer en Activado.
En el separador Restablecer contraseña del panel de control del servicio, asegúrese de que Correo electrónico de contraseña olvidada se haya establecido en Activado.

Añada el código siguiente en la aplicación. Cuando uno de los usuarios de la app solicita que se actualice la contraseña, se llama al widget de inicio de sesión y se inicia el proceso.

class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
      //forgot password finished, in this case accessToken and identityToken will be null.
   }

   public func onAuthorizationCanceled() {
      //forgot password canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
      //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchForgotPassword(delegate: delegate())

Configure los ajustes de su Directorio en la nube en la consola. Permitir a los usuarios iniciar sesión en la app y Permitir a los usuarios gestionar su cuenta desde la app deben establecerse en Activado.
En el separador Contraseña cambiada del panel de control del servicio, establezca Correo electrónico de contraseña olvidada en

Llame al widget de inicio de sesión para iniciar el flujo de cambio de detalles.

class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
      //User authenticated, and fresh tokens received
   }

   public func onAuthorizationCanceled() {
         //changed details canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
         //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchChangeDetails(delegate: delegate())

Configure los ajustes de su Directorio en la nube en la consola. Permitir a los usuarios iniciar sesión en la app y Permitir a los usuarios gestionar su cuenta desde la app deben establecerse en Activado.

Añada el código siguiente en la app para iniciar el flujo de cambio de contraseña.

class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
         //User authenticated, and fresh tokens received
   }

   public func onAuthorizationCanceled() {
         //change password canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
         //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchChangePassword(delegate: delegate())

Puede llamar a pantallas preconfiguradas con el SDK del servidor Node.js.

Añada una ruta de envío a su app a la que pueda llamarse con los parámetros de nombre de usuario y contraseña e inicie la sesión utilizando la contraseña del propietario del recurso.

app.post("/form/submit", bodyParser.urlencoded({extended: false}), passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
failureRedirect: ROP_LOGIN_PAGE_URL,
failureFlash : true // allow flash messages
}));

WebAppStrategy permite a los usuarios iniciar sesión en sus apps web con un nombre de usuario y una contraseña. Después de un inicio de sesión satisfactorio, la señal de acceso de un usuario se almacena en la sesión HTTP y está disponible durante la sesión. Una vez que la sesión HTTP se ha destruido o ha caducado, la señal deja de ser válida.

Configure los ajustes de su Directorio en la nube en la consola. Permitir a los usuarios iniciar sesión en la app y Permitir a los usuarios gestionar su cuenta desde la app deben establecerse en Activado.
Añada el código siguiente en la aplicación. Cuando un usuario intenta registrarse para la aplicación, se llama al widget de inicio de sesión y muestra la página de registro personalizada.
```
app.get("/sign_up", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.SIGN_UP
}));
```

Configure los ajustes de su Directorio en la nube en la consola. Permitir a los usuarios gestionar la cuenta desde la app se debe establecer en Activado.
En el separador Restablecer contraseña del panel de control del servicio, asegúrese de que Correo electrónico de contraseña olvidada se haya establecido en Activado.
Añada el código siguiente en la aplicación para pasar la propiedad show a WebAppStrategy.FORGOT_PASSWORD. Cuando un usuario solicita que se actualice la contraseña de la app, se llama al widget de inicio de sesión y se inicia el proceso.
```
app.get("/forgot_password", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.FORGOT_PASSWORD
}));
```

Configure los ajustes de su Directorio en la nube en la consola. Permitir a los usuarios iniciar sesión en la app y Permitir a los usuarios gestionar su cuenta desde la app deben establecerse en Activado.
En el separador Contraseña cambiada del panel de control del servicio, establezca Correo electrónico de contraseña olvidada en

Añada el código siguiente en la aplicación para pasar la propiedad show a WebAppStrategy.FORGOT_PASSWORD para iniciar el formulario de modificación de detalles.

app.get("/change_details", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.CHANGE_DETAILS
}));

Configure los ajustes de su Directorio en la nube en la consola. Permitir a los usuarios iniciar sesión en la app y Permitir a los usuarios gestionar su cuenta desde la app deben establecerse en Activado.
En el separador Contraseña cambiada del panel de control del servicio, establezca Correo electrónico de contraseña olvidada en

Añada el código siguiente en la aplicación para pasar la propiedad show a WebAppStrategy.FORGOT_PASSWORD para iniciar el formulario de modificación de detalles.

app.get("/change_password", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.CHANGE_PASSWORD
}));

Utilización del widget Inicio de sesión

Comprensión del widget de inicio de sesión

¿Cuál es el comportamiento predeterminado del Widget de inicio de sesión?

¿Qué pantallas se pueden visualizar para cada proveedor?

Personalización de un flujo de inicio de sesión SSO

Personalización del widget de inicio de sesión

Visualización del widget de inicio de sesión con el SDK de Android

Registrarse

¿Ha olvidado su contraseña?

Cambio de detalles

Cambiar contraseña

Visualización del widget de inicio de sesión en el SDK de Swift de iOS

Registrarse

¿Ha olvidado su contraseña?

Cambio de detalles

Cambiar contraseña

Visualización del widget de inicio de sesión con el SDK de Node.js

Registrarse

¿Ha olvidado su contraseña?

Cambio de detalles

Cambiar contraseña