Caso de uso: Configurar flujos de pago de móvil a web con SSO de aplicaciones nativas a web

Transiciona sin problemas a los usuarios desde tu aplicación para iOS o Android a un flujo de suscripción seguro y autenticado en tu aplicación web mediante SSO de aplicaciones nativas a web y tokens de transferencia de sesión.

Antes de comenzar

1. Cree un inquilino de Auth0 para registrar y configurar sus aplicaciones nativas y web.

2. Instale y configure Auth0 CLI para su inquilino de Auth0.

3. Agregue la autenticación de Auth0 a su aplicación nativa mediante las guías de inicio rápido correspondientes para su plataforma:

• Guía de inicio rápido de iOS Swift
• Guía de inicio rápido de Android

4. Agregue compatibilidad con refresh_token a su aplicación nativa.

5. Agregue la autenticación de Auth0 a su aplicación web mediante la guía de inicio rápido para aplicaciones de una sola página con React.

Inicio de sesión único (SSO) de aplicaciones nativas a web le permite crear una experiencia de usuario fluida y segura entre su aplicación nativa y un flujo web de suscripción de pago. El SSO de aplicaciones nativas a web permite que la aplicación nativa envíe el contexto de autenticación del usuario a la aplicación web mediante un session_transfer_token seguro y de corta duración.

Las secciones siguientes describen cómo agregar:

• A su aplicación nativa, un botón Suscribirse ahora que permite a los usuarios autenticados contratar un plan de suscripción de pago mediante un proceso de compra web seguro.
• A su aplicación web, una página de suscripción que permite a los usuarios seleccionar suscripciones de membresía sin tener que volver a iniciar sesión.

Este caso de uso se centra en aplicaciones web basadas en React que usan el SDK de React de Auth0.

Si usa un framework diferente, como Node o Express, la lógica para administrar session_transfer_token, ya sea mediante un parámetro de URL o una cookie, puede adaptarse según corresponda.

​

Configura la Auth0 CLI

Usa la Auth0 CLI para configurar tu inquilino de Auth0. También puedes usar la Auth0 Management API; para obtener más información, consulta Configurar SSO de aplicaciones nativas a web.

Sigue estos pasos para autenticarte en tu inquilino de Auth0 con la Auth0 CLI:

1. Inicializa la Auth0 CLI

auth0 login

2. Seleccione Como usuario y siga el flujo de inicio de sesión.

How would you like to authenticate?
> As a user
  As a machine

3. Selecciona el inquilino de Auth0 en el que quieras habilitar el SSO de aplicaciones nativas a web.

​

Configura Auth0

​

Habilite el SSO de aplicaciones nativas a web en su aplicación nativa

El SSO de aplicaciones nativas a web utiliza un session_transfer_token para establecer el SSO desde una aplicación nativa a una aplicación web. El session_transfer_token permite a Auth0 identificar de forma segura al usuario, la aplicación nativa de origen y contexto adicional. Para obtener más información, consulte SSO de aplicaciones nativas a web.

Habilite el SSO de aplicaciones nativas a web con Auth0 CLI:

​

Habilita el SSO de aplicaciones nativas a web en tu aplicación web

Configura la aplicación web para que acepte el session_transfer_token para la autenticación mediante una cookie o un parámetro de URL con Auth0 CLI:

Si el session_transfer_token se inyecta en el navegador mediante una cookie, no se requieren cambios adicionales en su aplicación web. El único requisito es que el navegador vaya al URI de inicio de sesión de su aplicación para procesar la redirección del usuario al endpoint /authorize de su inquilino de Auth0.

Puede configurar el URI de inicio de sesión de la aplicación en la configuración de su aplicación en Auth0 Dashboard. Esta es la ruta a la que Auth0 redirigirá a los usuarios cuando el inicio de sesión se active desde fuentes externas.

​

Crear una página de suscripción en la aplicación web

Agrega un nuevo archivo en /src/views/ para crear la página de suscripción:

​

Paso 1: Agrega un nuevo archivo de vista

Crea un archivo en src/views/JoinMembership.js. Este archivo solicitará a los usuarios que completen una suscripción de pago.

import React, { useEffect } from "react";
import { useAuth0 } from "@auth0/auth0-react";
import { useLocation } from "react-router-dom";
import { Container, Button } from "reactstrap";
import Loading from "../components/Loading";

const JoinMembership = () => {
  const { isAuthenticated, isLoading, loginWithRedirect } = useAuth0();
  const location = useLocation();

  useEffect(() => {
    if (isLoading || isAuthenticated) return;

    const params = new URLSearchParams(location.search);
    const token = params.get("session_transfer_token");

    const redirectOptions = {
      appState: { returnTo: "/join-membership" },
      authorizationParams: {},
    };

    if (token) {
      redirectOptions.authorizationParams.session_transfer_token = token;
    }

    loginWithRedirect(redirectOptions);
  }, [isAuthenticated, isLoading, loginWithRedirect, location.search]);

  if (isLoading) {
    return <Loading />;
  }

  if (!isAuthenticated) {
    return <p>Redirecting to login...</p>;
  }

  return (
    <Container className="mt-5">
      <h1>Choose a Subscription Plan</h1>
      <Button color="primary" className="mb-3" onClick={() => alert("Subscribed to Basic!")}>
        Basic – $5/month
      </Button>
      <Button color="secondary" className="mb-3" onClick={() => alert("Subscribed to Pro!")}>
        Pro – $10/month
      </Button>
      <Button color="success" className="mb-3" onClick={() => alert("Subscribed to Premium!")}>
        Premium – $20/month
      </Button>
    </Container>
  );
};

