**Remarque pour les appareils iOS :** si l’utilisateur bascule vers l’application iOS Frame.io pour saisir le code de couplage, l’application peut passer en arrière-plan. Lorsque l’application redevient active, par exemple dans `applicationDidBecomeActive`, reprenez l’enquête pour que le flux d’autorisation puisse continuer sans que l’utilisateur ait besoin de redémarrer le couplage.Si vous recevez : ``` { "error": "expired_token" } ``` Le code a expiré avant la saisie utilisateur. Générez un nouveau code/code QR via l’étape 1, présentez-le à l’utilisateur et reprenez l’enquête. Une autorisation réussie produit : ``` { "access_token": "[access_token]", "expires_in": 28800, "refresh_token": "[refresh_token]", "token_type": "bearer" } ``` Votre appareil Camera to Cloud a bien été autorisé ! Examinons cette réponse : * **access_token** : vos informations d’identification d’authentification pour l’accès au backend Frame.io, requis dans les en-têtes pour les futures requêtes API. * **expires_in** : la période de validité du jeton d’accès en secondes, après laquelle l’actualisation est nécessaire. * **refresh_token** : utilisé pour la gestion des jetons d’accès, principalement pour actualiser l’autorisation mais aussi applicable pour la révocation. * **token_type** : toujours `bearer` pour les implémentations d’API C2C, ne nécessitant aucune action. ## Regrouper toutes les étapes Implémentons maintenant ces appels API en pseudocode de type Python, en gérant l’expiration potentielle du code d’appareil : **`Python`** ```python title="Python" def authorize_with_frame(): """ Handles authorizing our device with Frame.io. """ # Our client ID can be a serial number, UUID, or some other unique string. client_id = THIS_DEVICE.get_serial_number() while True: # Make the call to Frame.io to get our device codes. pairing_codes = c2c.get_device_codes(client_id) # We need to keep track of how long we have been polling for polling_started = datetime.now() # Now we are going to poll for authorization until the user enters the code. while True: # Re-write this output each time we poll. Note: This message will only update once # per `interval` (e.g., 5 seconds), so if a smooth countdown is desired, that will # need a different implementation. print( f"\rPAIRING CODE: {pairing_codes.user_code}, " f"EXPIRES IN: {pairing_codes.expires_in - (datetime.now() - polling_started).seconds} seconds" ) # Wait for `interval` before polling each time. sleep(pairing_codes.interval) # Make a call to Frame.io to see if the user has entered the code and authorized # the device. authorization, error = c2c.poll_for_authorization( client_id, pairing_codes.device_code ) if error and error.message == "authorization_pending": # If the authorization is pending, try again. continue elif error and error.message == "expired_token": # If the pairing codes have expired, break to generate new codes. break elif error: # If there was some other error, raise it. raise error else: # If there was no error, we have our authorization! return authorization # If we get here, our pairing codes expired. Let's try again. print("\nPairing code expired. Generating a new one...") ``` **Remarque :** la boucle externe gère les cas où les codes de couplage expirent et où de nouveaux codes sont requis. Comme étape finale, récupérez et affichez les informations de projet depuis Frame.io pour confirmer le couplage réussi au projet prévu. Nous aborderons ce point dans le tutoriel suivant. ## Création et affichage de codes QR pour le couplage Lors de l’implémentation du couplage URL/code QR, vous devez générer un code QR à partir de la valeur `verification_uri_complete` dans la réponse. Voici des exemples utilisant des bibliothèques populaires dans différents langages de programmation : ### Exemple Python avec qrcode **`Python`** ```python title="Python" import qrcode from PIL import Image import io def generate_qr_code(verification_uri_complete, size=250): """ Generate a QR code from the verification_uri_complete URL. Args: verification_uri_complete (str): The complete verification URI returned by Frame.io size (int, optional): Size of the QR code in pixels. Defaults to 250. Returns: PIL.Image: QR code image that can be displayed or saved """ qr = qrcode.QRCode( version=1, error_correction=qrcode.constants.ERROR_CORRECT_L, box_size=10, border=4, ) qr.add_data(verification_uri_complete) qr.make(fit=True) img = qr.make_image(fill_color="black", back_color="white") # Resize the image if needed img = img.resize((size, size)) return img # Example usage in authorization flow def display_qr_for_pairing(pairing_codes): """ Generate and display QR code along with manual pairing instructions. """ if hasattr(pairing_codes, 'verification_uri_complete'): # Generate QR code from the verification URI qr_img = generate_qr_code(pairing_codes.verification_uri_complete) # Display the QR code on screen # For GUI applications like Tkinter, PyQt, etc. # display_image(qr_img) # For headless devices or testing, save to file qr_img.save("frame_io_pairing_qr.png") print(f"Scan the QR code or visit: {pairing_codes.verification_uri}") print(f"Manual code: {pairing_codes.user_code}") else: # Fallback for devices that received traditional pairing response print(f"Enter code on Frame.io: {pairing_codes.user_code}") ``` ### Exemple JavaScript (web ou Electron) ```javascript import QRCode from 'qrcode'; /** * Generate and display a QR code from the verification URI * @param {string} verificationUriComplete - The complete verification URI from Frame.io * @param {string} elementId - ID of the HTML element to display the QR code in */ function displayQRCode(verificationUriComplete, elementId = 'qrcode-container') { const element = document.getElementById(elementId); if (!element) { console.error(`Element with ID ${elementId} not found`); return; } // Clear any existing content element.innerHTML = ''; // Generate QR code QRCode.toCanvas(element, verificationUriComplete, { width: 250 }, function(error) { if (error) { console.error('Error generating QR code:', error); // Fallback to displaying the URL as a link element.innerHTML = `Click here to pair`; } }); // Also display manual pairing information const manualInfoDiv = document.createElement('div'); manualInfoDiv.innerHTML = `
Scan the QR code or click here to pair your device.
Manual code: ${userCode}
`; element.parentNode.appendChild(manualInfoDiv); } // Example usage in authorization flow async function requestDeviceCode() { try { const response = await fetch('https://api.frame.io/v2/auth/device/code', { method: 'POST', headers: { 'x-client-version': '2.0.0', 'x-client-platypus-enabled': 'true' }, body: new URLSearchParams({ 'client_id': YOUR_CLIENT_ID, 'client_secret': YOUR_CLIENT_SECRET, 'scope': 'asset_create offline' }) }); const data = await response.json(); if (data.verification_uri_complete) { displayQRCode(data.verification_uri_complete); window.userCode = data.user_code; // Store for display purposes } else { // Fallback for traditional pairing displayManualPairingCode(data.user_code); } // Begin polling for authorization beginPollingForAuthorization(data.device_code, data.interval); } catch (error) { console.error('Error requesting device code:', error); } } ``` ### Exemple Android (Java) ```java import android.graphics.Bitmap; import android.widget.ImageView; import com.google.zxing.BarcodeFormat; import com.google.zxing.MultiFormatWriter; import com.google.zxing.common.BitMatrix; import com.journeyapps.barcodescanner.BarcodeEncoder; public void generateAndDisplayQRCode(String verificationUriComplete, ImageView qrCodeImageView) { try { MultiFormatWriter multiFormatWriter = new MultiFormatWriter(); BitMatrix bitMatrix = multiFormatWriter.encode(verificationUriComplete, BarcodeFormat.QR_CODE, 250, 250); BarcodeEncoder barcodeEncoder = new BarcodeEncoder(); Bitmap bitmap = barcodeEncoder.createBitmap(bitMatrix); // Display in ImageView qrCodeImageView.setImageBitmap(bitmap); } catch (Exception e) { e.printStackTrace(); // Fallback to displaying the URL as text } } ``` ### Exemple iOS (Swift) ```swift import UIKit import CoreImage func generateQRCode(from string: String) -> UIImage? { let data = string.data(using: String.Encoding.utf8) if let filter = CIFilter(name: "CIQRCodeGenerator") { filter.setValue(data, forKey: "inputMessage") filter.setValue("H", forKey: "inputCorrectionLevel") if let outputImage = filter.outputImage { // Scale the image let transform = CGAffineTransform(scaleX: 10, y: 10) let scaledImage = outputImage.transformed(by: transform) // Convert to UIImage let context = CIContext() if let cgImage = context.createCGImage(scaledImage, from: scaledImage.extent) { return UIImage(cgImage: cgImage) } } } return nil } // Usage in your view controller func displayPairingQRCode(verificationUriComplete: String) { if let qrCodeImage = generateQRCode(from: verificationUriComplete) { qrCodeImageView.image = qrCodeImage // Also show manual pairing information pairingInstructionsLabel.text = "Scan the QR code or enter code manually" pairingCodeLabel.text = userCode } else { // Fallback to manual code display pairingInstructionsLabel.text = "Enter this code on Frame.io:" pairingCodeLabel.text = userCode } } ``` ## Bonnes pratiques pour l’affichage de codes QR Lors de l’implémentation du couplage par code QR, tenez compte de ces recommandations pour une expérience client optimale : 1. **Taille optimale** : affichez des codes QR d’au moins 200-250 pixels carrés pour une lecture fiable. 2. **Contraste** : assurez-vous d’un contraste élevé entre le code QR et l’arrière-plan (noir sur blanc est idéal). 3. **Correction d’erreurs** : utilisez des niveaux de correction d’erreurs modérés (L ou M) afin de trouver un juste équilibre entre la densité du code et sa fiabilité. 4. **Instructions claires** : fournissez des instructions claires sur la façon de scanner le code, par exemple « Scannez ce code avec l’appareil photo de votre smartphone pour coupler votre appareil. » 5. **Options multiples** : fournissez toujours le code de couplage manuel avec le code QR comme solution de secours : ``` Scan to pair: [QR CODE] Or enter code manually: 573131 ``` 6. **Lien hypertexte pour Mobile Apps** : si votre intégration est une application mobile, incluez `verification_uri_complete` comme lien cliquable, car les utilisateurs ne peuvent pas scanner un code QR depuis le même appareil. 7. **Tests** : testez les codes QR avec différents appareils et conditions d’éclairage pour assurer une lecture fiable.  ## Résolution des problèmes Si vous rencontrez des problèmes, consultez les scénarios courants suivants et leurs solutions : * **Bouton « Connecter un appareil » non visible** : lors de l’accès au panneau de gestion C2C, cette erreur peut indiquer : * **Autorisations insuffisantes** : si un message d’autorisations s’affiche, contactez le gestionnaire de compte pour ajuster les autorisations ou attribuer un rôle approprié. * **Connexion d’appareil existante** : après avoir connecté un appareil, le bouton principal « Ajouter un nouvel appareil » est remplacé par un menu à trois points dans le coin supérieur droit du panneau Connexions C2C. * **Erreur de client non valide** : une réponse `invalid_client` indique une incompatibilité des informations de l’appareil, généralement due à un paramètre `client_secret` incorrect. * **Erreur de demande incorrecte** : une réponse `bad_request` indique des données de demande incorrectement formées. Vérifiez les noms des champs et assurez-vous que tous les champs requis sont inclus. Si votre problème n’est pas traité ici, partagez votre expérience afin que nous puissions améliorer cette section de résolution des problèmes. ## Étapes suivantes Nous vous invitons à contacter notre équipe et à consulter le [guide de gestion des autorisations](./how-to-authorization-management). Nous attendons vos commentaires avec impatience !