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

Faites passer en toute fluidité vos utilisateurs de votre application iOS ou Android à un flux d’abonnement sécurisé et authentifié dans votre application web grâce à Native to Web Single Sign-On (SSO) et aux jetons de transfert de session.

Avant de commencer

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

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

3. Ajoutez l’authentification Auth0 à votre application native à l’aide des Quickstarts appropriés pour votre plateforme :

• Quickstart iOS Swift
• Quickstart Android

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

5. Ajoutez l’authentification Auth0 à votre application Web à l’aide du Quickstart React Single Page App.

Native to Web Single Sign-On (SSO) vous permet de créer une expérience utilisateur fluide et sécurisée entre votre application native et un parcours d’adhésion payante sur le Web. Native to Web SSO 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é à courte durée de vie.

Les sections ci-dessous expliquent comment ajouter :

• À votre application native, un bouton S’abonner maintenant qui permet aux utilisateurs authentifiés de souscrire à un forfait d’adhésion payant au moyen d’une expérience de paiement sécurisée sur le Web.
• À votre application Web, une page d’abonnement qui permet à l’utilisateur de sélectionner un abonnement d’adhésion sans avoir à se reconnecter.

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

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

​

Configurer l’Auth0 CLI

Utilisez l’Auth0 CLI pour configurer votre tenant Auth0. Vous pouvez aussi utiliser l’Auth0 Management API; pour en savoir plus, consultez Configurer Native to Web SSO.

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

1. Initialisez l’Auth0 CLI

auth0 login

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

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

3. Sélectionnez le tenant Auth0 où vous souhaitez activer Native to Web SSO.

​

Configurer Auth0

​

Activez Native to Web SSO dans votre application native

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

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

​

Activez Native to Web SSO 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 au moyen d’un cookie, aucune autre modification n’est nécessaire dans votre application web. La seule condition est que le navigateur accède à l’URI de connexion de votre application afin de traiter la redirection de l’utilisateur vers le point de terminaison /authorize de votre tenant Auth0.

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

​

Créer 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 à 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, il sera redirigé vers la page Universal Login.
• Si un session_transfer_token est ajouté en tant que paramètre d’URL, le token est transmis dans la requête d’authentification.
• Une fois authentifié, l’utilisateur verra des boutons pour s’abonner à différents forfaits d’adhésion.

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 Auth0 Universal Login.

  • 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 la Web Authentication standard.

Lorsque l’utilisateur se connecte, il est renvoyé 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énement, par exemple la méthode onClick du bouton.

​

iOS

Les étapes suivantes décrivent comment ajouter le paiement mobile-to-web aux 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 contenu du fichier ProfileView.swift pour y ajouter un bouton sous les renseignements 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 S’abonner à l’adhésion et utilise une closure onSubscribe pour définir le comportement lorsqu’on appuie sur ce bouton.

​

Étape 2 : Mettez en place le flux d’abonnement à l’aide de Native to Web SSO

Modifiez le fichier MainView.swift pour définir le comportement du bouton S’abonner à l’adhésion :

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 tenant Auth0 ou le remplacer par l’identifiant de votre propre API.

Pour en savoir plus, consultez Configurer les API.

Cela permet à l’utilisateur de sélectionner S’abonner à l’adhésion 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 mobile vers le Web aux applications natives Android :

​

Étape 1 : Ajouter un bouton S’abonner à la page principale

Pour lancer le flux d’abonnement Web à partir de votre application native Android, ajoutez un bouton Adhérer à 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 avec Native to Web SSO

Modifiez le fichier MainActivity.kt pour définir le comportement du bouton S’abonner à l’adhésion :

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 identifiants au moyen de 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 ayant cet identifiant dans votre tenant Auth0, ou le remplacer par l’identifiant de votre propre API.

Pour en savoir plus, consultez Configurer les 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 S’abonner à l’adhésion dans l’application native et de lancer immédiatement le processus d’abonnement à l’application Web sans avoir à se reconnecter.

​

Testez votre mise en œuvre de Native to Web SSO

Une fois que tout est configuré, lancez votre application native iOS ou Android pour vous connecter, accédez à l’écran Profile ou Mainscreen et sélectionnez le bouton Souscrire à l’adhésion.

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 cookie 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 l’ouverture de session à l’aide de Native to Web SSO
• L’utilisateur voit immédiatement les options d’abonnement dans l’application web

Vous avez créé une expérience fluide où l’utilisateur d’une application native mobile peut lancer un parcours sécurisé et authentifié dans une application web sans devoir se reconnecter.

​

Prochaines étapes

• Découvrez plus d’options de configuration pour Native to Web SSO :Approfondissez la durée de vie de la session, la rotation du jeton d’actualisation, la liaison de l’appareil et la révocation en cascade dans la documentation sur Native to Web SSO.
• Personnalisez l’expérience post-login 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.