export default JoinMembership;

​

Paso 2: Añada una nueva ruta

Edite el archivo src/App.js y añada una ruta /join-membership a la nueva página de suscripción:

import JoinMembership from "./views/JoinMembership";

 {/* Redirigir a la página de unirse a la membresía */}
<Route path="/join-membership" component={JoinMembership} />

La nueva ruta /join-membership:

• Determina si el usuario está autenticado. Si no lo está, redirige al usuario a la página de Universal Login.
• Si se agrega un session_transfer_token como parámetro de URL, el token se pasa en la solicitud de autenticación.
• Una vez autenticado, al usuario se le mostrarán botones para suscribirse a distintos planes de membresía.

Ejecute su aplicación React y vaya a http://localhost:3000/join-membership

• Si el usuario está autenticado, verá las opciones de suscripción.

• Si el usuario no está autenticado, se le redirige automáticamente a la página de Universal Login de Auth0.

  • Si la URL incluye un session_transfer_token, se incluirá en la solicitud de inicio de sesión a Auth0.
  • Si no, el inicio de sesión continuará con la autenticación web estándar.

Cuando el usuario inicie sesión, volverá a la página /join-membership para seleccionar las opciones de suscripción.

​

Configura la aplicación nativa

Tu aplicación nativa debe intercambiar el refresh_token por un session_transfer_token justo antes de iniciar la aplicación web. Para ello, agrega el intercambio de transferencia de sesión y la lógica de inicio de la aplicación web dentro del mismo controlador de eventos; por ejemplo, el método onClick del botón.

​

iOS

Los siguientes pasos describen cómo agregar el pago de móvil a web en aplicaciones nativas de iOS:

​

Paso 1: Agrega un botón Subscribe to Membership

Para iniciar el flujo de suscripción basado en la web desde tu aplicación nativa de iOS, agrega un botón Subscribe to Membership al archivo ProfileView.swift.

Edita el cuerpo del archivo ProfileView.swift para incluir un botón debajo de la información del usuario:

import SwiftUI

struct ProfileView: View {
    let user: User
    var onSubscribe: () -> Void = {}

    var body: some View {
        List {
            Section(header: ProfileHeader(picture: user.picture)) {
                ProfileCell(key: "ID", value: user.id)
                ProfileCell(key: "Name", value: user.name)
                ProfileCell(key: "Email", value: user.email)
                ProfileCell(key: "Email verified?", value: user.emailVerified)
                ProfileCell(key: "Updated at", value: user.updatedAt)
            }

            Section {
                Button("Subscribe to Membership", action: onSubscribe)
            }
        }
    }
}

El archivo ProfileView.swift agrega un botón Subscribe to Membership y usa una clausura onSubscribe para definir el comportamiento al seleccionarlo.

​

Paso 2: Implementa el flujo de suscripción con SSO de aplicaciones nativas a web

Edita el archivo MainView.swift para definir el comportamiento del botón Subscribe to Membership:

Este ejemplo usa la audiencia https://sample.api.com con fines de demostración. Puede crear una API con este identificador en su inquilino de Auth0 o reemplazarlo por el identificador de su propia API.

Para obtener más información, consulte Configurar API.

Esto permite que el usuario seleccione Subscribe to Membership en la aplicación nativa y comience de inmediato el proceso de suscripción en la aplicación web sin volver a iniciar sesión.

​

Android

Los siguientes pasos explican cómo añadir pagos desde móviles a la web en aplicaciones nativas de Android:

​

Paso 1: Agrega un botón de suscripción a la página principal

Para iniciar el flujo de suscripción basado en web desde tu aplicación nativa de Android, agrega a la interfaz de usuario un botón Subscribe to Membership.

Edita el archivo MainActivity.kt y agrega el siguiente código al método onCreate():

binding.buttonSubscribe.setOnClickListener { launchSubscriptionFlow() }

Edite el archivo activity_main.xml para incluir el código que aparece a continuación después del botón @+id/button_patch_metadata:

<Button
    android:id="@+id/buttonSubscribe"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Subscribe to Membership" />

​

Paso 2: Implemente el flujo de suscripción mediante SSO de aplicaciones nativas a web

Edite el archivo MainActivity.kt para definir el comportamiento del botón Subscribe to Membership:

1. Amplíe el flujo de inicio de sesión y gestione la acción de suscripción:

