Cas d’utilisation : configurer des flux de paiement du mobile vers le web à l’aide du SSO Native to Web

Assurez une transition fluide pour les utilisateurs de votre application iOS ou Android vers un flux d’abonnement sécurisé et authentifié dans votre application web à l’aide du SSO Native to Web et de jetons de transfert de session.

Avant de commencer

1. Créez un locataire Auth0 pour enregistrer et configurer vos applications natives et Web.

2. Installez et configurez Auth0 CLI pour votre locataire Auth0.

3. Ajoutez l’authentification Auth0 à votre application native à l’aide des guides de démarrage rapide adaptés à votre plateforme :

• Guide de démarrage rapide iOS Swift
• Guide de démarrage rapide Android

4. Ajoutez la prise en charge de refresh_token à votre application native.

5. Ajoutez l’authentification Auth0 à votre application Web à l’aide du guide de démarrage rapide pour les applications monopages React.

Le SSO Native to Web (authentification unique) vous permet d’offrir une expérience utilisateur fluide et sécurisée entre votre application native et un parcours d’abonnement payant sur le Web. Le SSO Native to Web permet à l’application native d’envoyer le contexte d’authentification de l’utilisateur à l’application Web au moyen d’un session_transfer_token sécurisé et de courte durée.

Les sections ci-dessous décrivent comment ajouter :

• À votre application native, un bouton S’abonner maintenant qui permet aux utilisateurs authentifiés de souscrire un abonnement payant au moyen d’un processus de paiement Web sécurisé.
• À votre application Web, une page Abonnement qui permet à l’utilisateur de choisir un abonnement sans avoir à se reconnecter.

Ce cas d’utilisation porte sur les applications Web basées sur React qui utilisent le SDK React d’Auth0.

Si vous utilisez un autre framework, comme Node ou Express, la logique de gestion de session_transfer_token, au moyen d’un paramètre d’URL ou d’un cookie, peut être adaptée en conséquence.

​

Configurer Auth0 CLI

Utilisez Auth0 CLI pour configurer votre locataire Auth0. Vous pouvez aussi utiliser Auth0 Management API ; pour en savoir plus, consultez Configurer le SSO d’une application native vers le Web.

Suivez ces étapes pour vous authentifier auprès de votre locataire Auth0 à l’aide d’Auth0 CLI :

1. Initialisez Auth0 CLI

auth0 login

2. Sélectionnez En tant qu’utilisateur et suivez le processus de connexion.

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

3. Sélectionnez le locataire Auth0 dans lequel vous souhaitez activer le SSO Native to Web.

​

Configurer Auth0

​

Activer le SSO Native to Web dans votre application native

Le SSO Native to Web utilise un session_transfer_token pour établir le SSO entre une application native et une application Web. Le session_transfer_token permet à Auth0 d’identifier l’utilisateur, l’application native d’origine et du contexte supplémentaire en toute sécurité. Pour en savoir plus, consultez SSO Native to Web.

Activez le SSO Native to Web à l’aide d’Auth0 CLI :

​

Activer le SSO Native to Web dans votre application web

Configurez l’application web pour qu’elle accepte le session_transfer_token pour l’authentification au moyen d’un cookie ou d’un paramètre d’URL à l’aide d’Auth0 CLI :

Si le session_transfer_token est injecté dans le navigateur à l’aide d’un témoin, aucune autre modification n’est requise dans votre application Web. La seule exigence est que le navigateur accède à l’URI de connexion de votre application pour gérer la redirection de l’utilisateur vers le point de terminaison /authorize de votre locataire Auth0.

Vous pouvez configurer l’URI de connexion de l’application dans les paramètres de votre application dans Auth0 Dashboard. Il s’agit de la route vers laquelle Auth0 redirige les utilisateurs lorsqu’une connexion est lancée à partir de sources externes.

​

Créez une page d’abonnement dans l’application Web

Ajoutez un nouveau fichier dans /src/views/ pour créer une page d’abonnement :

​

Étape 1 : Ajouter un nouveau fichier de vue

Créez un fichier dans src/views/JoinMembership.js. Ce fichier invitera les utilisateurs à souscrire un abonnement payant.

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;

​

Étape 2 : Ajouter une nouvelle route

Modifiez le fichier src/App.js et ajoutez une route /join-membership pour la nouvelle page d’abonnement :

import JoinMembership from "./views/JoinMembership";

 {/* Rediriger vers la page d'adhésion */}
<Route path="/join-membership" component={JoinMembership} />

La nouvelle route /join-membership :

• Détermine si l’utilisateur est authentifié. Sinon, l’utilisateur est redirigé vers la page Universal Login.
• Si un session_transfer_token est ajouté à l’URL en tant que paramètre, le jeton est transmis dans la requête d’authentification.
• Une fois authentifié, l’utilisateur verra des boutons pour s’abonner à différents forfaits.

Exécutez votre application React et accédez à http://localhost:3000/join-membership

• Si l’utilisateur est authentifié, il verra les options d’abonnement.

• Si l’utilisateur n’est pas authentifié, il est automatiquement redirigé vers la page Universal Login d’Auth0.

  • Si l’URL comprend un session_transfer_token, il sera inclus dans la requête de connexion à Auth0.
  • Sinon, la connexion se poursuivra à l’aide de l’authentification web standard.

Lorsque l’utilisateur se connecte, il est redirigé vers la page /join-membership pour sélectionner les options d’abonnement.

