**Nota para dispositivos de la aplicación para iOS:** Si el usuario cambia a la aplicación para iOS de Frame.io para introducir el código de emparejamiento, puede que su aplicación pase al segundo plano. Cuando su aplicación vuelva a estar activa, como en `applicationDidBecomeActive`, reanude el sondeo para que el flujo de autorización pueda continuar sin requerir que el usuario reinicie el emparejamiento.Si recibe: ``` { "error": "expired_token" } ``` El código caducó antes de la entrada del usuario. Genere un código/código QR nuevo a través del paso 1, preséntelo al usuario y reanude el sondeo. Una autorización correcta produce: ``` { "access_token": "[access_token]", "expires_in": 28800, "refresh_token": "[refresh_token]", "token_type": "bearer" } ``` Enhorabuena por autorizar correctamente su dispositivo Camera to Cloud. Examinemos esta respuesta: * **access_token**: Su credencial de autenticación para el acceso al backend de Frame.io, necesaria en los encabezados para futuras solicitudes de API. * **expires_in**: El periodo de validez del token de acceso en segundos; después de este periodo, es necesario actualizarlo. * **refresh_token**: Se usa para la administración del token de acceso, principalmente para actualizar la autorización, pero también aplicable para la revocación. * **token_type**: Siempre será `bearer` para implementaciones de API de C2C, sin que sea necesario realizar ninguna acción. ## Unión de todos los pasos Ahora vamos a implementar estas llamadas API en pseudocódigo similar a Python y gestionaremos la posible caducidad del código del dispositivo: **`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...") ``` **Nota:** El bucle externo gestiona casos donde los códigos de emparejamiento caducan y se requieren códigos nuevos. Como paso final, recupere y muestre información del proyecto desde Frame.io para confirmar el emparejamiento correcto al proyecto previsto. Veremos esto en el próximo tutorial. ## Cómo crear y mostrar códigos QR para el emparejamiento Al implementar el emparejamiento con código URL/QR, necesitará generar un código QR a partir del valor del `verification_uri_complete` en la respuesta. A continuación, se muestran algunos ejemplos que utilizan bibliotecas populares en diferentes lenguajes de programación: ### Ejemplo de Python con 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}") ``` ### Ejemplo de JavaScript (web o 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); } } ``` ### Ejemplo de 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 } } ``` ### Ejemplo de 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 } } ``` ## Prácticas recomendadas para mostrar códigos QR Al implementar el emparejamiento con código QR, tenga en cuenta estas directrices para obtener la mejor experiencia del usuario: 1. **Tamaño óptimo**: Muestre códigos QR de al menos 200-250 píxeles cuadrados para un escaneo fiable. 2. **Contraste**: Asegúrese de que haya un alto contraste entre el código QR y el fondo (negro sobre blanco es lo ideal). 3. **Corrección de errores**: Use niveles de corrección de errores moderados (L o M) para equilibrar la densidad y la fiabilidad del código. 4. **Instrucciones claras**: Proporcione una orientación clara sobre cómo escanear el código, como "Escanee este código con la cámara de su smartphone para emparejar su dispositivo." 5. **Varias opciones**: Proporcione siempre el código de emparejamiento manual junto con el código QR como opción de reserva: ``` Scan to pair: [QR CODE] Or enter code manually: 573131 ``` 6. **Hipervínculo para aplicaciones móviles**: Si su integración es una aplicación móvil, incluya el `verification_uri_complete` como un vínculo en el que se puede pulsar, ya que los usuarios no pueden escanear un código QR desde el mismo dispositivo. 7. **Pruebas**: Pruebe sus códigos QR con varios dispositivos y condiciones de iluminación para garantizar un escaneo fiable.  ## Solución de problemas Si surgen problemas, consulte estos escenarios comunes y sus soluciones: * **Botón "Dispositivo conectado" no visible**: Al acceder al panel de administración de C2C, esto podría indicar: * **Permisos insuficientes**: Si ve un mensaje sobre permisos, póngase en contacto con su administrador de cuentas para ajustar los permisos o asignar una función apropiada. * **Conexión de dispositivo existente**: Después de conectar un dispositivo, el botón principal "Añadir dispositivo nuevo" se reemplaza por un menú de tres puntos situado en la esquina superior derecha del panel Conexiones de C2C. * **Error de cliente no válido**: Una respuesta `invalid_client` indica una discrepancia en la información del dispositivo, generalmente debido a un `client_secret` incorrecto. * **Error de solicitud incorrecta**: Una respuesta `bad_request` indica que los datos de la solicitud tienen un formato incorrecto. Verifique los nombres de los campos y asegúrese de que todos los campos obligatorios estén incluidos. Si su problema no aparece aquí, comparta su experiencia para que podamos mejorar esta sección de solución de problemas. ## Próximos pasos Le recomendamos que se ponga en contacto con nuestro equipo y que luego continúe con la [guía Administración de autorizaciones](./how-to-authorization-management). Quedamos a la espera de recibir sus comentarios.