// Importaciones necesarias
import com.auth0.android.authentication.storage.SecureCredentialsManager
import com.auth0.android.authentication.storage.SharedPreferencesStorage
import com.auth0.android.result.SSOCredentials

2. Actualiza el método onCreate() para incluir credentialsManager:

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Configurar el objeto de cuenta con los detalles de la aplicación Auth0
        account =  Auth0.getInstance(
            getString(R.string.com_auth0_client_id),
            getString(R.string.com_auth0_domain)
        )

        // Asociar el clic del botón con la acción de inicio de sesión
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.buttonLogin.setOnClickListener { loginWithBrowser() }
        binding.buttonLogout.setOnClickListener { logout() }
        binding.buttonGetMetadata.setOnClickListener { getUserMetadata() }
        binding.buttonPatchMetadata.setOnClickListener { patchUserMetadata() }
        binding.buttonSubscribe.setOnClickListener { launchSubscriptionFlow() }

        secureCredentialsManager = SecureCredentialsManager(
            this,
            AuthenticationAPIClient(account),
            SharedPreferencesStorage(this)
        )

    }

3. Actualiza el método loginwithBrowser() para almacenar las credenciales mediante credentialsManager:

private fun loginWithBrowser() {
    WebAuthProvider.login(account)
        .withScheme(getString(R.string.com_auth0_scheme))
        .withScope("openid profile email offline_access")
        .withAudience("https://example.api.com")
        .start(this, object : Callback<Credentials, AuthenticationException> {
            override fun onSuccess(credentials: Credentials) {
                secureCredentialsManager.saveCredentials(credentials)
                cachedCredentials = credentials
                showSnackBar("Success: ${credentials.accessToken}")
                updateUI()
                showUserProfile()
            }

            override fun onFailure(exception: AuthenticationException) {
                showSnackBar("Failure: ${exception.getCode()}")
            }
        })
}

Este ejemplo usa la audiencia https://sample.api.com únicamente con fines de demostración. Puede crear una API con este identificador en su inquilino de Auth0 o sustituirlo por el identificador de su propia API.

Para obtener más información, lea Configurar APIs.

4. Agregue el método launchSubscriptionFlow() para abrir la aplicación web:

private fun launchSubscriptionFlow() {
    secureCredentialsManager.getSsoCredentials(
        mapOf(),  // parámetros opcionales
        object : Callback<SSOCredentials, CredentialsManagerException> {
            override fun onSuccess(result: SSOCredentials) {
                val sessionToken = result.sessionTransferToken

                val cookieValue =
                    "auth0_session_transfer_token=$sessionToken; Path=/; Secure; HttpOnly; SameSite=None"
                val cookieManager = android.webkit.CookieManager.getInstance()
                cookieManager.setAcceptCookie(true)
                cookieManager.setCookie("https://${getString(R.string.com_auth0_domain)}", cookieValue)

                val webView = android.webkit.WebView(this@MainActivity)
                webView.settings.javaScriptEnabled = true
                webView.webViewClient = object : android.webkit.WebViewClient() {
                    override fun shouldOverrideUrlLoading(view: android.webkit.WebView?, url: String?) = false
                }

                webView.loadUrl("http://localhost:3000/join-membership")
                setContentView(webView)
            }

            override fun onFailure(error: CredentialsManagerException) {
                showSnackBar("Failed to get session transfer token: ${error.message}")
            }
        }
    )
}

Esto permite que el usuario seleccione Subscribe to Membership en la aplicación nativa y comience de inmediato el proceso de suscripción en la aplicación web sin tener que volver a iniciar sesión.

​

Pruebe su implementación de SSO de aplicaciones nativas a web

Una vez que todo esté configurado, ejecute su aplicación nativa de iOS o Android para iniciar sesión, vaya al perfil o a la pantalla principal y seleccione el botón Subscribe to Membership.

Sucede lo siguiente:

• El refresh_token almacenado se utiliza para solicitar un session_transfer_token seguro
• El session_transfer_token se inserta en una cookie para su dominio de Auth0
• Se utiliza un WKWebView para cargar la ruta /join-membership de su aplicación web
• La aplicación web recibe el session_transfer_token y completa el inicio de sesión mediante SSO de aplicaciones nativas a web
• El usuario ve inmediatamente las opciones de suscripción en la aplicación web

Ha creado una experiencia fluida en la que el usuario de una aplicación móvil nativa puede iniciar un flujo seguro y autenticado en una aplicación web sin tener que volver a iniciar sesión.

​

Próximos pasos

• Explora más opciones de configuración para el SSO de aplicaciones nativas a web:Profundiza en el tiempo de vida de la sesión, la rotación de token de actualización, la vinculación de dispositivos y la revocación en cascada en la documentación de SSO de aplicaciones nativas a web.
• Personaliza la experiencia posterior al inicio de sesión con el perfilado progresivo:Usa el formulario de perfilado progresivo de Auth0 para recopilar datos de usuario adicionales después del inicio de sesión —como preferencias del plan, dirección o intención de pago— antes de mostrar las opciones de suscripción.