​

Configurer l’application native

Votre application native doit échanger le refresh_token contre un session_transfer_token immédiatement avant de lancer l’application web. Pour ce faire, ajoutez l’échange de transfert de session et la logique de lancement de l’application web dans le même gestionnaire d’événements, par exemple dans la méthode onClick du bouton.

​

iOS

Les étapes suivantes décrivent comment ajouter le paiement du mobile vers le Web à des applications natives iOS :

​

Étape 1 : Ajouter un bouton Subscribe to Membership

Pour lancer le flux d’abonnement web à partir de votre application native iOS, ajoutez un bouton Subscribe to Membership au fichier ProfileView.swift.

Modifiez le corps du fichier ProfileView.swift pour inclure un bouton sous les informations de l’utilisateur :

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)
            }
        }
    }
}

Le fichier ProfileView.swift ajoute un bouton Subscribe to Membership et utilise une closure onSubscribe pour définir son comportement lorsqu’il est sélectionné.

​

Étape 2 : Implémenter le flux d’abonnement à l’aide de Native to Web SSO

Modifiez le fichier MainView.swift pour définir le comportement du bouton Subscribe to Membership :

Cet exemple utilise l’audience https://sample.api.com à des fins de démonstration. Vous pouvez créer une API avec cet identifiant dans votre locataire Auth0, ou le remplacer par l’identifiant de votre propre API.

Pour en savoir plus, consultez Configurer des API.

Cela permet à l’utilisateur de sélectionner Subscribe to Membership dans l’application native et de lancer immédiatement le processus d’abonnement dans l’application web sans avoir à se reconnecter.

​

Android

Les étapes suivantes indiquent comment ajouter le paiement d’une application mobile vers le Web à des applications Android natives :

​

Étape 1 : Ajouter un bouton Subscribe to Membership à la page principale

Pour lancer le flux d’abonnement sur le Web depuis votre application native Android, ajoutez un bouton Subscribe to Membership à l’interface utilisateur.

Modifiez le fichier MainActivity.kt et ajoutez le code suivant à la méthode onCreate() :

binding.buttonSubscribe.setOnClickListener { launchSubscriptionFlow() }

Modifiez le fichier activity_main.xml pour y inclure le code ci-dessous après le bouton @+id/button_patch_metadata :

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

​

Étape 2 : Implémenter le flux d’abonnement à l’aide du SSO Native to Web

Modifiez le fichier MainActivity.kt pour définir le comportement du bouton Subscribe to Membership :

1. Étendez le flux de connexion et gérez l’action d’abonnement :

// Importations requises
import com.auth0.android.authentication.storage.SecureCredentialsManager
import com.auth0.android.authentication.storage.SharedPreferencesStorage
import com.auth0.android.result.SSOCredentials

2. Mettez à jour la méthode onCreate() pour y inclure credentialsManager:

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

        // Configurer l'objet de compte avec les détails de l'application Auth0
        account =  Auth0.getInstance(
            getString(R.string.com_auth0_client_id),
            getString(R.string.com_auth0_domain)
        )

        // Associer le clic du bouton à l'action de connexion
        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. Mettez à jour la méthode loginwithBrowser() pour stocker les informations d’identification en utilisant le 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()}")
            }
        })
}

Cet exemple utilise l’audience https://sample.api.com à des fins de démonstration. Vous pouvez créer une API portant cet identifiant dans votre locataire Auth0, ou le remplacer par l’identifiant de votre propre API.

Pour en savoir plus, consultez Configurer des API.

4. Ajoutez la méthode launchSubscriptionFlow() pour ouvrir l’application Web :

private fun launchSubscriptionFlow() {
    secureCredentialsManager.getSsoCredentials(
        mapOf(),  // paramètres facultatifs
        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}")
            }
        }
    )
}

Cela permet à l’utilisateur de sélectionner Subscribe to Membership dans l’application native et de lancer immédiatement le processus d’abonnement dans l’application Web sans devoir se reconnecter.

​

Testez votre implémentation du SSO Native to Web

Une fois tout configuré, exécutez votre application native iOS ou Android pour vous connecter, accédez au profil ou à l’écran principal, puis sélectionnez le bouton Subscribe to Membership.

Voici ce qui se produit :

• Le refresh_token stocké est utilisé pour demander un session_transfer_token sécurisé
• Le session_transfer_token est injecté dans un témoin pour votre domaine Auth0
• Un WKWebView est utilisé pour charger la route /join-membership de votre application web
• L’application web reçoit le session_transfer_token et termine la connexion à l’aide du SSO Native to Web
• L’utilisateur voit immédiatement les options d’abonnement dans l’application web

Vous avez ainsi créé une expérience fluide dans laquelle un utilisateur d’application mobile native peut lancer un flux sécurisé et authentifié dans une application web sans avoir à se reconnecter.

​

Prochaines étapes

• Découvrez d’autres options de configuration pour Native to Web SSO :Approfondissez les notions de durée de vie de session, de rotation du jeton d’actualisation, de liaison à l’appareil et de révocation en cascade dans la documentation Native to Web SSO.
• Personnalisez l’expérience post-connexion avec le profilage progressif :Utilisez le Formulaire de profil progressif d’Auth0 pour recueillir des données utilisateur supplémentaires après la connexion — comme les préférences de forfait, l’adresse ou l’intention de paiement — avant d’afficher les options d’abonnement.